diff --git a/404.html b/404.html index ff12c16..a448922 100644 --- a/404.html +++ b/404.html @@ -7,9 +7,6 @@ Blazor Form Builder - - - @@ -29,8 +26,6 @@ 🗙 - - diff --git a/_content/FormBuilder/Components/InitComponents.js b/_content/FormBuilder/Components/InitComponents.js new file mode 100644 index 0000000..b0270b4 --- /dev/null +++ b/_content/FormBuilder/Components/InitComponents.js @@ -0,0 +1,15 @@ +/** + * Loads bootstrap styles and Radzen.Blazor.js files + */ +export function loadStaticFiles() { + const link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = "_content/FormBuilder/css/bootstrap/bootstrap.min.css"; + document.head.appendChild(link); + + const script = document.createElement("script"); + script.src = "_content/Radzen.Blazor/Radzen.Blazor.js"; + document.body.appendChild(script); + + console.log("Bootstrap and Radzen static files loaded"); +} diff --git a/_content/FormBuilder/css/app.css b/_content/FormBuilder/css/app.css deleted file mode 100644 index 63f3ee5..0000000 --- a/_content/FormBuilder/css/app.css +++ /dev/null @@ -1,2 +0,0 @@ -@import "/_content/Radzen.Blazor/css/material-base.css"; -@import "/_content/FormBuilder/css/bootstrap/bootstrap.min.css"; diff --git a/_content/FormBuilder/js/app.js b/_content/FormBuilder/js/app.js deleted file mode 100644 index 0f13ecb..0000000 --- a/_content/FormBuilder/js/app.js +++ /dev/null @@ -1 +0,0 @@ -import "/_content/Radzen.Blazor/Radzen.Blazor.js"; diff --git a/_content/Radzen.Blazor/Radzen.Blazor.js b/_content/Radzen.Blazor/Radzen.Blazor.js index be3a103..bb188b2 100755 --- a/_content/Radzen.Blazor/Radzen.Blazor.js +++ b/_content/Radzen.Blazor/Radzen.Blazor.js @@ -21,6 +21,9 @@ var rejectCallbacks = []; var radzenRecognition; window.Radzen = { + isRTL: function (el) { + return el && getComputedStyle(el).direction == 'rtl'; + }, throttle: function (callback, delay) { var timeout = null; return function () { @@ -45,7 +48,7 @@ window.Radzen = { for (var i = 0; i < mask.length; i++) { const c = mask[i]; if (chars && chars[count]) { - if (/\*/.test(c)) { + if (c === '*' || c == chars[count]) { formatted += chars[count]; count++; } else { @@ -196,7 +199,7 @@ window.Radzen = { script.src = 'https://maps.googleapis.com/maps/api/js?' + (apiKey ? 'key=' + apiKey + '&' : '') + - 'callback=rz_map_init'; + 'callback=rz_map_init&libraries=marker'; script.async = true; script.defer = true; @@ -208,7 +211,7 @@ window.Radzen = { document.body.appendChild(script); }, - createMap: function (wrapper, ref, id, apiKey, zoom, center, markers, options, fitBoundsToMarkersOnUpdate) { + createMap: function (wrapper, ref, id, apiKey, mapId, zoom, center, markers, options, fitBoundsToMarkersOnUpdate) { var api = function () { var defaultView = document.defaultView; @@ -227,7 +230,8 @@ window.Radzen = { Radzen[id].instance = new google.maps.Map(wrapper, { center: center, - zoom: zoom + zoom: zoom, + mapId: mapId }); Radzen[id].instance.addListener('click', function (e) { @@ -265,16 +269,23 @@ window.Radzen = { Radzen[id].instance.markers = []; markers.forEach(function (m) { - var marker = new this.google.maps.Marker({ + var content; + + if (m.label) { + content = document.createElement('span'); + content.innerHTML = m.label; + } + + var marker = new this.google.maps.marker.AdvancedMarkerElement({ position: m.position, title: m.title, - label: m.label + content: content }); marker.addListener('click', function (e) { Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMarkerClick', { Title: marker.title, - Label: marker.label, + Label: marker.content.innerText, Position: marker.position }); }); @@ -444,7 +455,8 @@ window.Radzen = { e.targetTouches && e.targetTouches[0] ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left : e.pageX - handle.getBoundingClientRect().left; - var percent = (handle.offsetLeft + offsetX) / parent.offsetWidth; + var percent = (Radzen.isRTL(handle) ? parent.offsetWidth - handle.offsetLeft - offsetX + : handle.offsetLeft + offsetX) / parent.offsetWidth; if (percent > 1) { percent = 1; @@ -1009,7 +1021,7 @@ window.Radzen = { var input = el.querySelector('.rz-inputtext'); if (input) { input.onclick = function (e) { - handler(e, e.currentTarget.classList.contains('rz-readonly')); + handler(e, e.currentTarget.classList.contains('rz-readonly') || e.currentTarget.classList.contains('rz-input-trigger') ); }; } }, @@ -1043,7 +1055,7 @@ window.Radzen = { popup.style.top = top + 'px'; }, - openPopup: function (parent, id, syncWidth, position, x, y, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false) { + openPopup: function (parent, id, syncWidth, position, x, y, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false, disableSmartPosition = false) { var popup = document.getElementById(id); if (!popup) return; @@ -1085,7 +1097,9 @@ window.Radzen = { var smartPosition = !position || position == 'bottom'; if (smartPosition && top + rect.height > window.innerHeight && parentRect.top > rect.height) { - top = parentRect.top - rect.height; + if (disableSmartPosition !== true) { + top = parentRect.top - rect.height; + } if (position) { top = top - 40; @@ -1370,6 +1384,37 @@ window.Radzen = { Radzen.dialogResizer = new ResizeObserver(dialogResize).observe(lastDialog.parentElement); } + if (options.draggable) { + var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); + if (dialogTitle) { + Radzen[dialogTitle] = function (e) { + var rect = lastDialog.parentElement.getBoundingClientRect(); + var offsetX = e.clientX - rect.left; + var offsetY = e.clientY - rect.top; + + var move = function (e) { + var left = e.clientX - offsetX; + var top = e.clientY - offsetY; + + lastDialog.parentElement.style.left = left + 'px'; + lastDialog.parentElement.style.top = top + 'px'; + + dialog.invokeMethodAsync('RadzenDialog.OnDrag', top, left); + }; + + var stop = function () { + document.removeEventListener('mousemove', move); + document.removeEventListener('mouseup', stop); + }; + + document.addEventListener('mousemove', move); + document.addEventListener('mouseup', stop); + }; + + dialogTitle.addEventListener('mousedown', Radzen[dialogTitle]); + } + } + if (options.autoFocusFirstElement) { var focusable = Radzen.getFocusableElements(lastDialog); var editor = lastDialog.querySelector('.rz-html-editor'); @@ -1404,6 +1449,17 @@ window.Radzen = { Radzen.dialogResizer = null; document.body.classList.remove('no-scroll'); var dialogs = document.querySelectorAll('.rz-dialog-content'); + + var lastDialog = dialogs.length && dialogs[dialogs.length - 1]; + if (lastDialog) { + var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); + if (dialogTitle) { + dialogTitle.removeEventListener('mousedown', Radzen[dialogTitle]); + Radzen[dialogTitle] = null; + delete Radzen[dialogTitle]; + } + } + if (dialogs.length <= 1) { document.removeEventListener('keydown', Radzen.closePopupOrDialog); delete Radzen.dialogService; @@ -1882,7 +1938,7 @@ window.Radzen = { } return attributes.reduce(function (result, name) { if (target) { - result[name] = target[name]; + result[name] = target[name].toString(); } return result; }, { innerText: selection.toString(), innerHTML: innerHTML }); @@ -2033,7 +2089,7 @@ window.Radzen = { }, mouseMoveHandler: function (e) { if (Radzen[el]) { - var widthFloat = (Radzen[el].width - (Radzen[el].clientX - e.clientX)); + var widthFloat = (Radzen[el].width - (Radzen.isRTL(cell) ? -1 : 1) * (Radzen[el].clientX - e.clientX)); var minWidth = parseFloat(cell.style.minWidth || 0) if (widthFloat < minWidth) { @@ -2164,7 +2220,7 @@ window.Radzen = { var spaceLength = Radzen[el].paneLength + Radzen[el].paneNextLength; var length = (Radzen[el].paneLength - - (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY))); + (isHOrientation && Radzen.isRTL(e.target) ? -1 : 1) * (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY))); if (length > spaceLength) length = spaceLength; diff --git a/_content/Radzen.Blazor/css/dark-base.css b/_content/Radzen.Blazor/css/dark-base.css index 66a2f2f..b0e6b00 100755 --- a/_content/Radzen.Blazor/css/dark-base.css +++ b/_content/Radzen.Blazor/css/dark-base.css @@ -4,631 +4,175 @@ } @font-face { - font-family: "Material Icons"; + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); + font-weight: 100 700; } @font-face { font-family: "Source Sans Pro"; - font-weight: 200; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + font-weight: 200 900; } @font-face { font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); +*, +*::before, +*::after { + box-sizing: inherit; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-text-title-color { + color: var(--rz-base-50) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-text-color { + color: var(--rz-base-100) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-text-secondary-color { + color: var(--rz-base-300) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-text-tertiary-color { + color: var(--rz-base-400) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-text-disabled-color { + color: var(--rz-base-600) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-text-contrast-color { + color: var(--rz-white) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f6f7fa; - --rz-base-200: #e9edf0; - --rz-base-300: #dadfe2; - --rz-base-400: #a8b4b8; - --rz-base-500: #7b8a8e; - --rz-base-600: #63737a; - --rz-base-700: #45565e; - --rz-base-800: #38474e; - --rz-base-900: #28363c; - --rz-primary: #ff6d41; - --rz-primary-light: #ff7f58; - --rz-primary-lighter: rgba(255, 109, 65, 0.16); - --rz-primary-dark: #eb643c; - --rz-primary-darker: #bf5231; - --rz-secondary: #3b9fd5; - --rz-secondary-light: #53abda; - --rz-secondary-lighter: rgba(59, 159, 213, 0.2); - --rz-secondary-dark: #3692c4; - --rz-secondary-darker: #2c77a0; - --rz-info: #2cc8c8; - --rz-info-light: #4ed1d1; - --rz-info-lighter: rgba(44, 200, 200, 0.2); - --rz-info-dark: #25a8a8; - --rz-info-darker: #219696; - --rz-success: #5dbf74; - --rz-success-light: #77c98a; - --rz-success-lighter: rgba(93, 191, 116, 0.16); - --rz-success-dark: #4ea061; - --rz-success-darker: #468f57; - --rz-warning: #fac152; - --rz-warning-light: #fbcb6e; - --rz-warning-lighter: rgba(250, 193, 82, 0.2); - --rz-warning-dark: #d2a245; - --rz-warning-darker: #bc913e; - --rz-danger: #f9777f; - --rz-danger-light: #fa8d93; - --rz-danger-lighter: rgba(249, 119, 127, 0.2); - --rz-danger-dark: #d1646b; - --rz-danger-darker: #bb595f; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #ff6d41; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #3b9fd5; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2cc8c8; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #5dbf74; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #fac152; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f9777f; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #376df5; - --rz-series-2: #64dfdf; - --rz-series-3: #f68769; - --rz-series-4: #c161e2; - --rz-series-5: #fdd07a; - --rz-series-6: #f8629b; - --rz-series-7: #74d062; - --rz-series-8: #84a7ff; - --rz-series-9: #4d99f9; - --rz-series-10: #8cecec; - --rz-series-11: #fab793; - --rz-series-12: #da88ee; - --rz-series-13: #fee3ab; - --rz-series-14: #fb89c3; - --rz-series-15: #a2e389; - --rz-series-16: #b5caff; - --rz-series-17: #1750f3; - --rz-series-18: #46d7d7; - --rz-series-19: #f46e4c; - --rz-series-20: #b343db; - --rz-series-21: #fdc55f; - --rz-series-22: #f64485; - --rz-series-23: #58c544; - --rz-series-24: #6a93ff; + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-900); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-secondary); +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -:root { - --rz-text-title-color: var(--rz-base-50); - --rz-text-color: var(--rz-base-100); - --rz-text-secondary-color: var(--rz-base-300); - --rz-text-tertiary-color: var(--rz-base-400); - --rz-text-disabled-color: var(--rz-base-600); - --rz-text-contrast-color: var(--rz-white); +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -.rz-text-title-color { - color: var(--rz-base-50) !important; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -.rz-text-color { - color: var(--rz-base-100) !important; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -.rz-text-secondary-color { - color: var(--rz-base-300) !important; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-400) !important; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -.rz-text-disabled-color { - color: var(--rz-base-600) !important; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -:root { - --rz-base-background-color: var(--rz-base-800); +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); -} - -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-display-none { + display: none !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-display-block { + display: block !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-display-inline { + display: inline !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-display-inline-block { + display: inline-block !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-display-flex { + display: flex !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-display-inline-flex { + display: inline-flex !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-display-grid { + display: grid !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); -} - -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; -} - -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; -} - -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; -} - -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; -} - -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; -} - -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; -} - -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; -} - -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; -} - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; -} - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; -} - -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; -} - -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; -} - -.rz-display-none { - display: none !important; -} - -.rz-display-block { - display: block !important; -} - -.rz-display-inline { - display: inline !important; -} - -.rz-display-inline-block { - display: inline-block !important; -} - -.rz-display-flex { - display: flex !important; -} - -.rz-display-inline-flex { - display: inline-flex !important; -} - -.rz-display-grid { - display: grid !important; -} - -.rz-display-inline-grid { - display: inline-grid !important; +.rz-display-inline-grid { + display: inline-grid !important; } @media (min-width: 576px) { @@ -871,6 +415,10 @@ $rz-shadow-10: none !default; */ color: var(--rz-black) !important; } +.rz-color-base { + color: var(--rz-base) !important; +} + .rz-color-base-50 { color: var(--rz-base-50) !important; } @@ -911,6 +459,22 @@ $rz-shadow-10: none !default; */ color: var(--rz-base-900) !important; } +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + .rz-color-primary { color: var(--rz-primary) !important; } @@ -1031,6 +595,26 @@ $rz-shadow-10: none !default; */ color: var(--rz-danger-darker) !important; } +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + .rz-color-on-primary { color: var(--rz-on-primary) !important; } @@ -1255,6 +839,10 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-black) !important; } +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + .rz-background-color-base-50 { background-color: var(--rz-base-50) !important; } @@ -1295,6 +883,22 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-base-900) !important; } +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + .rz-background-color-primary { background-color: var(--rz-primary) !important; } @@ -1415,6 +1019,26 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-danger-darker) !important; } +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + .rz-background-color-on-primary { background-color: var(--rz-on-primary) !important; } @@ -1639,6 +1263,10 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + .rz-border-color-base-50 { border-color: var(--rz-base-50) !important; } @@ -1679,6 +1307,22 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + .rz-border-color-primary { border-color: var(--rz-primary) !important; } @@ -1799,6 +1443,26 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-color-on-primary { border-color: var(--rz-on-primary) !important; } @@ -2027,6 +1691,12 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + .rz-border-base-50 { border-width: var(--rz-border-width); border-style: solid; @@ -2087,6 +1757,30 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + .rz-border-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2267,6 +1961,36 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-on-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2610,6 +2334,10 @@ $rz-shadow-10: none !default; */ background-size: 100%; } +body { + margin: 0; +} + .rz-m-0 { margin: 0 !important; } @@ -7906,7 +7634,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -7915,7 +7644,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -7924,7 +7654,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -7933,7 +7664,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -7942,7 +7674,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -7951,125 +7684,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } .rz-text-display-h1 { @@ -8079,7 +7695,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -8089,7 +7706,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -8099,7 +7717,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -8109,7 +7728,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -8119,7 +7739,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -8129,7 +7750,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -8139,7 +7761,8 @@ h6.rz-heading { font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -8149,7 +7772,8 @@ h6.rz-heading { font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -8159,7 +7783,8 @@ h6.rz-heading { font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -8169,7 +7794,8 @@ h6.rz-heading { font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -8179,7 +7805,8 @@ h6.rz-heading { font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -8189,7 +7816,8 @@ h6.rz-heading { font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -8199,7 +7827,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -8209,7 +7838,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -8219,7 +7849,8 @@ h6.rz-heading { font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -8229,7 +7860,8 @@ h6.rz-heading { font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -8239,7 +7871,8 @@ h6.rz-heading { font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -8249,7 +7882,8 @@ h6.rz-heading { font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -8260,7 +7894,8 @@ h6.rz-heading { letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -8479,24 +8114,21 @@ h6.rz-heading { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; -} - .rz-layout ::selection { background-color: var(--rz-text-selection-background-color); color: var(--rz-text-selection-color); @@ -8505,8 +8137,9 @@ h6.rz-heading { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -8517,7 +8150,7 @@ h6.rz-heading { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -8538,14 +8171,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -8570,6 +8195,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-700); +} + +.rzi-light { + color: var(--rz-base-700); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -8593,98 +8235,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -8692,18 +8308,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -8728,9 +8332,21 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); - color: var(--rz-text-contrast-color); + color: var(--rz-on-primary); } .rz-button.rz-primary.rz-shade-lighter { background-color: var(--rz-primary-lighter); @@ -8759,62 +8375,9 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-700); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); - color: var(--rz-text-contrast-color); + color: var(--rz-on-secondary); } .rz-button.rz-secondary.rz-shade-lighter { background-color: var(--rz-secondary-lighter); @@ -8845,7 +8408,7 @@ p-button[type] { .rz-button.rz-info { background-color: var(--rz-info); - color: var(--rz-text-contrast-color); + color: var(--rz-on-info); } .rz-button.rz-info.rz-shade-lighter { background-color: var(--rz-info-lighter); @@ -8876,7 +8439,7 @@ p-button[type] { .rz-button.rz-warning { background-color: var(--rz-warning); - color: var(--rz-text-contrast-color); + color: var(--rz-on-warning); } .rz-button.rz-warning.rz-shade-lighter { background-color: var(--rz-warning-lighter); @@ -8907,7 +8470,7 @@ p-button[type] { .rz-button.rz-error { background-color: var(--rz-danger); - color: var(--rz-text-contrast-color); + color: var(--rz-on-danger); } .rz-button.rz-error.rz-shade-lighter { background-color: var(--rz-error-lighter); @@ -8938,7 +8501,7 @@ p-button[type] { .rz-button.rz-danger { background-color: var(--rz-danger); - color: var(--rz-text-contrast-color); + color: var(--rz-on-danger); } .rz-button.rz-danger.rz-shade-lighter { background-color: var(--rz-danger-lighter); @@ -8969,7 +8532,7 @@ p-button[type] { .rz-button.rz-success { background-color: var(--rz-success); - color: var(--rz-text-contrast-color); + color: var(--rz-on-success); } .rz-button.rz-success.rz-shade-lighter { background-color: var(--rz-success-lighter); @@ -8998,6 +8561,59 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-variant-outlined.rz-primary { background-color: transparent; } @@ -9027,65 +8643,12 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { +.rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-secondary { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); - color: var(--rz-secondary-light); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); } .rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); @@ -9254,76 +8817,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-text-contrast-color); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); -} -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -9484,15 +9052,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-text-contrast-color); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -9501,7 +9117,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -9511,51 +9127,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -9563,13 +9179,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -9578,7 +9194,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -9596,19 +9212,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 600; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -9650,15 +9255,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -9809,6 +9405,41 @@ p-button[type] { color: var(--rz-on-success-darker); } +.rz-badge-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + .rz-variant-outlined.rz-badge-primary { background-color: transparent; } @@ -9833,22 +9464,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} - -.rz-variant-outlined.rz-badge-dark { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} - .rz-variant-outlined.rz-badge-secondary { background-color: transparent; } @@ -9993,6 +9608,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-700); + color: var(--rz-base-700); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -10012,16 +9667,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -10136,20 +9781,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-700); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-700); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -10163,57 +9828,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: var(--rz-body-font-size); - --rz-input-height: 2.25rem; - --rz-input-line-height: var(--rz-body-line-height); - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-900); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-disabled-background-color: var(--rz-base-800); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: var(--rz-transition-all), width 0, height 0; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -10224,26 +9864,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -10262,15 +9905,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-base-700); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: none; -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -10289,14 +9923,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: var(--rz-border-base-700); - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -10311,18 +9937,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-base-800); - --rz-sidebar-background-color: var(--rz-base-background-color); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -10331,7 +9949,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -10350,17 +9968,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-700); - --rz-card-shadow: var(--rz-shadow-2); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -10390,13 +9999,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -10410,32 +10012,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-secondary); - --rz-accordion-hover-color: var(--rz-secondary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -10454,16 +10032,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -10471,20 +10049,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -10494,7 +10073,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -10503,10 +10082,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -10514,34 +10089,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: var(--rz-base-700); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-secondary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -10592,33 +10159,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-700); - --rz-sidebar-toggle-color: var(--rz-text-color); - --rz-sidebar-toggle-background-color: var(--rz-base-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-secondary); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -10652,37 +10205,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: var(--rz-border-normal); - --rz-menu-border-radius: 2px; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-hover-background-color: var(--rz-secondary-light); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-secondary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-secondary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-secondary); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -10707,7 +10232,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10729,6 +10255,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -10737,7 +10264,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -10750,7 +10278,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -10780,13 +10309,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -10795,7 +10324,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -10807,7 +10337,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10831,16 +10362,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -10857,7 +10388,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -10917,65 +10449,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: var(--rz-text-contrast-color); - --rz-panel-menu-background-color: var(--rz-base-800); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.3); - --rz-panel-menu-hover-color: var(--rz-text-contrast-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-900); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-base-900); - --rz-panel-menu-item-background-color: var(--rz-base-900); - --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: inherit; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -10985,10 +10472,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -11000,11 +10488,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -11015,8 +10503,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -11025,7 +10513,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -11038,7 +10527,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -11047,20 +10536,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -11084,67 +10575,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-900); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-text-color); - --rz-profile-menu-item-hover-background-color: var(--rz-secondary); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -11165,19 +10641,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -11197,17 +10676,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -11215,26 +10688,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-700); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -11288,14 +10743,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -11305,7 +10762,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -11328,54 +10786,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: inherit; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-secondary); - --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); - --rz-checkbox-checked-color: var(--rz-on-secondary); - --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -11387,10 +10833,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -11409,10 +10857,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11469,17 +10914,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-secondary); - --rz-switch-box-shadow: none; - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -11499,10 +10935,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -11524,8 +10960,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -11534,7 +10970,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -11546,35 +10982,23 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { transform: translateX(1.2rem); } -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-secondary); - --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-radio-checked-background-color: var(--rz-secondary); - --rz-radio-checked-hover-background-color: var(--rz-secondary-light); - --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-base-background-color); - --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); - --rz-radio-circle-hover-background-color: var(--rz-base-100); - --rz-radio-icon-width: 0.5rem; - --rz-radio-icon-height: 0.5rem; - --rz-radio-checked-border: var(--rz-input-border); +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -11586,7 +11010,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -11609,10 +11034,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11672,26 +11094,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-base-700); - --rz-fieldset-border-radius: 0; - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-tertiary-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-700); - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -11720,7 +11127,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -11738,8 +11146,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -11754,36 +11164,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); - --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); - --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); - --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); - --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); - --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-700); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -11810,15 +11190,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -11826,8 +11207,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -11862,7 +11243,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -11955,28 +11337,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -11993,10 +11379,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -12005,7 +11392,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -12027,24 +11415,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -12054,7 +11426,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -12097,7 +11470,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -12138,39 +11512,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -12180,9 +11544,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -12196,11 +11557,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -12209,36 +11570,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-900); - --rz-slider-border: var(--rz-border-normal); - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-secondary-dark); - --rz-slider-range-border: var(--rz-border-secondary-light); - --rz-slider-handle-width: 0.75rem; - --rz-slider-handle-height: 1.5rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-secondary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-secondary-light); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-700); - --rz-slider-disabled-range-border: var(--rz-border-base-700); - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-700); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -12265,11 +11598,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -12278,7 +11611,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -12303,19 +11636,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-secondary); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.3; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-secondary); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -12373,16 +11695,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -12403,17 +11717,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-secondary); - --rz-selectbar-selected-color: var(--rz-on-secondary); - --rz-selectbar-selected-border: var(--rz-border-secondary); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -12421,7 +11726,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12429,13 +11734,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12444,7 +11749,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12452,13 +11757,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12467,7 +11772,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12475,13 +11780,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12490,7 +11795,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12498,13 +11803,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12512,89 +11817,34 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-selectbar-selected-border); } -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-800); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); - --rz-datepicker-calendar-border: var(--rz-border-base-700); - --rz-datepicker-calendar-border-radius: 0; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-secondary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: none; - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-900); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-secondary); - --rz-timepicker-button-color: var(--rz-on-secondary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; -} - -.rz-calendar { +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -12602,9 +11852,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -12642,148 +11892,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -12814,47 +12091,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-secondary); - --rz-numeric-button-disabled-background-color: var(--rz-base-700); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-on-secondary); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -12862,9 +12126,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -12872,49 +12136,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); -} - -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -:root { - --rz-upload-button-bar-background-color: var(--rz-base-700); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-700); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary); - --rz-upload-choose-color: var(--rz-on-secondary); - --rz-upload-choose-hover-background-color: var(--rz-secondary); - --rz-upload-choose-hover-color: var(--rz-on-secondary); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -13001,101 +12246,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-secondary-lighter); - --rz-grid-hover-color: var(--rz-on-secondary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-secondary-dark); - --rz-grid-selected-color: var(--rz-on-secondary-dark); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: none; - --rz-grid-header-background-color: var(--rz-base-900); - --rz-grid-header-font-size: 0.75rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: uppercase; - --rz-grid-header-color: var(--rz-text-secondary-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-800); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-900); - --rz-grid-filter-background-color: var(--rz-base-800); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: var(--rz-border-normal); - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-base-900); - --rz-grid-clear-filter-button-background-color: var(--rz-secondary); - --rz-grid-clear-filter-button-color: var(--rz-on-secondary); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: var(--rz-border-normal); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-700); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-900); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-900); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-secondary-color); - --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -13119,10 +12269,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -13166,8 +12320,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -13175,8 +12329,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -13202,11 +12356,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -13226,13 +12381,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -13252,11 +12408,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -13264,11 +12420,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -13282,10 +12438,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -13301,7 +12457,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -13353,7 +12509,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -13363,11 +12519,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -13390,13 +12546,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -13417,21 +12577,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -13443,7 +12603,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -13489,7 +12649,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -13503,14 +12662,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -13612,10 +12771,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -13629,28 +12784,15 @@ a:focus-visible .rz-fieldset-toggler { border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-end-end-radius: 0; } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { text-indent: 2.25rem; } } -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); -} - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -13680,31 +12822,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -13770,7 +12890,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -13780,18 +12900,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -13800,9 +12959,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -13844,16 +13005,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -13886,7 +13053,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -13937,26 +13104,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -13969,7 +13140,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -13989,7 +13160,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -13997,312 +13168,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: var(--rz-base-background-color); - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: var(--rz-border-normal); - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-700); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-700); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-base-900); - --rz-paginator-numeric-button-selected-color: var(--rz-text-contrast-color); - --rz-paginator-numeric-button-selected-border: var(--rz-border-base-900); - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-700); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-700); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-700); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-700); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-secondary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } -:root { - --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-background-color); -} - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -14312,24 +13443,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-secondary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-secondary-light); - --rz-tree-node-hover-color: var(--rz-on-secondary-light); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -14346,12 +13461,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -14360,13 +13475,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -14376,15 +13497,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -14396,7 +13519,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -14415,25 +13538,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-700); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-datalist-item-border: none; - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -14452,13 +13561,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -14467,24 +13577,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -14506,7 +13609,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -14517,23 +13621,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -14543,17 +13647,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -14566,70 +13671,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-700); - --rz-scheduler-minor-border-color: var(--rz-base-700); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-900); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); - --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-secondary); - --rz-scheduler-view-selected-background-color: var(--rz-secondary); - --rz-scheduler-view-selected-border-color: var(--rz-secondary); - --rz-scheduler-header-background-color: var(--rz-base-700); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: none; - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); - --rz-scheduler-weekend-background-color: var(--rz-base-700); - --rz-scheduler-other-month-background-color: var(--rz-base-900); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -14645,7 +13688,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -14658,12 +13701,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -14673,27 +13716,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -14728,8 +13772,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -14789,16 +13833,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -14815,25 +13859,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -14847,7 +13904,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -14859,24 +13916,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -14886,11 +13943,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -14918,7 +13975,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -14934,7 +13991,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -14942,7 +13999,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -14991,7 +14048,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -15040,7 +14097,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -15086,8 +14143,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15096,15 +14153,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15137,8 +14194,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15147,15 +14204,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15185,35 +14242,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-tabs-border: none; - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-700); - --rz-tabs-tab-color: var(--rz-text-secondary-color); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-800); - --rz-tabs-tab-hover-color: var(--rz-text-color); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-text-color); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -15267,7 +14297,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -15310,7 +14341,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -15330,7 +14361,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -15365,6 +14396,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -15395,21 +14429,13 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-tabs-padding); } -.rz-tabview-left-icon { +.rz-tabview-icon { font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: var(--rz-body-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -15435,8 +14461,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15453,8 +14479,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15498,29 +14524,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-background-color); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 0.6875rem 1.25rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.875rem; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -15533,6 +14538,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -15547,37 +14553,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -15589,7 +14613,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -15603,7 +14627,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -15616,42 +14640,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -15684,161 +14681,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); -} - -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); -} - -.rz-dialog-side-titlebar-close { - float: right; -} -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); -} -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; -} -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); -} - -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } } - -.rz-growl { +.rz-notification { + box-sizing: border-box; position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-growl-item-container { +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-growl-item { +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); border-radius: var(--rz-notification-border-radius); box-shadow: var(--rz-notification-shadow); padding: var(--rz-notification-padding); } - -.rz-growl-message-success .rz-growl-item { +.rz-notification-success .rz-notification-item { color: var(--rz-notification-success-color); background-color: var(--rz-notification-success-background-color); } - -.rz-growl-message-warn .rz-growl-item { +.rz-notification-warn .rz-notification-item { color: var(--rz-notification-warning-color); background-color: var(--rz-notification-warning-background-color); } - -.rz-growl-message-error .rz-growl-item { +.rz-notification-error .rz-notification-item { color: var(--rz-notification-error-color); background-color: var(--rz-notification-error-background-color); } - -.rz-growl-message-info .rz-growl-item { +.rz-notification-info .rz-notification-item { color: var(--rz-notification-info-color); background-color: var(--rz-notification-info-background-color); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-icon-close { - float: right; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close:before { - content: "close"; + +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1.5rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -15863,16 +14824,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: var(--rz-base-600); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } .rz-layout::-webkit-scrollbar, @@ -15901,14 +14854,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-700); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -15938,7 +14885,7 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -15950,12 +14897,15 @@ a:focus-visible .rz-fieldset-toggler { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -15965,11 +14915,6 @@ a:focus-visible .rz-fieldset-toggler { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -15979,24 +14924,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -16006,14 +14938,8 @@ a:focus-visible .rz-fieldset-toggler { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -16025,18 +14951,9 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -16085,19 +15002,8 @@ a:focus-visible .rz-fieldset-toggler { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-700); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-secondary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -16125,6 +15031,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -16185,6 +15092,9 @@ a:focus-visible .rz-fieldset-toggler { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -16196,6 +15106,9 @@ a:focus-visible .rz-fieldset-toggler { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -16216,6 +15129,26 @@ a:focus-visible .rz-fieldset-toggler { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -16261,48 +15194,6 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -16366,6 +15257,27 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -16408,6 +15320,69 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-success); } +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + .rz-progressbar-circular-lg { width: 6rem; height: 6rem; @@ -16432,19 +15407,8 @@ a:focus-visible .rz-fieldset-toggler { font-size: calc(var(--rz-progressbar-font-size) * 0.375); } -:root { - --rz-chart-axis-color: var(--rz-base-600); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); -} - .rz-chart { + box-sizing: border-box; position: relative; height: 300px; } @@ -17216,6 +16180,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -17339,6 +16307,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -17365,24 +16334,8 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary); - --rz-editor-button-selected-color: var(--rz-on-secondary); - --rz-editor-separator-background-color: var(--rz-base-700); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -17567,30 +16520,6 @@ a:focus-visible .rz-fieldset-toggler { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -17667,7 +16596,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -17739,7 +16668,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -17752,7 +16681,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -17767,6 +16696,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -17778,27 +16708,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -17814,15 +16741,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -17834,15 +16759,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-secondary); - --rz-splitter-bar-background-color: var(--rz-base-700); - --rz-splitter-bar-background-color-active: var(--rz-secondary); - --rz-splitter-bar-hover-opacity: 0.8; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -17864,7 +16782,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17879,7 +16797,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17966,11 +16884,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -18004,8 +16939,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -18013,8 +16958,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -18028,22 +16973,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: var(--rz-border-radius); - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -18872,30 +17803,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -18914,16 +17850,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -19299,279 +18232,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -19916,36 +18849,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-700); - --rz-form-field-filled-hover-background-color: var(--rz-base-700); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: none; - --rz-form-field-focus-shadow: none; - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -19955,11 +18858,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -19968,12 +18872,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -20001,20 +18905,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -20059,33 +18965,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -20102,16 +19011,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -20119,33 +19028,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -20162,27 +19071,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-600); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-600); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -20727,6 +19624,7 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; width: 100%; height: 100%; --rz-gap: 1rem; @@ -20746,4 +19644,1559 @@ button.rz-colorpicker-trigger .rzi:before { .rz-picklist-buttons.rz-flex-row .rzi { transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #63737a; + --rz-base-50: #ffffff; + --rz-base-100: #f6f7fa; + --rz-base-200: #e9edf0; + --rz-base-300: #dadfe2; + --rz-base-400: #a8b4b8; + --rz-base-500: #7b8a8e; + --rz-base-600: #63737a; + --rz-base-700: #45565e; + --rz-base-800: #38474e; + --rz-base-900: #28363c; + --rz-base-light: #a8b4b8; + --rz-base-lighter: #ffffff; + --rz-base-dark: #45565e; + --rz-base-darker: #28363c; + --rz-primary: #ff6d41; + --rz-primary-light: #ff7f58; + --rz-primary-lighter: rgba(255, 109, 65, 0.16); + --rz-primary-dark: #eb643c; + --rz-primary-darker: #bf5231; + --rz-secondary: #3b9fd5; + --rz-secondary-light: #53abda; + --rz-secondary-lighter: rgba(59, 159, 213, 0.2); + --rz-secondary-dark: #3692c4; + --rz-secondary-darker: #2c77a0; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #ffffff; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #ff6d41; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #3b9fd5; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-100); + --rz-text-secondary-color: var(--rz-base-300); + --rz-text-tertiary-color: var(--rz-base-400); + --rz-text-disabled-color: var(--rz-base-600); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-700); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-600); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-700); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-700); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-datalist-item-border: none; + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-800); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-700); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-900); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-700); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-700); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-700); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-700); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-700); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-700); + --rz-form-field-filled-hover-background-color: var(--rz-base-700); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-900); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-secondary-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-800); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-900); + --rz-grid-filter-background-color: var(--rz-base-800); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-800); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-700); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-900); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-700); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-900); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-800); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-700); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-700); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-background-color); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-700); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-700); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-900); + --rz-pager-numeric-button-selected-color: var(--rz-text-contrast-color); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-900); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-700); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-700); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-700); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-900); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-700); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-700); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-900); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-700); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: none; + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-900); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-base-600); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-700); + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: var(--rz-base-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-900); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-dark); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-700); + --rz-slider-disabled-range-border: var(--rz-border-base-700); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-700); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-700); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 0.8; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-700); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: none; + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-700); + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-800); + --rz-tabs-tab-hover-color: var(--rz-text-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-600); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-600); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-700); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/dark-wcag.css b/_content/Radzen.Blazor/css/dark-wcag.css index 840efac..c2ba411 100755 --- a/_content/Radzen.Blazor/css/dark-wcag.css +++ b/_content/Radzen.Blazor/css/dark-wcag.css @@ -1,6 +1,8 @@ -:root { +:root, +.rz-dark { --rz-white: #ffffff; --rz-black: #000000; + --rz-base: #334752; --rz-base-50: #ffffff; --rz-base-100: #f6f7fa; --rz-base-200: #e9edf0; @@ -11,6 +13,10 @@ --rz-base-700: #334752; --rz-base-800: #212E36; --rz-base-900: #17262c; + --rz-base-light: #a8b4b8; + --rz-base-lighter: #ffffff; + --rz-base-dark: #212E36; + --rz-base-darker: #17262c; --rz-primary: #bf540d; --rz-primary-light: #c7692a; --rz-primary-lighter: rgba(191, 84, 13, 0.16); @@ -41,6 +47,11 @@ --rz-danger-lighter: rgba(178, 36, 46, 0.2); --rz-danger-dark: #961e27; --rz-danger-darker: #861b23; + --rz-on-base: #ffffff; + --rz-on-base-light: #000000; + --rz-on-base-lighter: #000000; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: #c2350a; diff --git a/_content/Radzen.Blazor/css/dark.css b/_content/Radzen.Blazor/css/dark.css index 563a2a8..32881b4 100755 --- a/_content/Radzen.Blazor/css/dark.css +++ b/_content/Radzen.Blazor/css/dark.css @@ -3,8757 +3,3267 @@ border-top: 1px dotted var(--rz-scheduler-minor-border-color) !important; } -:root { - --blue: #007bff; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; - --red: #dc3545; - --orange: #fd7e14; - --yellow: #ffc107; - --green: #28a745; - --teal: #20c997; - --cyan: #17a2b8; - --white: #fff; - --gray: #6c757d; - --gray-dark: #343a40; - --primary: #ff6d41; - --secondary: #3b9fd5; - --success: #5dbf74; - --info: #2cc8c8; - --warning: #fac152; - --danger: #f9777f; - --light: #e9edf0; - --dark: #343a40; - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; - } - a:not(.btn) { - text-decoration: underline; - } - abbr[title]::after { - content: " (" attr(title) ")"; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #adb5bd; - page-break-inside: avoid; - } - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } - @page { - size: a3; - } - body { - min-width: 992px !important; - } - .container { - min-width: 992px !important; - } - .navbar { - display: none; - } - .badge { - border: 1px solid #000; - } - .table { - border-collapse: collapse !important; - } - .table td, - .table th { - background-color: #fff !important; - } - .table-bordered th, - .table-bordered td { - border: 1px solid #dee2e6 !important; - } - .table-dark { - color: inherit; - } - .table-dark th, - .table-dark td, - .table-dark thead th, - .table-dark tbody + tbody { - border-color: #dee2e6; - } - .table .thead-dark th { - color: inherit; - border-color: #dee2e6; - } -} -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -} - -body { - margin: 0; - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #f6f7fa; - text-align: left; - background-color: #28363c; -} - -[tabindex="-1"]:focus { - outline: 0 !important; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title], -abbr[data-original-title] { - text-decoration: underline; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; - text-decoration-skip-ink: none; -} - -address { - margin-bottom: 1rem; +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: 0.5rem; - margin-left: 0; + font-weight: 100 700; } - -blockquote { - margin: 0 0 1rem; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; } - -b, -strong { - font-weight: bolder; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } - -small { - font-size: 80%; +*, +*::before, +*::after { + box-sizing: inherit; } -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; +.rz-text-title-color { + color: var(--rz-base-50) !important; } -sub { - bottom: -0.25em; +.rz-text-color { + color: var(--rz-base-100) !important; } -sup { - top: -0.5em; +.rz-text-secondary-color { + color: var(--rz-base-300) !important; } -a { - color: #3b9fd5; - text-decoration: none; - background-color: transparent; -} -a:hover { - color: #3b9fd5; - text-decoration: underline; +.rz-text-tertiary-color { + color: var(--rz-base-400) !important; } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):focus { - outline: 0; +.rz-text-disabled-color { + color: var(--rz-base-600) !important; } -pre, -code, -kbd, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 1em; +.rz-text-contrast-color { + color: var(--rz-white) !important; } -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -figure { - margin: 0 0 1rem; +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -img { - vertical-align: middle; - border-style: none; +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -svg { - overflow: hidden; - vertical-align: middle; +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -table { - border-collapse: collapse; +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #6c757d; - text-align: left; - caption-side: bottom; +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -th { - text-align: inherit; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -label { - display: inline-block; - margin-bottom: 0.5rem; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -button { - border-radius: 0; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -button, -input { - overflow: visible; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -button, -select { - text-transform: none; +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -select { - word-wrap: normal; +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -button:not(:disabled), -[type=button]:not(:disabled), -[type=reset]:not(:disabled), -[type=submit]:not(:disabled) { - cursor: pointer; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - padding: 0; - border-style: none; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -input[type=radio], -input[type=checkbox] { - box-sizing: border-box; - padding: 0; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -input[type=date], -input[type=time], -input[type=datetime-local], -input[type=month] { - -webkit-appearance: listbox; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -textarea { - overflow: auto; - resize: vertical; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -legend { - display: block; - width: 100%; - max-width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; - white-space: normal; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -progress { - vertical-align: baseline; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; +.rz-display-none { + display: none !important; } -[type=search] { - outline-offset: -2px; - -webkit-appearance: none; +.rz-display-block { + display: block !important; } -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; +.rz-display-inline { + display: inline !important; } -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; +.rz-display-inline-block { + display: inline-block !important; } -output { - display: inline-block; +.rz-display-flex { + display: flex !important; } -summary { - display: list-item; - cursor: pointer; +.rz-display-inline-flex { + display: inline-flex !important; } -template { - display: none; +.rz-display-grid { + display: grid !important; } -[hidden] { - display: none !important; +.rz-display-inline-grid { + display: inline-grid !important; } -.container { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} @media (min-width: 576px) { - .container { - max-width: 540px; + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; } } @media (min-width: 768px) { - .container { - max-width: 720px; + .rz-display-sm-none { + display: none !important; } -} -@media (min-width: 992px) { - .container { - max-width: 960px; + .rz-display-sm-block { + display: block !important; } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; } } +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} -.container-fluid { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} - -.row { - display: flex; - flex-wrap: wrap; - margin-right: -1rem; - margin-left: -1rem; +.rz-justify-content-stretch { + justify-content: stretch !important; } -.no-gutters { - margin-right: 0; - margin-left: 0; +.rz-justify-content-center { + justify-content: center !important; } -.no-gutters > .col, -.no-gutters > [class*=col-] { - padding-right: 0; - padding-left: 0; + +.rz-justify-content-start { + justify-content: start !important; } -.col-xl, -.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, -.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, -.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, -.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, -.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { - position: relative; - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.rz-justify-content-end { + justify-content: end !important; } -.col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.rz-justify-content-flex-start { + justify-content: flex-start !important; } -.col-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; +.rz-justify-content-flex-end { + justify-content: flex-end !important; } -.col-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; +.rz-justify-content-left { + justify-content: left !important; } -.col-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; +.rz-justify-content-right { + justify-content: right !important; } -.col-3 { - flex: 0 0 25%; - max-width: 25%; +.rz-justify-content-space-between { + justify-content: space-between !important; } -.col-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; +.rz-justify-content-space-around { + justify-content: space-around !important; } -.col-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; } -.col-6 { - flex: 0 0 50%; - max-width: 50%; +.rz-align-items-normal { + align-items: normal !important; } -.col-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; +.rz-align-items-stretch { + align-items: stretch !important; } -.col-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; +.rz-align-items-center { + align-items: center !important; } -.col-9 { - flex: 0 0 75%; - max-width: 75%; +.rz-align-items-start { + align-items: start !important; } -.col-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; +.rz-align-items-end { + align-items: end !important; } -.col-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; +.rz-align-items-flex-start { + align-items: flex-start !important; } -.col-12 { - flex: 0 0 100%; - max-width: 100%; +.rz-align-items-flex-end { + align-items: flex-end !important; } -.order-first { - order: -1; +.rz-color-white { + color: var(--rz-white) !important; } -.order-last { - order: 13; +.rz-color-black { + color: var(--rz-black) !important; } -.order-0 { - order: 0; +.rz-color-base { + color: var(--rz-base) !important; } -.order-1 { - order: 1; +.rz-color-base-50 { + color: var(--rz-base-50) !important; } -.order-2 { - order: 2; +.rz-color-base-100 { + color: var(--rz-base-100) !important; } -.order-3 { - order: 3; +.rz-color-base-200 { + color: var(--rz-base-200) !important; } -.order-4 { - order: 4; +.rz-color-base-300 { + color: var(--rz-base-300) !important; } -.order-5 { - order: 5; +.rz-color-base-400 { + color: var(--rz-base-400) !important; } -.order-6 { - order: 6; +.rz-color-base-500 { + color: var(--rz-base-500) !important; } -.order-7 { - order: 7; +.rz-color-base-600 { + color: var(--rz-base-600) !important; } -.order-8 { - order: 8; +.rz-color-base-700 { + color: var(--rz-base-700) !important; } -.order-9 { - order: 9; +.rz-color-base-800 { + color: var(--rz-base-800) !important; } -.order-10 { - order: 10; +.rz-color-base-900 { + color: var(--rz-base-900) !important; } -.order-11 { - order: 11; +.rz-color-base-light { + color: var(--rz-base-light) !important; } -.order-12 { - order: 12; +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; } -.offset-1 { - margin-left: 8.3333333333%; +.rz-color-base-dark { + color: var(--rz-base-dark) !important; } -.offset-2 { - margin-left: 16.6666666667%; +.rz-color-base-darker { + color: var(--rz-base-darker) !important; } -.offset-3 { - margin-left: 25%; +.rz-color-primary { + color: var(--rz-primary) !important; } -.offset-4 { - margin-left: 33.3333333333%; +.rz-color-primary-light { + color: var(--rz-primary-light) !important; } -.offset-5 { - margin-left: 41.6666666667%; +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; } -.offset-6 { - margin-left: 50%; +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; } -.offset-7 { - margin-left: 58.3333333333%; +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; } -.offset-8 { - margin-left: 66.6666666667%; +.rz-color-secondary { + color: var(--rz-secondary) !important; } -.offset-9 { - margin-left: 75%; +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; } -.offset-10 { - margin-left: 83.3333333333%; +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; } -.offset-11 { - margin-left: 91.6666666667%; +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; } -@media (min-width: 576px) { - .col-sm { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-sm-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-sm-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-sm-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-sm-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-sm-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-sm-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-sm-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-sm-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-sm-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-sm-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-sm-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-sm-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - order: -1; - } - .order-sm-last { - order: 13; - } - .order-sm-0 { - order: 0; - } - .order-sm-1 { - order: 1; - } - .order-sm-2 { - order: 2; - } - .order-sm-3 { - order: 3; - } - .order-sm-4 { - order: 4; - } - .order-sm-5 { - order: 5; - } - .order-sm-6 { - order: 6; - } - .order-sm-7 { - order: 7; - } - .order-sm-8 { - order: 8; - } - .order-sm-9 { - order: 9; - } - .order-sm-10 { - order: 10; - } - .order-sm-11 { - order: 11; - } - .order-sm-12 { - order: 12; - } - .offset-sm-0 { - margin-left: 0; - } - .offset-sm-1 { - margin-left: 8.3333333333%; - } - .offset-sm-2 { - margin-left: 16.6666666667%; - } - .offset-sm-3 { - margin-left: 25%; - } - .offset-sm-4 { - margin-left: 33.3333333333%; - } - .offset-sm-5 { - margin-left: 41.6666666667%; - } - .offset-sm-6 { - margin-left: 50%; - } - .offset-sm-7 { - margin-left: 58.3333333333%; - } - .offset-sm-8 { - margin-left: 66.6666666667%; - } - .offset-sm-9 { - margin-left: 75%; - } - .offset-sm-10 { - margin-left: 83.3333333333%; - } - .offset-sm-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 768px) { - .col-md { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-md-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-md-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-md-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-md-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-md-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-md-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-md-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-md-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-md-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-md-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-md-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-md-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - order: -1; - } - .order-md-last { - order: 13; - } - .order-md-0 { - order: 0; - } - .order-md-1 { - order: 1; - } - .order-md-2 { - order: 2; - } - .order-md-3 { - order: 3; - } - .order-md-4 { - order: 4; - } - .order-md-5 { - order: 5; - } - .order-md-6 { - order: 6; - } - .order-md-7 { - order: 7; - } - .order-md-8 { - order: 8; - } - .order-md-9 { - order: 9; - } - .order-md-10 { - order: 10; - } - .order-md-11 { - order: 11; - } - .order-md-12 { - order: 12; - } - .offset-md-0 { - margin-left: 0; - } - .offset-md-1 { - margin-left: 8.3333333333%; - } - .offset-md-2 { - margin-left: 16.6666666667%; - } - .offset-md-3 { - margin-left: 25%; - } - .offset-md-4 { - margin-left: 33.3333333333%; - } - .offset-md-5 { - margin-left: 41.6666666667%; - } - .offset-md-6 { - margin-left: 50%; - } - .offset-md-7 { - margin-left: 58.3333333333%; - } - .offset-md-8 { - margin-left: 66.6666666667%; - } - .offset-md-9 { - margin-left: 75%; - } - .offset-md-10 { - margin-left: 83.3333333333%; - } - .offset-md-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 992px) { - .col-lg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-lg-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-lg-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-lg-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-lg-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-lg-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-lg-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-lg-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-lg-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-lg-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-lg-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-lg-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-lg-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - order: -1; - } - .order-lg-last { - order: 13; - } - .order-lg-0 { - order: 0; - } - .order-lg-1 { - order: 1; - } - .order-lg-2 { - order: 2; - } - .order-lg-3 { - order: 3; - } - .order-lg-4 { - order: 4; - } - .order-lg-5 { - order: 5; - } - .order-lg-6 { - order: 6; - } - .order-lg-7 { - order: 7; - } - .order-lg-8 { - order: 8; - } - .order-lg-9 { - order: 9; - } - .order-lg-10 { - order: 10; - } - .order-lg-11 { - order: 11; - } - .order-lg-12 { - order: 12; - } - .offset-lg-0 { - margin-left: 0; - } - .offset-lg-1 { - margin-left: 8.3333333333%; - } - .offset-lg-2 { - margin-left: 16.6666666667%; - } - .offset-lg-3 { - margin-left: 25%; - } - .offset-lg-4 { - margin-left: 33.3333333333%; - } - .offset-lg-5 { - margin-left: 41.6666666667%; - } - .offset-lg-6 { - margin-left: 50%; - } - .offset-lg-7 { - margin-left: 58.3333333333%; - } - .offset-lg-8 { - margin-left: 66.6666666667%; - } - .offset-lg-9 { - margin-left: 75%; - } - .offset-lg-10 { - margin-left: 83.3333333333%; - } - .offset-lg-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 1200px) { - .col-xl { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-xl-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-xl-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-xl-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-xl-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-xl-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-xl-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-xl-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-xl-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-xl-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-xl-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-xl-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-xl-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - order: -1; - } - .order-xl-last { - order: 13; - } - .order-xl-0 { - order: 0; - } - .order-xl-1 { - order: 1; - } - .order-xl-2 { - order: 2; - } - .order-xl-3 { - order: 3; - } - .order-xl-4 { - order: 4; - } - .order-xl-5 { - order: 5; - } - .order-xl-6 { - order: 6; - } - .order-xl-7 { - order: 7; - } - .order-xl-8 { - order: 8; - } - .order-xl-9 { - order: 9; - } - .order-xl-10 { - order: 10; - } - .order-xl-11 { - order: 11; - } - .order-xl-12 { - order: 12; - } - .offset-xl-0 { - margin-left: 0; - } - .offset-xl-1 { - margin-left: 8.3333333333%; - } - .offset-xl-2 { - margin-left: 16.6666666667%; - } - .offset-xl-3 { - margin-left: 25%; - } - .offset-xl-4 { - margin-left: 33.3333333333%; - } - .offset-xl-5 { - margin-left: 41.6666666667%; - } - .offset-xl-6 { - margin-left: 50%; - } - .offset-xl-7 { - margin-left: 58.3333333333%; - } - .offset-xl-8 { - margin-left: 66.6666666667%; - } - .offset-xl-9 { - margin-left: 75%; - } - .offset-xl-10 { - margin-left: 83.3333333333%; - } - .offset-xl-11 { - margin-left: 91.6666666667%; - } -} -.form-control { - display: block; - width: 100%; - height: 2.25rem; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.429; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: var(--rz-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .form-control { - transition: none; - } -} -.form-control::-ms-expand { - background-color: transparent; - border: 0; -} -.form-control:focus { - color: #495057; - background-color: #fff; - border-color: #ffcfc1; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 109, 65, 0.25); -} -.form-control::placeholder { - color: var(--rz-text-tertiary-color); - opacity: 1; -} -.form-control:disabled, .form-control[readonly] { - background-color: #e9ecef; - opacity: 1; +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; } -select.form-control:focus::-ms-value { - color: #495057; - background-color: #fff; +.rz-color-info { + color: var(--rz-info) !important; } -.form-control-file, -.form-control-range { - display: block; - width: 100%; +.rz-color-info-light { + color: var(--rz-info-light) !important; } -.col-form-label { - padding-top: calc(0.375rem + 1px); - padding-bottom: calc(0.375rem + 1px); - margin-bottom: 0; - font-size: inherit; - line-height: 1.429; +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; } -.col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); - font-size: 1.09375rem; - line-height: 1.5; +.rz-color-info-dark { + color: var(--rz-info-dark) !important; } -.col-form-label-sm { - padding-top: calc(0.25rem + 1px); - padding-bottom: calc(0.25rem + 1px); - font-size: 0.765625rem; - line-height: 1.5; +.rz-color-info-darker { + color: var(--rz-info-darker) !important; } -.form-control-plaintext { - display: block; - width: 100%; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - margin-bottom: 0; - line-height: 1.429; - color: #f6f7fa; - background-color: transparent; - border: solid transparent; - border-width: 1px 0; -} -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-right: 0; - padding-left: 0; +.rz-color-success { + color: var(--rz-success) !important; } -.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; - border-radius: 0.2rem; +.rz-color-success-light { + color: var(--rz-success-light) !important; } -.form-control-lg { - height: calc(1.5em + 1rem + 2px); - padding: 0.5rem 1rem; - font-size: 1.09375rem; - line-height: 1.5; - border-radius: 0.3rem; +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; } -select.form-control[size], select.form-control[multiple] { - height: auto; +.rz-color-success-dark { + color: var(--rz-success-dark) !important; } -textarea.form-control { - height: auto; +.rz-color-success-darker { + color: var(--rz-success-darker) !important; } -.form-group { - margin-bottom: 1rem; +.rz-color-warning { + color: var(--rz-warning) !important; } -.form-text { - display: block; - margin-top: 0.25rem; +.rz-color-warning-light { + color: var(--rz-warning-light) !important; } -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; -} -.form-row > .col, -.form-row > [class*=col-] { - padding-right: 5px; - padding-left: 5px; +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; } -.form-check { - position: relative; - display: block; - padding-left: 1.25rem; +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; } -.form-check-input { - position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; -} -.form-check-input:disabled ~ .form-check-label { - color: #6c757d; +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; } -.form-check-label { - margin-bottom: 0; +.rz-color-danger { + color: var(--rz-danger) !important; } -.form-check-inline { - display: inline-flex; - align-items: center; - padding-left: 0; - margin-right: 0.75rem; -} -.form-check-inline .form-check-input { - position: static; - margin-top: 0; - margin-right: 0.3125rem; - margin-left: 0; +.rz-color-danger-light { + color: var(--rz-danger-light) !important; } -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #5dbf74; +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; } -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #212529; - background-color: rgba(93, 191, 116, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; } -.was-validated .form-control:valid, .form-control.is-valid { - border-color: #5dbf74; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235dbf74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .form-control:valid ~ .valid-feedback, -.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, -.form-control.is-valid ~ .valid-tooltip { - display: block; +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-base { + color: var(--rz-on-base) !important; } -.was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #5dbf74; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235dbf74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .custom-select:valid ~ .valid-feedback, -.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, -.custom-select.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; } -.was-validated .form-control-file:valid ~ .valid-feedback, -.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, -.form-control-file.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #5dbf74; -} -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #5dbf74; -} -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #5dbf74; -} -.was-validated .custom-control-input:valid ~ .valid-feedback, -.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, -.custom-control-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #82cd93; - background-color: #82cd93; -} -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #5dbf74; +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; } -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #5dbf74; -} -.was-validated .custom-file-input:valid ~ .valid-feedback, -.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, -.custom-file-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); +.rz-color-on-primary { + color: var(--rz-on-primary) !important; } -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #f9777f; +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; } -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #212529; - background-color: rgba(249, 119, 127, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; } -.was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #f9777f; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9777f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f9777f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .form-control:invalid ~ .invalid-feedback, -.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, -.form-control.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; } -.was-validated .custom-select:invalid, .custom-select.is-invalid { - border-color: #f9777f; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9777f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f9777f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .custom-select:invalid ~ .invalid-feedback, -.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, -.custom-select.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; } -.was-validated .form-control-file:invalid ~ .invalid-feedback, -.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, -.form-control-file.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #f9777f; -} -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #f9777f; -} -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #f9777f; -} -.was-validated .custom-control-input:invalid ~ .invalid-feedback, -.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, -.custom-control-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #fba8ad; - background-color: #fba8ad; -} -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #f9777f; +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; } -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #f9777f; -} -.was-validated .custom-file-input:invalid ~ .invalid-feedback, -.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, -.custom-file-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; } -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -.form-inline .form-check { - width: 100%; -} -@media (min-width: 576px) { - .form-inline label { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0; - } - .form-inline .form-group { - display: flex; - flex: 0 0 auto; - flex-flow: row wrap; - align-items: center; - margin-bottom: 0; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - .form-inline .form-control-plaintext { - display: inline-block; - } - .form-inline .input-group, - .form-inline .custom-select { - width: auto; - } - .form-inline .form-check { - display: flex; - align-items: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-inline .form-check-input { - position: relative; - flex-shrink: 0; - margin-top: 0; - margin-right: 0.25rem; - margin-left: 0; - } - .form-inline .custom-control { - align-items: center; - justify-content: center; - } - .form-inline .custom-control-label { - margin-bottom: 0; - } +.rz-color-on-info { + color: var(--rz-on-info) !important; } -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 0.75rem; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: var(--rz-border-radius); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .badge { - transition: none; - } -} -a.badge:hover, a.badge:focus { - text-decoration: none; +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; } -.badge:empty { - display: none; +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; } -.btn .badge { - position: relative; - top: -1px; +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; } -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; } -.badge-primary { - color: #fff; - background-color: #ff6d41; -} -a.badge-primary:hover, a.badge-primary:focus { - color: #fff; - background-color: #ff460e; -} -a.badge-primary:focus, a.badge-primary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 109, 65, 0.5); +.rz-color-on-success { + color: var(--rz-on-success) !important; } -.badge-secondary { - color: #fff; - background-color: #3b9fd5; -} -a.badge-secondary:hover, a.badge-secondary:focus { - color: #fff; - background-color: #2784b6; -} -a.badge-secondary:focus, a.badge-secondary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(59, 159, 213, 0.5); +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; } -.badge-success { - color: #212529; - background-color: #5dbf74; -} -a.badge-success:hover, a.badge-success:focus { - color: #212529; - background-color: #42a75a; -} -a.badge-success:focus, a.badge-success.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.5); +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; } -.badge-info { - color: #212529; - background-color: #2cc8c8; -} -a.badge-info:hover, a.badge-info:focus { - color: #212529; - background-color: #239e9e; -} -a.badge-info:focus, a.badge-info.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(44, 200, 200, 0.5); +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; } -.badge-warning { - color: #212529; - background-color: #fac152; -} -a.badge-warning:hover, a.badge-warning:focus { - color: #212529; - background-color: #f9af20; -} -a.badge-warning:focus, a.badge-warning.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(250, 193, 82, 0.5); +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; } -.badge-danger { - color: #212529; - background-color: #f9777f; -} -a.badge-danger:hover, a.badge-danger:focus { - color: #212529; - background-color: #f74651; -} -a.badge-danger:focus, a.badge-danger.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.5); +.rz-color-on-warning { + color: var(--rz-on-warning) !important; } -.badge-light { - color: #212529; - background-color: #e9edf0; -} -a.badge-light:hover, a.badge-light:focus { - color: #212529; - background-color: #cbd4db; -} -a.badge-light:focus, a.badge-light.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(233, 237, 240, 0.5); +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; } -.badge-dark { - color: #fff; - background-color: #343a40; -} -a.badge-dark:hover, a.badge-dark:focus { - color: #fff; - background-color: #1d2124; -} -a.badge-dark:focus, a.badge-dark.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; } -.alert { - position: relative; - padding: 0.75rem 1.25rem; - margin-bottom: 1rem; - border: 1px solid transparent; - border-radius: 4px; +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; } -.alert-heading { - color: inherit; +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; } -.alert-link { - font-weight: 700; +.rz-color-on-danger { + color: var(--rz-on-danger) !important; } -.alert-dismissible { - padding-right: 3.8125rem; -} -.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; } -.alert-primary { - color: #853922; - background-color: #ffe2d9; - border-color: #ffd6ca; -} -.alert-primary hr { - border-top-color: #ffc2b1; -} -.alert-primary .alert-link { - color: #5c2818; +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; } -.alert-secondary { - color: #1f536f; - background-color: #d8ecf7; - border-color: #c8e4f3; -} -.alert-secondary hr { - border-top-color: #b3daee; -} -.alert-secondary .alert-link { - color: #143547; +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; } -.alert-success { - color: #30633c; - background-color: #dff2e3; - border-color: #d2edd8; -} -.alert-success hr { - border-top-color: #c0e6c8; -} -.alert-success .alert-link { - color: #1f4127; +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; } -.alert-info { - color: #176868; - background-color: #d5f4f4; - border-color: #c4f0f0; -} -.alert-info hr { - border-top-color: #b0ebeb; -} -.alert-info .alert-link { - color: #0e3e3e; +.rz-color-series-1 { + color: var(--rz-series-1) !important; } -.alert-warning { - color: #82642b; - background-color: #fef3dc; - border-color: #feeecf; -} -.alert-warning hr { - border-top-color: #fde5b6; -} -.alert-warning .alert-link { - color: #5c471e; +.rz-color-series-2 { + color: var(--rz-series-2) !important; } -.alert-danger { - color: #813e42; - background-color: #fee4e5; - border-color: #fdd9db; -} -.alert-danger hr { - border-top-color: #fcc1c4; -} -.alert-danger .alert-link { - color: #5f2d30; +.rz-color-series-3 { + color: var(--rz-series-3) !important; } -.alert-light { - color: #797b7d; - background-color: #fbfbfc; - border-color: #f9fafb; -} -.alert-light hr { - border-top-color: #eaedf1; -} -.alert-light .alert-link { - color: #606263; +.rz-color-series-4 { + color: var(--rz-series-4) !important; } -.alert-dark { - color: #1b1e21; - background-color: #d6d8d9; - border-color: #c6c8ca; -} -.alert-dark hr { - border-top-color: #b9bbbe; -} -.alert-dark .alert-link { - color: #040505; +.rz-color-series-5 { + color: var(--rz-series-5) !important; } -.media { - display: flex; - align-items: flex-start; +.rz-color-series-6 { + color: var(--rz-series-6) !important; } -.media-body { - flex: 1; +.rz-color-series-7 { + color: var(--rz-series-7) !important; } -.align-baseline { - vertical-align: baseline !important; +.rz-color-series-8 { + color: var(--rz-series-8) !important; } -.align-top { - vertical-align: top !important; +.rz-color-series-9 { + color: var(--rz-series-9) !important; } -.align-middle { - vertical-align: middle !important; +.rz-color-series-10 { + color: var(--rz-series-10) !important; } -.align-bottom { - vertical-align: bottom !important; +.rz-color-series-11 { + color: var(--rz-series-11) !important; } -.align-text-bottom { - vertical-align: text-bottom !important; +.rz-color-series-12 { + color: var(--rz-series-12) !important; } -.align-text-top { - vertical-align: text-top !important; +.rz-color-series-13 { + color: var(--rz-series-13) !important; } -.bg-primary { - background-color: #ff6d41 !important; +.rz-color-series-14 { + color: var(--rz-series-14) !important; } -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #ff460e !important; +.rz-color-series-15 { + color: var(--rz-series-15) !important; } -.bg-secondary { - background-color: #3b9fd5 !important; +.rz-color-series-16 { + color: var(--rz-series-16) !important; } -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #2784b6 !important; +.rz-color-series-17 { + color: var(--rz-series-17) !important; } -.bg-success { - background-color: #5dbf74 !important; +.rz-color-series-18 { + color: var(--rz-series-18) !important; } -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #42a75a !important; +.rz-color-series-19 { + color: var(--rz-series-19) !important; } -.bg-info { - background-color: #2cc8c8 !important; +.rz-color-series-20 { + color: var(--rz-series-20) !important; } -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #239e9e !important; +.rz-color-series-21 { + color: var(--rz-series-21) !important; } -.bg-warning { - background-color: #fac152 !important; +.rz-color-series-22 { + color: var(--rz-series-22) !important; } -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #f9af20 !important; +.rz-color-series-23 { + color: var(--rz-series-23) !important; } -.bg-danger { - background-color: #f9777f !important; +.rz-color-series-24 { + color: var(--rz-series-24) !important; } -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #f74651 !important; +.rz-background-color-white { + background-color: var(--rz-white) !important; } -.bg-light { - background-color: #e9edf0 !important; +.rz-background-color-black { + background-color: var(--rz-black) !important; } -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #cbd4db !important; +.rz-background-color-base { + background-color: var(--rz-base) !important; } -.bg-dark { - background-color: #343a40 !important; +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; } -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #1d2124 !important; +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; } -.bg-white { - background-color: #fff !important; +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; } -.bg-transparent { - background-color: transparent !important; +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; } -.border { - border: 1px solid #dee2e6 !important; +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; } -.border-top { - border-top: 1px solid #dee2e6 !important; +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; } -.border-right { - border-right: 1px solid #dee2e6 !important; +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; } -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; } -.border-left { - border-left: 1px solid #dee2e6 !important; +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; } -.border-0 { - border: 0 !important; +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; } -.border-top-0 { - border-top: 0 !important; +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; } -.border-right-0 { - border-right: 0 !important; +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; } -.border-bottom-0 { - border-bottom: 0 !important; +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; } -.border-left-0 { - border-left: 0 !important; +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; } -.border-primary { - border-color: #ff6d41 !important; +.rz-background-color-primary { + background-color: var(--rz-primary) !important; } -.border-secondary { - border-color: #3b9fd5 !important; +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; } -.border-success { - border-color: #5dbf74 !important; +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; } -.border-info { - border-color: #2cc8c8 !important; +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; } -.border-warning { - border-color: #fac152 !important; +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; } -.border-danger { - border-color: #f9777f !important; +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; } -.border-light { - border-color: #e9edf0 !important; +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; } -.border-dark { - border-color: #343a40 !important; +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; } -.border-white { - border-color: #fff !important; +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; } -.rounded-sm { - border-radius: 0.2rem !important; +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; } -.rounded { - border-radius: 4px !important; +.rz-background-color-info { + background-color: var(--rz-info) !important; } -.rounded-top { - border-top-left-radius: 4px !important; - border-top-right-radius: 4px !important; +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; } -.rounded-right { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; } -.rounded-bottom { - border-bottom-right-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; } -.rounded-left { - border-top-left-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; } -.rounded-lg { - border-radius: 0.3rem !important; +.rz-background-color-success { + background-color: var(--rz-success) !important; } -.rounded-circle { - border-radius: 50% !important; +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; } -.rounded-pill { - border-radius: 50rem !important; +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; } -.rounded-0 { - border-radius: 0 !important; +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; } -.clearfix::after { - display: block; - clear: both; - content: ""; +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; } -.d-none { - display: none !important; +.rz-background-color-warning { + background-color: var(--rz-warning) !important; } -.d-inline { - display: inline !important; +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; } -.d-inline-block { - display: inline-block !important; +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; } -.d-block { - display: block !important; +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; } -.d-table { - display: table !important; +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; } -.d-table-row { - display: table-row !important; +.rz-background-color-danger { + background-color: var(--rz-danger) !important; } -.d-table-cell { - display: table-cell !important; +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; } -.d-flex { - display: flex !important; +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; } -.d-inline-flex { - display: inline-flex !important; +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; } -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } - .d-sm-inline { - display: inline !important; - } - .d-sm-inline-block { - display: inline-block !important; - } - .d-sm-block { - display: block !important; - } - .d-sm-table { - display: table !important; - } - .d-sm-table-row { - display: table-row !important; - } - .d-sm-table-cell { - display: table-cell !important; - } - .d-sm-flex { - display: flex !important; - } - .d-sm-inline-flex { - display: inline-flex !important; - } +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; } -@media (min-width: 768px) { - .d-md-none { - display: none !important; - } - .d-md-inline { - display: inline !important; - } - .d-md-inline-block { - display: inline-block !important; - } - .d-md-block { - display: block !important; - } - .d-md-table { - display: table !important; - } - .d-md-table-row { - display: table-row !important; - } - .d-md-table-cell { - display: table-cell !important; - } - .d-md-flex { - display: flex !important; - } - .d-md-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; } -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-inline { - display: inline !important; - } - .d-lg-inline-block { - display: inline-block !important; - } - .d-lg-block { - display: block !important; - } - .d-lg-table { - display: table !important; - } - .d-lg-table-row { - display: table-row !important; - } - .d-lg-table-cell { - display: table-cell !important; - } - .d-lg-flex { - display: flex !important; - } - .d-lg-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; } -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; - } - .d-xl-inline { - display: inline !important; - } - .d-xl-inline-block { - display: inline-block !important; - } - .d-xl-block { - display: block !important; - } - .d-xl-table { - display: table !important; - } - .d-xl-table-row { - display: table-row !important; - } - .d-xl-table-cell { - display: table-cell !important; - } - .d-xl-flex { - display: flex !important; - } - .d-xl-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; } -@media print { - .d-print-none { - display: none !important; - } - .d-print-inline { - display: inline !important; - } - .d-print-inline-block { - display: inline-block !important; - } - .d-print-block { - display: block !important; - } - .d-print-table { - display: table !important; - } - .d-print-table-row { - display: table-row !important; - } - .d-print-table-cell { - display: table-cell !important; - } - .d-print-flex { - display: flex !important; - } - .d-print-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; } -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; } -.embed-responsive::before { - display: block; - content: ""; + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; } -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; } -.embed-responsive-21by9::before { - padding-top: 42.8571428571%; +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; } -.embed-responsive-16by9::before { - padding-top: 56.25%; +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; } -.embed-responsive-4by3::before { - padding-top: 75%; +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; } -.embed-responsive-1by1::before { - padding-top: 100%; +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; } -.flex-row { - flex-direction: row !important; +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; } -.flex-column { - flex-direction: column !important; +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; } -.flex-row-reverse { - flex-direction: row-reverse !important; +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; } -.flex-column-reverse { - flex-direction: column-reverse !important; +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; } -.flex-wrap { - flex-wrap: wrap !important; +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; } -.flex-nowrap { - flex-wrap: nowrap !important; +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; } -.flex-wrap-reverse { - flex-wrap: wrap-reverse !important; +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; } -.flex-fill { - flex: 1 1 auto !important; +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; } -.flex-grow-0 { - flex-grow: 0 !important; +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; } -.flex-grow-1 { - flex-grow: 1 !important; +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; } -.flex-shrink-0 { - flex-shrink: 0 !important; +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; } -.flex-shrink-1 { - flex-shrink: 1 !important; +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; } -.justify-content-start { - justify-content: flex-start !important; +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; } -.justify-content-end { - justify-content: flex-end !important; +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; } -.justify-content-center { - justify-content: center !important; +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; } -.justify-content-between { - justify-content: space-between !important; +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; } -.justify-content-around { - justify-content: space-around !important; +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; } -.align-items-start { - align-items: flex-start !important; +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; } -.align-items-end { - align-items: flex-end !important; +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; } -.align-items-center { - align-items: center !important; +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; } -.align-items-baseline { - align-items: baseline !important; +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; } -.align-items-stretch { - align-items: stretch !important; +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; } -.align-content-start { - align-content: flex-start !important; +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; } -.align-content-end { - align-content: flex-end !important; +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; } -.align-content-center { - align-content: center !important; +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; } -.align-content-between { - align-content: space-between !important; +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; } -.align-content-around { - align-content: space-around !important; +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; } -.align-content-stretch { - align-content: stretch !important; +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; } -.align-self-auto { - align-self: auto !important; +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; } -.align-self-start { - align-self: flex-start !important; +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; } -.align-self-end { - align-self: flex-end !important; +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; } -.align-self-center { - align-self: center !important; +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; } -.align-self-baseline { - align-self: baseline !important; +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; } -.align-self-stretch { - align-self: stretch !important; +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; } -@media (min-width: 576px) { - .flex-sm-row { - flex-direction: row !important; - } - .flex-sm-column { - flex-direction: column !important; - } - .flex-sm-row-reverse { - flex-direction: row-reverse !important; - } - .flex-sm-column-reverse { - flex-direction: column-reverse !important; - } - .flex-sm-wrap { - flex-wrap: wrap !important; - } - .flex-sm-nowrap { - flex-wrap: nowrap !important; - } - .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-sm-fill { - flex: 1 1 auto !important; - } - .flex-sm-grow-0 { - flex-grow: 0 !important; - } - .flex-sm-grow-1 { - flex-grow: 1 !important; - } - .flex-sm-shrink-0 { - flex-shrink: 0 !important; - } - .flex-sm-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-sm-start { - justify-content: flex-start !important; - } - .justify-content-sm-end { - justify-content: flex-end !important; - } - .justify-content-sm-center { - justify-content: center !important; - } - .justify-content-sm-between { - justify-content: space-between !important; - } - .justify-content-sm-around { - justify-content: space-around !important; - } - .align-items-sm-start { - align-items: flex-start !important; - } - .align-items-sm-end { - align-items: flex-end !important; - } - .align-items-sm-center { - align-items: center !important; - } - .align-items-sm-baseline { - align-items: baseline !important; - } - .align-items-sm-stretch { - align-items: stretch !important; - } - .align-content-sm-start { - align-content: flex-start !important; - } - .align-content-sm-end { - align-content: flex-end !important; - } - .align-content-sm-center { - align-content: center !important; - } - .align-content-sm-between { - align-content: space-between !important; - } - .align-content-sm-around { - align-content: space-around !important; - } - .align-content-sm-stretch { - align-content: stretch !important; - } - .align-self-sm-auto { - align-self: auto !important; - } - .align-self-sm-start { - align-self: flex-start !important; - } - .align-self-sm-end { - align-self: flex-end !important; - } - .align-self-sm-center { - align-self: center !important; - } - .align-self-sm-baseline { - align-self: baseline !important; - } - .align-self-sm-stretch { - align-self: stretch !important; - } -} -@media (min-width: 768px) { - .flex-md-row { - flex-direction: row !important; - } - .flex-md-column { - flex-direction: column !important; - } - .flex-md-row-reverse { - flex-direction: row-reverse !important; - } - .flex-md-column-reverse { - flex-direction: column-reverse !important; - } - .flex-md-wrap { - flex-wrap: wrap !important; - } - .flex-md-nowrap { - flex-wrap: nowrap !important; - } - .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-md-fill { - flex: 1 1 auto !important; - } - .flex-md-grow-0 { - flex-grow: 0 !important; - } - .flex-md-grow-1 { - flex-grow: 1 !important; - } - .flex-md-shrink-0 { - flex-shrink: 0 !important; - } - .flex-md-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-md-start { - justify-content: flex-start !important; - } - .justify-content-md-end { - justify-content: flex-end !important; - } - .justify-content-md-center { - justify-content: center !important; - } - .justify-content-md-between { - justify-content: space-between !important; - } - .justify-content-md-around { - justify-content: space-around !important; - } - .align-items-md-start { - align-items: flex-start !important; - } - .align-items-md-end { - align-items: flex-end !important; - } - .align-items-md-center { - align-items: center !important; - } - .align-items-md-baseline { - align-items: baseline !important; - } - .align-items-md-stretch { - align-items: stretch !important; - } - .align-content-md-start { - align-content: flex-start !important; - } - .align-content-md-end { - align-content: flex-end !important; - } - .align-content-md-center { - align-content: center !important; - } - .align-content-md-between { - align-content: space-between !important; - } - .align-content-md-around { - align-content: space-around !important; - } - .align-content-md-stretch { - align-content: stretch !important; - } - .align-self-md-auto { - align-self: auto !important; - } - .align-self-md-start { - align-self: flex-start !important; - } - .align-self-md-end { - align-self: flex-end !important; - } - .align-self-md-center { - align-self: center !important; - } - .align-self-md-baseline { - align-self: baseline !important; - } - .align-self-md-stretch { - align-self: stretch !important; - } +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; } -@media (min-width: 992px) { - .flex-lg-row { - flex-direction: row !important; - } - .flex-lg-column { - flex-direction: column !important; - } - .flex-lg-row-reverse { - flex-direction: row-reverse !important; - } - .flex-lg-column-reverse { - flex-direction: column-reverse !important; - } - .flex-lg-wrap { - flex-wrap: wrap !important; - } - .flex-lg-nowrap { - flex-wrap: nowrap !important; - } - .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-lg-fill { - flex: 1 1 auto !important; - } - .flex-lg-grow-0 { - flex-grow: 0 !important; - } - .flex-lg-grow-1 { - flex-grow: 1 !important; - } - .flex-lg-shrink-0 { - flex-shrink: 0 !important; - } - .flex-lg-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-lg-start { - justify-content: flex-start !important; - } - .justify-content-lg-end { - justify-content: flex-end !important; - } - .justify-content-lg-center { - justify-content: center !important; - } - .justify-content-lg-between { - justify-content: space-between !important; - } - .justify-content-lg-around { - justify-content: space-around !important; - } - .align-items-lg-start { - align-items: flex-start !important; - } - .align-items-lg-end { - align-items: flex-end !important; - } - .align-items-lg-center { - align-items: center !important; - } - .align-items-lg-baseline { - align-items: baseline !important; - } - .align-items-lg-stretch { - align-items: stretch !important; - } - .align-content-lg-start { - align-content: flex-start !important; - } - .align-content-lg-end { - align-content: flex-end !important; - } - .align-content-lg-center { - align-content: center !important; - } - .align-content-lg-between { - align-content: space-between !important; - } - .align-content-lg-around { - align-content: space-around !important; - } - .align-content-lg-stretch { - align-content: stretch !important; - } - .align-self-lg-auto { - align-self: auto !important; - } - .align-self-lg-start { - align-self: flex-start !important; - } - .align-self-lg-end { - align-self: flex-end !important; - } - .align-self-lg-center { - align-self: center !important; - } - .align-self-lg-baseline { - align-self: baseline !important; - } - .align-self-lg-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; } -@media (min-width: 1200px) { - .flex-xl-row { - flex-direction: row !important; - } - .flex-xl-column { - flex-direction: column !important; - } - .flex-xl-row-reverse { - flex-direction: row-reverse !important; - } - .flex-xl-column-reverse { - flex-direction: column-reverse !important; - } - .flex-xl-wrap { - flex-wrap: wrap !important; - } - .flex-xl-nowrap { - flex-wrap: nowrap !important; - } - .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-xl-fill { - flex: 1 1 auto !important; - } - .flex-xl-grow-0 { - flex-grow: 0 !important; - } - .flex-xl-grow-1 { - flex-grow: 1 !important; - } - .flex-xl-shrink-0 { - flex-shrink: 0 !important; - } - .flex-xl-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-xl-start { - justify-content: flex-start !important; - } - .justify-content-xl-end { - justify-content: flex-end !important; - } - .justify-content-xl-center { - justify-content: center !important; - } - .justify-content-xl-between { - justify-content: space-between !important; - } - .justify-content-xl-around { - justify-content: space-around !important; - } - .align-items-xl-start { - align-items: flex-start !important; - } - .align-items-xl-end { - align-items: flex-end !important; - } - .align-items-xl-center { - align-items: center !important; - } - .align-items-xl-baseline { - align-items: baseline !important; - } - .align-items-xl-stretch { - align-items: stretch !important; - } - .align-content-xl-start { - align-content: flex-start !important; - } - .align-content-xl-end { - align-content: flex-end !important; - } - .align-content-xl-center { - align-content: center !important; - } - .align-content-xl-between { - align-content: space-between !important; - } - .align-content-xl-around { - align-content: space-around !important; - } - .align-content-xl-stretch { - align-content: stretch !important; - } - .align-self-xl-auto { - align-self: auto !important; - } - .align-self-xl-start { - align-self: flex-start !important; - } - .align-self-xl-end { - align-self: flex-end !important; - } - .align-self-xl-center { - align-self: center !important; - } - .align-self-xl-baseline { - align-self: baseline !important; - } - .align-self-xl-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; } -.float-left { - float: left !important; + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; } -.float-right { - float: right !important; +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; } -.float-none { - float: none !important; +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; } -@media (min-width: 576px) { - .float-sm-left { - float: left !important; - } - .float-sm-right { - float: right !important; - } - .float-sm-none { - float: none !important; - } +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; } -@media (min-width: 768px) { - .float-md-left { - float: left !important; - } - .float-md-right { - float: right !important; - } - .float-md-none { - float: none !important; - } + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; } -@media (min-width: 992px) { - .float-lg-left { - float: left !important; - } - .float-lg-right { - float: right !important; - } - .float-lg-none { - float: none !important; - } + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; } -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; - } - .float-xl-right { - float: right !important; - } - .float-xl-none { - float: none !important; - } + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; } -.overflow-auto { - overflow: auto !important; + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; } -.overflow-hidden { - overflow: hidden !important; +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; } -.position-static { - position: static !important; +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; } -.position-relative { - position: relative !important; +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; } -.position-absolute { - position: absolute !important; +.rz-border-color-white { + border-color: var(--rz-white) !important; } -.position-fixed { - position: fixed !important; +.rz-border-color-black { + border-color: var(--rz-black) !important; } -.position-sticky { - position: sticky !important; +.rz-border-color-base { + border-color: var(--rz-base) !important; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; } -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; } -@supports (position: sticky) { - .sticky-top { - position: sticky; - top: 0; - z-index: 1020; - } +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; } -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; } -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; } -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; } -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; } -.shadow-none { - box-shadow: none !important; +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; } -.w-25 { - width: 25% !important; +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; } -.w-50 { - width: 50% !important; +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; } -.w-75 { - width: 75% !important; +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; } -.w-100 { - width: 100% !important; +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; } -.w-auto { - width: auto !important; +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; } -.h-25 { - height: 25% !important; +.rz-border-color-primary { + border-color: var(--rz-primary) !important; } -.h-50 { - height: 50% !important; +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; } -.h-75 { - height: 75% !important; +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; } -.h-100 { - height: 100% !important; +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; } -.h-auto { - height: auto !important; +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; } -.mw-100 { - max-width: 100% !important; +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; } -.mh-100 { - max-height: 100% !important; +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; } -.min-vw-100 { - min-width: 100vw !important; +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; } -.min-vh-100 { - min-height: 100vh !important; +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; } -.vw-100 { - width: 100vw !important; +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; } -.vh-100 { - height: 100vh !important; +.rz-border-color-info { + border-color: var(--rz-info) !important; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); -} - -.m-0 { - margin: 0 !important; +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; } -.mt-0, -.my-0 { - margin-top: 0 !important; +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; } -.mr-0, -.mx-0 { - margin-right: 0 !important; +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; } -.mb-0, -.my-0 { - margin-bottom: 0 !important; +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; } -.ml-0, -.mx-0 { - margin-left: 0 !important; +.rz-border-color-success { + border-color: var(--rz-success) !important; } -.m-1 { - margin: 0.25rem !important; +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; } -.mt-1, -.my-1 { - margin-top: 0.25rem !important; +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; } -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; } -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; } -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; +.rz-border-color-warning { + border-color: var(--rz-warning) !important; } -.m-2 { - margin: 0.5rem !important; +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; } -.mt-2, -.my-2 { - margin-top: 0.5rem !important; +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; } -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; } -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; } -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; +.rz-border-color-danger { + border-color: var(--rz-danger) !important; } -.m-3 { - margin: 1rem !important; +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; } -.mt-3, -.my-3 { - margin-top: 1rem !important; +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; } -.mr-3, -.mx-3 { - margin-right: 1rem !important; +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; } -.mb-3, -.my-3 { - margin-bottom: 1rem !important; +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; } -.ml-3, -.mx-3 { - margin-left: 1rem !important; +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; } -.m-4 { - margin: 1.5rem !important; +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; } -.mt-4, -.my-4 { - margin-top: 1.5rem !important; +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; } -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; } -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; } -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; } -.m-5 { - margin: 3rem !important; +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; } -.mt-5, -.my-5 { - margin-top: 3rem !important; +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; } -.mr-5, -.mx-5 { - margin-right: 3rem !important; +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; } -.mb-5, -.my-5 { - margin-bottom: 3rem !important; +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; } -.ml-5, -.mx-5 { - margin-left: 3rem !important; +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; } -.p-0 { - padding: 0 !important; +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; } -.pt-0, -.py-0 { - padding-top: 0 !important; +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; } -.pr-0, -.px-0 { - padding-right: 0 !important; +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; } -.pb-0, -.py-0 { - padding-bottom: 0 !important; +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; } -.pl-0, -.px-0 { - padding-left: 0 !important; +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; } -.p-1 { - padding: 0.25rem !important; +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; } -.pt-1, -.py-1 { - padding-top: 0.25rem !important; +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; } -.pr-1, -.px-1 { - padding-right: 0.25rem !important; +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; } -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; } -.pl-1, -.px-1 { - padding-left: 0.25rem !important; +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; } -.p-2 { - padding: 0.5rem !important; +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; } -.pt-2, -.py-2 { - padding-top: 0.5rem !important; +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; } -.pr-2, -.px-2 { - padding-right: 0.5rem !important; +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; } -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; } -.pl-2, -.px-2 { - padding-left: 0.5rem !important; +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; } -.p-3 { - padding: 1rem !important; +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; } -.pt-3, -.py-3 { - padding-top: 1rem !important; +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; } -.pr-3, -.px-3 { - padding-right: 1rem !important; +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; } -.pb-3, -.py-3 { - padding-bottom: 1rem !important; +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; } -.pl-3, -.px-3 { - padding-left: 1rem !important; +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; } -.p-4 { - padding: 1.5rem !important; +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; } -.pr-4, -.px-4 { - padding-right: 1.5rem !important; +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; } -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; } -.pl-4, -.px-4 { - padding-left: 1.5rem !important; +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; } -.p-5 { - padding: 3rem !important; +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; } -.pt-5, -.py-5 { - padding-top: 3rem !important; +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; } -.pr-5, -.px-5 { - padding-right: 3rem !important; +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; } -.pb-5, -.py-5 { - padding-bottom: 3rem !important; +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; } -.pl-5, -.px-5 { - padding-left: 3rem !important; +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; } -.m-n1 { - margin: -0.25rem !important; +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; } -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; } -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; } -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; } -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; } -.m-n2 { - margin: -0.5rem !important; +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; } -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; } -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; } -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; } -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; } -.m-n3 { - margin: -1rem !important; +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; } -.mt-n3, -.my-n3 { - margin-top: -1rem !important; +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; } -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; } -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; } -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; } -.m-n4 { - margin: -1.5rem !important; +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; } -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; } -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; } -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; } -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; } -.m-n5 { - margin: -3rem !important; +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; } -.mt-n5, -.my-n5 { - margin-top: -3rem !important; +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; } -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; } -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; } -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; } -.m-auto { - margin: auto !important; +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; } -.mt-auto, -.my-auto { - margin-top: auto !important; +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; } -.mr-auto, -.mx-auto { - margin-right: auto !important; +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; } -.mb-auto, -.my-auto { - margin-bottom: auto !important; +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; } -.ml-auto, -.mx-auto { - margin-left: auto !important; +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; } -@media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; - } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; - } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; - } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; - } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; - } - .m-sm-1 { - margin: 0.25rem !important; - } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; - } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; - } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; - } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; - } - .m-sm-2 { - margin: 0.5rem !important; - } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; - } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; - } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; - } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; - } - .m-sm-3 { - margin: 1rem !important; - } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; - } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; - } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; - } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; - } - .m-sm-4 { - margin: 1.5rem !important; - } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; - } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; - } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; - } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; - } - .m-sm-5 { - margin: 3rem !important; - } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; - } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; - } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; - } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; - } - .p-sm-0 { - padding: 0 !important; - } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; - } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; - } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; - } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; - } - .p-sm-1 { - padding: 0.25rem !important; - } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; - } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; - } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; - } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; - } - .p-sm-2 { - padding: 0.5rem !important; - } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; - } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; - } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; - } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; - } - .p-sm-3 { - padding: 1rem !important; - } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; - } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; - } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; - } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; - } - .p-sm-4 { - padding: 1.5rem !important; - } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; - } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; - } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; - } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; - } - .p-sm-5 { - padding: 3rem !important; - } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; - } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; - } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; - } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; - } - .m-sm-n1 { - margin: -0.25rem !important; - } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; - } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; - } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; - } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; - } - .m-sm-n2 { - margin: -0.5rem !important; - } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; - } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; - } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; - } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; - } - .m-sm-n3 { - margin: -1rem !important; - } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; - } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; - } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; - } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; - } - .m-sm-n4 { - margin: -1.5rem !important; - } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; - } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; - } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; - } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; - } - .m-sm-n5 { - margin: -3rem !important; - } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; - } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; - } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; - } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; - } - .m-sm-auto { - margin: auto !important; - } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; - } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; - } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; - } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; - } +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; } -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; - } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; - } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; - } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; - } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; - } - .m-md-1 { - margin: 0.25rem !important; - } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; - } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; - } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; - } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; - } - .m-md-2 { - margin: 0.5rem !important; - } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; - } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; - } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; - } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; - } - .m-md-3 { - margin: 1rem !important; - } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; - } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; - } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; - } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; - } - .m-md-4 { - margin: 1.5rem !important; - } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; - } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; - } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; - } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; - } - .m-md-5 { - margin: 3rem !important; - } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; - } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; - } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; - } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; - } - .p-md-0 { - padding: 0 !important; - } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; - } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; - } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; - } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; - } - .p-md-1 { - padding: 0.25rem !important; - } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; - } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; - } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; - } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; - } - .p-md-2 { - padding: 0.5rem !important; - } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; - } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; - } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; - } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; - } - .p-md-3 { - padding: 1rem !important; - } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; - } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; - } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; - } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; - } - .p-md-4 { - padding: 1.5rem !important; - } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; - } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; - } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; - } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; - } - .p-md-5 { - padding: 3rem !important; - } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; - } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; - } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; - } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; - } - .m-md-n1 { - margin: -0.25rem !important; - } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; - } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; - } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; - } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; - } - .m-md-n2 { - margin: -0.5rem !important; - } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; - } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; - } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; - } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; - } - .m-md-n3 { - margin: -1rem !important; - } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; - } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; - } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; - } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; - } - .m-md-n4 { - margin: -1.5rem !important; - } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; - } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; - } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; - } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; - } - .m-md-n5 { - margin: -3rem !important; - } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; - } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; - } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; - } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; - } - .m-md-auto { - margin: auto !important; - } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; - } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; - } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; - } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; - } + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; } -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; - } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; - } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; - } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; - } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; - } - .m-lg-1 { - margin: 0.25rem !important; - } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; - } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; - } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; - } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; - } - .m-lg-2 { - margin: 0.5rem !important; - } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; - } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; - } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; - } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; - } - .m-lg-3 { - margin: 1rem !important; - } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; - } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; - } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; - } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; - } - .m-lg-4 { - margin: 1.5rem !important; - } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; - } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; - } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; - } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; - } - .m-lg-5 { - margin: 3rem !important; - } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; - } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; - } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; - } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; - } - .p-lg-0 { - padding: 0 !important; - } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; - } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; - } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; - } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; - } - .p-lg-1 { - padding: 0.25rem !important; - } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; - } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; - } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; - } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; - } - .p-lg-2 { - padding: 0.5rem !important; - } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; - } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; - } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; - } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; - } - .p-lg-3 { - padding: 1rem !important; - } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; - } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; - } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; - } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; - } - .p-lg-4 { - padding: 1.5rem !important; - } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; - } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; - } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; - } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; - } - .p-lg-5 { - padding: 3rem !important; - } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; - } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; - } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; - } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; - } - .m-lg-n1 { - margin: -0.25rem !important; - } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; - } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; - } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; - } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; - } - .m-lg-n2 { - margin: -0.5rem !important; - } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; - } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; - } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; - } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; - } - .m-lg-n3 { - margin: -1rem !important; - } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; - } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; - } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; - } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; - } - .m-lg-n4 { - margin: -1.5rem !important; - } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; - } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; - } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; - } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; - } - .m-lg-n5 { - margin: -3rem !important; - } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; - } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; - } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; - } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; - } - .m-lg-auto { - margin: auto !important; - } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; - } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; - } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; - } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; - } -} -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; - } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; - } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; - } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; - } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; - } - .m-xl-1 { - margin: 0.25rem !important; - } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; - } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; - } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; - } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; - } - .m-xl-2 { - margin: 0.5rem !important; - } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; - } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; - } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; - } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; - } - .m-xl-3 { - margin: 1rem !important; - } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; - } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; - } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; - } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; - } - .m-xl-4 { - margin: 1.5rem !important; - } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; - } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; - } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; - } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; - } - .m-xl-5 { - margin: 3rem !important; - } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; - } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; - } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; - } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; - } - .p-xl-0 { - padding: 0 !important; - } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; - } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; - } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; - } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; - } - .p-xl-1 { - padding: 0.25rem !important; - } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; - } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; - } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; - } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; - } - .p-xl-2 { - padding: 0.5rem !important; - } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; - } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; - } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; - } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; - } - .p-xl-3 { - padding: 1rem !important; - } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; - } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; - } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; - } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; - } - .p-xl-4 { - padding: 1.5rem !important; - } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; - } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; - } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; - } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; - } - .p-xl-5 { - padding: 3rem !important; - } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; - } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; - } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; - } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; - } - .m-xl-n1 { - margin: -0.25rem !important; - } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; - } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; - } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; - } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; - } - .m-xl-n2 { - margin: -0.5rem !important; - } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; - } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; - } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; - } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; - } - .m-xl-n3 { - margin: -1rem !important; - } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; - } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; - } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; - } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; - } - .m-xl-n4 { - margin: -1.5rem !important; - } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; - } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; - } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; - } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; - } - .m-xl-n5 { - margin: -3rem !important; - } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; - } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; - } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; - } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; - } - .m-xl-auto { - margin: auto !important; - } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; - } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; - } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; - } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; - } -} -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; -} - -.text-justify { - text-align: justify !important; + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; } -.text-wrap { - white-space: normal !important; +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; } -.text-nowrap { - white-space: nowrap !important; +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; } -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; } -.text-left { - text-align: left !important; +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; } -.text-right { - text-align: right !important; +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; } -.text-center { - text-align: center !important; +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; } -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; - } - .text-sm-right { - text-align: right !important; - } - .text-sm-center { - text-align: center !important; - } -} -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; - } - .text-md-right { - text-align: right !important; - } - .text-md-center { - text-align: center !important; - } -} -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; - } - .text-lg-right { - text-align: right !important; - } - .text-lg-center { - text-align: center !important; - } -} -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; - } - .text-xl-right { - text-align: right !important; - } - .text-xl-center { - text-align: center !important; - } -} -.text-lowercase { - text-transform: lowercase !important; +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; } -.text-uppercase { - text-transform: uppercase !important; +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; } -.text-capitalize { - text-transform: capitalize !important; +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; } -.font-weight-light { - font-weight: 300 !important; +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; } -.font-weight-lighter { - font-weight: lighter !important; +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; } -.font-weight-normal { - font-weight: 400 !important; +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; } -.font-weight-bold { - font-weight: 700 !important; +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; } -.font-weight-bolder { - font-weight: bolder !important; +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; } -.font-italic { - font-style: italic !important; +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; } -.text-white { - color: #fff !important; +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; } -.text-primary { - color: #ff6d41 !important; +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; } -a.text-primary:hover, a.text-primary:focus { - color: #f43800 !important; +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; } -.text-secondary { - color: #3b9fd5 !important; +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; } -a.text-secondary:hover, a.text-secondary:focus { - color: #2375a1 !important; +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; } -.text-success { - color: #5dbf74 !important; +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; } -a.text-success:hover, a.text-success:focus { - color: #3b9550 !important; +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; } -.text-info { - color: #2cc8c8 !important; +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; } -a.text-info:hover, a.text-info:focus { - color: #1e8989 !important; +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; } -.text-warning { - color: #fac152 !important; +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; } -a.text-warning:hover, a.text-warning:focus { - color: #f8a608 !important; +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; } -.text-danger { - color: #f9777f !important; +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; } -a.text-danger:hover, a.text-danger:focus { - color: #f62e3a !important; +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; } -.text-light { - color: #e9edf0 !important; +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; } -a.text-light:hover, a.text-light:focus { - color: #bcc8d1 !important; +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; } -.text-dark { - color: #343a40 !important; +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; } -a.text-dark:hover, a.text-dark:focus { - color: #121416 !important; +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; } -.text-body { - color: #f6f7fa !important; +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; } -.text-muted { - color: #6c757d !important; +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; } -.text-black-50 { - color: rgba(0, 0, 0, 0.5) !important; +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; } -.text-white-50 { - color: rgba(255, 255, 255, 0.5) !important; +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; } -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; } -.text-decoration-none { - text-decoration: none !important; +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; } -.text-break { - word-break: break-word !important; - overflow-wrap: break-word !important; +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; } -.text-reset { - color: inherit !important; +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; } -.visible { - visibility: visible !important; +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; } -.invisible { - visibility: hidden !important; +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; } -@font-face { - font-family: "Material Icons"; - font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f6f7fa; - --rz-base-200: #e9edf0; - --rz-base-300: #dadfe2; - --rz-base-400: #a8b4b8; - --rz-base-500: #7b8a8e; - --rz-base-600: #63737a; - --rz-base-700: #45565e; - --rz-base-800: #38474e; - --rz-base-900: #28363c; - --rz-primary: #ff6d41; - --rz-primary-light: #ff7f58; - --rz-primary-lighter: rgba(255, 109, 65, 0.16); - --rz-primary-dark: #eb643c; - --rz-primary-darker: #bf5231; - --rz-secondary: #3b9fd5; - --rz-secondary-light: #53abda; - --rz-secondary-lighter: rgba(59, 159, 213, 0.2); - --rz-secondary-dark: #3692c4; - --rz-secondary-darker: #2c77a0; - --rz-info: #2cc8c8; - --rz-info-light: #4ed1d1; - --rz-info-lighter: rgba(44, 200, 200, 0.2); - --rz-info-dark: #25a8a8; - --rz-info-darker: #219696; - --rz-success: #5dbf74; - --rz-success-light: #77c98a; - --rz-success-lighter: rgba(93, 191, 116, 0.16); - --rz-success-dark: #4ea061; - --rz-success-darker: #468f57; - --rz-warning: #fac152; - --rz-warning-light: #fbcb6e; - --rz-warning-lighter: rgba(250, 193, 82, 0.2); - --rz-warning-dark: #d2a245; - --rz-warning-darker: #bc913e; - --rz-danger: #f9777f; - --rz-danger-light: #fa8d93; - --rz-danger-lighter: rgba(249, 119, 127, 0.2); - --rz-danger-dark: #d1646b; - --rz-danger-darker: #bb595f; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #ff6d41; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #3b9fd5; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2cc8c8; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #5dbf74; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #fac152; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f9777f; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #376df5; - --rz-series-2: #64dfdf; - --rz-series-3: #f68769; - --rz-series-4: #c161e2; - --rz-series-5: #fdd07a; - --rz-series-6: #f8629b; - --rz-series-7: #74d062; - --rz-series-8: #84a7ff; - --rz-series-9: #4d99f9; - --rz-series-10: #8cecec; - --rz-series-11: #fab793; - --rz-series-12: #da88ee; - --rz-series-13: #fee3ab; - --rz-series-14: #fb89c3; - --rz-series-15: #a2e389; - --rz-series-16: #b5caff; - --rz-series-17: #1750f3; - --rz-series-18: #46d7d7; - --rz-series-19: #f46e4c; - --rz-series-20: #b343db; - --rz-series-21: #fdc55f; - --rz-series-22: #f64485; - --rz-series-23: #58c544; - --rz-series-24: #6a93ff; + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-900); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-secondary); +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; } -:root { - --rz-text-title-color: var(--rz-base-50); - --rz-text-color: var(--rz-base-100); - --rz-text-secondary-color: var(--rz-base-300); - --rz-text-tertiary-color: var(--rz-base-400); - --rz-text-disabled-color: var(--rz-base-600); - --rz-text-contrast-color: var(--rz-white); +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; } -.rz-text-title-color { - color: var(--rz-base-50) !important; +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; } -.rz-text-color { - color: var(--rz-base-100) !important; +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; } -.rz-text-secondary-color { - color: var(--rz-base-300) !important; +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-400) !important; +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; } -.rz-text-disabled-color { - color: var(--rz-base-600) !important; +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; } -:root { - --rz-base-background-color: var(--rz-base-800); +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; } -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; } -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; } -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; } -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; } -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; } -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; } -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; } -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; } -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; +.rz-ripple { + position: relative; + overflow: hidden; } - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; } - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; } -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; +body { + margin: 0; } -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; +.rz-m-0 { + margin: 0 !important; } -.rz-display-none { - display: none !important; +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; } -.rz-display-block { - display: block !important; +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; } -.rz-display-inline { - display: inline !important; +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; } -.rz-display-inline-block { - display: inline-block !important; +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; } -.rz-display-flex { - display: flex !important; +.rz-ms-0 { + margin-inline-start: 0 !important; } -.rz-display-inline-flex { - display: inline-flex !important; +.rz-me-0 { + margin-inline-end: 0 !important; } -.rz-display-grid { - display: grid !important; +.rz-m-05 { + margin: 0.125rem !important; } -.rz-display-inline-grid { - display: inline-grid !important; +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; } -@media (min-width: 576px) { - .rz-display-xs-none { - display: none !important; - } - .rz-display-xs-block { - display: block !important; - } - .rz-display-xs-inline { - display: inline !important; - } - .rz-display-xs-inline-block { - display: inline-block !important; - } - .rz-display-xs-flex { - display: flex !important; - } - .rz-display-xs-inline-flex { - display: inline-flex !important; - } - .rz-display-xs-grid { - display: grid !important; - } - .rz-display-xs-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 768px) { - .rz-display-sm-none { - display: none !important; - } - .rz-display-sm-block { - display: block !important; - } - .rz-display-sm-inline { - display: inline !important; - } - .rz-display-sm-inline-block { - display: inline-block !important; - } - .rz-display-sm-flex { - display: flex !important; - } - .rz-display-sm-inline-flex { - display: inline-flex !important; - } - .rz-display-sm-grid { - display: grid !important; - } - .rz-display-sm-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1024px) { - .rz-display-md-none { - display: none !important; - } - .rz-display-md-block { - display: block !important; - } - .rz-display-md-inline { - display: inline !important; - } - .rz-display-md-inline-block { - display: inline-block !important; - } - .rz-display-md-flex { - display: flex !important; - } - .rz-display-md-inline-flex { - display: inline-flex !important; - } - .rz-display-md-grid { - display: grid !important; - } - .rz-display-md-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1280px) { - .rz-display-lg-none { - display: none !important; - } - .rz-display-lg-block { - display: block !important; - } - .rz-display-lg-inline { - display: inline !important; - } - .rz-display-lg-inline-block { - display: inline-block !important; - } - .rz-display-lg-flex { - display: flex !important; - } - .rz-display-lg-inline-flex { - display: inline-flex !important; - } - .rz-display-lg-grid { - display: grid !important; - } - .rz-display-lg-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1920px) { - .rz-display-xl-none { - display: none !important; - } - .rz-display-xl-block { - display: block !important; - } - .rz-display-xl-inline { - display: inline !important; - } - .rz-display-xl-inline-block { - display: inline-block !important; - } - .rz-display-xl-flex { - display: flex !important; - } - .rz-display-xl-inline-flex { - display: inline-flex !important; - } - .rz-display-xl-grid { - display: grid !important; - } - .rz-display-xl-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 2560px) { - .rz-display-xx-none { - display: none !important; - } - .rz-display-xx-block { - display: block !important; - } - .rz-display-xx-inline { - display: inline !important; - } - .rz-display-xx-inline-block { - display: inline-block !important; - } - .rz-display-xx-flex { - display: flex !important; - } - .rz-display-xx-inline-flex { - display: inline-flex !important; - } - .rz-display-xx-grid { - display: grid !important; - } - .rz-display-xx-inline-grid { - display: inline-grid !important; - } +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; } -.rz-justify-content-normal { - justify-content: normal !important; + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; } -.rz-justify-content-stretch { - justify-content: stretch !important; +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; } -.rz-justify-content-center { - justify-content: center !important; +.rz-ms-05 { + margin-inline-start: 0.125rem !important; } -.rz-justify-content-start { - justify-content: start !important; +.rz-me-05 { + margin-inline-end: 0.125rem !important; } -.rz-justify-content-end { - justify-content: end !important; +.rz-m-1 { + margin: 0.25rem !important; } -.rz-justify-content-flex-start { - justify-content: flex-start !important; +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; } -.rz-justify-content-flex-end { - justify-content: flex-end !important; +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; } -.rz-justify-content-left { - justify-content: left !important; +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; } -.rz-justify-content-right { - justify-content: right !important; +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; } -.rz-justify-content-space-between { - justify-content: space-between !important; +.rz-ms-1 { + margin-inline-start: 0.25rem !important; } -.rz-justify-content-space-around { - justify-content: space-around !important; +.rz-me-1 { + margin-inline-end: 0.25rem !important; } -.rz-justify-content-space-evenly { - justify-content: space-evenly !important; +.rz-m-2 { + margin: 0.5rem !important; } -.rz-align-items-normal { - align-items: normal !important; +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; } -.rz-align-items-stretch { - align-items: stretch !important; +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; } -.rz-align-items-center { - align-items: center !important; +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; } -.rz-align-items-start { - align-items: start !important; +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; } -.rz-align-items-end { - align-items: end !important; +.rz-ms-2 { + margin-inline-start: 0.5rem !important; } -.rz-align-items-flex-start { - align-items: flex-start !important; +.rz-me-2 { + margin-inline-end: 0.5rem !important; } -.rz-align-items-flex-end { - align-items: flex-end !important; +.rz-m-3 { + margin: 0.75rem !important; } -.rz-color-white { - color: var(--rz-white) !important; +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; } -.rz-color-black { - color: var(--rz-black) !important; +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; } -.rz-color-base-50 { - color: var(--rz-base-50) !important; +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; } -.rz-color-base-100 { - color: var(--rz-base-100) !important; +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; } -.rz-color-base-200 { - color: var(--rz-base-200) !important; +.rz-ms-3 { + margin-inline-start: 0.75rem !important; } -.rz-color-base-300 { - color: var(--rz-base-300) !important; +.rz-me-3 { + margin-inline-end: 0.75rem !important; } -.rz-color-base-400 { - color: var(--rz-base-400) !important; +.rz-m-4 { + margin: 1rem !important; } -.rz-color-base-500 { - color: var(--rz-base-500) !important; +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; } -.rz-color-base-600 { - color: var(--rz-base-600) !important; +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; } -.rz-color-base-700 { - color: var(--rz-base-700) !important; +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; } -.rz-color-base-800 { - color: var(--rz-base-800) !important; +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; } -.rz-color-base-900 { - color: var(--rz-base-900) !important; +.rz-ms-4 { + margin-inline-start: 1rem !important; } -.rz-color-primary { - color: var(--rz-primary) !important; +.rz-me-4 { + margin-inline-end: 1rem !important; } -.rz-color-primary-light { - color: var(--rz-primary-light) !important; +.rz-m-5 { + margin: 1.25rem !important; } -.rz-color-primary-lighter { - color: var(--rz-primary-lighter) !important; +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; } -.rz-color-primary-dark { - color: var(--rz-primary-dark) !important; +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; } -.rz-color-primary-darker { - color: var(--rz-primary-darker) !important; +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; } -.rz-color-secondary { - color: var(--rz-secondary) !important; +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; } -.rz-color-secondary-light { - color: var(--rz-secondary-light) !important; +.rz-ms-5 { + margin-inline-start: 1.25rem !important; } -.rz-color-secondary-lighter { - color: var(--rz-secondary-lighter) !important; +.rz-me-5 { + margin-inline-end: 1.25rem !important; } -.rz-color-secondary-dark { - color: var(--rz-secondary-dark) !important; +.rz-m-6 { + margin: 1.5rem !important; } -.rz-color-secondary-darker { - color: var(--rz-secondary-darker) !important; +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; } -.rz-color-info { - color: var(--rz-info) !important; +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; } -.rz-color-info-light { - color: var(--rz-info-light) !important; +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; } -.rz-color-info-lighter { - color: var(--rz-info-lighter) !important; +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; } -.rz-color-info-dark { - color: var(--rz-info-dark) !important; +.rz-ms-6 { + margin-inline-start: 1.5rem !important; } -.rz-color-info-darker { - color: var(--rz-info-darker) !important; +.rz-me-6 { + margin-inline-end: 1.5rem !important; } -.rz-color-success { - color: var(--rz-success) !important; +.rz-m-7 { + margin: 1.75rem !important; } -.rz-color-success-light { - color: var(--rz-success-light) !important; +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; } -.rz-color-success-lighter { - color: var(--rz-success-lighter) !important; +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; } -.rz-color-success-dark { - color: var(--rz-success-dark) !important; +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; } -.rz-color-success-darker { - color: var(--rz-success-darker) !important; +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; } -.rz-color-warning { - color: var(--rz-warning) !important; +.rz-ms-7 { + margin-inline-start: 1.75rem !important; } -.rz-color-warning-light { - color: var(--rz-warning-light) !important; +.rz-me-7 { + margin-inline-end: 1.75rem !important; } -.rz-color-warning-lighter { - color: var(--rz-warning-lighter) !important; +.rz-m-8 { + margin: 2rem !important; } -.rz-color-warning-dark { - color: var(--rz-warning-dark) !important; +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; } -.rz-color-warning-darker { - color: var(--rz-warning-darker) !important; +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; } -.rz-color-danger { - color: var(--rz-danger) !important; +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; } -.rz-color-danger-light { - color: var(--rz-danger-light) !important; +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; } -.rz-color-danger-lighter { - color: var(--rz-danger-lighter) !important; +.rz-ms-8 { + margin-inline-start: 2rem !important; } -.rz-color-danger-dark { - color: var(--rz-danger-dark) !important; +.rz-me-8 { + margin-inline-end: 2rem !important; } -.rz-color-danger-darker { - color: var(--rz-danger-darker) !important; +.rz-m-9 { + margin: 2.25rem !important; } -.rz-color-on-primary { - color: var(--rz-on-primary) !important; +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; } -.rz-color-on-primary-light { - color: var(--rz-on-primary-light) !important; +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; } -.rz-color-on-primary-lighter { - color: var(--rz-on-primary-lighter) !important; +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; } -.rz-color-on-primary-dark { - color: var(--rz-on-primary-dark) !important; +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; } -.rz-color-on-primary-darker { - color: var(--rz-on-primary-darker) !important; +.rz-ms-9 { + margin-inline-start: 2.25rem !important; } -.rz-color-on-secondary { - color: var(--rz-on-secondary) !important; +.rz-me-9 { + margin-inline-end: 2.25rem !important; } -.rz-color-on-secondary-light { - color: var(--rz-on-secondary-light) !important; +.rz-m-10 { + margin: 2.5rem !important; } -.rz-color-on-secondary-lighter { - color: var(--rz-on-secondary-lighter) !important; +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; } -.rz-color-on-secondary-dark { - color: var(--rz-on-secondary-dark) !important; +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; } -.rz-color-on-secondary-darker { - color: var(--rz-on-secondary-darker) !important; +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; } -.rz-color-on-info { - color: var(--rz-on-info) !important; +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; } -.rz-color-on-info-light { - color: var(--rz-on-info-light) !important; +.rz-ms-10 { + margin-inline-start: 2.5rem !important; } -.rz-color-on-info-lighter { - color: var(--rz-on-info-lighter) !important; +.rz-me-10 { + margin-inline-end: 2.5rem !important; } -.rz-color-on-info-dark { - color: var(--rz-on-info-dark) !important; +.rz-m-11 { + margin: 2.75rem !important; } -.rz-color-on-info-darker { - color: var(--rz-on-info-darker) !important; +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; } -.rz-color-on-success { - color: var(--rz-on-success) !important; +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; } -.rz-color-on-success-light { - color: var(--rz-on-success-light) !important; +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; } -.rz-color-on-success-lighter { - color: var(--rz-on-success-lighter) !important; +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; } -.rz-color-on-success-dark { - color: var(--rz-on-success-dark) !important; +.rz-ms-11 { + margin-inline-start: 2.75rem !important; } -.rz-color-on-success-darker { - color: var(--rz-on-success-darker) !important; +.rz-me-11 { + margin-inline-end: 2.75rem !important; } -.rz-color-on-warning { - color: var(--rz-on-warning) !important; +.rz-m-12 { + margin: 3rem !important; } -.rz-color-on-warning-light { - color: var(--rz-on-warning-light) !important; +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; } -.rz-color-on-warning-lighter { - color: var(--rz-on-warning-lighter) !important; +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; } -.rz-color-on-warning-dark { - color: var(--rz-on-warning-dark) !important; +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; } -.rz-color-on-warning-darker { - color: var(--rz-on-warning-darker) !important; +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; } -.rz-color-on-danger { - color: var(--rz-on-danger) !important; +.rz-ms-12 { + margin-inline-start: 3rem !important; } -.rz-color-on-danger-light { - color: var(--rz-on-danger-light) !important; +.rz-me-12 { + margin-inline-end: 3rem !important; } -.rz-color-on-danger-lighter { - color: var(--rz-on-danger-lighter) !important; +.rz-p-0 { + padding: 0 !important; } -.rz-color-on-danger-dark { - color: var(--rz-on-danger-dark) !important; +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; } -.rz-color-on-danger-darker { - color: var(--rz-on-danger-darker) !important; +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; } -.rz-color-series-1 { - color: var(--rz-series-1) !important; +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; } -.rz-color-series-2 { - color: var(--rz-series-2) !important; +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; } -.rz-color-series-3 { - color: var(--rz-series-3) !important; +.rz-ps-0 { + padding-inline-start: 0 !important; } -.rz-color-series-4 { - color: var(--rz-series-4) !important; +.rz-pe-0 { + padding-inline-end: 0 !important; } -.rz-color-series-5 { - color: var(--rz-series-5) !important; +.rz-p-05 { + padding: 0.125rem !important; } -.rz-color-series-6 { - color: var(--rz-series-6) !important; +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; } -.rz-color-series-7 { - color: var(--rz-series-7) !important; +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; } -.rz-color-series-8 { - color: var(--rz-series-8) !important; +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; } -.rz-color-series-9 { - color: var(--rz-series-9) !important; +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; } -.rz-color-series-10 { - color: var(--rz-series-10) !important; +.rz-ps-05 { + padding-inline-start: 0.125rem !important; } -.rz-color-series-11 { - color: var(--rz-series-11) !important; +.rz-pe-05 { + padding-inline-end: 0.125rem !important; } -.rz-color-series-12 { - color: var(--rz-series-12) !important; +.rz-p-1 { + padding: 0.25rem !important; } -.rz-color-series-13 { - color: var(--rz-series-13) !important; +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; } -.rz-color-series-14 { - color: var(--rz-series-14) !important; +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; } -.rz-color-series-15 { - color: var(--rz-series-15) !important; +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; } -.rz-color-series-16 { - color: var(--rz-series-16) !important; +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; } -.rz-color-series-17 { - color: var(--rz-series-17) !important; +.rz-ps-1 { + padding-inline-start: 0.25rem !important; } -.rz-color-series-18 { - color: var(--rz-series-18) !important; +.rz-pe-1 { + padding-inline-end: 0.25rem !important; } -.rz-color-series-19 { - color: var(--rz-series-19) !important; +.rz-p-2 { + padding: 0.5rem !important; } -.rz-color-series-20 { - color: var(--rz-series-20) !important; +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; } -.rz-color-series-21 { - color: var(--rz-series-21) !important; +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; } -.rz-color-series-22 { - color: var(--rz-series-22) !important; +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; } -.rz-color-series-23 { - color: var(--rz-series-23) !important; +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; } -.rz-color-series-24 { - color: var(--rz-series-24) !important; +.rz-ps-2 { + padding-inline-start: 0.5rem !important; } -.rz-background-color-white { - background-color: var(--rz-white) !important; +.rz-pe-2 { + padding-inline-end: 0.5rem !important; } -.rz-background-color-black { - background-color: var(--rz-black) !important; +.rz-p-3 { + padding: 0.75rem !important; } -.rz-background-color-base-50 { - background-color: var(--rz-base-50) !important; +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; } -.rz-background-color-base-100 { - background-color: var(--rz-base-100) !important; +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; } -.rz-background-color-base-200 { - background-color: var(--rz-base-200) !important; +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; } -.rz-background-color-base-300 { - background-color: var(--rz-base-300) !important; +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; } -.rz-background-color-base-400 { - background-color: var(--rz-base-400) !important; +.rz-ps-3 { + padding-inline-start: 0.75rem !important; } -.rz-background-color-base-500 { - background-color: var(--rz-base-500) !important; +.rz-pe-3 { + padding-inline-end: 0.75rem !important; } -.rz-background-color-base-600 { - background-color: var(--rz-base-600) !important; +.rz-p-4 { + padding: 1rem !important; } -.rz-background-color-base-700 { - background-color: var(--rz-base-700) !important; +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; } -.rz-background-color-base-800 { - background-color: var(--rz-base-800) !important; +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; } -.rz-background-color-base-900 { - background-color: var(--rz-base-900) !important; +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; } -.rz-background-color-primary { - background-color: var(--rz-primary) !important; +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; } -.rz-background-color-primary-light { - background-color: var(--rz-primary-light) !important; +.rz-ps-4 { + padding-inline-start: 1rem !important; } -.rz-background-color-primary-lighter { - background-color: var(--rz-primary-lighter) !important; +.rz-pe-4 { + padding-inline-end: 1rem !important; } -.rz-background-color-primary-dark { - background-color: var(--rz-primary-dark) !important; +.rz-p-5 { + padding: 1.25rem !important; } -.rz-background-color-primary-darker { - background-color: var(--rz-primary-darker) !important; +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; } -.rz-background-color-secondary { - background-color: var(--rz-secondary) !important; +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; } -.rz-background-color-secondary-light { - background-color: var(--rz-secondary-light) !important; +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; } -.rz-background-color-secondary-lighter { - background-color: var(--rz-secondary-lighter) !important; +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; } -.rz-background-color-secondary-dark { - background-color: var(--rz-secondary-dark) !important; +.rz-ps-5 { + padding-inline-start: 1.25rem !important; } -.rz-background-color-secondary-darker { - background-color: var(--rz-secondary-darker) !important; +.rz-pe-5 { + padding-inline-end: 1.25rem !important; } -.rz-background-color-info { - background-color: var(--rz-info) !important; +.rz-p-6 { + padding: 1.5rem !important; } -.rz-background-color-info-light { - background-color: var(--rz-info-light) !important; +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; } -.rz-background-color-info-lighter { - background-color: var(--rz-info-lighter) !important; +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; } -.rz-background-color-info-dark { - background-color: var(--rz-info-dark) !important; +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; } -.rz-background-color-info-darker { - background-color: var(--rz-info-darker) !important; +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; } -.rz-background-color-success { - background-color: var(--rz-success) !important; +.rz-ps-6 { + padding-inline-start: 1.5rem !important; } -.rz-background-color-success-light { - background-color: var(--rz-success-light) !important; +.rz-pe-6 { + padding-inline-end: 1.5rem !important; } -.rz-background-color-success-lighter { - background-color: var(--rz-success-lighter) !important; +.rz-p-7 { + padding: 1.75rem !important; } -.rz-background-color-success-dark { - background-color: var(--rz-success-dark) !important; +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; } -.rz-background-color-success-darker { - background-color: var(--rz-success-darker) !important; +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; } -.rz-background-color-warning { - background-color: var(--rz-warning) !important; +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; } -.rz-background-color-warning-light { - background-color: var(--rz-warning-light) !important; +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; } -.rz-background-color-warning-lighter { - background-color: var(--rz-warning-lighter) !important; +.rz-ps-7 { + padding-inline-start: 1.75rem !important; } -.rz-background-color-warning-dark { - background-color: var(--rz-warning-dark) !important; +.rz-pe-7 { + padding-inline-end: 1.75rem !important; } -.rz-background-color-warning-darker { - background-color: var(--rz-warning-darker) !important; +.rz-p-8 { + padding: 2rem !important; } -.rz-background-color-danger { - background-color: var(--rz-danger) !important; +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; } -.rz-background-color-danger-light { - background-color: var(--rz-danger-light) !important; +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; } -.rz-background-color-danger-lighter { - background-color: var(--rz-danger-lighter) !important; +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; } -.rz-background-color-danger-dark { - background-color: var(--rz-danger-dark) !important; +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; } -.rz-background-color-danger-darker { - background-color: var(--rz-danger-darker) !important; +.rz-ps-8 { + padding-inline-start: 2rem !important; } -.rz-background-color-on-primary { - background-color: var(--rz-on-primary) !important; +.rz-pe-8 { + padding-inline-end: 2rem !important; } -.rz-background-color-on-primary-light { - background-color: var(--rz-on-primary-light) !important; +.rz-p-9 { + padding: 2.25rem !important; } -.rz-background-color-on-primary-lighter { - background-color: var(--rz-on-primary-lighter) !important; +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; } -.rz-background-color-on-primary-dark { - background-color: var(--rz-on-primary-dark) !important; +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; } -.rz-background-color-on-primary-darker { - background-color: var(--rz-on-primary-darker) !important; +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; } -.rz-background-color-on-secondary { - background-color: var(--rz-on-secondary) !important; +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; } -.rz-background-color-on-secondary-light { - background-color: var(--rz-on-secondary-light) !important; +.rz-ps-9 { + padding-inline-start: 2.25rem !important; } -.rz-background-color-on-secondary-lighter { - background-color: var(--rz-on-secondary-lighter) !important; +.rz-pe-9 { + padding-inline-end: 2.25rem !important; } -.rz-background-color-on-secondary-dark { - background-color: var(--rz-on-secondary-dark) !important; +.rz-p-10 { + padding: 2.5rem !important; } -.rz-background-color-on-secondary-darker { - background-color: var(--rz-on-secondary-darker) !important; +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; } -.rz-background-color-on-info { - background-color: var(--rz-on-info) !important; +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; } -.rz-background-color-on-info-light { - background-color: var(--rz-on-info-light) !important; +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; } -.rz-background-color-on-info-lighter { - background-color: var(--rz-on-info-lighter) !important; +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; } -.rz-background-color-on-info-dark { - background-color: var(--rz-on-info-dark) !important; +.rz-ps-10 { + padding-inline-start: 2.5rem !important; } -.rz-background-color-on-info-darker { - background-color: var(--rz-on-info-darker) !important; +.rz-pe-10 { + padding-inline-end: 2.5rem !important; } -.rz-background-color-on-success { - background-color: var(--rz-on-success) !important; +.rz-p-11 { + padding: 2.75rem !important; } -.rz-background-color-on-success-light { - background-color: var(--rz-on-success-light) !important; +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; } -.rz-background-color-on-success-lighter { - background-color: var(--rz-on-success-lighter) !important; +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; } -.rz-background-color-on-success-dark { - background-color: var(--rz-on-success-dark) !important; +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; } -.rz-background-color-on-success-darker { - background-color: var(--rz-on-success-darker) !important; +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; } -.rz-background-color-on-warning { - background-color: var(--rz-on-warning) !important; +.rz-ps-11 { + padding-inline-start: 2.75rem !important; } -.rz-background-color-on-warning-light { - background-color: var(--rz-on-warning-light) !important; +.rz-pe-11 { + padding-inline-end: 2.75rem !important; } -.rz-background-color-on-warning-lighter { - background-color: var(--rz-on-warning-lighter) !important; +.rz-p-12 { + padding: 3rem !important; } -.rz-background-color-on-warning-dark { - background-color: var(--rz-on-warning-dark) !important; +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; } -.rz-background-color-on-warning-darker { - background-color: var(--rz-on-warning-darker) !important; +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; } -.rz-background-color-on-danger { - background-color: var(--rz-on-danger) !important; +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; } -.rz-background-color-on-danger-light { - background-color: var(--rz-on-danger-light) !important; -} - -.rz-background-color-on-danger-lighter { - background-color: var(--rz-on-danger-lighter) !important; -} - -.rz-background-color-on-danger-dark { - background-color: var(--rz-on-danger-dark) !important; -} - -.rz-background-color-on-danger-darker { - background-color: var(--rz-on-danger-darker) !important; -} - -.rz-background-color-series-1 { - background-color: var(--rz-series-1) !important; -} - -.rz-background-color-series-2 { - background-color: var(--rz-series-2) !important; -} - -.rz-background-color-series-3 { - background-color: var(--rz-series-3) !important; -} - -.rz-background-color-series-4 { - background-color: var(--rz-series-4) !important; -} - -.rz-background-color-series-5 { - background-color: var(--rz-series-5) !important; -} - -.rz-background-color-series-6 { - background-color: var(--rz-series-6) !important; -} - -.rz-background-color-series-7 { - background-color: var(--rz-series-7) !important; -} - -.rz-background-color-series-8 { - background-color: var(--rz-series-8) !important; -} - -.rz-background-color-series-9 { - background-color: var(--rz-series-9) !important; -} - -.rz-background-color-series-10 { - background-color: var(--rz-series-10) !important; -} - -.rz-background-color-series-11 { - background-color: var(--rz-series-11) !important; -} - -.rz-background-color-series-12 { - background-color: var(--rz-series-12) !important; -} - -.rz-background-color-series-13 { - background-color: var(--rz-series-13) !important; -} - -.rz-background-color-series-14 { - background-color: var(--rz-series-14) !important; -} - -.rz-background-color-series-15 { - background-color: var(--rz-series-15) !important; -} - -.rz-background-color-series-16 { - background-color: var(--rz-series-16) !important; -} - -.rz-background-color-series-17 { - background-color: var(--rz-series-17) !important; -} - -.rz-background-color-series-18 { - background-color: var(--rz-series-18) !important; -} - -.rz-background-color-series-19 { - background-color: var(--rz-series-19) !important; -} - -.rz-background-color-series-20 { - background-color: var(--rz-series-20) !important; -} - -.rz-background-color-series-21 { - background-color: var(--rz-series-21) !important; -} - -.rz-background-color-series-22 { - background-color: var(--rz-series-22) !important; -} - -.rz-background-color-series-23 { - background-color: var(--rz-series-23) !important; -} - -.rz-background-color-series-24 { - background-color: var(--rz-series-24) !important; -} - -.rz-border-color-white { - border-color: var(--rz-white) !important; -} - -.rz-border-color-black { - border-color: var(--rz-black) !important; -} - -.rz-border-color-base-50 { - border-color: var(--rz-base-50) !important; -} - -.rz-border-color-base-100 { - border-color: var(--rz-base-100) !important; -} - -.rz-border-color-base-200 { - border-color: var(--rz-base-200) !important; -} - -.rz-border-color-base-300 { - border-color: var(--rz-base-300) !important; -} - -.rz-border-color-base-400 { - border-color: var(--rz-base-400) !important; -} - -.rz-border-color-base-500 { - border-color: var(--rz-base-500) !important; -} - -.rz-border-color-base-600 { - border-color: var(--rz-base-600) !important; -} - -.rz-border-color-base-700 { - border-color: var(--rz-base-700) !important; -} - -.rz-border-color-base-800 { - border-color: var(--rz-base-800) !important; -} - -.rz-border-color-base-900 { - border-color: var(--rz-base-900) !important; -} - -.rz-border-color-primary { - border-color: var(--rz-primary) !important; -} - -.rz-border-color-primary-light { - border-color: var(--rz-primary-light) !important; -} - -.rz-border-color-primary-lighter { - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-color-primary-dark { - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-color-primary-darker { - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-color-secondary { - border-color: var(--rz-secondary) !important; -} - -.rz-border-color-secondary-light { - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-color-secondary-lighter { - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-color-secondary-dark { - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-color-secondary-darker { - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-color-info { - border-color: var(--rz-info) !important; -} - -.rz-border-color-info-light { - border-color: var(--rz-info-light) !important; -} - -.rz-border-color-info-lighter { - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-color-info-dark { - border-color: var(--rz-info-dark) !important; +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; } -.rz-border-color-info-darker { - border-color: var(--rz-info-darker) !important; +.rz-ps-12 { + padding-inline-start: 3rem !important; } -.rz-border-color-success { - border-color: var(--rz-success) !important; +.rz-pe-12 { + padding-inline-end: 3rem !important; } -.rz-border-color-success-light { - border-color: var(--rz-success-light) !important; +.rz-m-auto { + margin: auto !important; } -.rz-border-color-success-lighter { - border-color: var(--rz-success-lighter) !important; +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; } -.rz-border-color-success-dark { - border-color: var(--rz-success-dark) !important; +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; } -.rz-border-color-success-darker { - border-color: var(--rz-success-darker) !important; +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; } -.rz-border-color-warning { - border-color: var(--rz-warning) !important; +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; } -.rz-border-color-warning-light { - border-color: var(--rz-warning-light) !important; +.rz-ms-auto { + margin-inline-start: auto !important; } -.rz-border-color-warning-lighter { - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-color-warning-dark { - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-color-warning-darker { - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-color-danger { - border-color: var(--rz-danger) !important; -} - -.rz-border-color-danger-light { - border-color: var(--rz-danger-light) !important; -} - -.rz-border-color-danger-lighter { - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-color-danger-dark { - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-color-danger-darker { - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-color-on-primary { - border-color: var(--rz-on-primary) !important; -} - -.rz-border-color-on-primary-light { - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-color-on-primary-lighter { - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-color-on-primary-dark { - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-color-on-primary-darker { - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-color-on-secondary { - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-color-on-secondary-light { - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-color-on-secondary-lighter { - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-color-on-secondary-dark { - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-color-on-secondary-darker { - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-color-on-info { - border-color: var(--rz-on-info) !important; -} - -.rz-border-color-on-info-light { - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-color-on-info-lighter { - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-color-on-info-dark { - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-color-on-info-darker { - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-color-on-success { - border-color: var(--rz-on-success) !important; -} - -.rz-border-color-on-success-light { - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-color-on-success-lighter { - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-color-on-success-dark { - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-color-on-success-darker { - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-color-on-warning { - border-color: var(--rz-on-warning) !important; -} - -.rz-border-color-on-warning-light { - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-color-on-warning-lighter { - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-color-on-warning-dark { - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-color-on-warning-darker { - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-color-on-danger { - border-color: var(--rz-on-danger) !important; -} - -.rz-border-color-on-danger-light { - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-color-on-danger-lighter { - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-color-on-danger-dark { - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-color-on-danger-darker { - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-color-series-1 { - border-color: var(--rz-series-1) !important; -} - -.rz-border-color-series-2 { - border-color: var(--rz-series-2) !important; -} - -.rz-border-color-series-3 { - border-color: var(--rz-series-3) !important; -} - -.rz-border-color-series-4 { - border-color: var(--rz-series-4) !important; -} - -.rz-border-color-series-5 { - border-color: var(--rz-series-5) !important; -} - -.rz-border-color-series-6 { - border-color: var(--rz-series-6) !important; -} - -.rz-border-color-series-7 { - border-color: var(--rz-series-7) !important; -} - -.rz-border-color-series-8 { - border-color: var(--rz-series-8) !important; -} - -.rz-border-color-series-9 { - border-color: var(--rz-series-9) !important; -} - -.rz-border-color-series-10 { - border-color: var(--rz-series-10) !important; -} - -.rz-border-color-series-11 { - border-color: var(--rz-series-11) !important; -} - -.rz-border-color-series-12 { - border-color: var(--rz-series-12) !important; -} - -.rz-border-color-series-13 { - border-color: var(--rz-series-13) !important; -} - -.rz-border-color-series-14 { - border-color: var(--rz-series-14) !important; -} - -.rz-border-color-series-15 { - border-color: var(--rz-series-15) !important; -} - -.rz-border-color-series-16 { - border-color: var(--rz-series-16) !important; -} - -.rz-border-color-series-17 { - border-color: var(--rz-series-17) !important; -} - -.rz-border-color-series-18 { - border-color: var(--rz-series-18) !important; -} - -.rz-border-color-series-19 { - border-color: var(--rz-series-19) !important; -} - -.rz-border-color-series-20 { - border-color: var(--rz-series-20) !important; -} - -.rz-border-color-series-21 { - border-color: var(--rz-series-21) !important; -} - -.rz-border-color-series-22 { - border-color: var(--rz-series-22) !important; -} - -.rz-border-color-series-23 { - border-color: var(--rz-series-23) !important; -} - -.rz-border-color-series-24 { - border-color: var(--rz-series-24) !important; -} - -.rz-border-white { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-white) !important; -} - -.rz-border-black { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-black) !important; -} - -.rz-border-base-50 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-50) !important; -} - -.rz-border-base-100 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-100) !important; -} - -.rz-border-base-200 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-200) !important; -} - -.rz-border-base-300 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-300) !important; -} - -.rz-border-base-400 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-400) !important; -} - -.rz-border-base-500 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-500) !important; -} - -.rz-border-base-600 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-600) !important; -} - -.rz-border-base-700 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-700) !important; -} - -.rz-border-base-800 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-800) !important; -} - -.rz-border-base-900 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-900) !important; -} - -.rz-border-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary) !important; -} - -.rz-border-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-light) !important; -} - -.rz-border-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary) !important; -} - -.rz-border-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info) !important; -} - -.rz-border-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-light) !important; -} - -.rz-border-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-dark) !important; -} - -.rz-border-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-darker) !important; -} - -.rz-border-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success) !important; -} - -.rz-border-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-light) !important; -} - -.rz-border-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-lighter) !important; -} - -.rz-border-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-dark) !important; -} - -.rz-border-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-darker) !important; -} - -.rz-border-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning) !important; -} - -.rz-border-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-light) !important; -} - -.rz-border-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger) !important; -} - -.rz-border-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-light) !important; -} - -.rz-border-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-on-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary) !important; -} - -.rz-border-on-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-on-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-on-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-on-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-on-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-on-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-on-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-on-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-on-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-on-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info) !important; -} - -.rz-border-on-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-on-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-on-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-on-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-on-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success) !important; -} - -.rz-border-on-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-on-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-on-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-on-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-on-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning) !important; -} - -.rz-border-on-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-on-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-on-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-on-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-on-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger) !important; -} - -.rz-border-on-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-on-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-on-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-on-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-series-1 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-1) !important; -} - -.rz-border-series-2 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-2) !important; -} - -.rz-border-series-3 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-3) !important; -} - -.rz-border-series-4 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-4) !important; -} - -.rz-border-series-5 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-5) !important; -} - -.rz-border-series-6 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-6) !important; -} - -.rz-border-series-7 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-7) !important; -} - -.rz-border-series-8 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-8) !important; -} - -.rz-border-series-9 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-9) !important; -} - -.rz-border-series-10 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-10) !important; -} - -.rz-border-series-11 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-11) !important; -} - -.rz-border-series-12 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-12) !important; -} - -.rz-border-series-13 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-13) !important; -} - -.rz-border-series-14 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-14) !important; -} - -.rz-border-series-15 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-15) !important; -} - -.rz-border-series-16 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-16) !important; -} - -.rz-border-series-17 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-17) !important; -} - -.rz-border-series-18 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-18) !important; -} - -.rz-border-series-19 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-19) !important; -} - -.rz-border-series-20 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-20) !important; -} - -.rz-border-series-21 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-21) !important; -} - -.rz-border-series-22 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-22) !important; -} - -.rz-border-series-23 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-23) !important; -} - -.rz-border-series-24 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-24) !important; -} - -.rz-ripple { - position: relative; - overflow: hidden; -} -.rz-ripple:not(.rz-state-disabled):before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - background-position: center; - background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; - transition: background-size 0.8s, opacity 0.8s; -} -.rz-ripple:not(.rz-state-disabled):active:before { - transition: background-size 0s, opacity 0s; - opacity: 0.32; - background-size: 100%; -} - -.rz-m-0 { - margin: 0 !important; -} - -.rz-my-0, -.rz-mt-0 { - margin-top: 0 !important; -} - -.rz-mx-0, -.rz-mr-0 { - margin-right: 0 !important; -} - -.rz-my-0, -.rz-mb-0 { - margin-bottom: 0 !important; -} - -.rz-mx-0, -.rz-ml-0 { - margin-left: 0 !important; -} - -.rz-ms-0 { - margin-inline-start: 0 !important; -} - -.rz-me-0 { - margin-inline-end: 0 !important; -} - -.rz-m-05 { - margin: 0.125rem !important; -} - -.rz-my-05, -.rz-mt-05 { - margin-top: 0.125rem !important; -} - -.rz-mx-05, -.rz-mr-05 { - margin-right: 0.125rem !important; -} - -.rz-my-05, -.rz-mb-05 { - margin-bottom: 0.125rem !important; -} - -.rz-mx-05, -.rz-ml-05 { - margin-left: 0.125rem !important; -} - -.rz-ms-05 { - margin-inline-start: 0.125rem !important; -} - -.rz-me-05 { - margin-inline-end: 0.125rem !important; -} - -.rz-m-1 { - margin: 0.25rem !important; -} - -.rz-my-1, -.rz-mt-1 { - margin-top: 0.25rem !important; -} - -.rz-mx-1, -.rz-mr-1 { - margin-right: 0.25rem !important; -} - -.rz-my-1, -.rz-mb-1 { - margin-bottom: 0.25rem !important; -} - -.rz-mx-1, -.rz-ml-1 { - margin-left: 0.25rem !important; -} - -.rz-ms-1 { - margin-inline-start: 0.25rem !important; -} - -.rz-me-1 { - margin-inline-end: 0.25rem !important; -} - -.rz-m-2 { - margin: 0.5rem !important; -} - -.rz-my-2, -.rz-mt-2 { - margin-top: 0.5rem !important; -} - -.rz-mx-2, -.rz-mr-2 { - margin-right: 0.5rem !important; -} - -.rz-my-2, -.rz-mb-2 { - margin-bottom: 0.5rem !important; -} - -.rz-mx-2, -.rz-ml-2 { - margin-left: 0.5rem !important; -} - -.rz-ms-2 { - margin-inline-start: 0.5rem !important; -} - -.rz-me-2 { - margin-inline-end: 0.5rem !important; -} - -.rz-m-3 { - margin: 0.75rem !important; -} - -.rz-my-3, -.rz-mt-3 { - margin-top: 0.75rem !important; -} - -.rz-mx-3, -.rz-mr-3 { - margin-right: 0.75rem !important; -} - -.rz-my-3, -.rz-mb-3 { - margin-bottom: 0.75rem !important; -} - -.rz-mx-3, -.rz-ml-3 { - margin-left: 0.75rem !important; -} - -.rz-ms-3 { - margin-inline-start: 0.75rem !important; -} - -.rz-me-3 { - margin-inline-end: 0.75rem !important; -} - -.rz-m-4 { - margin: 1rem !important; -} - -.rz-my-4, -.rz-mt-4 { - margin-top: 1rem !important; -} - -.rz-mx-4, -.rz-mr-4 { - margin-right: 1rem !important; -} - -.rz-my-4, -.rz-mb-4 { - margin-bottom: 1rem !important; -} - -.rz-mx-4, -.rz-ml-4 { - margin-left: 1rem !important; -} - -.rz-ms-4 { - margin-inline-start: 1rem !important; -} - -.rz-me-4 { - margin-inline-end: 1rem !important; -} - -.rz-m-5 { - margin: 1.25rem !important; -} - -.rz-my-5, -.rz-mt-5 { - margin-top: 1.25rem !important; -} - -.rz-mx-5, -.rz-mr-5 { - margin-right: 1.25rem !important; -} - -.rz-my-5, -.rz-mb-5 { - margin-bottom: 1.25rem !important; -} - -.rz-mx-5, -.rz-ml-5 { - margin-left: 1.25rem !important; -} - -.rz-ms-5 { - margin-inline-start: 1.25rem !important; -} - -.rz-me-5 { - margin-inline-end: 1.25rem !important; -} - -.rz-m-6 { - margin: 1.5rem !important; -} - -.rz-my-6, -.rz-mt-6 { - margin-top: 1.5rem !important; -} - -.rz-mx-6, -.rz-mr-6 { - margin-right: 1.5rem !important; -} - -.rz-my-6, -.rz-mb-6 { - margin-bottom: 1.5rem !important; -} - -.rz-mx-6, -.rz-ml-6 { - margin-left: 1.5rem !important; -} - -.rz-ms-6 { - margin-inline-start: 1.5rem !important; -} - -.rz-me-6 { - margin-inline-end: 1.5rem !important; -} - -.rz-m-7 { - margin: 1.75rem !important; -} - -.rz-my-7, -.rz-mt-7 { - margin-top: 1.75rem !important; -} - -.rz-mx-7, -.rz-mr-7 { - margin-right: 1.75rem !important; -} - -.rz-my-7, -.rz-mb-7 { - margin-bottom: 1.75rem !important; -} - -.rz-mx-7, -.rz-ml-7 { - margin-left: 1.75rem !important; -} - -.rz-ms-7 { - margin-inline-start: 1.75rem !important; -} - -.rz-me-7 { - margin-inline-end: 1.75rem !important; -} - -.rz-m-8 { - margin: 2rem !important; -} - -.rz-my-8, -.rz-mt-8 { - margin-top: 2rem !important; -} - -.rz-mx-8, -.rz-mr-8 { - margin-right: 2rem !important; -} - -.rz-my-8, -.rz-mb-8 { - margin-bottom: 2rem !important; -} - -.rz-mx-8, -.rz-ml-8 { - margin-left: 2rem !important; -} - -.rz-ms-8 { - margin-inline-start: 2rem !important; -} - -.rz-me-8 { - margin-inline-end: 2rem !important; -} - -.rz-m-9 { - margin: 2.25rem !important; -} - -.rz-my-9, -.rz-mt-9 { - margin-top: 2.25rem !important; -} - -.rz-mx-9, -.rz-mr-9 { - margin-right: 2.25rem !important; -} - -.rz-my-9, -.rz-mb-9 { - margin-bottom: 2.25rem !important; -} - -.rz-mx-9, -.rz-ml-9 { - margin-left: 2.25rem !important; -} - -.rz-ms-9 { - margin-inline-start: 2.25rem !important; -} - -.rz-me-9 { - margin-inline-end: 2.25rem !important; -} - -.rz-m-10 { - margin: 2.5rem !important; -} - -.rz-my-10, -.rz-mt-10 { - margin-top: 2.5rem !important; -} - -.rz-mx-10, -.rz-mr-10 { - margin-right: 2.5rem !important; -} - -.rz-my-10, -.rz-mb-10 { - margin-bottom: 2.5rem !important; -} - -.rz-mx-10, -.rz-ml-10 { - margin-left: 2.5rem !important; -} - -.rz-ms-10 { - margin-inline-start: 2.5rem !important; -} - -.rz-me-10 { - margin-inline-end: 2.5rem !important; -} - -.rz-m-11 { - margin: 2.75rem !important; -} - -.rz-my-11, -.rz-mt-11 { - margin-top: 2.75rem !important; -} - -.rz-mx-11, -.rz-mr-11 { - margin-right: 2.75rem !important; -} - -.rz-my-11, -.rz-mb-11 { - margin-bottom: 2.75rem !important; -} - -.rz-mx-11, -.rz-ml-11 { - margin-left: 2.75rem !important; -} - -.rz-ms-11 { - margin-inline-start: 2.75rem !important; -} - -.rz-me-11 { - margin-inline-end: 2.75rem !important; -} - -.rz-m-12 { - margin: 3rem !important; -} - -.rz-my-12, -.rz-mt-12 { - margin-top: 3rem !important; -} - -.rz-mx-12, -.rz-mr-12 { - margin-right: 3rem !important; -} - -.rz-my-12, -.rz-mb-12 { - margin-bottom: 3rem !important; -} - -.rz-mx-12, -.rz-ml-12 { - margin-left: 3rem !important; -} - -.rz-ms-12 { - margin-inline-start: 3rem !important; -} - -.rz-me-12 { - margin-inline-end: 3rem !important; -} - -.rz-p-0 { - padding: 0 !important; -} - -.rz-py-0, -.rz-pt-0 { - padding-top: 0 !important; -} - -.rz-px-0, -.rz-pr-0 { - padding-right: 0 !important; -} - -.rz-py-0, -.rz-pb-0 { - padding-bottom: 0 !important; -} - -.rz-px-0, -.rz-pl-0 { - padding-left: 0 !important; -} - -.rz-ps-0 { - padding-inline-start: 0 !important; -} - -.rz-pe-0 { - padding-inline-end: 0 !important; -} - -.rz-p-05 { - padding: 0.125rem !important; -} - -.rz-py-05, -.rz-pt-05 { - padding-top: 0.125rem !important; -} - -.rz-px-05, -.rz-pr-05 { - padding-right: 0.125rem !important; -} - -.rz-py-05, -.rz-pb-05 { - padding-bottom: 0.125rem !important; -} - -.rz-px-05, -.rz-pl-05 { - padding-left: 0.125rem !important; -} - -.rz-ps-05 { - padding-inline-start: 0.125rem !important; -} - -.rz-pe-05 { - padding-inline-end: 0.125rem !important; -} - -.rz-p-1 { - padding: 0.25rem !important; -} - -.rz-py-1, -.rz-pt-1 { - padding-top: 0.25rem !important; -} - -.rz-px-1, -.rz-pr-1 { - padding-right: 0.25rem !important; -} - -.rz-py-1, -.rz-pb-1 { - padding-bottom: 0.25rem !important; -} - -.rz-px-1, -.rz-pl-1 { - padding-left: 0.25rem !important; -} - -.rz-ps-1 { - padding-inline-start: 0.25rem !important; -} - -.rz-pe-1 { - padding-inline-end: 0.25rem !important; -} - -.rz-p-2 { - padding: 0.5rem !important; -} - -.rz-py-2, -.rz-pt-2 { - padding-top: 0.5rem !important; -} - -.rz-px-2, -.rz-pr-2 { - padding-right: 0.5rem !important; -} - -.rz-py-2, -.rz-pb-2 { - padding-bottom: 0.5rem !important; -} - -.rz-px-2, -.rz-pl-2 { - padding-left: 0.5rem !important; -} - -.rz-ps-2 { - padding-inline-start: 0.5rem !important; -} - -.rz-pe-2 { - padding-inline-end: 0.5rem !important; -} - -.rz-p-3 { - padding: 0.75rem !important; -} - -.rz-py-3, -.rz-pt-3 { - padding-top: 0.75rem !important; -} - -.rz-px-3, -.rz-pr-3 { - padding-right: 0.75rem !important; -} - -.rz-py-3, -.rz-pb-3 { - padding-bottom: 0.75rem !important; -} - -.rz-px-3, -.rz-pl-3 { - padding-left: 0.75rem !important; -} - -.rz-ps-3 { - padding-inline-start: 0.75rem !important; -} - -.rz-pe-3 { - padding-inline-end: 0.75rem !important; -} - -.rz-p-4 { - padding: 1rem !important; -} - -.rz-py-4, -.rz-pt-4 { - padding-top: 1rem !important; -} - -.rz-px-4, -.rz-pr-4 { - padding-right: 1rem !important; -} - -.rz-py-4, -.rz-pb-4 { - padding-bottom: 1rem !important; -} - -.rz-px-4, -.rz-pl-4 { - padding-left: 1rem !important; -} - -.rz-ps-4 { - padding-inline-start: 1rem !important; -} - -.rz-pe-4 { - padding-inline-end: 1rem !important; -} - -.rz-p-5 { - padding: 1.25rem !important; -} - -.rz-py-5, -.rz-pt-5 { - padding-top: 1.25rem !important; -} - -.rz-px-5, -.rz-pr-5 { - padding-right: 1.25rem !important; -} - -.rz-py-5, -.rz-pb-5 { - padding-bottom: 1.25rem !important; -} - -.rz-px-5, -.rz-pl-5 { - padding-left: 1.25rem !important; -} - -.rz-ps-5 { - padding-inline-start: 1.25rem !important; -} - -.rz-pe-5 { - padding-inline-end: 1.25rem !important; -} - -.rz-p-6 { - padding: 1.5rem !important; -} - -.rz-py-6, -.rz-pt-6 { - padding-top: 1.5rem !important; -} - -.rz-px-6, -.rz-pr-6 { - padding-right: 1.5rem !important; -} - -.rz-py-6, -.rz-pb-6 { - padding-bottom: 1.5rem !important; -} - -.rz-px-6, -.rz-pl-6 { - padding-left: 1.5rem !important; -} - -.rz-ps-6 { - padding-inline-start: 1.5rem !important; -} - -.rz-pe-6 { - padding-inline-end: 1.5rem !important; -} - -.rz-p-7 { - padding: 1.75rem !important; -} - -.rz-py-7, -.rz-pt-7 { - padding-top: 1.75rem !important; -} - -.rz-px-7, -.rz-pr-7 { - padding-right: 1.75rem !important; -} - -.rz-py-7, -.rz-pb-7 { - padding-bottom: 1.75rem !important; -} - -.rz-px-7, -.rz-pl-7 { - padding-left: 1.75rem !important; -} - -.rz-ps-7 { - padding-inline-start: 1.75rem !important; -} - -.rz-pe-7 { - padding-inline-end: 1.75rem !important; -} - -.rz-p-8 { - padding: 2rem !important; -} - -.rz-py-8, -.rz-pt-8 { - padding-top: 2rem !important; -} - -.rz-px-8, -.rz-pr-8 { - padding-right: 2rem !important; -} - -.rz-py-8, -.rz-pb-8 { - padding-bottom: 2rem !important; -} - -.rz-px-8, -.rz-pl-8 { - padding-left: 2rem !important; -} - -.rz-ps-8 { - padding-inline-start: 2rem !important; -} - -.rz-pe-8 { - padding-inline-end: 2rem !important; -} - -.rz-p-9 { - padding: 2.25rem !important; -} - -.rz-py-9, -.rz-pt-9 { - padding-top: 2.25rem !important; -} - -.rz-px-9, -.rz-pr-9 { - padding-right: 2.25rem !important; -} - -.rz-py-9, -.rz-pb-9 { - padding-bottom: 2.25rem !important; -} - -.rz-px-9, -.rz-pl-9 { - padding-left: 2.25rem !important; -} - -.rz-ps-9 { - padding-inline-start: 2.25rem !important; -} - -.rz-pe-9 { - padding-inline-end: 2.25rem !important; -} - -.rz-p-10 { - padding: 2.5rem !important; -} - -.rz-py-10, -.rz-pt-10 { - padding-top: 2.5rem !important; -} - -.rz-px-10, -.rz-pr-10 { - padding-right: 2.5rem !important; -} - -.rz-py-10, -.rz-pb-10 { - padding-bottom: 2.5rem !important; -} - -.rz-px-10, -.rz-pl-10 { - padding-left: 2.5rem !important; -} - -.rz-ps-10 { - padding-inline-start: 2.5rem !important; -} - -.rz-pe-10 { - padding-inline-end: 2.5rem !important; -} - -.rz-p-11 { - padding: 2.75rem !important; -} - -.rz-py-11, -.rz-pt-11 { - padding-top: 2.75rem !important; -} - -.rz-px-11, -.rz-pr-11 { - padding-right: 2.75rem !important; -} - -.rz-py-11, -.rz-pb-11 { - padding-bottom: 2.75rem !important; -} - -.rz-px-11, -.rz-pl-11 { - padding-left: 2.75rem !important; -} - -.rz-ps-11 { - padding-inline-start: 2.75rem !important; -} - -.rz-pe-11 { - padding-inline-end: 2.75rem !important; -} - -.rz-p-12 { - padding: 3rem !important; -} - -.rz-py-12, -.rz-pt-12 { - padding-top: 3rem !important; -} - -.rz-px-12, -.rz-pr-12 { - padding-right: 3rem !important; -} - -.rz-py-12, -.rz-pb-12 { - padding-bottom: 3rem !important; -} - -.rz-px-12, -.rz-pl-12 { - padding-left: 3rem !important; -} - -.rz-ps-12 { - padding-inline-start: 3rem !important; -} - -.rz-pe-12 { - padding-inline-end: 3rem !important; -} - -.rz-m-auto { - margin: auto !important; -} - -.rz-my-auto, -.rz-mt-auto { - margin-top: auto !important; -} - -.rz-mx-auto, -.rz-mr-auto { - margin-right: auto !important; -} - -.rz-my-auto, -.rz-mb-auto { - margin-bottom: auto !important; -} - -.rz-mx-auto, -.rz-ml-auto { - margin-left: auto !important; -} - -.rz-ms-auto { - margin-inline-start: auto !important; -} - -.rz-me-auto { - margin-inline-end: auto !important; +.rz-me-auto { + margin-inline-end: auto !important; } @media (min-width: 576px) { @@ -13124,7 +7634,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -13133,7 +7644,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -13142,7 +7654,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -13151,7 +7664,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -13160,230 +7674,120 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h6.rz-heading { - font-size: 0.75rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h1, -.h1 { - font-size: 2rem; - line-height: 1.1875em; - font-weight: 700; - letter-spacing: -0.04em; - color: var(--rz-text-title-color); - margin-bottom: 1rem; -} - -h2, -.h2 { - font-size: 1.5rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.03em; - color: var(--rz-text-title-color); - margin-bottom: 1rem; -} - -h3, -.h3 { - font-size: 1.125rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.75rem; -} - -h4, -.h4 { - font-size: 1rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h5, -.h5 { - font-size: 0.875rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h6, -.h6 { - font-size: 0.75rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h1.text-thin, -.h1.text-thin { - font-size: 3rem; - font-weight: 300; -} - -h2.text-thin, -.h2.text-thin { - font-size: 2rem; - font-weight: 300; -} - -h3.text-thin, -.h3.text-thin { - font-size: 1.25rem; - font-weight: 300; -} - -h4.text-thin, -.h4.text-thin { - font-size: 1rem; - font-weight: 300; -} - -h5.text-thin, -.h5.text-thin { - font-size: 0.875rem; - font-weight: 300; -} - -h6.text-thin, -.h6.text-thin { - font-size: 0.75rem; - font-weight: 300; + margin-block-start: 0; + margin-block-end: 0.5rem; } -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1, +.h1 { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2, +.h2 { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3, +.h3 { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4, +.h4 { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5, +.h5 { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; } .rz-text-display-h1 { @@ -13393,7 +7797,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -13403,7 +7808,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -13413,7 +7819,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -13423,7 +7830,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -13433,7 +7841,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -13443,7 +7852,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -13453,7 +7863,8 @@ h6.text-thin, font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -13463,7 +7874,8 @@ h6.text-thin, font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -13473,7 +7885,8 @@ h6.text-thin, font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -13483,7 +7896,8 @@ h6.text-thin, font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -13493,7 +7907,8 @@ h6.text-thin, font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -13503,7 +7918,8 @@ h6.text-thin, font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -13513,7 +7929,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -13523,7 +7940,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -13533,7 +7951,8 @@ h6.text-thin, font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -13543,7 +7962,8 @@ h6.text-thin, font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -13553,7 +7973,8 @@ h6.text-thin, font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -13563,7 +7984,8 @@ h6.text-thin, font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -13574,7 +7996,8 @@ h6.text-thin, letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -13808,26 +8231,24 @@ p { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } label { - margin-bottom: 0; -} - -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; + margin-block-start: 0; + margin-block-end: 0; } ::selection { @@ -13843,8 +8264,9 @@ label { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -13855,7 +8277,7 @@ label { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -13876,14 +8298,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -13908,6 +8322,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-700); +} + +.rzi-light { + color: var(--rz-base-700); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -13931,98 +8362,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -14030,18 +8435,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -14066,9 +8459,21 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); - color: var(--rz-text-contrast-color); + color: var(--rz-on-primary); } .rz-button.rz-primary.rz-shade-lighter { background-color: var(--rz-primary-lighter); @@ -14097,62 +8502,9 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-700); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); - color: var(--rz-text-contrast-color); + color: var(--rz-on-secondary); } .rz-button.rz-secondary.rz-shade-lighter { background-color: var(--rz-secondary-lighter); @@ -14183,7 +8535,7 @@ p-button[type] { .rz-button.rz-info { background-color: var(--rz-info); - color: var(--rz-text-contrast-color); + color: var(--rz-on-info); } .rz-button.rz-info.rz-shade-lighter { background-color: var(--rz-info-lighter); @@ -14214,7 +8566,7 @@ p-button[type] { .rz-button.rz-warning { background-color: var(--rz-warning); - color: var(--rz-text-contrast-color); + color: var(--rz-on-warning); } .rz-button.rz-warning.rz-shade-lighter { background-color: var(--rz-warning-lighter); @@ -14245,7 +8597,7 @@ p-button[type] { .rz-button.rz-error { background-color: var(--rz-danger); - color: var(--rz-text-contrast-color); + color: var(--rz-on-danger); } .rz-button.rz-error.rz-shade-lighter { background-color: var(--rz-error-lighter); @@ -14276,7 +8628,7 @@ p-button[type] { .rz-button.rz-danger { background-color: var(--rz-danger); - color: var(--rz-text-contrast-color); + color: var(--rz-on-danger); } .rz-button.rz-danger.rz-shade-lighter { background-color: var(--rz-danger-lighter); @@ -14307,7 +8659,7 @@ p-button[type] { .rz-button.rz-success { background-color: var(--rz-success); - color: var(--rz-text-contrast-color); + color: var(--rz-on-success); } .rz-button.rz-success.rz-shade-lighter { background-color: var(--rz-success-lighter); @@ -14336,6 +8688,59 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-variant-outlined.rz-primary { background-color: transparent; } @@ -14365,59 +8770,6 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - .rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } @@ -14592,76 +8944,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-text-contrast-color); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); -} -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); } -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -14822,15 +9179,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-text-contrast-color); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -14839,7 +9244,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -14849,51 +9254,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -14901,13 +9306,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -14916,7 +9321,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -14934,19 +9339,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: 10rem; - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 700; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -14988,15 +9382,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -15147,6 +9532,41 @@ p-button[type] { color: var(--rz-on-success-darker); } +.rz-badge-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + .rz-variant-outlined.rz-badge-primary { background-color: transparent; } @@ -15171,22 +9591,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} - -.rz-variant-outlined.rz-badge-dark { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} - .rz-variant-outlined.rz-badge-secondary { background-color: transparent; } @@ -15331,6 +9735,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-700); + color: var(--rz-base-700); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -15350,16 +9794,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -15474,20 +9908,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-700); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-700); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -15501,57 +9955,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: 0.875rem; - --rz-input-height: 2.25rem; - --rz-input-line-height: 1.429; - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-900); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-disabled-background-color: var(--rz-base-800); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -15562,26 +9991,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -15600,15 +10032,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-base-700); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: none; -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -15627,14 +10050,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: var(--rz-border-base-700); - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -15649,18 +10064,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-base-800); - --rz-sidebar-background-color: var(--rz-base-background-color); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -15669,7 +10076,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -15688,17 +10095,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-700); - --rz-card-shadow: var(--rz-shadow-2); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -15728,13 +10126,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -15748,32 +10139,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-secondary); - --rz-accordion-hover-color: var(--rz-secondary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -15792,16 +10159,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -15809,20 +10176,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -15832,7 +10200,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -15841,10 +10209,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -15852,34 +10216,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: var(--rz-base-700); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-secondary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -15930,33 +10286,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-700); - --rz-sidebar-toggle-color: var(--rz-text-color); - --rz-sidebar-toggle-background-color: var(--rz-base-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-secondary); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -15990,37 +10332,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: var(--rz-border-normal); - --rz-menu-border-radius: 2px; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-hover-background-color: var(--rz-secondary-light); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-secondary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-secondary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-secondary); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -16045,7 +10359,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16067,6 +10382,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -16075,7 +10391,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -16088,7 +10405,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -16118,13 +10436,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -16133,7 +10451,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -16145,7 +10464,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16169,16 +10489,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -16195,7 +10515,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -16255,65 +10576,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: var(--rz-text-contrast-color); - --rz-panel-menu-background-color: var(--rz-base-800); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.3); - --rz-panel-menu-hover-color: var(--rz-text-contrast-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-900); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-base-900); - --rz-panel-menu-item-background-color: var(--rz-base-900); - --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: inherit; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -16323,10 +10599,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -16338,11 +10615,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -16353,8 +10630,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -16363,7 +10640,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -16376,7 +10654,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -16385,20 +10663,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -16422,67 +10702,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-900); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-text-color); - --rz-profile-menu-item-hover-background-color: var(--rz-secondary); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -16503,19 +10768,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -16535,17 +10803,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -16553,26 +10815,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-700); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -16626,14 +10870,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -16643,7 +10889,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -16666,54 +10913,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: inherit; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-secondary); - --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); - --rz-checkbox-checked-color: var(--rz-on-secondary); - --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -16725,10 +10960,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -16747,10 +10984,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -16807,17 +11041,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-secondary); - --rz-switch-box-shadow: none; - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -16837,10 +11062,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -16862,8 +11087,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -16872,7 +11097,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -16883,36 +11108,24 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-checked-circle-background-color); transform: translateX(1.2rem); } - -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-secondary); - --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-radio-checked-background-color: var(--rz-secondary); - --rz-radio-checked-hover-background-color: var(--rz-secondary-light); - --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-base-background-color); - --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); - --rz-radio-circle-hover-background-color: var(--rz-base-100); - --rz-radio-icon-width: 0.5rem; - --rz-radio-icon-height: 0.5rem; - --rz-radio-checked-border: var(--rz-input-border); + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -16924,7 +11137,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -16947,10 +11161,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -17010,26 +11221,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-base-700); - --rz-fieldset-border-radius: 0; - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-tertiary-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-700); - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -17058,7 +11254,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -17076,8 +11273,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -17092,36 +11291,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); - --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); - --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); - --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); - --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); - --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-700); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -17148,15 +11317,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -17164,8 +11334,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -17200,7 +11370,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -17293,28 +11464,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -17331,10 +11506,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -17343,7 +11519,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -17365,24 +11542,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -17392,7 +11553,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -17435,7 +11597,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -17476,39 +11639,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -17518,9 +11671,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -17534,11 +11684,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -17547,36 +11697,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-900); - --rz-slider-border: var(--rz-border-normal); - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-secondary-dark); - --rz-slider-range-border: var(--rz-border-secondary-light); - --rz-slider-handle-width: 0.75rem; - --rz-slider-handle-height: 1.5rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-secondary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-secondary-light); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-700); - --rz-slider-disabled-range-border: var(--rz-border-base-700); - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-700); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -17603,11 +11725,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -17616,7 +11738,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -17641,19 +11763,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-secondary); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.3; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-secondary); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -17711,16 +11822,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -17741,17 +11844,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-secondary); - --rz-selectbar-selected-color: var(--rz-on-secondary); - --rz-selectbar-selected-border: var(--rz-border-secondary); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -17759,7 +11853,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -17767,13 +11861,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -17782,157 +11876,102 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; - display: inline-block; - background-color: var(--rz-selectbar-background-color); - color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -.rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; - display: inline-block; - background-color: var(--rz-selectbar-background-color); - color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-md.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -.rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-800); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); - --rz-datepicker-calendar-border: var(--rz-border-base-700); - --rz-datepicker-calendar-border-radius: 0; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-secondary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: none; - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-900); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-secondary); - --rz-timepicker-button-color: var(--rz-on-secondary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); } -.rz-calendar { +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -17940,9 +11979,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -17980,148 +12019,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -18152,47 +12218,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-secondary); - --rz-numeric-button-disabled-background-color: var(--rz-base-700); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-on-secondary); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -18200,9 +12253,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -18210,49 +12263,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); -} - -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -:root { - --rz-upload-button-bar-background-color: var(--rz-base-700); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-700); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary); - --rz-upload-choose-color: var(--rz-on-secondary); - --rz-upload-choose-hover-background-color: var(--rz-secondary); - --rz-upload-choose-hover-color: var(--rz-on-secondary); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -18339,101 +12373,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-secondary-lighter); - --rz-grid-hover-color: var(--rz-on-secondary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-secondary-dark); - --rz-grid-selected-color: var(--rz-on-secondary-dark); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: none; - --rz-grid-header-background-color: var(--rz-base-900); - --rz-grid-header-font-size: 0.75rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: uppercase; - --rz-grid-header-color: var(--rz-text-secondary-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-800); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-900); - --rz-grid-filter-background-color: var(--rz-base-800); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: var(--rz-border-normal); - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-base-900); - --rz-grid-clear-filter-button-background-color: var(--rz-secondary); - --rz-grid-clear-filter-button-color: var(--rz-on-secondary); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: var(--rz-border-normal); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-700); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-900); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-900); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-secondary-color); - --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -18457,10 +12396,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -18504,8 +12447,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -18513,8 +12456,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -18540,11 +12483,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -18564,13 +12508,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -18590,11 +12535,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -18602,11 +12547,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -18620,10 +12565,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -18639,7 +12584,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -18691,7 +12636,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -18701,11 +12646,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -18728,13 +12673,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -18755,21 +12704,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -18781,7 +12730,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -18827,7 +12776,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -18841,14 +12789,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -18950,10 +12898,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -18964,31 +12908,18 @@ a:focus-visible .rz-fieldset-toggler { line-height: calc(1.25rem - var(--rz-border-width) * 2); border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-start-end-radius: 0; - border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); - border-end-end-radius: 0; - } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { - text-indent: 2.25rem; - } -} -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } } - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -19018,31 +12949,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -19108,7 +13017,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -19118,18 +13027,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -19138,9 +13086,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -19182,16 +13132,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -19224,7 +13180,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -19275,26 +13231,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -19307,7 +13267,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -19327,7 +13287,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -19335,312 +13295,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: var(--rz-base-background-color); - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: var(--rz-border-normal); - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-700); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-700); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-base-900); - --rz-paginator-numeric-button-selected-color: var(--rz-text-contrast-color); - --rz-paginator-numeric-button-selected-border: var(--rz-border-base-900); - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-700); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-700); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-700); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-700); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-secondary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-background-color); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -19650,24 +13570,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-secondary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-secondary-light); - --rz-tree-node-hover-color: var(--rz-on-secondary-light); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -19684,12 +13588,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -19698,13 +13602,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -19714,15 +13624,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -19734,7 +13646,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -19753,25 +13665,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-700); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-datalist-item-border: none; - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -19790,13 +13688,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -19805,24 +13704,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -19844,7 +13736,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -19855,23 +13748,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -19881,17 +13774,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -19904,70 +13798,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-700); - --rz-scheduler-minor-border-color: var(--rz-base-700); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-900); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); - --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-secondary); - --rz-scheduler-view-selected-background-color: var(--rz-secondary); - --rz-scheduler-view-selected-border-color: var(--rz-secondary); - --rz-scheduler-header-background-color: var(--rz-base-700); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: none; - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); - --rz-scheduler-weekend-background-color: var(--rz-base-700); - --rz-scheduler-other-month-background-color: var(--rz-base-900); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -19983,7 +13815,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -19996,12 +13828,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -20011,27 +13843,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -20066,8 +13899,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -20127,16 +13960,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -20153,25 +13986,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -20185,7 +14031,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -20197,24 +14043,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -20224,11 +14070,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -20256,7 +14102,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -20272,7 +14118,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -20280,7 +14126,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -20329,7 +14175,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -20378,7 +14224,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -20424,8 +14270,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20434,15 +14280,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20475,8 +14321,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20485,15 +14331,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20523,35 +14369,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-tabs-border: none; - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-700); - --rz-tabs-tab-color: var(--rz-text-secondary-color); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-800); - --rz-tabs-tab-hover-color: var(--rz-text-color); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-text-color); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -20605,7 +14424,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -20648,7 +14468,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -20668,7 +14488,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -20703,6 +14523,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -20732,22 +14555,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-tabview-panel { padding: var(--rz-tabs-padding); } - -.rz-tabview-left-icon { - font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: 0.875rem; + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -20773,8 +14588,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20791,8 +14606,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20836,29 +14651,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-background-color); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 0.6875rem 1.25rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.875rem; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -20871,6 +14665,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -20885,37 +14680,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -20927,7 +14740,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -20941,7 +14754,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -20954,42 +14767,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -21022,161 +14808,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); -} - -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); -} - -.rz-dialog-side-titlebar-close { - float: right; -} -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); -} -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; -} -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); -} - -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } } - -.rz-growl { +.rz-notification { + box-sizing: border-box; position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-growl-item-container { +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-growl-item { +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); border-radius: var(--rz-notification-border-radius); box-shadow: var(--rz-notification-shadow); padding: var(--rz-notification-padding); } - -.rz-growl-message-success .rz-growl-item { +.rz-notification-success .rz-notification-item { color: var(--rz-notification-success-color); background-color: var(--rz-notification-success-background-color); } - -.rz-growl-message-warn .rz-growl-item { +.rz-notification-warn .rz-notification-item { color: var(--rz-notification-warning-color); background-color: var(--rz-notification-warning-background-color); } - -.rz-growl-message-error .rz-growl-item { +.rz-notification-error .rz-notification-item { color: var(--rz-notification-error-color); background-color: var(--rz-notification-error-background-color); } - -.rz-growl-message-info .rz-growl-item { +.rz-notification-info .rz-notification-item { color: var(--rz-notification-info-color); background-color: var(--rz-notification-info-background-color); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-icon-close { - float: right; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close:before { - content: "close"; + +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -21201,16 +14951,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: var(--rz-base-600); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } body:not(.rz-default-scrollbars)::-webkit-scrollbar, @@ -21259,14 +15001,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-700); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -21296,7 +15032,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -21308,12 +15044,15 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -21323,11 +15062,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -21337,24 +15071,11 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -21364,14 +15085,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -21383,18 +15098,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -21443,19 +15149,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-700); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-secondary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -21483,6 +15178,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -21543,6 +15239,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -21554,6 +15253,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -21574,6 +15276,26 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -21619,48 +15341,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -21724,6 +15404,27 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -21766,6 +15467,69 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-success); } +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + .rz-progressbar-circular-lg { width: 6rem; height: 6rem; @@ -21790,19 +15554,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { font-size: calc(var(--rz-progressbar-font-size) * 0.375); } -:root { - --rz-chart-axis-color: var(--rz-base-600); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); -} - .rz-chart { + box-sizing: border-box; position: relative; height: 300px; } @@ -22574,6 +16327,10 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -22697,6 +16454,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -22723,24 +16481,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary); - --rz-editor-button-selected-color: var(--rz-on-secondary); - --rz-editor-separator-background-color: var(--rz-base-700); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -22925,30 +16667,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -23025,7 +16743,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -23097,7 +16815,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -23110,7 +16828,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -23125,6 +16843,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -23136,27 +16855,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -23172,15 +16888,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -23192,15 +16906,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-secondary); - --rz-splitter-bar-background-color: var(--rz-base-700); - --rz-splitter-bar-background-color-active: var(--rz-secondary); - --rz-splitter-bar-hover-opacity: 0.8; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -23222,7 +16929,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23237,7 +16944,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23324,11 +17031,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -23362,8 +17086,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -23371,8 +17105,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -23386,22 +17120,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: 4px; - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -24230,30 +17950,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -24272,16 +17997,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -24657,279 +18379,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -25274,36 +18996,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-700); - --rz-form-field-filled-hover-background-color: var(--rz-base-700); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: none; - --rz-form-field-focus-shadow: none; - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -25313,11 +19005,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -25326,12 +19019,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -25359,20 +19052,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -25417,33 +19112,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -25460,16 +19158,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -25477,33 +19175,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -25520,27 +19218,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-600); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-600); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -26085,23 +19771,1579 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { width: 100%; height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #63737a; + --rz-base-50: #ffffff; + --rz-base-100: #f6f7fa; + --rz-base-200: #e9edf0; + --rz-base-300: #dadfe2; + --rz-base-400: #a8b4b8; + --rz-base-500: #7b8a8e; + --rz-base-600: #63737a; + --rz-base-700: #45565e; + --rz-base-800: #38474e; + --rz-base-900: #28363c; + --rz-base-light: #a8b4b8; + --rz-base-lighter: #ffffff; + --rz-base-dark: #45565e; + --rz-base-darker: #28363c; + --rz-primary: #ff6d41; + --rz-primary-light: #ff7f58; + --rz-primary-lighter: rgba(255, 109, 65, 0.16); + --rz-primary-dark: #eb643c; + --rz-primary-darker: #bf5231; + --rz-secondary: #3b9fd5; + --rz-secondary-light: #53abda; + --rz-secondary-lighter: rgba(59, 159, 213, 0.2); + --rz-secondary-dark: #3692c4; + --rz-secondary-darker: #2c77a0; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #ffffff; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #ff6d41; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #3b9fd5; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-100); + --rz-text-secondary-color: var(--rz-base-300); + --rz-text-tertiary-color: var(--rz-base-400); + --rz-text-disabled-color: var(--rz-base-600); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-700); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-600); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-700); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-700); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-datalist-item-border: none; + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-800); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-700); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-900); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-700); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-700); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-700); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-700); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-700); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-700); + --rz-form-field-filled-hover-background-color: var(--rz-base-700); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-900); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-secondary-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-800); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-900); + --rz-grid-filter-background-color: var(--rz-base-800); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-800); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-700); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-900); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-700); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-900); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-800); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-700); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-700); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-background-color); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-700); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-700); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-900); + --rz-pager-numeric-button-selected-color: var(--rz-text-contrast-color); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-900); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-700); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-700); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-700); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-900); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-700); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-700); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-900); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-700); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: none; + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-900); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-base-600); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-700); + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: var(--rz-base-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-900); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-dark); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-700); + --rz-slider-disabled-range-border: var(--rz-border-base-700); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-700); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-700); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 0.8; + /* Stack/Grid Layout */ --rz-gap: 1rem; -} - -.rz-picklist-source-wrapper, -.rz-picklist-target-wrapper { - flex: 1; - --rz-gap: 0.5rem; - overflow: hidden; -} -.rz-picklist-source-wrapper .rz-listbox, -.rz-picklist-target-wrapper .rz-listbox { - width: 100%; - height: 100%; -} - -.rz-picklist-buttons.rz-flex-row .rzi { - transform: rotate(90deg); + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-700); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: none; + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-700); + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-800); + --rz-tabs-tab-hover-color: var(--rz-text-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-600); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-600); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-700); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/default-base.css b/_content/Radzen.Blazor/css/default-base.css index 4fe90ef..a911383 100755 --- a/_content/Radzen.Blazor/css/default-base.css +++ b/_content/Radzen.Blazor/css/default-base.css @@ -1,630 +1,174 @@ @charset "UTF-8"; @font-face { - font-family: "Material Icons"; + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); + font-weight: 100 700; } @font-face { font-family: "Source Sans Pro"; - font-weight: 200; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + font-weight: 200 900; } @font-face { font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); +*, +*::before, +*::after { + box-sizing: inherit; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-text-title-color { + color: var(--rz-base-900) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-text-color { + color: var(--rz-base-800) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-text-contrast-color { + color: var(--rz-white) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f6f7fa; - --rz-base-200: #e9edf0; - --rz-base-300: #dadfe2; - --rz-base-400: #c1c9cb; - --rz-base-500: #95a4a8; - --rz-base-600: #77858b; - --rz-base-700: #545e61; - --rz-base-800: #3a474d; - --rz-base-900: #28363c; - --rz-primary: #ff6d41; - --rz-primary-light: #ff7f58; - --rz-primary-lighter: rgba(255, 109, 65, 0.16); - --rz-primary-dark: #eb643c; - --rz-primary-darker: #bf5231; - --rz-secondary: #35a0d7; - --rz-secondary-light: #4dabdc; - --rz-secondary-lighter: rgba(53, 160, 215, 0.2); - --rz-secondary-dark: #3193c6; - --rz-secondary-darker: #2878a1; - --rz-info: #2cc8c8; - --rz-info-light: #4ed1d1; - --rz-info-lighter: rgba(44, 200, 200, 0.2); - --rz-info-dark: #25a8a8; - --rz-info-darker: #219696; - --rz-success: #5dbf74; - --rz-success-light: #77c98a; - --rz-success-lighter: rgba(93, 191, 116, 0.16); - --rz-success-dark: #4ea061; - --rz-success-darker: #468f57; - --rz-warning: #fac152; - --rz-warning-light: #fbcb6e; - --rz-warning-lighter: rgba(250, 193, 82, 0.2); - --rz-warning-dark: #d2a245; - --rz-warning-darker: #bc913e; - --rz-danger: #f9777f; - --rz-danger-light: #fa8d93; - --rz-danger-lighter: rgba(249, 119, 127, 0.2); - --rz-danger-dark: #d1646b; - --rz-danger-darker: #bb595f; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #ff6d41; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #35a0d7; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2cc8c8; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #5dbf74; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #fac152; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f9777f; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #0479cc; - --rz-series-2: #68d5c8; - --rz-series-3: #ff6d41; - --rz-series-4: #cb6992; - --rz-series-5: #e6c54f; - --rz-series-6: #f9777f; - --rz-series-7: #5dbf74; - --rz-series-8: #4db9f2; - --rz-series-9: #06a9e0; - --rz-series-10: #92e6de; - --rz-series-11: #ff995b; - --rz-series-12: #e093be; - --rz-series-13: #f0dc6f; - --rz-series-14: #fba7b2; - --rz-series-15: #82d9a2; - --rz-series-16: #6cd5f7; - --rz-series-17: #0063c2; - --rz-series-18: #50cdbe; - --rz-series-19: #ff5628; - --rz-series-20: #c1527f; - --rz-series-21: #e1ba36; - --rz-series-22: #f8616a; - --rz-series-23: #45b35e; - --rz-series-24: #34acef; + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-secondary); +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); -} - -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-display-none { + display: none !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-display-block { + display: block !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-display-inline { + display: inline !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-display-inline-block { + display: inline-block !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-display-flex { + display: flex !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-display-inline-flex { + display: inline-flex !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-display-grid { + display: grid !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); -} - -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; -} - -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; -} - -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; -} - -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; -} - -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; -} - -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; -} - -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; -} - -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; -} - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; -} - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; -} - -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; -} - -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; -} - -.rz-display-none { - display: none !important; -} - -.rz-display-block { - display: block !important; -} - -.rz-display-inline { - display: inline !important; -} - -.rz-display-inline-block { - display: inline-block !important; -} - -.rz-display-flex { - display: flex !important; -} - -.rz-display-inline-flex { - display: inline-flex !important; -} - -.rz-display-grid { - display: grid !important; -} - -.rz-display-inline-grid { - display: inline-grid !important; +.rz-display-inline-grid { + display: inline-grid !important; } @media (min-width: 576px) { @@ -867,6 +411,10 @@ $rz-shadow-10: none !default; */ color: var(--rz-black) !important; } +.rz-color-base { + color: var(--rz-base) !important; +} + .rz-color-base-50 { color: var(--rz-base-50) !important; } @@ -907,6 +455,22 @@ $rz-shadow-10: none !default; */ color: var(--rz-base-900) !important; } +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + .rz-color-primary { color: var(--rz-primary) !important; } @@ -1027,6 +591,26 @@ $rz-shadow-10: none !default; */ color: var(--rz-danger-darker) !important; } +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + .rz-color-on-primary { color: var(--rz-on-primary) !important; } @@ -1251,6 +835,10 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-black) !important; } +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + .rz-background-color-base-50 { background-color: var(--rz-base-50) !important; } @@ -1291,6 +879,22 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-base-900) !important; } +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + .rz-background-color-primary { background-color: var(--rz-primary) !important; } @@ -1411,6 +1015,26 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-danger-darker) !important; } +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + .rz-background-color-on-primary { background-color: var(--rz-on-primary) !important; } @@ -1635,6 +1259,10 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + .rz-border-color-base-50 { border-color: var(--rz-base-50) !important; } @@ -1675,6 +1303,22 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + .rz-border-color-primary { border-color: var(--rz-primary) !important; } @@ -1795,6 +1439,26 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-color-on-primary { border-color: var(--rz-on-primary) !important; } @@ -2023,6 +1687,12 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + .rz-border-base-50 { border-width: var(--rz-border-width); border-style: solid; @@ -2083,6 +1753,30 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + .rz-border-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2263,6 +1957,36 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-on-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2606,6 +2330,10 @@ $rz-shadow-10: none !default; */ background-size: 100%; } +body { + margin: 0; +} + .rz-m-0 { margin: 0 !important; } @@ -7902,7 +7630,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -7911,7 +7640,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -7920,7 +7650,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -7929,7 +7660,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -7938,7 +7670,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -7947,125 +7680,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } .rz-text-display-h1 { @@ -8075,7 +7691,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -8085,7 +7702,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -8095,7 +7713,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -8105,7 +7724,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -8115,7 +7735,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -8125,7 +7746,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -8135,7 +7757,8 @@ h6.rz-heading { font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -8145,7 +7768,8 @@ h6.rz-heading { font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -8155,7 +7779,8 @@ h6.rz-heading { font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -8165,7 +7790,8 @@ h6.rz-heading { font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -8175,7 +7801,8 @@ h6.rz-heading { font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -8185,7 +7812,8 @@ h6.rz-heading { font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -8195,7 +7823,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -8205,7 +7834,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -8215,7 +7845,8 @@ h6.rz-heading { font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -8225,7 +7856,8 @@ h6.rz-heading { font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -8235,7 +7867,8 @@ h6.rz-heading { font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -8245,7 +7878,8 @@ h6.rz-heading { font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -8256,7 +7890,8 @@ h6.rz-heading { letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -8475,24 +8110,21 @@ h6.rz-heading { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; -} - .rz-layout ::selection { background-color: var(--rz-text-selection-background-color); color: var(--rz-text-selection-color); @@ -8501,8 +8133,9 @@ h6.rz-heading { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -8513,7 +8146,7 @@ h6.rz-heading { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -8534,14 +8167,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -8566,6 +8191,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -8589,98 +8231,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -8688,18 +8304,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -8724,6 +8328,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -8755,59 +8371,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -8994,6 +8557,59 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-variant-outlined.rz-primary { background-color: transparent; } @@ -9023,73 +8639,20 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { +.rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); } -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); } - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-secondary { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); - color: var(--rz-secondary-light); -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); - color: var(--rz-secondary-light); -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); - color: var(--rz-secondary); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); } .rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); @@ -9250,76 +8813,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); -} -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); } -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -9480,15 +9048,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -9497,7 +9113,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -9507,51 +9123,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -9559,13 +9175,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -9574,7 +9190,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -9592,19 +9208,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 600; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -9646,15 +9251,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -9805,44 +9401,63 @@ p-button[type] { color: var(--rz-on-success-darker); } -.rz-variant-outlined.rz-badge-primary { - background-color: transparent; +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); - color: var(--rz-primary-lighter); +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); } -.rz-variant-outlined.rz-badge-primary.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); - color: var(--rz-primary-light); +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); } -.rz-variant-outlined.rz-badge-primary.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); - color: var(--rz-primary); +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); } -.rz-variant-outlined.rz-badge-primary.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); - color: var(--rz-primary-dark); +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); } -.rz-variant-outlined.rz-badge-primary.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); - color: var(--rz-primary-darker); +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); } -.rz-variant-outlined.rz-badge-dark { +.rz-variant-outlined.rz-badge-primary { background-color: transparent; } -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); } .rz-variant-outlined.rz-badge-secondary { @@ -9989,6 +9604,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -10008,16 +9663,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -10132,20 +9777,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -10159,57 +9824,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: var(--rz-body-font-size); - --rz-input-height: 2.25rem; - --rz-input-line-height: var(--rz-body-line-height); - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-disabled-background-color: var(--rz-base-100); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: var(--rz-transition-all), width 0, height 0; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -10220,26 +9860,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -10258,15 +9901,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-base-200); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: none; -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -10285,14 +9919,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: var(--rz-border-base-200); - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -10307,18 +9933,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-normal); - --rz-sidebar-background-color: var(--rz-base-800); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -10327,7 +9945,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -10346,17 +9964,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-100); - --rz-card-shadow: var(--rz-shadow-2); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -10386,13 +9995,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -10406,32 +10008,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-secondary); - --rz-accordion-hover-color: var(--rz-secondary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -10450,16 +10028,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -10467,20 +10045,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -10490,7 +10069,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -10499,10 +10078,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -10510,34 +10085,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: var(--rz-base-200); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-secondary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -10588,33 +10155,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-200); - --rz-sidebar-toggle-color: var(--rz-base-900); - --rz-sidebar-toggle-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-secondary); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -10648,37 +10201,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: var(--rz-border-normal); - --rz-menu-border-radius: 2px; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-hover-background-color: var(--rz-secondary-light); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-secondary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-secondary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-secondary); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -10703,7 +10228,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10725,6 +10251,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -10733,7 +10260,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -10746,7 +10274,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -10776,13 +10305,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -10791,7 +10320,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -10803,7 +10333,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10827,16 +10358,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -10853,7 +10384,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -10913,65 +10445,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: var(--rz-text-contrast-color); - --rz-panel-menu-background-color: var(--rz-base-800); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.3); - --rz-panel-menu-hover-color: var(--rz-text-contrast-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-900); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-base-900); - --rz-panel-menu-item-background-color: var(--rz-base-900); - --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: inherit; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -10981,10 +10468,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -10996,11 +10484,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -11011,8 +10499,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -11021,7 +10509,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -11034,7 +10523,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -11043,20 +10532,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -11080,67 +10571,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-200); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-secondary); - --rz-profile-menu-item-hover-background-color: var(--rz-secondary); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -11161,19 +10637,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -11193,17 +10672,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -11211,26 +10684,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-200); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -11284,14 +10739,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -11301,7 +10758,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -11324,54 +10782,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: inherit; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-secondary); - --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); - --rz-checkbox-checked-color: var(--rz-on-secondary); - --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -11383,10 +10829,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -11405,10 +10853,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11465,17 +10910,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-secondary); - --rz-switch-box-shadow: none; - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -11495,10 +10931,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -11520,8 +10956,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -11530,7 +10966,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -11542,35 +10978,23 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { transform: translateX(1.2rem); } -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-secondary); - --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-radio-checked-background-color: var(--rz-secondary); - --rz-radio-checked-hover-background-color: var(--rz-secondary-light); - --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-base-background-color); - --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); - --rz-radio-circle-hover-background-color: var(--rz-base-100); - --rz-radio-icon-width: 0.5rem; - --rz-radio-icon-height: 0.5rem; - --rz-radio-checked-border: var(--rz-input-border); +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -11582,7 +11006,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -11605,10 +11030,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11668,26 +11090,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-normal); - --rz-fieldset-border-radius: 0; - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-tertiary-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-200); - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -11716,7 +11123,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -11734,8 +11142,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -11750,36 +11160,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); - --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); - --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); - --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); - --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); - --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-100); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -11806,15 +11186,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -11822,8 +11203,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -11858,7 +11239,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -11951,28 +11333,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -11989,10 +11375,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -12001,7 +11388,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -12023,24 +11411,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -12050,7 +11422,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -12093,7 +11466,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -12134,39 +11508,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -12176,9 +11540,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -12192,11 +11553,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -12205,36 +11566,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-background-color); - --rz-slider-border: var(--rz-border-normal); - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-secondary-lighter); - --rz-slider-range-border: var(--rz-border-secondary-light); - --rz-slider-handle-width: 0.75rem; - --rz-slider-handle-height: 1.5rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-secondary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-secondary-light); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-100); - --rz-slider-disabled-range-border: var(--rz-border-normal); - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-300); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -12261,11 +11594,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -12274,7 +11607,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -12299,19 +11632,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-secondary); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.3; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-secondary); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -12369,16 +11691,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -12399,17 +11713,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-secondary); - --rz-selectbar-selected-color: var(--rz-on-secondary); - --rz-selectbar-selected-border: var(--rz-border-secondary); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -12417,7 +11722,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12425,13 +11730,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12440,7 +11745,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12448,13 +11753,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12463,7 +11768,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12471,13 +11776,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12486,7 +11791,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12494,13 +11799,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12508,89 +11813,34 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-selectbar-selected-border); } -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-200); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); - --rz-datepicker-calendar-border: var(--rz-border-base-100); - --rz-datepicker-calendar-border-radius: 0; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-secondary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: none; - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-200); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-secondary); - --rz-timepicker-button-color: var(--rz-on-secondary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; -} - -.rz-calendar { +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -12598,9 +11848,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -12638,148 +11888,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -12810,47 +12087,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-secondary); - --rz-numeric-button-disabled-background-color: var(--rz-base-300); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-on-secondary); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -12858,9 +12122,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -12868,49 +12132,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); -} - -:root { - --rz-upload-button-bar-background-color: var(--rz-base-200); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-300); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary); - --rz-upload-choose-color: var(--rz-on-secondary); - --rz-upload-choose-hover-background-color: var(--rz-secondary); - --rz-upload-choose-hover-color: var(--rz-on-secondary); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -12997,101 +12242,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-secondary-lighter); - --rz-grid-hover-color: var(--rz-on-secondary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-secondary-dark); - --rz-grid-selected-color: var(--rz-on-secondary-dark); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: none; - --rz-grid-header-background-color: var(--rz-base-200); - --rz-grid-header-font-size: 0.75rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: uppercase; - --rz-grid-header-color: var(--rz-text-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-300); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-200); - --rz-grid-filter-background-color: var(--rz-base-100); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: var(--rz-border-normal); - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-base-200); - --rz-grid-clear-filter-button-background-color: var(--rz-secondary); - --rz-grid-clear-filter-button-color: var(--rz-on-secondary); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: var(--rz-border-normal); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-100); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-background-color); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-200); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-color); - --rz-column-drag-handle-hover-color: var(--rz-text-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -13115,10 +12265,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -13162,8 +12316,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -13171,8 +12325,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -13198,11 +12352,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -13222,13 +12377,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -13248,11 +12404,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -13260,11 +12416,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -13278,10 +12434,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -13297,7 +12453,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -13349,7 +12505,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -13359,11 +12515,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -13386,13 +12542,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -13413,21 +12573,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -13439,7 +12599,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -13485,7 +12645,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -13499,14 +12658,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -13608,10 +12767,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -13625,28 +12780,15 @@ a:focus-visible .rz-fieldset-toggler { border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-end-end-radius: 0; } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { text-indent: 2.25rem; } } -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); -} - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -13676,31 +12818,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -13766,7 +12886,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -13776,18 +12896,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -13796,9 +12955,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -13840,16 +13001,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -13882,7 +13049,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -13933,26 +13100,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -13965,7 +13136,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -13985,7 +13156,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -13993,312 +13164,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: var(--rz-base-background-color); - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: var(--rz-border-normal); - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-base-background-color); - --rz-paginator-numeric-button-selected-color: var(--rz-primary); - --rz-paginator-numeric-button-selected-border: var(--rz-border-base-200); - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-200); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-200); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-200); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-200); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-secondary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-100); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -14308,24 +13439,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-secondary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-secondary-light); - --rz-tree-node-hover-color: var(--rz-on-secondary-light); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -14342,12 +13457,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -14356,13 +13471,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -14372,15 +13493,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -14392,7 +13515,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -14411,25 +13534,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-200); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-item-border: var(--rz-border-base-200); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -14448,13 +13557,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -14463,24 +13573,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -14502,7 +13605,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -14513,23 +13617,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -14539,17 +13643,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -14562,70 +13667,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-300); - --rz-scheduler-minor-border-color: var(--rz-base-200); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-200); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); - --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-secondary); - --rz-scheduler-view-selected-background-color: var(--rz-secondary); - --rz-scheduler-view-selected-border-color: var(--rz-secondary); - --rz-scheduler-header-background-color: var(--rz-base-200); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: var(--rz-border-normal); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -14641,7 +13684,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -14654,12 +13697,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -14669,27 +13712,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -14724,8 +13768,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -14785,16 +13829,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -14811,25 +13855,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -14843,7 +13900,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -14855,24 +13912,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -14882,11 +13939,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -14914,7 +13971,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -14930,7 +13987,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -14938,7 +13995,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -14987,7 +14044,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -15036,7 +14093,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -15082,8 +14139,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15092,15 +14149,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15133,8 +14190,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15143,15 +14200,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15181,35 +14238,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-tabs-border: var(--rz-border-base-200); - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-200); - --rz-tabs-tab-color: var(--rz-secondary); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); - --rz-tabs-tab-hover-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -15263,7 +14293,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -15306,7 +14337,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -15326,7 +14357,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -15361,6 +14392,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -15391,21 +14425,13 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-tabs-padding); } -.rz-tabview-left-icon { +.rz-tabview-icon { font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: var(--rz-body-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -15431,8 +14457,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15449,8 +14475,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15494,29 +14520,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-100); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 0.6875rem 1.25rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.875rem; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -15529,6 +14534,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -15543,37 +14549,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -15585,7 +14609,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -15599,7 +14623,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -15612,42 +14636,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -15680,161 +14677,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-dialog-side-titlebar-close { - float: right; +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); } -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); } -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); } -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); } -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); -} - -.rz-growl { - position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; -} - -.rz-growl-item-container { - background-color: var(--rz-notification-container-background-color); -} - -.rz-growl-item { - border-radius: var(--rz-notification-border-radius); - box-shadow: var(--rz-notification-shadow); - padding: var(--rz-notification-padding); -} - -.rz-growl-message-success .rz-growl-item { - color: var(--rz-notification-success-color); - background-color: var(--rz-notification-success-background-color); -} - -.rz-growl-message-warn .rz-growl-item { - color: var(--rz-notification-warning-color); - background-color: var(--rz-notification-warning-background-color); -} - -.rz-growl-message-error .rz-growl-item { - color: var(--rz-notification-error-color); - background-color: var(--rz-notification-error-background-color); -} - -.rz-growl-message-info .rz-growl-item { - color: var(--rz-notification-info-color); - background-color: var(--rz-notification-info-background-color); -} - -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close { - float: right; -} -.rz-growl-icon-close:before { - content: "close"; +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1.5rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -15859,16 +14820,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: var(--rz-secondary); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } .rz-layout::-webkit-scrollbar, @@ -15897,14 +14850,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-100); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -15934,7 +14881,7 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -15946,12 +14893,15 @@ a:focus-visible .rz-fieldset-toggler { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -15961,11 +14911,6 @@ a:focus-visible .rz-fieldset-toggler { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -15975,24 +14920,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -16002,14 +14934,8 @@ a:focus-visible .rz-fieldset-toggler { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -16021,18 +14947,9 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -16081,19 +14998,8 @@ a:focus-visible .rz-fieldset-toggler { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-200); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-secondary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -16121,6 +15027,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -16181,6 +15088,9 @@ a:focus-visible .rz-fieldset-toggler { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -16192,6 +15102,9 @@ a:focus-visible .rz-fieldset-toggler { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -16212,6 +15125,26 @@ a:focus-visible .rz-fieldset-toggler { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -16257,48 +15190,6 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -16362,6 +15253,27 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -16404,57 +15316,109 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-success); } -.rz-progressbar-circular-lg { - width: 6rem; - height: 6rem; - font-size: calc(var(--rz-progressbar-font-size) * 1.25); +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); } -.rz-progressbar-circular-md { - width: 3rem; - height: 3rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.75); +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); } - -.rz-progressbar-circular-sm { - width: 2rem; - height: 2rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.5); +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); } -.rz-progressbar-circular-xs { - width: 1.25rem; - height: 1.25rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.375); +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); } - -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); } - -.rz-chart { - position: relative; - height: 300px; +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); } -.rz-area-series { - fill-opacity: 0.8; +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); } -.rz-scheme-pastel .rz-series-0 { - fill: var(--rz-series-1); - stroke: var(--rz-series-1); +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); } -.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { - border: 1px solid var(--rz-series-1); +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); } .rz-scheme-pastel .rz-series-item-0 { fill: var(--rz-series-1); @@ -17212,6 +16176,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -17335,6 +16303,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -17361,24 +16330,8 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary); - --rz-editor-button-selected-color: var(--rz-on-secondary); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -17563,30 +16516,6 @@ a:focus-visible .rz-fieldset-toggler { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -17663,7 +16592,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -17735,7 +16664,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -17748,7 +16677,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -17763,6 +16692,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -17774,27 +16704,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -17810,15 +16737,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -17830,15 +16755,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-secondary); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-secondary); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -17860,7 +16778,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17875,7 +16793,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17962,11 +16880,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -18000,8 +16935,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -18009,8 +16954,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -18024,22 +16969,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: var(--rz-border-radius); - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -18868,30 +17799,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -18910,16 +17846,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -19295,279 +18228,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -19912,36 +18845,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-100); - --rz-form-field-filled-hover-background-color: var(--rz-base-200); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: none; - --rz-form-field-focus-shadow: none; - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -19951,11 +18854,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -19964,12 +18868,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -19997,20 +18901,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -20055,33 +18961,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -20098,16 +19007,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -20115,33 +19024,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -20158,27 +19067,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -20723,6 +19620,7 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; width: 100%; height: 100%; --rz-gap: 1rem; @@ -20742,4 +19640,1559 @@ button.rz-colorpicker-trigger .rzi:before { .rz-picklist-buttons.rz-flex-row .rzi { transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #dadfe2; + --rz-base-50: #ffffff; + --rz-base-100: #f6f7fa; + --rz-base-200: #e9edf0; + --rz-base-300: #dadfe2; + --rz-base-400: #c1c9cb; + --rz-base-500: #95a4a8; + --rz-base-600: #77858b; + --rz-base-700: #545e61; + --rz-base-800: #3a474d; + --rz-base-900: #28363c; + --rz-base-light: #e9edf0; + --rz-base-lighter: #f6f7fa; + --rz-base-dark: #77858b; + --rz-base-darker: #28363c; + --rz-primary: #ff6d41; + --rz-primary-light: #ff7f58; + --rz-primary-lighter: rgba(255, 109, 65, 0.16); + --rz-primary-dark: #eb643c; + --rz-primary-darker: #bf5231; + --rz-secondary: #35a0d7; + --rz-secondary-light: #4dabdc; + --rz-secondary-lighter: rgba(53, 160, 215, 0.2); + --rz-secondary-dark: #3193c6; + --rz-secondary-darker: #2878a1; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #28363c; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #ff6d41; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #35a0d7; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #0479cc; + --rz-series-2: #68d5c8; + --rz-series-3: #ff6d41; + --rz-series-4: #cb6992; + --rz-series-5: #e6c54f; + --rz-series-6: #f9777f; + --rz-series-7: #5dbf74; + --rz-series-8: #4db9f2; + --rz-series-9: #06a9e0; + --rz-series-10: #92e6de; + --rz-series-11: #ff995b; + --rz-series-12: #e093be; + --rz-series-13: #f0dc6f; + --rz-series-14: #fba7b2; + --rz-series-15: #82d9a2; + --rz-series-16: #6cd5f7; + --rz-series-17: #0063c2; + --rz-series-18: #50cdbe; + --rz-series-19: #ff5628; + --rz-series-20: #c1527f; + --rz-series-21: #e1ba36; + --rz-series-22: #f8616a; + --rz-series-23: #45b35e; + --rz-series-24: #34acef; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-100); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-200); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-item-border: var(--rz-border-base-200); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-200); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-100); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-200); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-100); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-100); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-normal); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-200); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-200); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-100); + --rz-form-field-filled-hover-background-color: var(--rz-base-200); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-200); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-300); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-200); + --rz-grid-filter-background-color: var(--rz-base-100); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-100); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-100); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-background-color); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-200); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-color); + --rz-column-drag-handle-hover-color: var(--rz-text-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-200); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-100); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-100); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-300); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-100); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-200); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-200); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-background-color); + --rz-pager-numeric-button-selected-color: var(--rz-primary); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-200); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-200); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-200); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-200); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-secondary); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-200); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-300); + --rz-scheduler-minor-border-color: var(--rz-base-200); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-200); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-200); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-secondary); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-200); + --rz-sidebar-toggle-color: var(--rz-base-900); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-normal); + --rz-sidebar-background-color: var(--rz-base-800); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-lighter); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-100); + --rz-slider-disabled-range-border: var(--rz-border-normal); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-300); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-200); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: var(--rz-border-base-200); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-200); + --rz-tabs-tab-color: var(--rz-secondary); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); + --rz-tabs-tab-hover-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-200); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/default-wcag.css b/_content/Radzen.Blazor/css/default-wcag.css index e27ca6e..0e64ef8 100755 --- a/_content/Radzen.Blazor/css/default-wcag.css +++ b/_content/Radzen.Blazor/css/default-wcag.css @@ -1,6 +1,8 @@ -:root { +:root, +.rz-default { --rz-white: #ffffff; --rz-black: #000000; + --rz-base: #dadfe2; --rz-base-50: #ffffff; --rz-base-100: #f6f7fa; --rz-base-200: #e9edf0; @@ -11,6 +13,10 @@ --rz-base-700: #545e61; --rz-base-800: #3a474d; --rz-base-900: #28363c; + --rz-base-light: #e9edf0; + --rz-base-lighter: #ffffff; + --rz-base-dark: #5e696e; + --rz-base-darker: #28363c; --rz-primary: #c2350a; --rz-primary-light: #c94d27; --rz-primary-lighter: rgba(194, 53, 10, 0.16); @@ -41,6 +47,11 @@ --rz-danger-lighter: rgba(178, 36, 46, 0.2); --rz-danger-dark: #961e27; --rz-danger-darker: #861b23; + --rz-on-base: #28363c; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: #c2350a; diff --git a/_content/Radzen.Blazor/css/default.css b/_content/Radzen.Blazor/css/default.css index 7c08409..05de65c 100755 --- a/_content/Radzen.Blazor/css/default.css +++ b/_content/Radzen.Blazor/css/default.css @@ -1,8755 +1,3265 @@ @charset "UTF-8"; -:root { - --blue: #007bff; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; - --red: #dc3545; - --orange: #fd7e14; - --yellow: #ffc107; - --green: #28a745; - --teal: #20c997; - --cyan: #17a2b8; - --white: #fff; - --gray: #6c757d; - --gray-dark: #343a40; - --primary: #ff6d41; - --secondary: #35a0d7; - --success: #5dbf74; - --info: #2cc8c8; - --warning: #fac152; - --danger: #f9777f; - --light: #e9edf0; - --dark: #343a40; - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; - } - a:not(.btn) { - text-decoration: underline; - } - abbr[title]::after { - content: " (" attr(title) ")"; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #adb5bd; - page-break-inside: avoid; - } - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } - @page { - size: a3; - } - body { - min-width: 992px !important; - } - .container { - min-width: 992px !important; - } - .navbar { - display: none; - } - .badge { - border: 1px solid #000; - } - .table { - border-collapse: collapse !important; - } - .table td, - .table th { - background-color: #fff !important; - } - .table-bordered th, - .table-bordered td { - border: 1px solid #dee2e6 !important; - } - .table-dark { - color: inherit; - } - .table-dark th, - .table-dark td, - .table-dark thead th, - .table-dark tbody + tbody { - border-color: #dee2e6; - } - .table .thead-dark th { - color: inherit; - border-color: #dee2e6; - } -} -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -} - -body { - margin: 0; - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #3a474d; - text-align: left; - background-color: #f6f7fa; -} - -[tabindex="-1"]:focus { - outline: 0 !important; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title], -abbr[data-original-title] { - text-decoration: underline; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; - text-decoration-skip-ink: none; -} - -address { - margin-bottom: 1rem; +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: 0.5rem; - margin-left: 0; + font-weight: 100 700; } - -blockquote { - margin: 0 0 1rem; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; } - -b, -strong { - font-weight: bolder; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } - -small { - font-size: 80%; +*, +*::before, +*::after { + box-sizing: inherit; } -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; +.rz-text-title-color { + color: var(--rz-base-900) !important; } -sub { - bottom: -0.25em; +.rz-text-color { + color: var(--rz-base-800) !important; } -sup { - top: -0.5em; +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -a { - color: #35a0d7; - text-decoration: none; - background-color: transparent; -} -a:hover { - color: #35a0d7; - text-decoration: underline; +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):focus { - outline: 0; +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -pre, -code, -kbd, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 1em; +.rz-text-contrast-color { + color: var(--rz-white) !important; } -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -figure { - margin: 0 0 1rem; +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -img { - vertical-align: middle; - border-style: none; +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -svg { - overflow: hidden; - vertical-align: middle; +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -table { - border-collapse: collapse; +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #6c757d; - text-align: left; - caption-side: bottom; +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -th { - text-align: inherit; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -label { - display: inline-block; - margin-bottom: 0.5rem; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -button { - border-radius: 0; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -button, -input { - overflow: visible; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -button, -select { - text-transform: none; +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -select { - word-wrap: normal; +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -button:not(:disabled), -[type=button]:not(:disabled), -[type=reset]:not(:disabled), -[type=submit]:not(:disabled) { - cursor: pointer; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - padding: 0; - border-style: none; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -input[type=radio], -input[type=checkbox] { - box-sizing: border-box; - padding: 0; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -input[type=date], -input[type=time], -input[type=datetime-local], -input[type=month] { - -webkit-appearance: listbox; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -textarea { - overflow: auto; - resize: vertical; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -legend { - display: block; - width: 100%; - max-width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; - white-space: normal; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -progress { - vertical-align: baseline; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; +.rz-display-none { + display: none !important; } -[type=search] { - outline-offset: -2px; - -webkit-appearance: none; +.rz-display-block { + display: block !important; } -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; +.rz-display-inline { + display: inline !important; } -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; +.rz-display-inline-block { + display: inline-block !important; } -output { - display: inline-block; +.rz-display-flex { + display: flex !important; } -summary { - display: list-item; - cursor: pointer; +.rz-display-inline-flex { + display: inline-flex !important; } -template { - display: none; +.rz-display-grid { + display: grid !important; } -[hidden] { - display: none !important; +.rz-display-inline-grid { + display: inline-grid !important; } -.container { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} @media (min-width: 576px) { - .container { - max-width: 540px; + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; } } @media (min-width: 768px) { - .container { - max-width: 720px; + .rz-display-sm-none { + display: none !important; } -} -@media (min-width: 992px) { - .container { - max-width: 960px; + .rz-display-sm-block { + display: block !important; } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; } } +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} -.container-fluid { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} - -.row { - display: flex; - flex-wrap: wrap; - margin-right: -1rem; - margin-left: -1rem; +.rz-justify-content-stretch { + justify-content: stretch !important; } -.no-gutters { - margin-right: 0; - margin-left: 0; +.rz-justify-content-center { + justify-content: center !important; } -.no-gutters > .col, -.no-gutters > [class*=col-] { - padding-right: 0; - padding-left: 0; + +.rz-justify-content-start { + justify-content: start !important; } -.col-xl, -.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, -.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, -.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, -.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, -.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { - position: relative; - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.rz-justify-content-end { + justify-content: end !important; } -.col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.rz-justify-content-flex-start { + justify-content: flex-start !important; } -.col-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; +.rz-justify-content-flex-end { + justify-content: flex-end !important; } -.col-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; +.rz-justify-content-left { + justify-content: left !important; } -.col-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; +.rz-justify-content-right { + justify-content: right !important; } -.col-3 { - flex: 0 0 25%; - max-width: 25%; +.rz-justify-content-space-between { + justify-content: space-between !important; } -.col-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; +.rz-justify-content-space-around { + justify-content: space-around !important; } -.col-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; } -.col-6 { - flex: 0 0 50%; - max-width: 50%; +.rz-align-items-normal { + align-items: normal !important; } -.col-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; +.rz-align-items-stretch { + align-items: stretch !important; } -.col-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; +.rz-align-items-center { + align-items: center !important; } -.col-9 { - flex: 0 0 75%; - max-width: 75%; +.rz-align-items-start { + align-items: start !important; } -.col-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; +.rz-align-items-end { + align-items: end !important; } -.col-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; +.rz-align-items-flex-start { + align-items: flex-start !important; } -.col-12 { - flex: 0 0 100%; - max-width: 100%; +.rz-align-items-flex-end { + align-items: flex-end !important; } -.order-first { - order: -1; +.rz-color-white { + color: var(--rz-white) !important; } -.order-last { - order: 13; +.rz-color-black { + color: var(--rz-black) !important; } -.order-0 { - order: 0; +.rz-color-base { + color: var(--rz-base) !important; } -.order-1 { - order: 1; +.rz-color-base-50 { + color: var(--rz-base-50) !important; } -.order-2 { - order: 2; +.rz-color-base-100 { + color: var(--rz-base-100) !important; } -.order-3 { - order: 3; +.rz-color-base-200 { + color: var(--rz-base-200) !important; } -.order-4 { - order: 4; +.rz-color-base-300 { + color: var(--rz-base-300) !important; } -.order-5 { - order: 5; +.rz-color-base-400 { + color: var(--rz-base-400) !important; } -.order-6 { - order: 6; +.rz-color-base-500 { + color: var(--rz-base-500) !important; } -.order-7 { - order: 7; +.rz-color-base-600 { + color: var(--rz-base-600) !important; } -.order-8 { - order: 8; +.rz-color-base-700 { + color: var(--rz-base-700) !important; } -.order-9 { - order: 9; +.rz-color-base-800 { + color: var(--rz-base-800) !important; } -.order-10 { - order: 10; +.rz-color-base-900 { + color: var(--rz-base-900) !important; } -.order-11 { - order: 11; +.rz-color-base-light { + color: var(--rz-base-light) !important; } -.order-12 { - order: 12; +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; } -.offset-1 { - margin-left: 8.3333333333%; +.rz-color-base-dark { + color: var(--rz-base-dark) !important; } -.offset-2 { - margin-left: 16.6666666667%; +.rz-color-base-darker { + color: var(--rz-base-darker) !important; } -.offset-3 { - margin-left: 25%; +.rz-color-primary { + color: var(--rz-primary) !important; } -.offset-4 { - margin-left: 33.3333333333%; +.rz-color-primary-light { + color: var(--rz-primary-light) !important; } -.offset-5 { - margin-left: 41.6666666667%; +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; } -.offset-6 { - margin-left: 50%; +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; } -.offset-7 { - margin-left: 58.3333333333%; +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; } -.offset-8 { - margin-left: 66.6666666667%; +.rz-color-secondary { + color: var(--rz-secondary) !important; } -.offset-9 { - margin-left: 75%; +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; } -.offset-10 { - margin-left: 83.3333333333%; +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; } -.offset-11 { - margin-left: 91.6666666667%; +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; } -@media (min-width: 576px) { - .col-sm { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-sm-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-sm-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-sm-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-sm-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-sm-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-sm-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-sm-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-sm-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-sm-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-sm-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-sm-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-sm-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - order: -1; - } - .order-sm-last { - order: 13; - } - .order-sm-0 { - order: 0; - } - .order-sm-1 { - order: 1; - } - .order-sm-2 { - order: 2; - } - .order-sm-3 { - order: 3; - } - .order-sm-4 { - order: 4; - } - .order-sm-5 { - order: 5; - } - .order-sm-6 { - order: 6; - } - .order-sm-7 { - order: 7; - } - .order-sm-8 { - order: 8; - } - .order-sm-9 { - order: 9; - } - .order-sm-10 { - order: 10; - } - .order-sm-11 { - order: 11; - } - .order-sm-12 { - order: 12; - } - .offset-sm-0 { - margin-left: 0; - } - .offset-sm-1 { - margin-left: 8.3333333333%; - } - .offset-sm-2 { - margin-left: 16.6666666667%; - } - .offset-sm-3 { - margin-left: 25%; - } - .offset-sm-4 { - margin-left: 33.3333333333%; - } - .offset-sm-5 { - margin-left: 41.6666666667%; - } - .offset-sm-6 { - margin-left: 50%; - } - .offset-sm-7 { - margin-left: 58.3333333333%; - } - .offset-sm-8 { - margin-left: 66.6666666667%; - } - .offset-sm-9 { - margin-left: 75%; - } - .offset-sm-10 { - margin-left: 83.3333333333%; - } - .offset-sm-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 768px) { - .col-md { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-md-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-md-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-md-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-md-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-md-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-md-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-md-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-md-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-md-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-md-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-md-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-md-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - order: -1; - } - .order-md-last { - order: 13; - } - .order-md-0 { - order: 0; - } - .order-md-1 { - order: 1; - } - .order-md-2 { - order: 2; - } - .order-md-3 { - order: 3; - } - .order-md-4 { - order: 4; - } - .order-md-5 { - order: 5; - } - .order-md-6 { - order: 6; - } - .order-md-7 { - order: 7; - } - .order-md-8 { - order: 8; - } - .order-md-9 { - order: 9; - } - .order-md-10 { - order: 10; - } - .order-md-11 { - order: 11; - } - .order-md-12 { - order: 12; - } - .offset-md-0 { - margin-left: 0; - } - .offset-md-1 { - margin-left: 8.3333333333%; - } - .offset-md-2 { - margin-left: 16.6666666667%; - } - .offset-md-3 { - margin-left: 25%; - } - .offset-md-4 { - margin-left: 33.3333333333%; - } - .offset-md-5 { - margin-left: 41.6666666667%; - } - .offset-md-6 { - margin-left: 50%; - } - .offset-md-7 { - margin-left: 58.3333333333%; - } - .offset-md-8 { - margin-left: 66.6666666667%; - } - .offset-md-9 { - margin-left: 75%; - } - .offset-md-10 { - margin-left: 83.3333333333%; - } - .offset-md-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 992px) { - .col-lg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-lg-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-lg-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-lg-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-lg-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-lg-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-lg-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-lg-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-lg-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-lg-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-lg-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-lg-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-lg-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - order: -1; - } - .order-lg-last { - order: 13; - } - .order-lg-0 { - order: 0; - } - .order-lg-1 { - order: 1; - } - .order-lg-2 { - order: 2; - } - .order-lg-3 { - order: 3; - } - .order-lg-4 { - order: 4; - } - .order-lg-5 { - order: 5; - } - .order-lg-6 { - order: 6; - } - .order-lg-7 { - order: 7; - } - .order-lg-8 { - order: 8; - } - .order-lg-9 { - order: 9; - } - .order-lg-10 { - order: 10; - } - .order-lg-11 { - order: 11; - } - .order-lg-12 { - order: 12; - } - .offset-lg-0 { - margin-left: 0; - } - .offset-lg-1 { - margin-left: 8.3333333333%; - } - .offset-lg-2 { - margin-left: 16.6666666667%; - } - .offset-lg-3 { - margin-left: 25%; - } - .offset-lg-4 { - margin-left: 33.3333333333%; - } - .offset-lg-5 { - margin-left: 41.6666666667%; - } - .offset-lg-6 { - margin-left: 50%; - } - .offset-lg-7 { - margin-left: 58.3333333333%; - } - .offset-lg-8 { - margin-left: 66.6666666667%; - } - .offset-lg-9 { - margin-left: 75%; - } - .offset-lg-10 { - margin-left: 83.3333333333%; - } - .offset-lg-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 1200px) { - .col-xl { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-xl-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-xl-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-xl-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-xl-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-xl-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-xl-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-xl-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-xl-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-xl-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-xl-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-xl-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-xl-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - order: -1; - } - .order-xl-last { - order: 13; - } - .order-xl-0 { - order: 0; - } - .order-xl-1 { - order: 1; - } - .order-xl-2 { - order: 2; - } - .order-xl-3 { - order: 3; - } - .order-xl-4 { - order: 4; - } - .order-xl-5 { - order: 5; - } - .order-xl-6 { - order: 6; - } - .order-xl-7 { - order: 7; - } - .order-xl-8 { - order: 8; - } - .order-xl-9 { - order: 9; - } - .order-xl-10 { - order: 10; - } - .order-xl-11 { - order: 11; - } - .order-xl-12 { - order: 12; - } - .offset-xl-0 { - margin-left: 0; - } - .offset-xl-1 { - margin-left: 8.3333333333%; - } - .offset-xl-2 { - margin-left: 16.6666666667%; - } - .offset-xl-3 { - margin-left: 25%; - } - .offset-xl-4 { - margin-left: 33.3333333333%; - } - .offset-xl-5 { - margin-left: 41.6666666667%; - } - .offset-xl-6 { - margin-left: 50%; - } - .offset-xl-7 { - margin-left: 58.3333333333%; - } - .offset-xl-8 { - margin-left: 66.6666666667%; - } - .offset-xl-9 { - margin-left: 75%; - } - .offset-xl-10 { - margin-left: 83.3333333333%; - } - .offset-xl-11 { - margin-left: 91.6666666667%; - } -} -.form-control { - display: block; - width: 100%; - height: 2.25rem; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.429; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: var(--rz-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .form-control { - transition: none; - } -} -.form-control::-ms-expand { - background-color: transparent; - border: 0; -} -.form-control:focus { - color: #495057; - background-color: #fff; - border-color: #ffcfc1; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 109, 65, 0.25); -} -.form-control::placeholder { - color: var(--rz-text-tertiary-color); - opacity: 1; -} -.form-control:disabled, .form-control[readonly] { - background-color: #e9ecef; - opacity: 1; +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; } -select.form-control:focus::-ms-value { - color: #495057; - background-color: #fff; +.rz-color-info { + color: var(--rz-info) !important; } -.form-control-file, -.form-control-range { - display: block; - width: 100%; +.rz-color-info-light { + color: var(--rz-info-light) !important; } -.col-form-label { - padding-top: calc(0.375rem + 1px); - padding-bottom: calc(0.375rem + 1px); - margin-bottom: 0; - font-size: inherit; - line-height: 1.429; +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; } -.col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); - font-size: 1.09375rem; - line-height: 1.5; +.rz-color-info-dark { + color: var(--rz-info-dark) !important; } -.col-form-label-sm { - padding-top: calc(0.25rem + 1px); - padding-bottom: calc(0.25rem + 1px); - font-size: 0.765625rem; - line-height: 1.5; +.rz-color-info-darker { + color: var(--rz-info-darker) !important; } -.form-control-plaintext { - display: block; - width: 100%; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - margin-bottom: 0; - line-height: 1.429; - color: #3a474d; - background-color: transparent; - border: solid transparent; - border-width: 1px 0; -} -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-right: 0; - padding-left: 0; +.rz-color-success { + color: var(--rz-success) !important; } -.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; - border-radius: 0.2rem; +.rz-color-success-light { + color: var(--rz-success-light) !important; } -.form-control-lg { - height: calc(1.5em + 1rem + 2px); - padding: 0.5rem 1rem; - font-size: 1.09375rem; - line-height: 1.5; - border-radius: 0.3rem; +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; } -select.form-control[size], select.form-control[multiple] { - height: auto; +.rz-color-success-dark { + color: var(--rz-success-dark) !important; } -textarea.form-control { - height: auto; +.rz-color-success-darker { + color: var(--rz-success-darker) !important; } -.form-group { - margin-bottom: 1rem; +.rz-color-warning { + color: var(--rz-warning) !important; } -.form-text { - display: block; - margin-top: 0.25rem; +.rz-color-warning-light { + color: var(--rz-warning-light) !important; } -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; -} -.form-row > .col, -.form-row > [class*=col-] { - padding-right: 5px; - padding-left: 5px; +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; } -.form-check { - position: relative; - display: block; - padding-left: 1.25rem; +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; } -.form-check-input { - position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; -} -.form-check-input:disabled ~ .form-check-label { - color: #6c757d; +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; } -.form-check-label { - margin-bottom: 0; +.rz-color-danger { + color: var(--rz-danger) !important; } -.form-check-inline { - display: inline-flex; - align-items: center; - padding-left: 0; - margin-right: 0.75rem; -} -.form-check-inline .form-check-input { - position: static; - margin-top: 0; - margin-right: 0.3125rem; - margin-left: 0; +.rz-color-danger-light { + color: var(--rz-danger-light) !important; } -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #5dbf74; +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; } -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #212529; - background-color: rgba(93, 191, 116, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; } -.was-validated .form-control:valid, .form-control.is-valid { - border-color: #5dbf74; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235dbf74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .form-control:valid ~ .valid-feedback, -.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, -.form-control.is-valid ~ .valid-tooltip { - display: block; +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-base { + color: var(--rz-on-base) !important; } -.was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #5dbf74; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235dbf74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .custom-select:valid ~ .valid-feedback, -.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, -.custom-select.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; } -.was-validated .form-control-file:valid ~ .valid-feedback, -.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, -.form-control-file.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #5dbf74; -} -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #5dbf74; -} -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #5dbf74; -} -.was-validated .custom-control-input:valid ~ .valid-feedback, -.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, -.custom-control-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #82cd93; - background-color: #82cd93; -} -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #5dbf74; +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; } -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #5dbf74; -} -.was-validated .custom-file-input:valid ~ .valid-feedback, -.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, -.custom-file-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); +.rz-color-on-primary { + color: var(--rz-on-primary) !important; } -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #f9777f; +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; } -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #212529; - background-color: rgba(249, 119, 127, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; } -.was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #f9777f; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9777f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f9777f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .form-control:invalid ~ .invalid-feedback, -.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, -.form-control.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; } -.was-validated .custom-select:invalid, .custom-select.is-invalid { - border-color: #f9777f; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9777f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f9777f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .custom-select:invalid ~ .invalid-feedback, -.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, -.custom-select.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; } -.was-validated .form-control-file:invalid ~ .invalid-feedback, -.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, -.form-control-file.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #f9777f; -} -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #f9777f; -} -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #f9777f; -} -.was-validated .custom-control-input:invalid ~ .invalid-feedback, -.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, -.custom-control-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #fba8ad; - background-color: #fba8ad; -} -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #f9777f; +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; } -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #f9777f; -} -.was-validated .custom-file-input:invalid ~ .invalid-feedback, -.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, -.custom-file-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; } -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -.form-inline .form-check { - width: 100%; -} -@media (min-width: 576px) { - .form-inline label { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0; - } - .form-inline .form-group { - display: flex; - flex: 0 0 auto; - flex-flow: row wrap; - align-items: center; - margin-bottom: 0; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - .form-inline .form-control-plaintext { - display: inline-block; - } - .form-inline .input-group, - .form-inline .custom-select { - width: auto; - } - .form-inline .form-check { - display: flex; - align-items: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-inline .form-check-input { - position: relative; - flex-shrink: 0; - margin-top: 0; - margin-right: 0.25rem; - margin-left: 0; - } - .form-inline .custom-control { - align-items: center; - justify-content: center; - } - .form-inline .custom-control-label { - margin-bottom: 0; - } +.rz-color-on-info { + color: var(--rz-on-info) !important; } -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 0.75rem; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: var(--rz-border-radius); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .badge { - transition: none; - } -} -a.badge:hover, a.badge:focus { - text-decoration: none; +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; } -.badge:empty { - display: none; +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; } -.btn .badge { - position: relative; - top: -1px; +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; } -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; } -.badge-primary { - color: #fff; - background-color: #ff6d41; -} -a.badge-primary:hover, a.badge-primary:focus { - color: #fff; - background-color: #ff460e; -} -a.badge-primary:focus, a.badge-primary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 109, 65, 0.5); +.rz-color-on-success { + color: var(--rz-on-success) !important; } -.badge-secondary { - color: #fff; - background-color: #35a0d7; -} -a.badge-secondary:hover, a.badge-secondary:focus { - color: #fff; - background-color: #2484b5; -} -a.badge-secondary:focus, a.badge-secondary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(53, 160, 215, 0.5); +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; } -.badge-success { - color: #212529; - background-color: #5dbf74; -} -a.badge-success:hover, a.badge-success:focus { - color: #212529; - background-color: #42a75a; -} -a.badge-success:focus, a.badge-success.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.5); +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; } -.badge-info { - color: #212529; - background-color: #2cc8c8; -} -a.badge-info:hover, a.badge-info:focus { - color: #212529; - background-color: #239e9e; -} -a.badge-info:focus, a.badge-info.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(44, 200, 200, 0.5); +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; } -.badge-warning { - color: #212529; - background-color: #fac152; -} -a.badge-warning:hover, a.badge-warning:focus { - color: #212529; - background-color: #f9af20; -} -a.badge-warning:focus, a.badge-warning.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(250, 193, 82, 0.5); +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; } -.badge-danger { - color: #212529; - background-color: #f9777f; -} -a.badge-danger:hover, a.badge-danger:focus { - color: #212529; - background-color: #f74651; -} -a.badge-danger:focus, a.badge-danger.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.5); +.rz-color-on-warning { + color: var(--rz-on-warning) !important; } -.badge-light { - color: #212529; - background-color: #e9edf0; -} -a.badge-light:hover, a.badge-light:focus { - color: #212529; - background-color: #cbd4db; -} -a.badge-light:focus, a.badge-light.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(233, 237, 240, 0.5); +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; } -.badge-dark { - color: #fff; - background-color: #343a40; -} -a.badge-dark:hover, a.badge-dark:focus { - color: #fff; - background-color: #1d2124; -} -a.badge-dark:focus, a.badge-dark.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; } -.alert { - position: relative; - padding: 0.75rem 1.25rem; - margin-bottom: 1rem; - border: 1px solid transparent; - border-radius: 4px; +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; } -.alert-heading { - color: inherit; +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; } -.alert-link { - font-weight: 700; +.rz-color-on-danger { + color: var(--rz-on-danger) !important; } -.alert-dismissible { - padding-right: 3.8125rem; -} -.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; } -.alert-primary { - color: #853922; - background-color: #ffe2d9; - border-color: #ffd6ca; -} -.alert-primary hr { - border-top-color: #ffc2b1; -} -.alert-primary .alert-link { - color: #5c2818; +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; } -.alert-secondary { - color: #1c5370; - background-color: #d7ecf7; - border-color: #c6e4f4; -} -.alert-secondary hr { - border-top-color: #b1daf0; -} -.alert-secondary .alert-link { - color: #123547; +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; } -.alert-success { - color: #30633c; - background-color: #dff2e3; - border-color: #d2edd8; -} -.alert-success hr { - border-top-color: #c0e6c8; -} -.alert-success .alert-link { - color: #1f4127; +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; } -.alert-info { - color: #176868; - background-color: #d5f4f4; - border-color: #c4f0f0; -} -.alert-info hr { - border-top-color: #b0ebeb; -} -.alert-info .alert-link { - color: #0e3e3e; +.rz-color-series-1 { + color: var(--rz-series-1) !important; } -.alert-warning { - color: #82642b; - background-color: #fef3dc; - border-color: #feeecf; -} -.alert-warning hr { - border-top-color: #fde5b6; -} -.alert-warning .alert-link { - color: #5c471e; +.rz-color-series-2 { + color: var(--rz-series-2) !important; } -.alert-danger { - color: #813e42; - background-color: #fee4e5; - border-color: #fdd9db; -} -.alert-danger hr { - border-top-color: #fcc1c4; -} -.alert-danger .alert-link { - color: #5f2d30; +.rz-color-series-3 { + color: var(--rz-series-3) !important; } -.alert-light { - color: #797b7d; - background-color: #fbfbfc; - border-color: #f9fafb; -} -.alert-light hr { - border-top-color: #eaedf1; -} -.alert-light .alert-link { - color: #606263; +.rz-color-series-4 { + color: var(--rz-series-4) !important; } -.alert-dark { - color: #1b1e21; - background-color: #d6d8d9; - border-color: #c6c8ca; -} -.alert-dark hr { - border-top-color: #b9bbbe; -} -.alert-dark .alert-link { - color: #040505; +.rz-color-series-5 { + color: var(--rz-series-5) !important; } -.media { - display: flex; - align-items: flex-start; +.rz-color-series-6 { + color: var(--rz-series-6) !important; } -.media-body { - flex: 1; +.rz-color-series-7 { + color: var(--rz-series-7) !important; } -.align-baseline { - vertical-align: baseline !important; +.rz-color-series-8 { + color: var(--rz-series-8) !important; } -.align-top { - vertical-align: top !important; +.rz-color-series-9 { + color: var(--rz-series-9) !important; } -.align-middle { - vertical-align: middle !important; +.rz-color-series-10 { + color: var(--rz-series-10) !important; } -.align-bottom { - vertical-align: bottom !important; +.rz-color-series-11 { + color: var(--rz-series-11) !important; } -.align-text-bottom { - vertical-align: text-bottom !important; +.rz-color-series-12 { + color: var(--rz-series-12) !important; } -.align-text-top { - vertical-align: text-top !important; +.rz-color-series-13 { + color: var(--rz-series-13) !important; } -.bg-primary { - background-color: #ff6d41 !important; +.rz-color-series-14 { + color: var(--rz-series-14) !important; } -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #ff460e !important; +.rz-color-series-15 { + color: var(--rz-series-15) !important; } -.bg-secondary { - background-color: #35a0d7 !important; +.rz-color-series-16 { + color: var(--rz-series-16) !important; } -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #2484b5 !important; +.rz-color-series-17 { + color: var(--rz-series-17) !important; } -.bg-success { - background-color: #5dbf74 !important; +.rz-color-series-18 { + color: var(--rz-series-18) !important; } -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #42a75a !important; +.rz-color-series-19 { + color: var(--rz-series-19) !important; } -.bg-info { - background-color: #2cc8c8 !important; +.rz-color-series-20 { + color: var(--rz-series-20) !important; } -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #239e9e !important; +.rz-color-series-21 { + color: var(--rz-series-21) !important; } -.bg-warning { - background-color: #fac152 !important; +.rz-color-series-22 { + color: var(--rz-series-22) !important; } -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #f9af20 !important; +.rz-color-series-23 { + color: var(--rz-series-23) !important; } -.bg-danger { - background-color: #f9777f !important; +.rz-color-series-24 { + color: var(--rz-series-24) !important; } -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #f74651 !important; +.rz-background-color-white { + background-color: var(--rz-white) !important; } -.bg-light { - background-color: #e9edf0 !important; +.rz-background-color-black { + background-color: var(--rz-black) !important; } -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #cbd4db !important; +.rz-background-color-base { + background-color: var(--rz-base) !important; } -.bg-dark { - background-color: #343a40 !important; +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; } -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #1d2124 !important; +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; } -.bg-white { - background-color: #fff !important; +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; } -.bg-transparent { - background-color: transparent !important; +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; } -.border { - border: 1px solid #dee2e6 !important; +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; } -.border-top { - border-top: 1px solid #dee2e6 !important; +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; } -.border-right { - border-right: 1px solid #dee2e6 !important; +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; } -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; } -.border-left { - border-left: 1px solid #dee2e6 !important; +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; } -.border-0 { - border: 0 !important; +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; } -.border-top-0 { - border-top: 0 !important; +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; } -.border-right-0 { - border-right: 0 !important; +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; } -.border-bottom-0 { - border-bottom: 0 !important; +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; } -.border-left-0 { - border-left: 0 !important; +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; } -.border-primary { - border-color: #ff6d41 !important; +.rz-background-color-primary { + background-color: var(--rz-primary) !important; } -.border-secondary { - border-color: #35a0d7 !important; +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; } -.border-success { - border-color: #5dbf74 !important; +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; } -.border-info { - border-color: #2cc8c8 !important; +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; } -.border-warning { - border-color: #fac152 !important; +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; } -.border-danger { - border-color: #f9777f !important; +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; } -.border-light { - border-color: #e9edf0 !important; +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; } -.border-dark { - border-color: #343a40 !important; +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; } -.border-white { - border-color: #fff !important; +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; } -.rounded-sm { - border-radius: 0.2rem !important; +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; } -.rounded { - border-radius: 4px !important; +.rz-background-color-info { + background-color: var(--rz-info) !important; } -.rounded-top { - border-top-left-radius: 4px !important; - border-top-right-radius: 4px !important; +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; } -.rounded-right { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; } -.rounded-bottom { - border-bottom-right-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; } -.rounded-left { - border-top-left-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; } -.rounded-lg { - border-radius: 0.3rem !important; +.rz-background-color-success { + background-color: var(--rz-success) !important; } -.rounded-circle { - border-radius: 50% !important; +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; } -.rounded-pill { - border-radius: 50rem !important; +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; } -.rounded-0 { - border-radius: 0 !important; +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; } -.clearfix::after { - display: block; - clear: both; - content: ""; +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; } -.d-none { - display: none !important; +.rz-background-color-warning { + background-color: var(--rz-warning) !important; } -.d-inline { - display: inline !important; +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; } -.d-inline-block { - display: inline-block !important; +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; } -.d-block { - display: block !important; +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; } -.d-table { - display: table !important; +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; } -.d-table-row { - display: table-row !important; +.rz-background-color-danger { + background-color: var(--rz-danger) !important; } -.d-table-cell { - display: table-cell !important; +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; } -.d-flex { - display: flex !important; +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; } -.d-inline-flex { - display: inline-flex !important; +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; } -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } - .d-sm-inline { - display: inline !important; - } - .d-sm-inline-block { - display: inline-block !important; - } - .d-sm-block { - display: block !important; - } - .d-sm-table { - display: table !important; - } - .d-sm-table-row { - display: table-row !important; - } - .d-sm-table-cell { - display: table-cell !important; - } - .d-sm-flex { - display: flex !important; - } - .d-sm-inline-flex { - display: inline-flex !important; - } +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; } -@media (min-width: 768px) { - .d-md-none { - display: none !important; - } - .d-md-inline { - display: inline !important; - } - .d-md-inline-block { - display: inline-block !important; - } - .d-md-block { - display: block !important; - } - .d-md-table { - display: table !important; - } - .d-md-table-row { - display: table-row !important; - } - .d-md-table-cell { - display: table-cell !important; - } - .d-md-flex { - display: flex !important; - } - .d-md-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; } -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-inline { - display: inline !important; - } - .d-lg-inline-block { - display: inline-block !important; - } - .d-lg-block { - display: block !important; - } - .d-lg-table { - display: table !important; - } - .d-lg-table-row { - display: table-row !important; - } - .d-lg-table-cell { - display: table-cell !important; - } - .d-lg-flex { - display: flex !important; - } - .d-lg-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; } -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; - } - .d-xl-inline { - display: inline !important; - } - .d-xl-inline-block { - display: inline-block !important; - } - .d-xl-block { - display: block !important; - } - .d-xl-table { - display: table !important; - } - .d-xl-table-row { - display: table-row !important; - } - .d-xl-table-cell { - display: table-cell !important; - } - .d-xl-flex { - display: flex !important; - } - .d-xl-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; } -@media print { - .d-print-none { - display: none !important; - } - .d-print-inline { - display: inline !important; - } - .d-print-inline-block { - display: inline-block !important; - } - .d-print-block { - display: block !important; - } - .d-print-table { - display: table !important; - } - .d-print-table-row { - display: table-row !important; - } - .d-print-table-cell { - display: table-cell !important; - } - .d-print-flex { - display: flex !important; - } - .d-print-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; } -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; } -.embed-responsive::before { - display: block; - content: ""; + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; } -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; } -.embed-responsive-21by9::before { - padding-top: 42.8571428571%; +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; } -.embed-responsive-16by9::before { - padding-top: 56.25%; +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; } -.embed-responsive-4by3::before { - padding-top: 75%; +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; } -.embed-responsive-1by1::before { - padding-top: 100%; +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; } -.flex-row { - flex-direction: row !important; +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; } -.flex-column { - flex-direction: column !important; +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; } -.flex-row-reverse { - flex-direction: row-reverse !important; +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; } -.flex-column-reverse { - flex-direction: column-reverse !important; +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; } -.flex-wrap { - flex-wrap: wrap !important; +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; } -.flex-nowrap { - flex-wrap: nowrap !important; +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; } -.flex-wrap-reverse { - flex-wrap: wrap-reverse !important; +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; } -.flex-fill { - flex: 1 1 auto !important; +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; } -.flex-grow-0 { - flex-grow: 0 !important; +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; } -.flex-grow-1 { - flex-grow: 1 !important; +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; } -.flex-shrink-0 { - flex-shrink: 0 !important; +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; } -.flex-shrink-1 { - flex-shrink: 1 !important; +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; } -.justify-content-start { - justify-content: flex-start !important; +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; } -.justify-content-end { - justify-content: flex-end !important; +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; } -.justify-content-center { - justify-content: center !important; +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; } -.justify-content-between { - justify-content: space-between !important; +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; } -.justify-content-around { - justify-content: space-around !important; +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; } -.align-items-start { - align-items: flex-start !important; +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; } -.align-items-end { - align-items: flex-end !important; +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; } -.align-items-center { - align-items: center !important; +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; } -.align-items-baseline { - align-items: baseline !important; +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; } -.align-items-stretch { - align-items: stretch !important; +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; } -.align-content-start { - align-content: flex-start !important; +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; } -.align-content-end { - align-content: flex-end !important; +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; } -.align-content-center { - align-content: center !important; +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; } -.align-content-between { - align-content: space-between !important; +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; } -.align-content-around { - align-content: space-around !important; +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; } -.align-content-stretch { - align-content: stretch !important; +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; } -.align-self-auto { - align-self: auto !important; +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; } -.align-self-start { - align-self: flex-start !important; +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; } -.align-self-end { - align-self: flex-end !important; +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; } -.align-self-center { - align-self: center !important; +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; } -.align-self-baseline { - align-self: baseline !important; +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; } -.align-self-stretch { - align-self: stretch !important; +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; } -@media (min-width: 576px) { - .flex-sm-row { - flex-direction: row !important; - } - .flex-sm-column { - flex-direction: column !important; - } - .flex-sm-row-reverse { - flex-direction: row-reverse !important; - } - .flex-sm-column-reverse { - flex-direction: column-reverse !important; - } - .flex-sm-wrap { - flex-wrap: wrap !important; - } - .flex-sm-nowrap { - flex-wrap: nowrap !important; - } - .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-sm-fill { - flex: 1 1 auto !important; - } - .flex-sm-grow-0 { - flex-grow: 0 !important; - } - .flex-sm-grow-1 { - flex-grow: 1 !important; - } - .flex-sm-shrink-0 { - flex-shrink: 0 !important; - } - .flex-sm-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-sm-start { - justify-content: flex-start !important; - } - .justify-content-sm-end { - justify-content: flex-end !important; - } - .justify-content-sm-center { - justify-content: center !important; - } - .justify-content-sm-between { - justify-content: space-between !important; - } - .justify-content-sm-around { - justify-content: space-around !important; - } - .align-items-sm-start { - align-items: flex-start !important; - } - .align-items-sm-end { - align-items: flex-end !important; - } - .align-items-sm-center { - align-items: center !important; - } - .align-items-sm-baseline { - align-items: baseline !important; - } - .align-items-sm-stretch { - align-items: stretch !important; - } - .align-content-sm-start { - align-content: flex-start !important; - } - .align-content-sm-end { - align-content: flex-end !important; - } - .align-content-sm-center { - align-content: center !important; - } - .align-content-sm-between { - align-content: space-between !important; - } - .align-content-sm-around { - align-content: space-around !important; - } - .align-content-sm-stretch { - align-content: stretch !important; - } - .align-self-sm-auto { - align-self: auto !important; - } - .align-self-sm-start { - align-self: flex-start !important; - } - .align-self-sm-end { - align-self: flex-end !important; - } - .align-self-sm-center { - align-self: center !important; - } - .align-self-sm-baseline { - align-self: baseline !important; - } - .align-self-sm-stretch { - align-self: stretch !important; - } -} -@media (min-width: 768px) { - .flex-md-row { - flex-direction: row !important; - } - .flex-md-column { - flex-direction: column !important; - } - .flex-md-row-reverse { - flex-direction: row-reverse !important; - } - .flex-md-column-reverse { - flex-direction: column-reverse !important; - } - .flex-md-wrap { - flex-wrap: wrap !important; - } - .flex-md-nowrap { - flex-wrap: nowrap !important; - } - .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-md-fill { - flex: 1 1 auto !important; - } - .flex-md-grow-0 { - flex-grow: 0 !important; - } - .flex-md-grow-1 { - flex-grow: 1 !important; - } - .flex-md-shrink-0 { - flex-shrink: 0 !important; - } - .flex-md-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-md-start { - justify-content: flex-start !important; - } - .justify-content-md-end { - justify-content: flex-end !important; - } - .justify-content-md-center { - justify-content: center !important; - } - .justify-content-md-between { - justify-content: space-between !important; - } - .justify-content-md-around { - justify-content: space-around !important; - } - .align-items-md-start { - align-items: flex-start !important; - } - .align-items-md-end { - align-items: flex-end !important; - } - .align-items-md-center { - align-items: center !important; - } - .align-items-md-baseline { - align-items: baseline !important; - } - .align-items-md-stretch { - align-items: stretch !important; - } - .align-content-md-start { - align-content: flex-start !important; - } - .align-content-md-end { - align-content: flex-end !important; - } - .align-content-md-center { - align-content: center !important; - } - .align-content-md-between { - align-content: space-between !important; - } - .align-content-md-around { - align-content: space-around !important; - } - .align-content-md-stretch { - align-content: stretch !important; - } - .align-self-md-auto { - align-self: auto !important; - } - .align-self-md-start { - align-self: flex-start !important; - } - .align-self-md-end { - align-self: flex-end !important; - } - .align-self-md-center { - align-self: center !important; - } - .align-self-md-baseline { - align-self: baseline !important; - } - .align-self-md-stretch { - align-self: stretch !important; - } +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; } -@media (min-width: 992px) { - .flex-lg-row { - flex-direction: row !important; - } - .flex-lg-column { - flex-direction: column !important; - } - .flex-lg-row-reverse { - flex-direction: row-reverse !important; - } - .flex-lg-column-reverse { - flex-direction: column-reverse !important; - } - .flex-lg-wrap { - flex-wrap: wrap !important; - } - .flex-lg-nowrap { - flex-wrap: nowrap !important; - } - .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-lg-fill { - flex: 1 1 auto !important; - } - .flex-lg-grow-0 { - flex-grow: 0 !important; - } - .flex-lg-grow-1 { - flex-grow: 1 !important; - } - .flex-lg-shrink-0 { - flex-shrink: 0 !important; - } - .flex-lg-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-lg-start { - justify-content: flex-start !important; - } - .justify-content-lg-end { - justify-content: flex-end !important; - } - .justify-content-lg-center { - justify-content: center !important; - } - .justify-content-lg-between { - justify-content: space-between !important; - } - .justify-content-lg-around { - justify-content: space-around !important; - } - .align-items-lg-start { - align-items: flex-start !important; - } - .align-items-lg-end { - align-items: flex-end !important; - } - .align-items-lg-center { - align-items: center !important; - } - .align-items-lg-baseline { - align-items: baseline !important; - } - .align-items-lg-stretch { - align-items: stretch !important; - } - .align-content-lg-start { - align-content: flex-start !important; - } - .align-content-lg-end { - align-content: flex-end !important; - } - .align-content-lg-center { - align-content: center !important; - } - .align-content-lg-between { - align-content: space-between !important; - } - .align-content-lg-around { - align-content: space-around !important; - } - .align-content-lg-stretch { - align-content: stretch !important; - } - .align-self-lg-auto { - align-self: auto !important; - } - .align-self-lg-start { - align-self: flex-start !important; - } - .align-self-lg-end { - align-self: flex-end !important; - } - .align-self-lg-center { - align-self: center !important; - } - .align-self-lg-baseline { - align-self: baseline !important; - } - .align-self-lg-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; } -@media (min-width: 1200px) { - .flex-xl-row { - flex-direction: row !important; - } - .flex-xl-column { - flex-direction: column !important; - } - .flex-xl-row-reverse { - flex-direction: row-reverse !important; - } - .flex-xl-column-reverse { - flex-direction: column-reverse !important; - } - .flex-xl-wrap { - flex-wrap: wrap !important; - } - .flex-xl-nowrap { - flex-wrap: nowrap !important; - } - .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-xl-fill { - flex: 1 1 auto !important; - } - .flex-xl-grow-0 { - flex-grow: 0 !important; - } - .flex-xl-grow-1 { - flex-grow: 1 !important; - } - .flex-xl-shrink-0 { - flex-shrink: 0 !important; - } - .flex-xl-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-xl-start { - justify-content: flex-start !important; - } - .justify-content-xl-end { - justify-content: flex-end !important; - } - .justify-content-xl-center { - justify-content: center !important; - } - .justify-content-xl-between { - justify-content: space-between !important; - } - .justify-content-xl-around { - justify-content: space-around !important; - } - .align-items-xl-start { - align-items: flex-start !important; - } - .align-items-xl-end { - align-items: flex-end !important; - } - .align-items-xl-center { - align-items: center !important; - } - .align-items-xl-baseline { - align-items: baseline !important; - } - .align-items-xl-stretch { - align-items: stretch !important; - } - .align-content-xl-start { - align-content: flex-start !important; - } - .align-content-xl-end { - align-content: flex-end !important; - } - .align-content-xl-center { - align-content: center !important; - } - .align-content-xl-between { - align-content: space-between !important; - } - .align-content-xl-around { - align-content: space-around !important; - } - .align-content-xl-stretch { - align-content: stretch !important; - } - .align-self-xl-auto { - align-self: auto !important; - } - .align-self-xl-start { - align-self: flex-start !important; - } - .align-self-xl-end { - align-self: flex-end !important; - } - .align-self-xl-center { - align-self: center !important; - } - .align-self-xl-baseline { - align-self: baseline !important; - } - .align-self-xl-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; } -.float-left { - float: left !important; + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; } -.float-right { - float: right !important; +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; } -.float-none { - float: none !important; +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; } -@media (min-width: 576px) { - .float-sm-left { - float: left !important; - } - .float-sm-right { - float: right !important; - } - .float-sm-none { - float: none !important; - } +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; } -@media (min-width: 768px) { - .float-md-left { - float: left !important; - } - .float-md-right { - float: right !important; - } - .float-md-none { - float: none !important; - } + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; } -@media (min-width: 992px) { - .float-lg-left { - float: left !important; - } - .float-lg-right { - float: right !important; - } - .float-lg-none { - float: none !important; - } + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; } -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; - } - .float-xl-right { - float: right !important; - } - .float-xl-none { - float: none !important; - } + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; } -.overflow-auto { - overflow: auto !important; + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; } -.overflow-hidden { - overflow: hidden !important; +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; } -.position-static { - position: static !important; +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; } -.position-relative { - position: relative !important; +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; } -.position-absolute { - position: absolute !important; +.rz-border-color-white { + border-color: var(--rz-white) !important; } -.position-fixed { - position: fixed !important; +.rz-border-color-black { + border-color: var(--rz-black) !important; } -.position-sticky { - position: sticky !important; +.rz-border-color-base { + border-color: var(--rz-base) !important; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; } -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; } -@supports (position: sticky) { - .sticky-top { - position: sticky; - top: 0; - z-index: 1020; - } +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; } -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; } -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; } -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; } -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; } -.shadow-none { - box-shadow: none !important; +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; } -.w-25 { - width: 25% !important; +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; } -.w-50 { - width: 50% !important; +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; } -.w-75 { - width: 75% !important; +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; } -.w-100 { - width: 100% !important; +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; } -.w-auto { - width: auto !important; +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; } -.h-25 { - height: 25% !important; +.rz-border-color-primary { + border-color: var(--rz-primary) !important; } -.h-50 { - height: 50% !important; +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; } -.h-75 { - height: 75% !important; +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; } -.h-100 { - height: 100% !important; +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; } -.h-auto { - height: auto !important; +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; } -.mw-100 { - max-width: 100% !important; +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; } -.mh-100 { - max-height: 100% !important; +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; } -.min-vw-100 { - min-width: 100vw !important; +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; } -.min-vh-100 { - min-height: 100vh !important; +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; } -.vw-100 { - width: 100vw !important; +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; } -.vh-100 { - height: 100vh !important; +.rz-border-color-info { + border-color: var(--rz-info) !important; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); -} - -.m-0 { - margin: 0 !important; +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; } -.mt-0, -.my-0 { - margin-top: 0 !important; +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; } -.mr-0, -.mx-0 { - margin-right: 0 !important; +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; } -.mb-0, -.my-0 { - margin-bottom: 0 !important; +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; } -.ml-0, -.mx-0 { - margin-left: 0 !important; +.rz-border-color-success { + border-color: var(--rz-success) !important; } -.m-1 { - margin: 0.25rem !important; +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; } -.mt-1, -.my-1 { - margin-top: 0.25rem !important; +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; } -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; } -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; } -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; +.rz-border-color-warning { + border-color: var(--rz-warning) !important; } -.m-2 { - margin: 0.5rem !important; +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; } -.mt-2, -.my-2 { - margin-top: 0.5rem !important; +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; } -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; } -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; } -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; +.rz-border-color-danger { + border-color: var(--rz-danger) !important; } -.m-3 { - margin: 1rem !important; +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; } -.mt-3, -.my-3 { - margin-top: 1rem !important; +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; } -.mr-3, -.mx-3 { - margin-right: 1rem !important; +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; } -.mb-3, -.my-3 { - margin-bottom: 1rem !important; +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; } -.ml-3, -.mx-3 { - margin-left: 1rem !important; +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; } -.m-4 { - margin: 1.5rem !important; +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; } -.mt-4, -.my-4 { - margin-top: 1.5rem !important; +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; } -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; } -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; } -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; } -.m-5 { - margin: 3rem !important; +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; } -.mt-5, -.my-5 { - margin-top: 3rem !important; +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; } -.mr-5, -.mx-5 { - margin-right: 3rem !important; +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; } -.mb-5, -.my-5 { - margin-bottom: 3rem !important; +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; } -.ml-5, -.mx-5 { - margin-left: 3rem !important; +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; } -.p-0 { - padding: 0 !important; +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; } -.pt-0, -.py-0 { - padding-top: 0 !important; +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; } -.pr-0, -.px-0 { - padding-right: 0 !important; +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; } -.pb-0, -.py-0 { - padding-bottom: 0 !important; +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; } -.pl-0, -.px-0 { - padding-left: 0 !important; +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; } -.p-1 { - padding: 0.25rem !important; +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; } -.pt-1, -.py-1 { - padding-top: 0.25rem !important; +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; } -.pr-1, -.px-1 { - padding-right: 0.25rem !important; +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; } -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; } -.pl-1, -.px-1 { - padding-left: 0.25rem !important; +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; } -.p-2 { - padding: 0.5rem !important; +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; } -.pt-2, -.py-2 { - padding-top: 0.5rem !important; +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; } -.pr-2, -.px-2 { - padding-right: 0.5rem !important; +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; } -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; } -.pl-2, -.px-2 { - padding-left: 0.5rem !important; +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; } -.p-3 { - padding: 1rem !important; +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; } -.pt-3, -.py-3 { - padding-top: 1rem !important; +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; } -.pr-3, -.px-3 { - padding-right: 1rem !important; +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; } -.pb-3, -.py-3 { - padding-bottom: 1rem !important; +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; } -.pl-3, -.px-3 { - padding-left: 1rem !important; +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; } -.p-4 { - padding: 1.5rem !important; +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; } -.pr-4, -.px-4 { - padding-right: 1.5rem !important; +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; } -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; } -.pl-4, -.px-4 { - padding-left: 1.5rem !important; +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; } -.p-5 { - padding: 3rem !important; +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; } -.pt-5, -.py-5 { - padding-top: 3rem !important; +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; } -.pr-5, -.px-5 { - padding-right: 3rem !important; +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; } -.pb-5, -.py-5 { - padding-bottom: 3rem !important; +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; } -.pl-5, -.px-5 { - padding-left: 3rem !important; +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; } -.m-n1 { - margin: -0.25rem !important; +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; } -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; } -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; } -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; } -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; } -.m-n2 { - margin: -0.5rem !important; +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; } -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; } -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; } -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; } -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; } -.m-n3 { - margin: -1rem !important; +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; } -.mt-n3, -.my-n3 { - margin-top: -1rem !important; +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; } -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; } -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; } -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; } -.m-n4 { - margin: -1.5rem !important; +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; } -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; } -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; } -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; } -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; } -.m-n5 { - margin: -3rem !important; +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; } -.mt-n5, -.my-n5 { - margin-top: -3rem !important; +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; } -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; } -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; } -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; } -.m-auto { - margin: auto !important; +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; } -.mt-auto, -.my-auto { - margin-top: auto !important; +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; } -.mr-auto, -.mx-auto { - margin-right: auto !important; +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; } -.mb-auto, -.my-auto { - margin-bottom: auto !important; +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; } -.ml-auto, -.mx-auto { - margin-left: auto !important; +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; } -@media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; - } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; - } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; - } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; - } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; - } - .m-sm-1 { - margin: 0.25rem !important; - } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; - } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; - } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; - } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; - } - .m-sm-2 { - margin: 0.5rem !important; - } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; - } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; - } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; - } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; - } - .m-sm-3 { - margin: 1rem !important; - } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; - } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; - } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; - } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; - } - .m-sm-4 { - margin: 1.5rem !important; - } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; - } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; - } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; - } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; - } - .m-sm-5 { - margin: 3rem !important; - } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; - } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; - } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; - } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; - } - .p-sm-0 { - padding: 0 !important; - } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; - } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; - } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; - } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; - } - .p-sm-1 { - padding: 0.25rem !important; - } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; - } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; - } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; - } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; - } - .p-sm-2 { - padding: 0.5rem !important; - } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; - } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; - } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; - } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; - } - .p-sm-3 { - padding: 1rem !important; - } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; - } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; - } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; - } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; - } - .p-sm-4 { - padding: 1.5rem !important; - } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; - } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; - } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; - } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; - } - .p-sm-5 { - padding: 3rem !important; - } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; - } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; - } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; - } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; - } - .m-sm-n1 { - margin: -0.25rem !important; - } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; - } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; - } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; - } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; - } - .m-sm-n2 { - margin: -0.5rem !important; - } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; - } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; - } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; - } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; - } - .m-sm-n3 { - margin: -1rem !important; - } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; - } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; - } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; - } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; - } - .m-sm-n4 { - margin: -1.5rem !important; - } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; - } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; - } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; - } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; - } - .m-sm-n5 { - margin: -3rem !important; - } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; - } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; - } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; - } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; - } - .m-sm-auto { - margin: auto !important; - } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; - } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; - } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; - } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; - } +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; } -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; - } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; - } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; - } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; - } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; - } - .m-md-1 { - margin: 0.25rem !important; - } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; - } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; - } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; - } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; - } - .m-md-2 { - margin: 0.5rem !important; - } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; - } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; - } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; - } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; - } - .m-md-3 { - margin: 1rem !important; - } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; - } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; - } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; - } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; - } - .m-md-4 { - margin: 1.5rem !important; - } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; - } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; - } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; - } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; - } - .m-md-5 { - margin: 3rem !important; - } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; - } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; - } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; - } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; - } - .p-md-0 { - padding: 0 !important; - } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; - } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; - } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; - } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; - } - .p-md-1 { - padding: 0.25rem !important; - } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; - } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; - } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; - } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; - } - .p-md-2 { - padding: 0.5rem !important; - } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; - } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; - } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; - } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; - } - .p-md-3 { - padding: 1rem !important; - } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; - } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; - } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; - } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; - } - .p-md-4 { - padding: 1.5rem !important; - } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; - } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; - } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; - } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; - } - .p-md-5 { - padding: 3rem !important; - } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; - } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; - } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; - } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; - } - .m-md-n1 { - margin: -0.25rem !important; - } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; - } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; - } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; - } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; - } - .m-md-n2 { - margin: -0.5rem !important; - } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; - } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; - } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; - } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; - } - .m-md-n3 { - margin: -1rem !important; - } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; - } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; - } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; - } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; - } - .m-md-n4 { - margin: -1.5rem !important; - } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; - } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; - } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; - } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; - } - .m-md-n5 { - margin: -3rem !important; - } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; - } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; - } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; - } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; - } - .m-md-auto { - margin: auto !important; - } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; - } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; - } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; - } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; - } + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; } -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; - } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; - } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; - } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; - } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; - } - .m-lg-1 { - margin: 0.25rem !important; - } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; - } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; - } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; - } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; - } - .m-lg-2 { - margin: 0.5rem !important; - } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; - } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; - } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; - } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; - } - .m-lg-3 { - margin: 1rem !important; - } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; - } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; - } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; - } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; - } - .m-lg-4 { - margin: 1.5rem !important; - } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; - } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; - } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; - } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; - } - .m-lg-5 { - margin: 3rem !important; - } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; - } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; - } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; - } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; - } - .p-lg-0 { - padding: 0 !important; - } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; - } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; - } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; - } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; - } - .p-lg-1 { - padding: 0.25rem !important; - } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; - } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; - } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; - } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; - } - .p-lg-2 { - padding: 0.5rem !important; - } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; - } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; - } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; - } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; - } - .p-lg-3 { - padding: 1rem !important; - } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; - } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; - } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; - } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; - } - .p-lg-4 { - padding: 1.5rem !important; - } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; - } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; - } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; - } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; - } - .p-lg-5 { - padding: 3rem !important; - } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; - } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; - } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; - } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; - } - .m-lg-n1 { - margin: -0.25rem !important; - } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; - } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; - } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; - } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; - } - .m-lg-n2 { - margin: -0.5rem !important; - } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; - } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; - } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; - } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; - } - .m-lg-n3 { - margin: -1rem !important; - } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; - } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; - } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; - } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; - } - .m-lg-n4 { - margin: -1.5rem !important; - } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; - } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; - } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; - } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; - } - .m-lg-n5 { - margin: -3rem !important; - } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; - } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; - } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; - } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; - } - .m-lg-auto { - margin: auto !important; - } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; - } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; - } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; - } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; - } -} -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; - } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; - } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; - } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; - } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; - } - .m-xl-1 { - margin: 0.25rem !important; - } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; - } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; - } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; - } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; - } - .m-xl-2 { - margin: 0.5rem !important; - } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; - } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; - } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; - } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; - } - .m-xl-3 { - margin: 1rem !important; - } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; - } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; - } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; - } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; - } - .m-xl-4 { - margin: 1.5rem !important; - } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; - } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; - } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; - } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; - } - .m-xl-5 { - margin: 3rem !important; - } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; - } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; - } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; - } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; - } - .p-xl-0 { - padding: 0 !important; - } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; - } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; - } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; - } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; - } - .p-xl-1 { - padding: 0.25rem !important; - } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; - } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; - } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; - } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; - } - .p-xl-2 { - padding: 0.5rem !important; - } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; - } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; - } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; - } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; - } - .p-xl-3 { - padding: 1rem !important; - } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; - } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; - } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; - } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; - } - .p-xl-4 { - padding: 1.5rem !important; - } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; - } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; - } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; - } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; - } - .p-xl-5 { - padding: 3rem !important; - } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; - } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; - } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; - } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; - } - .m-xl-n1 { - margin: -0.25rem !important; - } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; - } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; - } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; - } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; - } - .m-xl-n2 { - margin: -0.5rem !important; - } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; - } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; - } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; - } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; - } - .m-xl-n3 { - margin: -1rem !important; - } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; - } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; - } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; - } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; - } - .m-xl-n4 { - margin: -1.5rem !important; - } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; - } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; - } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; - } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; - } - .m-xl-n5 { - margin: -3rem !important; - } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; - } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; - } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; - } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; - } - .m-xl-auto { - margin: auto !important; - } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; - } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; - } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; - } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; - } -} -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; -} - -.text-justify { - text-align: justify !important; + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; } -.text-wrap { - white-space: normal !important; +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; } -.text-nowrap { - white-space: nowrap !important; +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; } -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; } -.text-left { - text-align: left !important; +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; } -.text-right { - text-align: right !important; +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; } -.text-center { - text-align: center !important; +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; } -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; - } - .text-sm-right { - text-align: right !important; - } - .text-sm-center { - text-align: center !important; - } -} -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; - } - .text-md-right { - text-align: right !important; - } - .text-md-center { - text-align: center !important; - } -} -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; - } - .text-lg-right { - text-align: right !important; - } - .text-lg-center { - text-align: center !important; - } -} -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; - } - .text-xl-right { - text-align: right !important; - } - .text-xl-center { - text-align: center !important; - } -} -.text-lowercase { - text-transform: lowercase !important; +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; } -.text-uppercase { - text-transform: uppercase !important; +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; } -.text-capitalize { - text-transform: capitalize !important; +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; } -.font-weight-light { - font-weight: 300 !important; +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; } -.font-weight-lighter { - font-weight: lighter !important; +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; } -.font-weight-normal { - font-weight: 400 !important; +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; } -.font-weight-bold { - font-weight: 700 !important; +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; } -.font-weight-bolder { - font-weight: bolder !important; +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; } -.font-italic { - font-style: italic !important; +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; } -.text-white { - color: #fff !important; +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; } -.text-primary { - color: #ff6d41 !important; +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; } -a.text-primary:hover, a.text-primary:focus { - color: #f43800 !important; +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; } -.text-secondary { - color: #35a0d7 !important; +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; } -a.text-secondary:hover, a.text-secondary:focus { - color: #2074a0 !important; +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; } -.text-success { - color: #5dbf74 !important; +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; } -a.text-success:hover, a.text-success:focus { - color: #3b9550 !important; +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; } -.text-info { - color: #2cc8c8 !important; +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; } -a.text-info:hover, a.text-info:focus { - color: #1e8989 !important; +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; } -.text-warning { - color: #fac152 !important; +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; } -a.text-warning:hover, a.text-warning:focus { - color: #f8a608 !important; +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; } -.text-danger { - color: #f9777f !important; +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; } -a.text-danger:hover, a.text-danger:focus { - color: #f62e3a !important; +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; } -.text-light { - color: #e9edf0 !important; +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; } -a.text-light:hover, a.text-light:focus { - color: #bcc8d1 !important; +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; } -.text-dark { - color: #343a40 !important; +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; } -a.text-dark:hover, a.text-dark:focus { - color: #121416 !important; +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; } -.text-body { - color: #3a474d !important; +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; } -.text-muted { - color: #6c757d !important; +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; } -.text-black-50 { - color: rgba(0, 0, 0, 0.5) !important; +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; } -.text-white-50 { - color: rgba(255, 255, 255, 0.5) !important; +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; } -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; } -.text-decoration-none { - text-decoration: none !important; +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; } -.text-break { - word-break: break-word !important; - overflow-wrap: break-word !important; +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; } -.text-reset { - color: inherit !important; +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; } -.visible { - visibility: visible !important; +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; } -.invisible { - visibility: hidden !important; +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; } -@font-face { - font-family: "Material Icons"; - font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f6f7fa; - --rz-base-200: #e9edf0; - --rz-base-300: #dadfe2; - --rz-base-400: #c1c9cb; - --rz-base-500: #95a4a8; - --rz-base-600: #77858b; - --rz-base-700: #545e61; - --rz-base-800: #3a474d; - --rz-base-900: #28363c; - --rz-primary: #ff6d41; - --rz-primary-light: #ff7f58; - --rz-primary-lighter: rgba(255, 109, 65, 0.16); - --rz-primary-dark: #eb643c; - --rz-primary-darker: #bf5231; - --rz-secondary: #35a0d7; - --rz-secondary-light: #4dabdc; - --rz-secondary-lighter: rgba(53, 160, 215, 0.2); - --rz-secondary-dark: #3193c6; - --rz-secondary-darker: #2878a1; - --rz-info: #2cc8c8; - --rz-info-light: #4ed1d1; - --rz-info-lighter: rgba(44, 200, 200, 0.2); - --rz-info-dark: #25a8a8; - --rz-info-darker: #219696; - --rz-success: #5dbf74; - --rz-success-light: #77c98a; - --rz-success-lighter: rgba(93, 191, 116, 0.16); - --rz-success-dark: #4ea061; - --rz-success-darker: #468f57; - --rz-warning: #fac152; - --rz-warning-light: #fbcb6e; - --rz-warning-lighter: rgba(250, 193, 82, 0.2); - --rz-warning-dark: #d2a245; - --rz-warning-darker: #bc913e; - --rz-danger: #f9777f; - --rz-danger-light: #fa8d93; - --rz-danger-lighter: rgba(249, 119, 127, 0.2); - --rz-danger-dark: #d1646b; - --rz-danger-darker: #bb595f; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #ff6d41; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #35a0d7; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2cc8c8; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #5dbf74; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #fac152; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f9777f; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #0479cc; - --rz-series-2: #68d5c8; - --rz-series-3: #ff6d41; - --rz-series-4: #cb6992; - --rz-series-5: #e6c54f; - --rz-series-6: #f9777f; - --rz-series-7: #5dbf74; - --rz-series-8: #4db9f2; - --rz-series-9: #06a9e0; - --rz-series-10: #92e6de; - --rz-series-11: #ff995b; - --rz-series-12: #e093be; - --rz-series-13: #f0dc6f; - --rz-series-14: #fba7b2; - --rz-series-15: #82d9a2; - --rz-series-16: #6cd5f7; - --rz-series-17: #0063c2; - --rz-series-18: #50cdbe; - --rz-series-19: #ff5628; - --rz-series-20: #c1527f; - --rz-series-21: #e1ba36; - --rz-series-22: #f8616a; - --rz-series-23: #45b35e; - --rz-series-24: #34acef; + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-secondary); +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; } -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; } -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; } -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; } -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; } -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; } -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; } -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; } -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; } -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; +.rz-ripple { + position: relative; + overflow: hidden; } - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; } - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; } -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; +body { + margin: 0; } -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; +.rz-m-0 { + margin: 0 !important; } -.rz-display-none { - display: none !important; +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; } -.rz-display-block { - display: block !important; +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; } -.rz-display-inline { - display: inline !important; +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; } -.rz-display-inline-block { - display: inline-block !important; +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; } -.rz-display-flex { - display: flex !important; +.rz-ms-0 { + margin-inline-start: 0 !important; } -.rz-display-inline-flex { - display: inline-flex !important; +.rz-me-0 { + margin-inline-end: 0 !important; } -.rz-display-grid { - display: grid !important; +.rz-m-05 { + margin: 0.125rem !important; } -.rz-display-inline-grid { - display: inline-grid !important; +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; } -@media (min-width: 576px) { - .rz-display-xs-none { - display: none !important; - } - .rz-display-xs-block { - display: block !important; - } - .rz-display-xs-inline { - display: inline !important; - } - .rz-display-xs-inline-block { - display: inline-block !important; - } - .rz-display-xs-flex { - display: flex !important; - } - .rz-display-xs-inline-flex { - display: inline-flex !important; - } - .rz-display-xs-grid { - display: grid !important; - } - .rz-display-xs-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 768px) { - .rz-display-sm-none { - display: none !important; - } - .rz-display-sm-block { - display: block !important; - } - .rz-display-sm-inline { - display: inline !important; - } - .rz-display-sm-inline-block { - display: inline-block !important; - } - .rz-display-sm-flex { - display: flex !important; - } - .rz-display-sm-inline-flex { - display: inline-flex !important; - } - .rz-display-sm-grid { - display: grid !important; - } - .rz-display-sm-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1024px) { - .rz-display-md-none { - display: none !important; - } - .rz-display-md-block { - display: block !important; - } - .rz-display-md-inline { - display: inline !important; - } - .rz-display-md-inline-block { - display: inline-block !important; - } - .rz-display-md-flex { - display: flex !important; - } - .rz-display-md-inline-flex { - display: inline-flex !important; - } - .rz-display-md-grid { - display: grid !important; - } - .rz-display-md-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1280px) { - .rz-display-lg-none { - display: none !important; - } - .rz-display-lg-block { - display: block !important; - } - .rz-display-lg-inline { - display: inline !important; - } - .rz-display-lg-inline-block { - display: inline-block !important; - } - .rz-display-lg-flex { - display: flex !important; - } - .rz-display-lg-inline-flex { - display: inline-flex !important; - } - .rz-display-lg-grid { - display: grid !important; - } - .rz-display-lg-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1920px) { - .rz-display-xl-none { - display: none !important; - } - .rz-display-xl-block { - display: block !important; - } - .rz-display-xl-inline { - display: inline !important; - } - .rz-display-xl-inline-block { - display: inline-block !important; - } - .rz-display-xl-flex { - display: flex !important; - } - .rz-display-xl-inline-flex { - display: inline-flex !important; - } - .rz-display-xl-grid { - display: grid !important; - } - .rz-display-xl-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 2560px) { - .rz-display-xx-none { - display: none !important; - } - .rz-display-xx-block { - display: block !important; - } - .rz-display-xx-inline { - display: inline !important; - } - .rz-display-xx-inline-block { - display: inline-block !important; - } - .rz-display-xx-flex { - display: flex !important; - } - .rz-display-xx-inline-flex { - display: inline-flex !important; - } - .rz-display-xx-grid { - display: grid !important; - } - .rz-display-xx-inline-grid { - display: inline-grid !important; - } +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; } -.rz-justify-content-normal { - justify-content: normal !important; + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; } -.rz-justify-content-stretch { - justify-content: stretch !important; +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; } -.rz-justify-content-center { - justify-content: center !important; +.rz-ms-05 { + margin-inline-start: 0.125rem !important; } -.rz-justify-content-start { - justify-content: start !important; +.rz-me-05 { + margin-inline-end: 0.125rem !important; } -.rz-justify-content-end { - justify-content: end !important; +.rz-m-1 { + margin: 0.25rem !important; } -.rz-justify-content-flex-start { - justify-content: flex-start !important; +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; } -.rz-justify-content-flex-end { - justify-content: flex-end !important; +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; } -.rz-justify-content-left { - justify-content: left !important; +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; } -.rz-justify-content-right { - justify-content: right !important; +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; } -.rz-justify-content-space-between { - justify-content: space-between !important; +.rz-ms-1 { + margin-inline-start: 0.25rem !important; } -.rz-justify-content-space-around { - justify-content: space-around !important; +.rz-me-1 { + margin-inline-end: 0.25rem !important; } -.rz-justify-content-space-evenly { - justify-content: space-evenly !important; +.rz-m-2 { + margin: 0.5rem !important; } -.rz-align-items-normal { - align-items: normal !important; +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; } -.rz-align-items-stretch { - align-items: stretch !important; +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; } -.rz-align-items-center { - align-items: center !important; +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; } -.rz-align-items-start { - align-items: start !important; +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; } -.rz-align-items-end { - align-items: end !important; +.rz-ms-2 { + margin-inline-start: 0.5rem !important; } -.rz-align-items-flex-start { - align-items: flex-start !important; +.rz-me-2 { + margin-inline-end: 0.5rem !important; } -.rz-align-items-flex-end { - align-items: flex-end !important; +.rz-m-3 { + margin: 0.75rem !important; } -.rz-color-white { - color: var(--rz-white) !important; +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; } -.rz-color-black { - color: var(--rz-black) !important; +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; } -.rz-color-base-50 { - color: var(--rz-base-50) !important; +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; } -.rz-color-base-100 { - color: var(--rz-base-100) !important; +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; } -.rz-color-base-200 { - color: var(--rz-base-200) !important; +.rz-ms-3 { + margin-inline-start: 0.75rem !important; } -.rz-color-base-300 { - color: var(--rz-base-300) !important; +.rz-me-3 { + margin-inline-end: 0.75rem !important; } -.rz-color-base-400 { - color: var(--rz-base-400) !important; +.rz-m-4 { + margin: 1rem !important; } -.rz-color-base-500 { - color: var(--rz-base-500) !important; +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; } -.rz-color-base-600 { - color: var(--rz-base-600) !important; +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; } -.rz-color-base-700 { - color: var(--rz-base-700) !important; +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; } -.rz-color-base-800 { - color: var(--rz-base-800) !important; +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; } -.rz-color-base-900 { - color: var(--rz-base-900) !important; +.rz-ms-4 { + margin-inline-start: 1rem !important; } -.rz-color-primary { - color: var(--rz-primary) !important; +.rz-me-4 { + margin-inline-end: 1rem !important; } -.rz-color-primary-light { - color: var(--rz-primary-light) !important; +.rz-m-5 { + margin: 1.25rem !important; } -.rz-color-primary-lighter { - color: var(--rz-primary-lighter) !important; +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; } -.rz-color-primary-dark { - color: var(--rz-primary-dark) !important; +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; } -.rz-color-primary-darker { - color: var(--rz-primary-darker) !important; +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; } -.rz-color-secondary { - color: var(--rz-secondary) !important; +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; } -.rz-color-secondary-light { - color: var(--rz-secondary-light) !important; +.rz-ms-5 { + margin-inline-start: 1.25rem !important; } -.rz-color-secondary-lighter { - color: var(--rz-secondary-lighter) !important; +.rz-me-5 { + margin-inline-end: 1.25rem !important; } -.rz-color-secondary-dark { - color: var(--rz-secondary-dark) !important; +.rz-m-6 { + margin: 1.5rem !important; } -.rz-color-secondary-darker { - color: var(--rz-secondary-darker) !important; +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; } -.rz-color-info { - color: var(--rz-info) !important; +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; } -.rz-color-info-light { - color: var(--rz-info-light) !important; +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; } -.rz-color-info-lighter { - color: var(--rz-info-lighter) !important; +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; } -.rz-color-info-dark { - color: var(--rz-info-dark) !important; +.rz-ms-6 { + margin-inline-start: 1.5rem !important; } -.rz-color-info-darker { - color: var(--rz-info-darker) !important; +.rz-me-6 { + margin-inline-end: 1.5rem !important; } -.rz-color-success { - color: var(--rz-success) !important; +.rz-m-7 { + margin: 1.75rem !important; } -.rz-color-success-light { - color: var(--rz-success-light) !important; +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; } -.rz-color-success-lighter { - color: var(--rz-success-lighter) !important; +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; } -.rz-color-success-dark { - color: var(--rz-success-dark) !important; +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; } -.rz-color-success-darker { - color: var(--rz-success-darker) !important; +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; } -.rz-color-warning { - color: var(--rz-warning) !important; +.rz-ms-7 { + margin-inline-start: 1.75rem !important; } -.rz-color-warning-light { - color: var(--rz-warning-light) !important; +.rz-me-7 { + margin-inline-end: 1.75rem !important; } -.rz-color-warning-lighter { - color: var(--rz-warning-lighter) !important; +.rz-m-8 { + margin: 2rem !important; } -.rz-color-warning-dark { - color: var(--rz-warning-dark) !important; +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; } -.rz-color-warning-darker { - color: var(--rz-warning-darker) !important; +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; } -.rz-color-danger { - color: var(--rz-danger) !important; +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; } -.rz-color-danger-light { - color: var(--rz-danger-light) !important; +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; } -.rz-color-danger-lighter { - color: var(--rz-danger-lighter) !important; +.rz-ms-8 { + margin-inline-start: 2rem !important; } -.rz-color-danger-dark { - color: var(--rz-danger-dark) !important; +.rz-me-8 { + margin-inline-end: 2rem !important; } -.rz-color-danger-darker { - color: var(--rz-danger-darker) !important; +.rz-m-9 { + margin: 2.25rem !important; } -.rz-color-on-primary { - color: var(--rz-on-primary) !important; +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; } -.rz-color-on-primary-light { - color: var(--rz-on-primary-light) !important; +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; } -.rz-color-on-primary-lighter { - color: var(--rz-on-primary-lighter) !important; +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; } -.rz-color-on-primary-dark { - color: var(--rz-on-primary-dark) !important; +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; } -.rz-color-on-primary-darker { - color: var(--rz-on-primary-darker) !important; +.rz-ms-9 { + margin-inline-start: 2.25rem !important; } -.rz-color-on-secondary { - color: var(--rz-on-secondary) !important; +.rz-me-9 { + margin-inline-end: 2.25rem !important; } -.rz-color-on-secondary-light { - color: var(--rz-on-secondary-light) !important; +.rz-m-10 { + margin: 2.5rem !important; } -.rz-color-on-secondary-lighter { - color: var(--rz-on-secondary-lighter) !important; +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; } -.rz-color-on-secondary-dark { - color: var(--rz-on-secondary-dark) !important; +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; } -.rz-color-on-secondary-darker { - color: var(--rz-on-secondary-darker) !important; +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; } -.rz-color-on-info { - color: var(--rz-on-info) !important; +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; } -.rz-color-on-info-light { - color: var(--rz-on-info-light) !important; +.rz-ms-10 { + margin-inline-start: 2.5rem !important; } -.rz-color-on-info-lighter { - color: var(--rz-on-info-lighter) !important; +.rz-me-10 { + margin-inline-end: 2.5rem !important; } -.rz-color-on-info-dark { - color: var(--rz-on-info-dark) !important; +.rz-m-11 { + margin: 2.75rem !important; } -.rz-color-on-info-darker { - color: var(--rz-on-info-darker) !important; +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; } -.rz-color-on-success { - color: var(--rz-on-success) !important; +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; } -.rz-color-on-success-light { - color: var(--rz-on-success-light) !important; +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; } -.rz-color-on-success-lighter { - color: var(--rz-on-success-lighter) !important; +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; } -.rz-color-on-success-dark { - color: var(--rz-on-success-dark) !important; +.rz-ms-11 { + margin-inline-start: 2.75rem !important; } -.rz-color-on-success-darker { - color: var(--rz-on-success-darker) !important; +.rz-me-11 { + margin-inline-end: 2.75rem !important; } -.rz-color-on-warning { - color: var(--rz-on-warning) !important; +.rz-m-12 { + margin: 3rem !important; } -.rz-color-on-warning-light { - color: var(--rz-on-warning-light) !important; +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; } -.rz-color-on-warning-lighter { - color: var(--rz-on-warning-lighter) !important; +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; } -.rz-color-on-warning-dark { - color: var(--rz-on-warning-dark) !important; +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; } -.rz-color-on-warning-darker { - color: var(--rz-on-warning-darker) !important; +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; } -.rz-color-on-danger { - color: var(--rz-on-danger) !important; +.rz-ms-12 { + margin-inline-start: 3rem !important; } -.rz-color-on-danger-light { - color: var(--rz-on-danger-light) !important; +.rz-me-12 { + margin-inline-end: 3rem !important; } -.rz-color-on-danger-lighter { - color: var(--rz-on-danger-lighter) !important; +.rz-p-0 { + padding: 0 !important; } -.rz-color-on-danger-dark { - color: var(--rz-on-danger-dark) !important; +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; } -.rz-color-on-danger-darker { - color: var(--rz-on-danger-darker) !important; +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; } -.rz-color-series-1 { - color: var(--rz-series-1) !important; +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; } -.rz-color-series-2 { - color: var(--rz-series-2) !important; +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; } -.rz-color-series-3 { - color: var(--rz-series-3) !important; +.rz-ps-0 { + padding-inline-start: 0 !important; } -.rz-color-series-4 { - color: var(--rz-series-4) !important; +.rz-pe-0 { + padding-inline-end: 0 !important; } -.rz-color-series-5 { - color: var(--rz-series-5) !important; +.rz-p-05 { + padding: 0.125rem !important; } -.rz-color-series-6 { - color: var(--rz-series-6) !important; +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; } -.rz-color-series-7 { - color: var(--rz-series-7) !important; +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; } -.rz-color-series-8 { - color: var(--rz-series-8) !important; +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; } -.rz-color-series-9 { - color: var(--rz-series-9) !important; +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; } -.rz-color-series-10 { - color: var(--rz-series-10) !important; +.rz-ps-05 { + padding-inline-start: 0.125rem !important; } -.rz-color-series-11 { - color: var(--rz-series-11) !important; +.rz-pe-05 { + padding-inline-end: 0.125rem !important; } -.rz-color-series-12 { - color: var(--rz-series-12) !important; +.rz-p-1 { + padding: 0.25rem !important; } -.rz-color-series-13 { - color: var(--rz-series-13) !important; +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; } -.rz-color-series-14 { - color: var(--rz-series-14) !important; +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; } -.rz-color-series-15 { - color: var(--rz-series-15) !important; +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; } -.rz-color-series-16 { - color: var(--rz-series-16) !important; +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; } -.rz-color-series-17 { - color: var(--rz-series-17) !important; +.rz-ps-1 { + padding-inline-start: 0.25rem !important; } -.rz-color-series-18 { - color: var(--rz-series-18) !important; +.rz-pe-1 { + padding-inline-end: 0.25rem !important; } -.rz-color-series-19 { - color: var(--rz-series-19) !important; +.rz-p-2 { + padding: 0.5rem !important; } -.rz-color-series-20 { - color: var(--rz-series-20) !important; +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; } -.rz-color-series-21 { - color: var(--rz-series-21) !important; +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; } -.rz-color-series-22 { - color: var(--rz-series-22) !important; +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; } -.rz-color-series-23 { - color: var(--rz-series-23) !important; +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; } -.rz-color-series-24 { - color: var(--rz-series-24) !important; +.rz-ps-2 { + padding-inline-start: 0.5rem !important; } -.rz-background-color-white { - background-color: var(--rz-white) !important; +.rz-pe-2 { + padding-inline-end: 0.5rem !important; } -.rz-background-color-black { - background-color: var(--rz-black) !important; +.rz-p-3 { + padding: 0.75rem !important; } -.rz-background-color-base-50 { - background-color: var(--rz-base-50) !important; +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; } -.rz-background-color-base-100 { - background-color: var(--rz-base-100) !important; +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; } -.rz-background-color-base-200 { - background-color: var(--rz-base-200) !important; +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; } -.rz-background-color-base-300 { - background-color: var(--rz-base-300) !important; +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; } -.rz-background-color-base-400 { - background-color: var(--rz-base-400) !important; +.rz-ps-3 { + padding-inline-start: 0.75rem !important; } -.rz-background-color-base-500 { - background-color: var(--rz-base-500) !important; +.rz-pe-3 { + padding-inline-end: 0.75rem !important; } -.rz-background-color-base-600 { - background-color: var(--rz-base-600) !important; +.rz-p-4 { + padding: 1rem !important; } -.rz-background-color-base-700 { - background-color: var(--rz-base-700) !important; +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; } -.rz-background-color-base-800 { - background-color: var(--rz-base-800) !important; +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; } -.rz-background-color-base-900 { - background-color: var(--rz-base-900) !important; +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; } -.rz-background-color-primary { - background-color: var(--rz-primary) !important; +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; } -.rz-background-color-primary-light { - background-color: var(--rz-primary-light) !important; +.rz-ps-4 { + padding-inline-start: 1rem !important; } -.rz-background-color-primary-lighter { - background-color: var(--rz-primary-lighter) !important; +.rz-pe-4 { + padding-inline-end: 1rem !important; } -.rz-background-color-primary-dark { - background-color: var(--rz-primary-dark) !important; +.rz-p-5 { + padding: 1.25rem !important; } -.rz-background-color-primary-darker { - background-color: var(--rz-primary-darker) !important; +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; } -.rz-background-color-secondary { - background-color: var(--rz-secondary) !important; +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; } -.rz-background-color-secondary-light { - background-color: var(--rz-secondary-light) !important; +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; } -.rz-background-color-secondary-lighter { - background-color: var(--rz-secondary-lighter) !important; +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; } -.rz-background-color-secondary-dark { - background-color: var(--rz-secondary-dark) !important; +.rz-ps-5 { + padding-inline-start: 1.25rem !important; } -.rz-background-color-secondary-darker { - background-color: var(--rz-secondary-darker) !important; +.rz-pe-5 { + padding-inline-end: 1.25rem !important; } -.rz-background-color-info { - background-color: var(--rz-info) !important; +.rz-p-6 { + padding: 1.5rem !important; } -.rz-background-color-info-light { - background-color: var(--rz-info-light) !important; +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; } -.rz-background-color-info-lighter { - background-color: var(--rz-info-lighter) !important; +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; } -.rz-background-color-info-dark { - background-color: var(--rz-info-dark) !important; +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; } -.rz-background-color-info-darker { - background-color: var(--rz-info-darker) !important; +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; } -.rz-background-color-success { - background-color: var(--rz-success) !important; +.rz-ps-6 { + padding-inline-start: 1.5rem !important; } -.rz-background-color-success-light { - background-color: var(--rz-success-light) !important; +.rz-pe-6 { + padding-inline-end: 1.5rem !important; } -.rz-background-color-success-lighter { - background-color: var(--rz-success-lighter) !important; +.rz-p-7 { + padding: 1.75rem !important; } -.rz-background-color-success-dark { - background-color: var(--rz-success-dark) !important; +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; } -.rz-background-color-success-darker { - background-color: var(--rz-success-darker) !important; +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; } -.rz-background-color-warning { - background-color: var(--rz-warning) !important; +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; } -.rz-background-color-warning-light { - background-color: var(--rz-warning-light) !important; +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; } -.rz-background-color-warning-lighter { - background-color: var(--rz-warning-lighter) !important; +.rz-ps-7 { + padding-inline-start: 1.75rem !important; } -.rz-background-color-warning-dark { - background-color: var(--rz-warning-dark) !important; +.rz-pe-7 { + padding-inline-end: 1.75rem !important; } -.rz-background-color-warning-darker { - background-color: var(--rz-warning-darker) !important; +.rz-p-8 { + padding: 2rem !important; } -.rz-background-color-danger { - background-color: var(--rz-danger) !important; +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; } -.rz-background-color-danger-light { - background-color: var(--rz-danger-light) !important; +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; } -.rz-background-color-danger-lighter { - background-color: var(--rz-danger-lighter) !important; +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; } -.rz-background-color-danger-dark { - background-color: var(--rz-danger-dark) !important; +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; } -.rz-background-color-danger-darker { - background-color: var(--rz-danger-darker) !important; +.rz-ps-8 { + padding-inline-start: 2rem !important; } -.rz-background-color-on-primary { - background-color: var(--rz-on-primary) !important; +.rz-pe-8 { + padding-inline-end: 2rem !important; } -.rz-background-color-on-primary-light { - background-color: var(--rz-on-primary-light) !important; +.rz-p-9 { + padding: 2.25rem !important; } -.rz-background-color-on-primary-lighter { - background-color: var(--rz-on-primary-lighter) !important; +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; } -.rz-background-color-on-primary-dark { - background-color: var(--rz-on-primary-dark) !important; +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; } -.rz-background-color-on-primary-darker { - background-color: var(--rz-on-primary-darker) !important; +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; } -.rz-background-color-on-secondary { - background-color: var(--rz-on-secondary) !important; +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; } -.rz-background-color-on-secondary-light { - background-color: var(--rz-on-secondary-light) !important; +.rz-ps-9 { + padding-inline-start: 2.25rem !important; } -.rz-background-color-on-secondary-lighter { - background-color: var(--rz-on-secondary-lighter) !important; +.rz-pe-9 { + padding-inline-end: 2.25rem !important; } -.rz-background-color-on-secondary-dark { - background-color: var(--rz-on-secondary-dark) !important; +.rz-p-10 { + padding: 2.5rem !important; } -.rz-background-color-on-secondary-darker { - background-color: var(--rz-on-secondary-darker) !important; +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; } -.rz-background-color-on-info { - background-color: var(--rz-on-info) !important; +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; } -.rz-background-color-on-info-light { - background-color: var(--rz-on-info-light) !important; +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; } -.rz-background-color-on-info-lighter { - background-color: var(--rz-on-info-lighter) !important; +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; } -.rz-background-color-on-info-dark { - background-color: var(--rz-on-info-dark) !important; +.rz-ps-10 { + padding-inline-start: 2.5rem !important; } -.rz-background-color-on-info-darker { - background-color: var(--rz-on-info-darker) !important; +.rz-pe-10 { + padding-inline-end: 2.5rem !important; } -.rz-background-color-on-success { - background-color: var(--rz-on-success) !important; +.rz-p-11 { + padding: 2.75rem !important; } -.rz-background-color-on-success-light { - background-color: var(--rz-on-success-light) !important; +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; } -.rz-background-color-on-success-lighter { - background-color: var(--rz-on-success-lighter) !important; +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; } -.rz-background-color-on-success-dark { - background-color: var(--rz-on-success-dark) !important; +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; } -.rz-background-color-on-success-darker { - background-color: var(--rz-on-success-darker) !important; +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; } -.rz-background-color-on-warning { - background-color: var(--rz-on-warning) !important; +.rz-ps-11 { + padding-inline-start: 2.75rem !important; } -.rz-background-color-on-warning-light { - background-color: var(--rz-on-warning-light) !important; +.rz-pe-11 { + padding-inline-end: 2.75rem !important; } -.rz-background-color-on-warning-lighter { - background-color: var(--rz-on-warning-lighter) !important; +.rz-p-12 { + padding: 3rem !important; } -.rz-background-color-on-warning-dark { - background-color: var(--rz-on-warning-dark) !important; +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; } -.rz-background-color-on-warning-darker { - background-color: var(--rz-on-warning-darker) !important; +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; } -.rz-background-color-on-danger { - background-color: var(--rz-on-danger) !important; +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; } -.rz-background-color-on-danger-light { - background-color: var(--rz-on-danger-light) !important; -} - -.rz-background-color-on-danger-lighter { - background-color: var(--rz-on-danger-lighter) !important; -} - -.rz-background-color-on-danger-dark { - background-color: var(--rz-on-danger-dark) !important; -} - -.rz-background-color-on-danger-darker { - background-color: var(--rz-on-danger-darker) !important; -} - -.rz-background-color-series-1 { - background-color: var(--rz-series-1) !important; -} - -.rz-background-color-series-2 { - background-color: var(--rz-series-2) !important; -} - -.rz-background-color-series-3 { - background-color: var(--rz-series-3) !important; -} - -.rz-background-color-series-4 { - background-color: var(--rz-series-4) !important; -} - -.rz-background-color-series-5 { - background-color: var(--rz-series-5) !important; -} - -.rz-background-color-series-6 { - background-color: var(--rz-series-6) !important; -} - -.rz-background-color-series-7 { - background-color: var(--rz-series-7) !important; -} - -.rz-background-color-series-8 { - background-color: var(--rz-series-8) !important; -} - -.rz-background-color-series-9 { - background-color: var(--rz-series-9) !important; -} - -.rz-background-color-series-10 { - background-color: var(--rz-series-10) !important; -} - -.rz-background-color-series-11 { - background-color: var(--rz-series-11) !important; -} - -.rz-background-color-series-12 { - background-color: var(--rz-series-12) !important; -} - -.rz-background-color-series-13 { - background-color: var(--rz-series-13) !important; -} - -.rz-background-color-series-14 { - background-color: var(--rz-series-14) !important; -} - -.rz-background-color-series-15 { - background-color: var(--rz-series-15) !important; -} - -.rz-background-color-series-16 { - background-color: var(--rz-series-16) !important; -} - -.rz-background-color-series-17 { - background-color: var(--rz-series-17) !important; -} - -.rz-background-color-series-18 { - background-color: var(--rz-series-18) !important; -} - -.rz-background-color-series-19 { - background-color: var(--rz-series-19) !important; -} - -.rz-background-color-series-20 { - background-color: var(--rz-series-20) !important; -} - -.rz-background-color-series-21 { - background-color: var(--rz-series-21) !important; -} - -.rz-background-color-series-22 { - background-color: var(--rz-series-22) !important; -} - -.rz-background-color-series-23 { - background-color: var(--rz-series-23) !important; -} - -.rz-background-color-series-24 { - background-color: var(--rz-series-24) !important; -} - -.rz-border-color-white { - border-color: var(--rz-white) !important; -} - -.rz-border-color-black { - border-color: var(--rz-black) !important; -} - -.rz-border-color-base-50 { - border-color: var(--rz-base-50) !important; -} - -.rz-border-color-base-100 { - border-color: var(--rz-base-100) !important; -} - -.rz-border-color-base-200 { - border-color: var(--rz-base-200) !important; -} - -.rz-border-color-base-300 { - border-color: var(--rz-base-300) !important; -} - -.rz-border-color-base-400 { - border-color: var(--rz-base-400) !important; -} - -.rz-border-color-base-500 { - border-color: var(--rz-base-500) !important; -} - -.rz-border-color-base-600 { - border-color: var(--rz-base-600) !important; -} - -.rz-border-color-base-700 { - border-color: var(--rz-base-700) !important; -} - -.rz-border-color-base-800 { - border-color: var(--rz-base-800) !important; -} - -.rz-border-color-base-900 { - border-color: var(--rz-base-900) !important; -} - -.rz-border-color-primary { - border-color: var(--rz-primary) !important; -} - -.rz-border-color-primary-light { - border-color: var(--rz-primary-light) !important; -} - -.rz-border-color-primary-lighter { - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-color-primary-dark { - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-color-primary-darker { - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-color-secondary { - border-color: var(--rz-secondary) !important; -} - -.rz-border-color-secondary-light { - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-color-secondary-lighter { - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-color-secondary-dark { - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-color-secondary-darker { - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-color-info { - border-color: var(--rz-info) !important; -} - -.rz-border-color-info-light { - border-color: var(--rz-info-light) !important; -} - -.rz-border-color-info-lighter { - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-color-info-dark { - border-color: var(--rz-info-dark) !important; +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; } -.rz-border-color-info-darker { - border-color: var(--rz-info-darker) !important; +.rz-ps-12 { + padding-inline-start: 3rem !important; } -.rz-border-color-success { - border-color: var(--rz-success) !important; +.rz-pe-12 { + padding-inline-end: 3rem !important; } -.rz-border-color-success-light { - border-color: var(--rz-success-light) !important; +.rz-m-auto { + margin: auto !important; } -.rz-border-color-success-lighter { - border-color: var(--rz-success-lighter) !important; +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; } -.rz-border-color-success-dark { - border-color: var(--rz-success-dark) !important; +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; } -.rz-border-color-success-darker { - border-color: var(--rz-success-darker) !important; +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; } -.rz-border-color-warning { - border-color: var(--rz-warning) !important; +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; } -.rz-border-color-warning-light { - border-color: var(--rz-warning-light) !important; +.rz-ms-auto { + margin-inline-start: auto !important; } -.rz-border-color-warning-lighter { - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-color-warning-dark { - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-color-warning-darker { - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-color-danger { - border-color: var(--rz-danger) !important; -} - -.rz-border-color-danger-light { - border-color: var(--rz-danger-light) !important; -} - -.rz-border-color-danger-lighter { - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-color-danger-dark { - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-color-danger-darker { - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-color-on-primary { - border-color: var(--rz-on-primary) !important; -} - -.rz-border-color-on-primary-light { - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-color-on-primary-lighter { - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-color-on-primary-dark { - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-color-on-primary-darker { - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-color-on-secondary { - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-color-on-secondary-light { - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-color-on-secondary-lighter { - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-color-on-secondary-dark { - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-color-on-secondary-darker { - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-color-on-info { - border-color: var(--rz-on-info) !important; -} - -.rz-border-color-on-info-light { - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-color-on-info-lighter { - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-color-on-info-dark { - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-color-on-info-darker { - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-color-on-success { - border-color: var(--rz-on-success) !important; -} - -.rz-border-color-on-success-light { - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-color-on-success-lighter { - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-color-on-success-dark { - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-color-on-success-darker { - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-color-on-warning { - border-color: var(--rz-on-warning) !important; -} - -.rz-border-color-on-warning-light { - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-color-on-warning-lighter { - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-color-on-warning-dark { - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-color-on-warning-darker { - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-color-on-danger { - border-color: var(--rz-on-danger) !important; -} - -.rz-border-color-on-danger-light { - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-color-on-danger-lighter { - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-color-on-danger-dark { - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-color-on-danger-darker { - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-color-series-1 { - border-color: var(--rz-series-1) !important; -} - -.rz-border-color-series-2 { - border-color: var(--rz-series-2) !important; -} - -.rz-border-color-series-3 { - border-color: var(--rz-series-3) !important; -} - -.rz-border-color-series-4 { - border-color: var(--rz-series-4) !important; -} - -.rz-border-color-series-5 { - border-color: var(--rz-series-5) !important; -} - -.rz-border-color-series-6 { - border-color: var(--rz-series-6) !important; -} - -.rz-border-color-series-7 { - border-color: var(--rz-series-7) !important; -} - -.rz-border-color-series-8 { - border-color: var(--rz-series-8) !important; -} - -.rz-border-color-series-9 { - border-color: var(--rz-series-9) !important; -} - -.rz-border-color-series-10 { - border-color: var(--rz-series-10) !important; -} - -.rz-border-color-series-11 { - border-color: var(--rz-series-11) !important; -} - -.rz-border-color-series-12 { - border-color: var(--rz-series-12) !important; -} - -.rz-border-color-series-13 { - border-color: var(--rz-series-13) !important; -} - -.rz-border-color-series-14 { - border-color: var(--rz-series-14) !important; -} - -.rz-border-color-series-15 { - border-color: var(--rz-series-15) !important; -} - -.rz-border-color-series-16 { - border-color: var(--rz-series-16) !important; -} - -.rz-border-color-series-17 { - border-color: var(--rz-series-17) !important; -} - -.rz-border-color-series-18 { - border-color: var(--rz-series-18) !important; -} - -.rz-border-color-series-19 { - border-color: var(--rz-series-19) !important; -} - -.rz-border-color-series-20 { - border-color: var(--rz-series-20) !important; -} - -.rz-border-color-series-21 { - border-color: var(--rz-series-21) !important; -} - -.rz-border-color-series-22 { - border-color: var(--rz-series-22) !important; -} - -.rz-border-color-series-23 { - border-color: var(--rz-series-23) !important; -} - -.rz-border-color-series-24 { - border-color: var(--rz-series-24) !important; -} - -.rz-border-white { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-white) !important; -} - -.rz-border-black { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-black) !important; -} - -.rz-border-base-50 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-50) !important; -} - -.rz-border-base-100 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-100) !important; -} - -.rz-border-base-200 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-200) !important; -} - -.rz-border-base-300 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-300) !important; -} - -.rz-border-base-400 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-400) !important; -} - -.rz-border-base-500 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-500) !important; -} - -.rz-border-base-600 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-600) !important; -} - -.rz-border-base-700 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-700) !important; -} - -.rz-border-base-800 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-800) !important; -} - -.rz-border-base-900 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-900) !important; -} - -.rz-border-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary) !important; -} - -.rz-border-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-light) !important; -} - -.rz-border-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary) !important; -} - -.rz-border-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info) !important; -} - -.rz-border-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-light) !important; -} - -.rz-border-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-dark) !important; -} - -.rz-border-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-darker) !important; -} - -.rz-border-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success) !important; -} - -.rz-border-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-light) !important; -} - -.rz-border-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-lighter) !important; -} - -.rz-border-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-dark) !important; -} - -.rz-border-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-darker) !important; -} - -.rz-border-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning) !important; -} - -.rz-border-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-light) !important; -} - -.rz-border-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger) !important; -} - -.rz-border-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-light) !important; -} - -.rz-border-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-on-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary) !important; -} - -.rz-border-on-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-on-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-on-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-on-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-on-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-on-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-on-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-on-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-on-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-on-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info) !important; -} - -.rz-border-on-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-on-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-on-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-on-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-on-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success) !important; -} - -.rz-border-on-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-on-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-on-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-on-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-on-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning) !important; -} - -.rz-border-on-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-on-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-on-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-on-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-on-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger) !important; -} - -.rz-border-on-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-on-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-on-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-on-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-series-1 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-1) !important; -} - -.rz-border-series-2 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-2) !important; -} - -.rz-border-series-3 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-3) !important; -} - -.rz-border-series-4 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-4) !important; -} - -.rz-border-series-5 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-5) !important; -} - -.rz-border-series-6 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-6) !important; -} - -.rz-border-series-7 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-7) !important; -} - -.rz-border-series-8 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-8) !important; -} - -.rz-border-series-9 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-9) !important; -} - -.rz-border-series-10 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-10) !important; -} - -.rz-border-series-11 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-11) !important; -} - -.rz-border-series-12 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-12) !important; -} - -.rz-border-series-13 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-13) !important; -} - -.rz-border-series-14 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-14) !important; -} - -.rz-border-series-15 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-15) !important; -} - -.rz-border-series-16 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-16) !important; -} - -.rz-border-series-17 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-17) !important; -} - -.rz-border-series-18 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-18) !important; -} - -.rz-border-series-19 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-19) !important; -} - -.rz-border-series-20 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-20) !important; -} - -.rz-border-series-21 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-21) !important; -} - -.rz-border-series-22 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-22) !important; -} - -.rz-border-series-23 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-23) !important; -} - -.rz-border-series-24 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-24) !important; -} - -.rz-ripple { - position: relative; - overflow: hidden; -} -.rz-ripple:not(.rz-state-disabled):before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - background-position: center; - background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; - transition: background-size 0.8s, opacity 0.8s; -} -.rz-ripple:not(.rz-state-disabled):active:before { - transition: background-size 0s, opacity 0s; - opacity: 0.32; - background-size: 100%; -} - -.rz-m-0 { - margin: 0 !important; -} - -.rz-my-0, -.rz-mt-0 { - margin-top: 0 !important; -} - -.rz-mx-0, -.rz-mr-0 { - margin-right: 0 !important; -} - -.rz-my-0, -.rz-mb-0 { - margin-bottom: 0 !important; -} - -.rz-mx-0, -.rz-ml-0 { - margin-left: 0 !important; -} - -.rz-ms-0 { - margin-inline-start: 0 !important; -} - -.rz-me-0 { - margin-inline-end: 0 !important; -} - -.rz-m-05 { - margin: 0.125rem !important; -} - -.rz-my-05, -.rz-mt-05 { - margin-top: 0.125rem !important; -} - -.rz-mx-05, -.rz-mr-05 { - margin-right: 0.125rem !important; -} - -.rz-my-05, -.rz-mb-05 { - margin-bottom: 0.125rem !important; -} - -.rz-mx-05, -.rz-ml-05 { - margin-left: 0.125rem !important; -} - -.rz-ms-05 { - margin-inline-start: 0.125rem !important; -} - -.rz-me-05 { - margin-inline-end: 0.125rem !important; -} - -.rz-m-1 { - margin: 0.25rem !important; -} - -.rz-my-1, -.rz-mt-1 { - margin-top: 0.25rem !important; -} - -.rz-mx-1, -.rz-mr-1 { - margin-right: 0.25rem !important; -} - -.rz-my-1, -.rz-mb-1 { - margin-bottom: 0.25rem !important; -} - -.rz-mx-1, -.rz-ml-1 { - margin-left: 0.25rem !important; -} - -.rz-ms-1 { - margin-inline-start: 0.25rem !important; -} - -.rz-me-1 { - margin-inline-end: 0.25rem !important; -} - -.rz-m-2 { - margin: 0.5rem !important; -} - -.rz-my-2, -.rz-mt-2 { - margin-top: 0.5rem !important; -} - -.rz-mx-2, -.rz-mr-2 { - margin-right: 0.5rem !important; -} - -.rz-my-2, -.rz-mb-2 { - margin-bottom: 0.5rem !important; -} - -.rz-mx-2, -.rz-ml-2 { - margin-left: 0.5rem !important; -} - -.rz-ms-2 { - margin-inline-start: 0.5rem !important; -} - -.rz-me-2 { - margin-inline-end: 0.5rem !important; -} - -.rz-m-3 { - margin: 0.75rem !important; -} - -.rz-my-3, -.rz-mt-3 { - margin-top: 0.75rem !important; -} - -.rz-mx-3, -.rz-mr-3 { - margin-right: 0.75rem !important; -} - -.rz-my-3, -.rz-mb-3 { - margin-bottom: 0.75rem !important; -} - -.rz-mx-3, -.rz-ml-3 { - margin-left: 0.75rem !important; -} - -.rz-ms-3 { - margin-inline-start: 0.75rem !important; -} - -.rz-me-3 { - margin-inline-end: 0.75rem !important; -} - -.rz-m-4 { - margin: 1rem !important; -} - -.rz-my-4, -.rz-mt-4 { - margin-top: 1rem !important; -} - -.rz-mx-4, -.rz-mr-4 { - margin-right: 1rem !important; -} - -.rz-my-4, -.rz-mb-4 { - margin-bottom: 1rem !important; -} - -.rz-mx-4, -.rz-ml-4 { - margin-left: 1rem !important; -} - -.rz-ms-4 { - margin-inline-start: 1rem !important; -} - -.rz-me-4 { - margin-inline-end: 1rem !important; -} - -.rz-m-5 { - margin: 1.25rem !important; -} - -.rz-my-5, -.rz-mt-5 { - margin-top: 1.25rem !important; -} - -.rz-mx-5, -.rz-mr-5 { - margin-right: 1.25rem !important; -} - -.rz-my-5, -.rz-mb-5 { - margin-bottom: 1.25rem !important; -} - -.rz-mx-5, -.rz-ml-5 { - margin-left: 1.25rem !important; -} - -.rz-ms-5 { - margin-inline-start: 1.25rem !important; -} - -.rz-me-5 { - margin-inline-end: 1.25rem !important; -} - -.rz-m-6 { - margin: 1.5rem !important; -} - -.rz-my-6, -.rz-mt-6 { - margin-top: 1.5rem !important; -} - -.rz-mx-6, -.rz-mr-6 { - margin-right: 1.5rem !important; -} - -.rz-my-6, -.rz-mb-6 { - margin-bottom: 1.5rem !important; -} - -.rz-mx-6, -.rz-ml-6 { - margin-left: 1.5rem !important; -} - -.rz-ms-6 { - margin-inline-start: 1.5rem !important; -} - -.rz-me-6 { - margin-inline-end: 1.5rem !important; -} - -.rz-m-7 { - margin: 1.75rem !important; -} - -.rz-my-7, -.rz-mt-7 { - margin-top: 1.75rem !important; -} - -.rz-mx-7, -.rz-mr-7 { - margin-right: 1.75rem !important; -} - -.rz-my-7, -.rz-mb-7 { - margin-bottom: 1.75rem !important; -} - -.rz-mx-7, -.rz-ml-7 { - margin-left: 1.75rem !important; -} - -.rz-ms-7 { - margin-inline-start: 1.75rem !important; -} - -.rz-me-7 { - margin-inline-end: 1.75rem !important; -} - -.rz-m-8 { - margin: 2rem !important; -} - -.rz-my-8, -.rz-mt-8 { - margin-top: 2rem !important; -} - -.rz-mx-8, -.rz-mr-8 { - margin-right: 2rem !important; -} - -.rz-my-8, -.rz-mb-8 { - margin-bottom: 2rem !important; -} - -.rz-mx-8, -.rz-ml-8 { - margin-left: 2rem !important; -} - -.rz-ms-8 { - margin-inline-start: 2rem !important; -} - -.rz-me-8 { - margin-inline-end: 2rem !important; -} - -.rz-m-9 { - margin: 2.25rem !important; -} - -.rz-my-9, -.rz-mt-9 { - margin-top: 2.25rem !important; -} - -.rz-mx-9, -.rz-mr-9 { - margin-right: 2.25rem !important; -} - -.rz-my-9, -.rz-mb-9 { - margin-bottom: 2.25rem !important; -} - -.rz-mx-9, -.rz-ml-9 { - margin-left: 2.25rem !important; -} - -.rz-ms-9 { - margin-inline-start: 2.25rem !important; -} - -.rz-me-9 { - margin-inline-end: 2.25rem !important; -} - -.rz-m-10 { - margin: 2.5rem !important; -} - -.rz-my-10, -.rz-mt-10 { - margin-top: 2.5rem !important; -} - -.rz-mx-10, -.rz-mr-10 { - margin-right: 2.5rem !important; -} - -.rz-my-10, -.rz-mb-10 { - margin-bottom: 2.5rem !important; -} - -.rz-mx-10, -.rz-ml-10 { - margin-left: 2.5rem !important; -} - -.rz-ms-10 { - margin-inline-start: 2.5rem !important; -} - -.rz-me-10 { - margin-inline-end: 2.5rem !important; -} - -.rz-m-11 { - margin: 2.75rem !important; -} - -.rz-my-11, -.rz-mt-11 { - margin-top: 2.75rem !important; -} - -.rz-mx-11, -.rz-mr-11 { - margin-right: 2.75rem !important; -} - -.rz-my-11, -.rz-mb-11 { - margin-bottom: 2.75rem !important; -} - -.rz-mx-11, -.rz-ml-11 { - margin-left: 2.75rem !important; -} - -.rz-ms-11 { - margin-inline-start: 2.75rem !important; -} - -.rz-me-11 { - margin-inline-end: 2.75rem !important; -} - -.rz-m-12 { - margin: 3rem !important; -} - -.rz-my-12, -.rz-mt-12 { - margin-top: 3rem !important; -} - -.rz-mx-12, -.rz-mr-12 { - margin-right: 3rem !important; -} - -.rz-my-12, -.rz-mb-12 { - margin-bottom: 3rem !important; -} - -.rz-mx-12, -.rz-ml-12 { - margin-left: 3rem !important; -} - -.rz-ms-12 { - margin-inline-start: 3rem !important; -} - -.rz-me-12 { - margin-inline-end: 3rem !important; -} - -.rz-p-0 { - padding: 0 !important; -} - -.rz-py-0, -.rz-pt-0 { - padding-top: 0 !important; -} - -.rz-px-0, -.rz-pr-0 { - padding-right: 0 !important; -} - -.rz-py-0, -.rz-pb-0 { - padding-bottom: 0 !important; -} - -.rz-px-0, -.rz-pl-0 { - padding-left: 0 !important; -} - -.rz-ps-0 { - padding-inline-start: 0 !important; -} - -.rz-pe-0 { - padding-inline-end: 0 !important; -} - -.rz-p-05 { - padding: 0.125rem !important; -} - -.rz-py-05, -.rz-pt-05 { - padding-top: 0.125rem !important; -} - -.rz-px-05, -.rz-pr-05 { - padding-right: 0.125rem !important; -} - -.rz-py-05, -.rz-pb-05 { - padding-bottom: 0.125rem !important; -} - -.rz-px-05, -.rz-pl-05 { - padding-left: 0.125rem !important; -} - -.rz-ps-05 { - padding-inline-start: 0.125rem !important; -} - -.rz-pe-05 { - padding-inline-end: 0.125rem !important; -} - -.rz-p-1 { - padding: 0.25rem !important; -} - -.rz-py-1, -.rz-pt-1 { - padding-top: 0.25rem !important; -} - -.rz-px-1, -.rz-pr-1 { - padding-right: 0.25rem !important; -} - -.rz-py-1, -.rz-pb-1 { - padding-bottom: 0.25rem !important; -} - -.rz-px-1, -.rz-pl-1 { - padding-left: 0.25rem !important; -} - -.rz-ps-1 { - padding-inline-start: 0.25rem !important; -} - -.rz-pe-1 { - padding-inline-end: 0.25rem !important; -} - -.rz-p-2 { - padding: 0.5rem !important; -} - -.rz-py-2, -.rz-pt-2 { - padding-top: 0.5rem !important; -} - -.rz-px-2, -.rz-pr-2 { - padding-right: 0.5rem !important; -} - -.rz-py-2, -.rz-pb-2 { - padding-bottom: 0.5rem !important; -} - -.rz-px-2, -.rz-pl-2 { - padding-left: 0.5rem !important; -} - -.rz-ps-2 { - padding-inline-start: 0.5rem !important; -} - -.rz-pe-2 { - padding-inline-end: 0.5rem !important; -} - -.rz-p-3 { - padding: 0.75rem !important; -} - -.rz-py-3, -.rz-pt-3 { - padding-top: 0.75rem !important; -} - -.rz-px-3, -.rz-pr-3 { - padding-right: 0.75rem !important; -} - -.rz-py-3, -.rz-pb-3 { - padding-bottom: 0.75rem !important; -} - -.rz-px-3, -.rz-pl-3 { - padding-left: 0.75rem !important; -} - -.rz-ps-3 { - padding-inline-start: 0.75rem !important; -} - -.rz-pe-3 { - padding-inline-end: 0.75rem !important; -} - -.rz-p-4 { - padding: 1rem !important; -} - -.rz-py-4, -.rz-pt-4 { - padding-top: 1rem !important; -} - -.rz-px-4, -.rz-pr-4 { - padding-right: 1rem !important; -} - -.rz-py-4, -.rz-pb-4 { - padding-bottom: 1rem !important; -} - -.rz-px-4, -.rz-pl-4 { - padding-left: 1rem !important; -} - -.rz-ps-4 { - padding-inline-start: 1rem !important; -} - -.rz-pe-4 { - padding-inline-end: 1rem !important; -} - -.rz-p-5 { - padding: 1.25rem !important; -} - -.rz-py-5, -.rz-pt-5 { - padding-top: 1.25rem !important; -} - -.rz-px-5, -.rz-pr-5 { - padding-right: 1.25rem !important; -} - -.rz-py-5, -.rz-pb-5 { - padding-bottom: 1.25rem !important; -} - -.rz-px-5, -.rz-pl-5 { - padding-left: 1.25rem !important; -} - -.rz-ps-5 { - padding-inline-start: 1.25rem !important; -} - -.rz-pe-5 { - padding-inline-end: 1.25rem !important; -} - -.rz-p-6 { - padding: 1.5rem !important; -} - -.rz-py-6, -.rz-pt-6 { - padding-top: 1.5rem !important; -} - -.rz-px-6, -.rz-pr-6 { - padding-right: 1.5rem !important; -} - -.rz-py-6, -.rz-pb-6 { - padding-bottom: 1.5rem !important; -} - -.rz-px-6, -.rz-pl-6 { - padding-left: 1.5rem !important; -} - -.rz-ps-6 { - padding-inline-start: 1.5rem !important; -} - -.rz-pe-6 { - padding-inline-end: 1.5rem !important; -} - -.rz-p-7 { - padding: 1.75rem !important; -} - -.rz-py-7, -.rz-pt-7 { - padding-top: 1.75rem !important; -} - -.rz-px-7, -.rz-pr-7 { - padding-right: 1.75rem !important; -} - -.rz-py-7, -.rz-pb-7 { - padding-bottom: 1.75rem !important; -} - -.rz-px-7, -.rz-pl-7 { - padding-left: 1.75rem !important; -} - -.rz-ps-7 { - padding-inline-start: 1.75rem !important; -} - -.rz-pe-7 { - padding-inline-end: 1.75rem !important; -} - -.rz-p-8 { - padding: 2rem !important; -} - -.rz-py-8, -.rz-pt-8 { - padding-top: 2rem !important; -} - -.rz-px-8, -.rz-pr-8 { - padding-right: 2rem !important; -} - -.rz-py-8, -.rz-pb-8 { - padding-bottom: 2rem !important; -} - -.rz-px-8, -.rz-pl-8 { - padding-left: 2rem !important; -} - -.rz-ps-8 { - padding-inline-start: 2rem !important; -} - -.rz-pe-8 { - padding-inline-end: 2rem !important; -} - -.rz-p-9 { - padding: 2.25rem !important; -} - -.rz-py-9, -.rz-pt-9 { - padding-top: 2.25rem !important; -} - -.rz-px-9, -.rz-pr-9 { - padding-right: 2.25rem !important; -} - -.rz-py-9, -.rz-pb-9 { - padding-bottom: 2.25rem !important; -} - -.rz-px-9, -.rz-pl-9 { - padding-left: 2.25rem !important; -} - -.rz-ps-9 { - padding-inline-start: 2.25rem !important; -} - -.rz-pe-9 { - padding-inline-end: 2.25rem !important; -} - -.rz-p-10 { - padding: 2.5rem !important; -} - -.rz-py-10, -.rz-pt-10 { - padding-top: 2.5rem !important; -} - -.rz-px-10, -.rz-pr-10 { - padding-right: 2.5rem !important; -} - -.rz-py-10, -.rz-pb-10 { - padding-bottom: 2.5rem !important; -} - -.rz-px-10, -.rz-pl-10 { - padding-left: 2.5rem !important; -} - -.rz-ps-10 { - padding-inline-start: 2.5rem !important; -} - -.rz-pe-10 { - padding-inline-end: 2.5rem !important; -} - -.rz-p-11 { - padding: 2.75rem !important; -} - -.rz-py-11, -.rz-pt-11 { - padding-top: 2.75rem !important; -} - -.rz-px-11, -.rz-pr-11 { - padding-right: 2.75rem !important; -} - -.rz-py-11, -.rz-pb-11 { - padding-bottom: 2.75rem !important; -} - -.rz-px-11, -.rz-pl-11 { - padding-left: 2.75rem !important; -} - -.rz-ps-11 { - padding-inline-start: 2.75rem !important; -} - -.rz-pe-11 { - padding-inline-end: 2.75rem !important; -} - -.rz-p-12 { - padding: 3rem !important; -} - -.rz-py-12, -.rz-pt-12 { - padding-top: 3rem !important; -} - -.rz-px-12, -.rz-pr-12 { - padding-right: 3rem !important; -} - -.rz-py-12, -.rz-pb-12 { - padding-bottom: 3rem !important; -} - -.rz-px-12, -.rz-pl-12 { - padding-left: 3rem !important; -} - -.rz-ps-12 { - padding-inline-start: 3rem !important; -} - -.rz-pe-12 { - padding-inline-end: 3rem !important; -} - -.rz-m-auto { - margin: auto !important; -} - -.rz-my-auto, -.rz-mt-auto { - margin-top: auto !important; -} - -.rz-mx-auto, -.rz-mr-auto { - margin-right: auto !important; -} - -.rz-my-auto, -.rz-mb-auto { - margin-bottom: auto !important; -} - -.rz-mx-auto, -.rz-ml-auto { - margin-left: auto !important; -} - -.rz-ms-auto { - margin-inline-start: auto !important; -} - -.rz-me-auto { - margin-inline-end: auto !important; +.rz-me-auto { + margin-inline-end: auto !important; } @media (min-width: 576px) { @@ -13120,7 +7630,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -13129,7 +7640,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -13138,7 +7650,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -13147,7 +7660,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -13156,7 +7670,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -13165,7 +7680,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h1, @@ -13175,7 +7691,8 @@ h1, font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2, @@ -13185,7 +7702,8 @@ h2, font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3, @@ -13195,7 +7713,8 @@ h3, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4, @@ -13205,7 +7724,8 @@ h4, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5, @@ -13215,171 +7735,55 @@ h5, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h6, -.h6 { - font-size: 0.75rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h1.text-thin, -.h1.text-thin { - font-size: 3rem; - font-weight: 300; + margin-block-start: 0; + margin-block-end: 0.5rem; } - -h2.text-thin, -.h2.text-thin { - font-size: 2rem; - font-weight: 300; -} - -h3.text-thin, -.h3.text-thin { - font-size: 1.25rem; - font-weight: 300; -} - -h4.text-thin, -.h4.text-thin { - font-size: 1rem; - font-weight: 300; -} - -h5.text-thin, -.h5.text-thin { - font-size: 0.875rem; - font-weight: 300; -} - -h6.text-thin, -.h6.text-thin { - font-size: 0.75rem; - font-weight: 300; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; } .rz-text-display-h1 { @@ -13389,7 +7793,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -13399,7 +7804,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -13409,7 +7815,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -13419,7 +7826,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -13429,7 +7837,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -13439,7 +7848,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -13449,7 +7859,8 @@ h6.text-thin, font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -13459,7 +7870,8 @@ h6.text-thin, font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -13469,7 +7881,8 @@ h6.text-thin, font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -13479,7 +7892,8 @@ h6.text-thin, font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -13489,7 +7903,8 @@ h6.text-thin, font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -13499,7 +7914,8 @@ h6.text-thin, font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -13509,7 +7925,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -13519,7 +7936,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -13529,7 +7947,8 @@ h6.text-thin, font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -13539,7 +7958,8 @@ h6.text-thin, font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -13549,7 +7969,8 @@ h6.text-thin, font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -13559,7 +7980,8 @@ h6.text-thin, font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -13570,7 +7992,8 @@ h6.text-thin, letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -13804,26 +8227,24 @@ p { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } label { - margin-bottom: 0; -} - -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; + margin-block-start: 0; + margin-block-end: 0; } ::selection { @@ -13839,8 +8260,9 @@ label { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -13851,7 +8273,7 @@ label { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -13872,14 +8294,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -13904,6 +8318,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -13927,98 +8358,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -14026,18 +8431,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -14062,6 +8455,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -14093,59 +8498,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -14290,46 +8642,99 @@ p-button[type] { background-color: var(--rz-danger-dark); color: var(--rz-on-danger-dark); } -.rz-button.rz-danger.rz-shade-darker { - background-color: var(--rz-danger-darker); - color: var(--rz-on-danger-darker); +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); } -.rz-button.rz-danger.rz-variant-flat { +.rz-button.rz-base.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-danger.rz-variant-flat:focus-visible { - outline-color: var(--rz-danger); +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); } -.rz-button.rz-success { - background-color: var(--rz-success); - color: var(--rz-on-success); -} -.rz-button.rz-success.rz-shade-lighter { - background-color: var(--rz-success-lighter); - color: var(--rz-on-success-lighter); -} -.rz-button.rz-success.rz-shade-light { - background-color: var(--rz-success-light); - color: var(--rz-on-success-light); +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-button.rz-success.rz-shade-default { - background-color: var(--rz-success); - color: var(--rz-on-success); +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; } -.rz-button.rz-success.rz-shade-dark { - background-color: var(--rz-success-dark); - color: var(--rz-on-success-dark); +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); } -.rz-button.rz-success.rz-shade-darker { - background-color: var(--rz-success-darker); - color: var(--rz-on-success-darker); + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); } -.rz-button.rz-success.rz-variant-flat { +.rz-button.rz-dark.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-success.rz-variant-flat:focus-visible { - outline-color: var(--rz-success); +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); } .rz-button.rz-variant-outlined.rz-primary { @@ -14361,59 +8766,6 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - .rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } @@ -14588,76 +8940,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); -} -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -14818,15 +9175,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -14835,7 +9240,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -14845,51 +9250,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -14897,13 +9302,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -14912,7 +9317,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -14930,19 +9335,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: 10rem; - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 700; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -14984,15 +9378,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -15143,6 +9528,41 @@ p-button[type] { color: var(--rz-on-success-darker); } +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + .rz-variant-outlined.rz-badge-primary { background-color: transparent; } @@ -15167,22 +9587,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} - -.rz-variant-outlined.rz-badge-dark { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} - .rz-variant-outlined.rz-badge-secondary { background-color: transparent; } @@ -15327,6 +9731,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -15346,16 +9790,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -15470,20 +9904,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -15497,57 +9951,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: 0.875rem; - --rz-input-height: 2.25rem; - --rz-input-line-height: 1.429; - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-disabled-background-color: var(--rz-base-100); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -15558,26 +9987,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -15596,15 +10028,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-base-200); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: none; -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -15623,14 +10046,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: var(--rz-border-base-200); - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -15645,18 +10060,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-normal); - --rz-sidebar-background-color: var(--rz-base-800); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -15665,7 +10072,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -15684,17 +10091,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-100); - --rz-card-shadow: var(--rz-shadow-2); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -15724,13 +10122,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -15744,32 +10135,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-secondary); - --rz-accordion-hover-color: var(--rz-secondary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -15788,16 +10155,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -15805,20 +10172,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -15828,7 +10196,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -15837,10 +10205,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -15848,34 +10212,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: var(--rz-base-200); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-secondary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -15926,33 +10282,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-200); - --rz-sidebar-toggle-color: var(--rz-base-900); - --rz-sidebar-toggle-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-secondary); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -15986,37 +10328,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: var(--rz-border-normal); - --rz-menu-border-radius: 2px; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-hover-background-color: var(--rz-secondary-light); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-secondary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-secondary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-secondary); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -16041,7 +10355,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16063,6 +10378,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -16071,7 +10387,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -16084,7 +10401,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -16114,13 +10432,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -16129,7 +10447,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -16141,7 +10460,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16165,16 +10485,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -16191,7 +10511,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -16251,65 +10572,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: var(--rz-text-contrast-color); - --rz-panel-menu-background-color: var(--rz-base-800); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.3); - --rz-panel-menu-hover-color: var(--rz-text-contrast-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-900); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-base-900); - --rz-panel-menu-item-background-color: var(--rz-base-900); - --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: inherit; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -16319,10 +10595,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -16334,11 +10611,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -16349,8 +10626,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -16359,7 +10636,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -16372,7 +10650,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -16381,20 +10659,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -16418,67 +10698,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-200); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-secondary); - --rz-profile-menu-item-hover-background-color: var(--rz-secondary); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -16499,19 +10764,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -16531,17 +10799,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -16549,26 +10811,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-200); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -16622,14 +10866,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -16639,7 +10885,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -16662,54 +10909,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: inherit; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-secondary); - --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); - --rz-checkbox-checked-color: var(--rz-on-secondary); - --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -16721,10 +10956,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -16743,10 +10980,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -16803,17 +11037,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-secondary); - --rz-switch-box-shadow: none; - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -16833,10 +11058,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -16858,8 +11083,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -16868,7 +11093,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -16879,36 +11104,24 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-checked-circle-background-color); transform: translateX(1.2rem); } - -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-secondary); - --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-radio-checked-background-color: var(--rz-secondary); - --rz-radio-checked-hover-background-color: var(--rz-secondary-light); - --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-base-background-color); - --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); - --rz-radio-circle-hover-background-color: var(--rz-base-100); - --rz-radio-icon-width: 0.5rem; - --rz-radio-icon-height: 0.5rem; - --rz-radio-checked-border: var(--rz-input-border); + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -16920,7 +11133,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -16943,10 +11157,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -17006,26 +11217,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-normal); - --rz-fieldset-border-radius: 0; - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-tertiary-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-200); - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -17054,7 +11250,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -17072,8 +11269,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -17088,36 +11287,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); - --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); - --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); - --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); - --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); - --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-100); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -17144,15 +11313,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -17160,8 +11330,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -17196,7 +11366,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -17289,28 +11460,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -17327,10 +11502,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -17339,7 +11515,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -17361,24 +11538,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -17388,7 +11549,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -17431,7 +11593,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -17472,39 +11635,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -17514,9 +11667,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -17530,11 +11680,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -17543,36 +11693,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-background-color); - --rz-slider-border: var(--rz-border-normal); - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-secondary-lighter); - --rz-slider-range-border: var(--rz-border-secondary-light); - --rz-slider-handle-width: 0.75rem; - --rz-slider-handle-height: 1.5rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-secondary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-secondary-light); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-100); - --rz-slider-disabled-range-border: var(--rz-border-normal); - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-300); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -17599,11 +11721,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -17612,7 +11734,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -17637,19 +11759,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-secondary); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.3; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-secondary); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -17707,16 +11818,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -17737,17 +11840,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-secondary); - --rz-selectbar-selected-color: var(--rz-on-secondary); - --rz-selectbar-selected-border: var(--rz-border-secondary); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -17755,7 +11849,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -17763,13 +11857,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -17778,157 +11872,102 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; - display: inline-block; - background-color: var(--rz-selectbar-background-color); - color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -.rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; - display: inline-block; - background-color: var(--rz-selectbar-background-color); - color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-md.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -.rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-200); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); - --rz-datepicker-calendar-border: var(--rz-border-base-100); - --rz-datepicker-calendar-border-radius: 0; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-secondary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: none; - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-200); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-secondary); - --rz-timepicker-button-color: var(--rz-on-secondary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); } -.rz-calendar { +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -17936,9 +11975,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -17976,148 +12015,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -18148,47 +12214,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-secondary); - --rz-numeric-button-disabled-background-color: var(--rz-base-300); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-on-secondary); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -18196,9 +12249,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -18206,49 +12259,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); -} - -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -:root { - --rz-upload-button-bar-background-color: var(--rz-base-200); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-300); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary); - --rz-upload-choose-color: var(--rz-on-secondary); - --rz-upload-choose-hover-background-color: var(--rz-secondary); - --rz-upload-choose-hover-color: var(--rz-on-secondary); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -18335,101 +12369,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-secondary-lighter); - --rz-grid-hover-color: var(--rz-on-secondary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-secondary-dark); - --rz-grid-selected-color: var(--rz-on-secondary-dark); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: none; - --rz-grid-header-background-color: var(--rz-base-200); - --rz-grid-header-font-size: 0.75rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: uppercase; - --rz-grid-header-color: var(--rz-text-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-300); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-200); - --rz-grid-filter-background-color: var(--rz-base-100); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: var(--rz-border-normal); - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-base-200); - --rz-grid-clear-filter-button-background-color: var(--rz-secondary); - --rz-grid-clear-filter-button-color: var(--rz-on-secondary); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: var(--rz-border-normal); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-100); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-background-color); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-200); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-color); - --rz-column-drag-handle-hover-color: var(--rz-text-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -18453,10 +12392,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -18500,8 +12443,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -18509,8 +12452,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -18536,11 +12479,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -18560,13 +12504,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -18586,11 +12531,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -18598,11 +12543,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -18616,10 +12561,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -18635,7 +12580,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -18687,7 +12632,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -18697,11 +12642,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -18724,13 +12669,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -18751,21 +12700,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -18777,7 +12726,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -18823,7 +12772,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -18837,14 +12785,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -18946,10 +12894,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -18960,31 +12904,18 @@ a:focus-visible .rz-fieldset-toggler { line-height: calc(1.25rem - var(--rz-border-width) * 2); border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-start-end-radius: 0; - border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); - border-end-end-radius: 0; - } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { - text-indent: 2.25rem; - } -} -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } } - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -19014,31 +12945,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -19104,7 +13013,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -19114,18 +13023,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -19134,9 +13082,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -19178,16 +13128,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -19220,7 +13176,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -19271,26 +13227,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -19303,7 +13263,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -19323,7 +13283,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -19331,312 +13291,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: var(--rz-base-background-color); - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: var(--rz-border-normal); - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-base-background-color); - --rz-paginator-numeric-button-selected-color: var(--rz-primary); - --rz-paginator-numeric-button-selected-border: var(--rz-border-base-200); - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-200); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-200); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-200); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-200); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-secondary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-100); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -19646,24 +13566,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-secondary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-secondary-light); - --rz-tree-node-hover-color: var(--rz-on-secondary-light); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -19680,12 +13584,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -19694,13 +13598,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -19710,15 +13620,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -19730,7 +13642,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -19749,25 +13661,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-200); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-item-border: var(--rz-border-base-200); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -19786,13 +13684,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -19801,24 +13700,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -19840,7 +13732,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -19851,23 +13744,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -19877,17 +13770,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -19900,70 +13794,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-300); - --rz-scheduler-minor-border-color: var(--rz-base-200); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-200); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); - --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-secondary); - --rz-scheduler-view-selected-background-color: var(--rz-secondary); - --rz-scheduler-view-selected-border-color: var(--rz-secondary); - --rz-scheduler-header-background-color: var(--rz-base-200); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: var(--rz-border-normal); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -19979,7 +13811,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -19992,12 +13824,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -20007,27 +13839,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -20062,8 +13895,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -20123,16 +13956,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -20149,25 +13982,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -20181,7 +14027,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -20193,24 +14039,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -20220,11 +14066,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -20252,7 +14098,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -20268,7 +14114,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -20276,7 +14122,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -20325,7 +14171,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -20374,7 +14220,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -20420,8 +14266,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20430,15 +14276,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20471,8 +14317,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20481,15 +14327,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20519,35 +14365,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-tabs-border: var(--rz-border-base-200); - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-200); - --rz-tabs-tab-color: var(--rz-secondary); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); - --rz-tabs-tab-hover-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -20601,7 +14420,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -20644,7 +14464,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -20664,7 +14484,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -20699,6 +14519,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -20728,22 +14551,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-tabview-panel { padding: var(--rz-tabs-padding); } - -.rz-tabview-left-icon { - font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: 0.875rem; + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -20769,8 +14584,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20787,8 +14602,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20832,29 +14647,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-100); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 0.6875rem 1.25rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.875rem; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -20867,6 +14661,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -20881,37 +14676,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -20923,7 +14736,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -20937,7 +14750,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -20950,42 +14763,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -21018,161 +14804,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); -} - -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); -} - -.rz-dialog-side-titlebar-close { - float: right; -} -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); -} -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; -} -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); -} - -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } } - -.rz-growl { +.rz-notification { + box-sizing: border-box; position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-growl-item-container { +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-growl-item { +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); border-radius: var(--rz-notification-border-radius); box-shadow: var(--rz-notification-shadow); padding: var(--rz-notification-padding); } - -.rz-growl-message-success .rz-growl-item { +.rz-notification-success .rz-notification-item { color: var(--rz-notification-success-color); background-color: var(--rz-notification-success-background-color); } - -.rz-growl-message-warn .rz-growl-item { +.rz-notification-warn .rz-notification-item { color: var(--rz-notification-warning-color); background-color: var(--rz-notification-warning-background-color); } - -.rz-growl-message-error .rz-growl-item { +.rz-notification-error .rz-notification-item { color: var(--rz-notification-error-color); background-color: var(--rz-notification-error-background-color); } - -.rz-growl-message-info .rz-growl-item { +.rz-notification-info .rz-notification-item { color: var(--rz-notification-info-color); background-color: var(--rz-notification-info-background-color); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-icon-close { - float: right; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close:before { - content: "close"; + +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -21197,16 +14947,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: var(--rz-secondary); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } body:not(.rz-default-scrollbars)::-webkit-scrollbar, @@ -21255,14 +14997,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-100); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -21292,7 +15028,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -21304,12 +15040,15 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -21319,11 +15058,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -21333,24 +15067,11 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -21360,14 +15081,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -21379,18 +15094,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -21439,19 +15145,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-200); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-secondary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -21479,6 +15174,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -21539,6 +15235,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -21550,6 +15249,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -21570,6 +15272,26 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -21615,48 +15337,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -21720,6 +15400,27 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -21762,6 +15463,69 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-success); } +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + .rz-progressbar-circular-lg { width: 6rem; height: 6rem; @@ -21786,19 +15550,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { font-size: calc(var(--rz-progressbar-font-size) * 0.375); } -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); -} - .rz-chart { + box-sizing: border-box; position: relative; height: 300px; } @@ -22570,6 +16323,10 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -22693,6 +16450,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -22719,24 +16477,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary); - --rz-editor-button-selected-color: var(--rz-on-secondary); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -22921,30 +16663,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -23021,7 +16739,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -23093,7 +16811,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -23106,7 +16824,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -23121,6 +16839,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -23132,27 +16851,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -23168,15 +16884,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -23188,15 +16902,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-secondary); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-secondary); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -23218,7 +16925,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23233,7 +16940,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23320,11 +17027,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -23358,8 +17082,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -23367,8 +17101,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -23382,22 +17116,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: 4px; - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -24226,30 +17946,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -24268,16 +17993,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -24653,279 +18375,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -25270,36 +18992,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-100); - --rz-form-field-filled-hover-background-color: var(--rz-base-200); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: none; - --rz-form-field-focus-shadow: none; - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -25309,11 +19001,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -25322,12 +19015,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -25355,20 +19048,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -25413,33 +19108,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -25456,16 +19154,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -25473,33 +19171,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -25516,27 +19214,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -26081,23 +19767,1579 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { width: 100%; height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #dadfe2; + --rz-base-50: #ffffff; + --rz-base-100: #f6f7fa; + --rz-base-200: #e9edf0; + --rz-base-300: #dadfe2; + --rz-base-400: #c1c9cb; + --rz-base-500: #95a4a8; + --rz-base-600: #77858b; + --rz-base-700: #545e61; + --rz-base-800: #3a474d; + --rz-base-900: #28363c; + --rz-base-light: #e9edf0; + --rz-base-lighter: #f6f7fa; + --rz-base-dark: #77858b; + --rz-base-darker: #28363c; + --rz-primary: #ff6d41; + --rz-primary-light: #ff7f58; + --rz-primary-lighter: rgba(255, 109, 65, 0.16); + --rz-primary-dark: #eb643c; + --rz-primary-darker: #bf5231; + --rz-secondary: #35a0d7; + --rz-secondary-light: #4dabdc; + --rz-secondary-lighter: rgba(53, 160, 215, 0.2); + --rz-secondary-dark: #3193c6; + --rz-secondary-darker: #2878a1; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #28363c; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #ff6d41; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #35a0d7; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #0479cc; + --rz-series-2: #68d5c8; + --rz-series-3: #ff6d41; + --rz-series-4: #cb6992; + --rz-series-5: #e6c54f; + --rz-series-6: #f9777f; + --rz-series-7: #5dbf74; + --rz-series-8: #4db9f2; + --rz-series-9: #06a9e0; + --rz-series-10: #92e6de; + --rz-series-11: #ff995b; + --rz-series-12: #e093be; + --rz-series-13: #f0dc6f; + --rz-series-14: #fba7b2; + --rz-series-15: #82d9a2; + --rz-series-16: #6cd5f7; + --rz-series-17: #0063c2; + --rz-series-18: #50cdbe; + --rz-series-19: #ff5628; + --rz-series-20: #c1527f; + --rz-series-21: #e1ba36; + --rz-series-22: #f8616a; + --rz-series-23: #45b35e; + --rz-series-24: #34acef; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-100); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-200); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-item-border: var(--rz-border-base-200); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-200); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-100); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-200); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-100); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-100); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-normal); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-200); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-200); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-100); + --rz-form-field-filled-hover-background-color: var(--rz-base-200); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-200); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-300); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-200); + --rz-grid-filter-background-color: var(--rz-base-100); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-100); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-100); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-background-color); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-200); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-color); + --rz-column-drag-handle-hover-color: var(--rz-text-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-200); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-100); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-100); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-300); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-100); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-200); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-200); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-background-color); + --rz-pager-numeric-button-selected-color: var(--rz-primary); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-200); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-200); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-200); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-200); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-secondary); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-200); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-300); + --rz-scheduler-minor-border-color: var(--rz-base-200); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-200); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-200); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-secondary); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-200); + --rz-sidebar-toggle-color: var(--rz-base-900); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-normal); + --rz-sidebar-background-color: var(--rz-base-800); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-lighter); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-100); + --rz-slider-disabled-range-border: var(--rz-border-normal); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-300); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ --rz-gap: 1rem; -} - -.rz-picklist-source-wrapper, -.rz-picklist-target-wrapper { - flex: 1; - --rz-gap: 0.5rem; - overflow: hidden; -} -.rz-picklist-source-wrapper .rz-listbox, -.rz-picklist-target-wrapper .rz-listbox { - width: 100%; - height: 100%; -} - -.rz-picklist-buttons.rz-flex-row .rzi { - transform: rotate(90deg); + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-200); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: var(--rz-border-base-200); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-200); + --rz-tabs-tab-color: var(--rz-secondary); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); + --rz-tabs-tab-hover-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-200); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/humanistic-base.css b/_content/Radzen.Blazor/css/humanistic-base.css index 2a31f97..8131459 100755 --- a/_content/Radzen.Blazor/css/humanistic-base.css +++ b/_content/Radzen.Blazor/css/humanistic-base.css @@ -1,630 +1,174 @@ @charset "UTF-8"; @font-face { - font-family: "Material Icons"; + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); + font-weight: 100 700; } @font-face { font-family: "Source Sans Pro"; - font-weight: 200; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + font-weight: 200 900; } @font-face { font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); +*, +*::before, +*::after { + box-sizing: inherit; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-text-title-color { + color: var(--rz-base-900) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-text-color { + color: var(--rz-base-800) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-text-contrast-color { + color: var(--rz-white) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f3f5f7; - --rz-base-200: #ebeef2; - --rz-base-300: #d9e1ea; - --rz-base-400: #87a4c4; - --rz-base-500: #7293b6; - --rz-base-600: #466791; - --rz-base-700: #395374; - --rz-base-800: #30445f; - --rz-base-900: #2b3a50; - --rz-primary: #d64d42; - --rz-primary-light: #db6259; - --rz-primary-lighter: rgba(214, 77, 66, 0.16); - --rz-primary-dark: #c5473d; - --rz-primary-darker: #a13a32; - --rz-secondary: #3ba5fc; - --rz-secondary-light: #53b0fc; - --rz-secondary-lighter: rgba(59, 165, 252, 0.2); - --rz-secondary-dark: #3698e8; - --rz-secondary-darker: #2c7cbd; - --rz-info: #2cc8c8; - --rz-info-light: #4ed1d1; - --rz-info-lighter: rgba(44, 200, 200, 0.2); - --rz-info-dark: #25a8a8; - --rz-info-darker: #219696; - --rz-success: #5dbf74; - --rz-success-light: #77c98a; - --rz-success-lighter: rgba(93, 191, 116, 0.16); - --rz-success-dark: #4ea061; - --rz-success-darker: #468f57; - --rz-warning: #fac152; - --rz-warning-light: #fbcb6e; - --rz-warning-lighter: rgba(250, 193, 82, 0.2); - --rz-warning-dark: #d2a245; - --rz-warning-darker: #bc913e; - --rz-danger: #f9777f; - --rz-danger-light: #fa8d93; - --rz-danger-lighter: rgba(249, 119, 127, 0.2); - --rz-danger-dark: #d1646b; - --rz-danger-darker: #bb595f; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #d64d42; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #3ba5fc; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2cc8c8; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #5dbf74; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #fac152; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f9777f; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #376df5; - --rz-series-2: #64dfdf; - --rz-series-3: #f68769; - --rz-series-4: #c161e2; - --rz-series-5: #fdd07a; - --rz-series-6: #f8629b; - --rz-series-7: #74d062; - --rz-series-8: #84a7ff; - --rz-series-9: #4d99f9; - --rz-series-10: #8cecec; - --rz-series-11: #fab793; - --rz-series-12: #da88ee; - --rz-series-13: #fee3ab; - --rz-series-14: #fb89c3; - --rz-series-15: #a2e389; - --rz-series-16: #b5caff; - --rz-series-17: #1750f3; - --rz-series-18: #46d7d7; - --rz-series-19: #f46e4c; - --rz-series-20: #b343db; - --rz-series-21: #fdc55f; - --rz-series-22: #f64485; - --rz-series-23: #58c544; - --rz-series-24: #6a93ff; + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-secondary); +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); -} - -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -:root { - --rz-border-radius: 0; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-display-none { + display: none !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-display-block { + display: block !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-display-inline { + display: inline !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-display-inline-block { + display: inline-block !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-display-flex { + display: flex !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-display-inline-flex { + display: inline-flex !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-display-grid { + display: grid !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); -} - -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; -} - -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; -} - -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; -} - -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; -} - -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; -} - -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; -} - -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; -} - -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; -} - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; -} - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; -} - -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; -} - -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; -} - -.rz-display-none { - display: none !important; -} - -.rz-display-block { - display: block !important; -} - -.rz-display-inline { - display: inline !important; -} - -.rz-display-inline-block { - display: inline-block !important; -} - -.rz-display-flex { - display: flex !important; -} - -.rz-display-inline-flex { - display: inline-flex !important; -} - -.rz-display-grid { - display: grid !important; -} - -.rz-display-inline-grid { - display: inline-grid !important; +.rz-display-inline-grid { + display: inline-grid !important; } @media (min-width: 576px) { @@ -867,6 +411,10 @@ $rz-shadow-10: none !default; */ color: var(--rz-black) !important; } +.rz-color-base { + color: var(--rz-base) !important; +} + .rz-color-base-50 { color: var(--rz-base-50) !important; } @@ -907,6 +455,22 @@ $rz-shadow-10: none !default; */ color: var(--rz-base-900) !important; } +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + .rz-color-primary { color: var(--rz-primary) !important; } @@ -1027,6 +591,26 @@ $rz-shadow-10: none !default; */ color: var(--rz-danger-darker) !important; } +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + .rz-color-on-primary { color: var(--rz-on-primary) !important; } @@ -1251,6 +835,10 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-black) !important; } +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + .rz-background-color-base-50 { background-color: var(--rz-base-50) !important; } @@ -1291,6 +879,22 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-base-900) !important; } +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + .rz-background-color-primary { background-color: var(--rz-primary) !important; } @@ -1411,6 +1015,26 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-danger-darker) !important; } +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + .rz-background-color-on-primary { background-color: var(--rz-on-primary) !important; } @@ -1635,6 +1259,10 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + .rz-border-color-base-50 { border-color: var(--rz-base-50) !important; } @@ -1675,6 +1303,22 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + .rz-border-color-primary { border-color: var(--rz-primary) !important; } @@ -1795,6 +1439,26 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-color-on-primary { border-color: var(--rz-on-primary) !important; } @@ -2023,6 +1687,12 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + .rz-border-base-50 { border-width: var(--rz-border-width); border-style: solid; @@ -2083,6 +1753,30 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + .rz-border-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2263,6 +1957,36 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-on-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2606,6 +2330,10 @@ $rz-shadow-10: none !default; */ background-size: 100%; } +body { + margin: 0; +} + .rz-m-0 { margin: 0 !important; } @@ -7902,7 +7630,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -7911,7 +7640,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -7920,7 +7650,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -7929,7 +7660,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -7938,7 +7670,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -7947,125 +7680,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } .rz-text-display-h1 { @@ -8075,7 +7691,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -8085,7 +7702,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -8095,7 +7713,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -8105,7 +7724,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -8115,7 +7735,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -8125,7 +7746,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -8135,7 +7757,8 @@ h6.rz-heading { font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -8145,7 +7768,8 @@ h6.rz-heading { font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -8155,7 +7779,8 @@ h6.rz-heading { font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -8165,7 +7790,8 @@ h6.rz-heading { font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -8175,7 +7801,8 @@ h6.rz-heading { font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -8185,7 +7812,8 @@ h6.rz-heading { font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -8195,7 +7823,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -8205,7 +7834,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -8215,7 +7845,8 @@ h6.rz-heading { font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -8225,7 +7856,8 @@ h6.rz-heading { font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -8235,7 +7867,8 @@ h6.rz-heading { font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -8245,7 +7878,8 @@ h6.rz-heading { font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -8256,7 +7890,8 @@ h6.rz-heading { letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -8475,24 +8110,21 @@ h6.rz-heading { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; -} - .rz-layout ::selection { background-color: var(--rz-text-selection-background-color); color: var(--rz-text-selection-color); @@ -8501,8 +8133,9 @@ h6.rz-heading { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -8513,7 +8146,7 @@ h6.rz-heading { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -8534,14 +8167,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -8566,6 +8191,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -8589,98 +8231,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -8688,18 +8304,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -8724,6 +8328,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -8755,59 +8371,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -8994,6 +8557,59 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-variant-outlined.rz-primary { background-color: transparent; } @@ -9023,73 +8639,20 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { +.rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); } -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); } - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-secondary { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); - color: var(--rz-secondary-light); -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); - color: var(--rz-secondary-light); -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); - color: var(--rz-secondary); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); } .rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); @@ -9250,76 +8813,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); -} -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); } -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -9480,15 +9048,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -9497,7 +9113,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -9507,51 +9123,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -9559,13 +9175,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -9574,7 +9190,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -9592,19 +9208,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 600; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -9646,15 +9251,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -9805,44 +9401,63 @@ p-button[type] { color: var(--rz-on-success-darker); } -.rz-variant-outlined.rz-badge-primary { - background-color: transparent; +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); - color: var(--rz-primary-lighter); +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); } -.rz-variant-outlined.rz-badge-primary.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); - color: var(--rz-primary-light); +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); } -.rz-variant-outlined.rz-badge-primary.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); - color: var(--rz-primary); +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); } -.rz-variant-outlined.rz-badge-primary.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); - color: var(--rz-primary-dark); +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); } -.rz-variant-outlined.rz-badge-primary.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); - color: var(--rz-primary-darker); +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); } -.rz-variant-outlined.rz-badge-dark { +.rz-variant-outlined.rz-badge-primary { background-color: transparent; } -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); } .rz-variant-outlined.rz-badge-secondary { @@ -9989,6 +9604,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -10008,16 +9663,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -10132,20 +9777,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -10159,57 +9824,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: var(--rz-body-font-size); - --rz-input-height: 2.25rem; - --rz-input-line-height: var(--rz-body-line-height); - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-disabled-background-color: var(--rz-base-100); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: var(--rz-transition-all), width 0, height 0; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -10220,26 +9860,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -10258,15 +9901,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-base-200); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: none; -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -10285,14 +9919,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: var(--rz-border-base-200); - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -10307,18 +9933,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-normal); - --rz-sidebar-background-color: var(--rz-base-800); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -10327,7 +9945,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -10346,17 +9964,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-100); - --rz-card-shadow: var(--rz-shadow-2); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -10386,13 +9995,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -10406,32 +10008,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-secondary); - --rz-accordion-hover-color: var(--rz-secondary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -10450,16 +10028,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -10467,20 +10045,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -10490,7 +10069,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -10499,10 +10078,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -10510,34 +10085,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: var(--rz-base-200); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-secondary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -10588,33 +10155,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-200); - --rz-sidebar-toggle-color: var(--rz-base-900); - --rz-sidebar-toggle-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-secondary); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -10648,37 +10201,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: var(--rz-border-normal); - --rz-menu-border-radius: 2px; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-hover-background-color: var(--rz-secondary-light); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-secondary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-secondary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-secondary); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -10703,7 +10228,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10725,6 +10251,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -10733,7 +10260,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -10746,7 +10274,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -10776,13 +10305,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -10791,7 +10320,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -10803,7 +10333,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10827,16 +10358,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -10853,7 +10384,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -10913,65 +10445,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: var(--rz-text-contrast-color); - --rz-panel-menu-background-color: var(--rz-base-800); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.3); - --rz-panel-menu-hover-color: var(--rz-text-contrast-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-900); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-base-900); - --rz-panel-menu-item-background-color: var(--rz-base-900); - --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: inherit; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -10981,10 +10468,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -10996,11 +10484,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -11011,8 +10499,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -11021,7 +10509,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -11034,7 +10523,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -11043,20 +10532,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -11080,67 +10571,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-200); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-secondary); - --rz-profile-menu-item-hover-background-color: var(--rz-secondary); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -11161,19 +10637,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -11193,17 +10672,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -11211,26 +10684,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-200); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -11284,14 +10739,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -11301,7 +10758,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -11324,54 +10782,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: inherit; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-secondary); - --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); - --rz-checkbox-checked-color: var(--rz-on-secondary); - --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -11383,10 +10829,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -11405,10 +10853,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11465,17 +10910,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-secondary); - --rz-switch-box-shadow: none; - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -11495,10 +10931,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -11520,8 +10956,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -11530,7 +10966,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -11542,35 +10978,23 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { transform: translateX(1.2rem); } -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-secondary); - --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-radio-checked-background-color: var(--rz-secondary); - --rz-radio-checked-hover-background-color: var(--rz-secondary-light); - --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-base-background-color); - --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); - --rz-radio-circle-hover-background-color: var(--rz-base-100); - --rz-radio-icon-width: 0.5rem; - --rz-radio-icon-height: 0.5rem; - --rz-radio-checked-border: var(--rz-input-border); +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -11582,7 +11006,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -11605,10 +11030,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11668,26 +11090,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-normal); - --rz-fieldset-border-radius: 0; - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-tertiary-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-200); - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -11716,7 +11123,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -11734,8 +11142,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -11750,36 +11160,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); - --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); - --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); - --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); - --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); - --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-100); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -11806,15 +11186,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -11822,8 +11203,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -11858,7 +11239,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -11951,28 +11333,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -11989,10 +11375,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -12001,7 +11388,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -12023,24 +11411,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -12050,7 +11422,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -12093,7 +11466,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -12134,39 +11508,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -12176,9 +11540,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -12192,11 +11553,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -12205,36 +11566,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-background-color); - --rz-slider-border: var(--rz-border-normal); - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-secondary-lighter); - --rz-slider-range-border: var(--rz-border-secondary-light); - --rz-slider-handle-width: 0.75rem; - --rz-slider-handle-height: 1.5rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-secondary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-secondary-light); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-100); - --rz-slider-disabled-range-border: var(--rz-border-normal); - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-300); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -12261,11 +11594,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -12274,7 +11607,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -12299,19 +11632,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-secondary); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.3; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-secondary); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -12369,16 +11691,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -12399,17 +11713,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-secondary); - --rz-selectbar-selected-color: var(--rz-on-secondary); - --rz-selectbar-selected-border: var(--rz-border-secondary); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -12417,7 +11722,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12425,13 +11730,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12440,7 +11745,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12448,13 +11753,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12463,7 +11768,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12471,13 +11776,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12486,7 +11791,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12494,13 +11799,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12508,89 +11813,34 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-selectbar-selected-border); } -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-200); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); - --rz-datepicker-calendar-border: var(--rz-border-base-100); - --rz-datepicker-calendar-border-radius: 0; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-secondary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: none; - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-200); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-secondary); - --rz-timepicker-button-color: var(--rz-on-secondary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; -} - -.rz-calendar { +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -12598,9 +11848,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -12638,148 +11888,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -12810,47 +12087,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-secondary); - --rz-numeric-button-disabled-background-color: var(--rz-base-300); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-on-secondary); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -12858,9 +12122,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -12868,49 +12132,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); -} - -:root { - --rz-upload-button-bar-background-color: var(--rz-base-200); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-300); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary); - --rz-upload-choose-color: var(--rz-on-secondary); - --rz-upload-choose-hover-background-color: var(--rz-secondary); - --rz-upload-choose-hover-color: var(--rz-on-secondary); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -12997,101 +12242,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-secondary-lighter); - --rz-grid-hover-color: var(--rz-on-secondary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-secondary-dark); - --rz-grid-selected-color: var(--rz-on-secondary-dark); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: none; - --rz-grid-header-background-color: var(--rz-base-200); - --rz-grid-header-font-size: 0.75rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: uppercase; - --rz-grid-header-color: var(--rz-text-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-300); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-200); - --rz-grid-filter-background-color: var(--rz-base-100); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: var(--rz-border-normal); - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-base-200); - --rz-grid-clear-filter-button-background-color: var(--rz-secondary); - --rz-grid-clear-filter-button-color: var(--rz-on-secondary); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: var(--rz-border-normal); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-100); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-background-color); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-200); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-color); - --rz-column-drag-handle-hover-color: var(--rz-text-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -13115,10 +12265,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -13162,8 +12316,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -13171,8 +12325,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -13198,11 +12352,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -13222,13 +12377,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -13248,11 +12404,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -13260,11 +12416,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -13278,10 +12434,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -13297,7 +12453,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -13349,7 +12505,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -13359,11 +12515,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -13386,13 +12542,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -13413,21 +12573,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -13439,7 +12599,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -13485,7 +12645,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -13499,14 +12658,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -13608,10 +12767,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -13625,28 +12780,15 @@ a:focus-visible .rz-fieldset-toggler { border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-end-end-radius: 0; } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { text-indent: 2.25rem; } } -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); -} - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -13676,31 +12818,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -13766,7 +12886,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -13776,18 +12896,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -13796,9 +12955,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -13840,16 +13001,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -13882,7 +13049,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -13933,26 +13100,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -13965,7 +13136,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -13985,7 +13156,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -13993,312 +13164,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: var(--rz-base-background-color); - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: var(--rz-border-normal); - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-base-background-color); - --rz-paginator-numeric-button-selected-color: var(--rz-primary); - --rz-paginator-numeric-button-selected-border: var(--rz-border-base-200); - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-200); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-200); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-200); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-200); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-secondary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-100); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -14308,24 +13439,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-secondary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-secondary-light); - --rz-tree-node-hover-color: var(--rz-on-secondary-light); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -14342,12 +13457,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -14356,13 +13471,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -14372,15 +13493,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -14392,7 +13515,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -14411,25 +13534,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-200); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-item-border: var(--rz-border-base-200); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -14448,13 +13557,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -14463,24 +13573,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -14502,7 +13605,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -14513,23 +13617,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -14539,17 +13643,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -14562,70 +13667,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-300); - --rz-scheduler-minor-border-color: var(--rz-base-200); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-200); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); - --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-secondary); - --rz-scheduler-view-selected-background-color: var(--rz-secondary); - --rz-scheduler-view-selected-border-color: var(--rz-secondary); - --rz-scheduler-header-background-color: var(--rz-base-200); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: var(--rz-border-normal); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -14641,7 +13684,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -14654,12 +13697,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -14669,27 +13712,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -14724,8 +13768,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -14785,16 +13829,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -14811,25 +13855,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -14843,7 +13900,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -14855,24 +13912,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -14882,11 +13939,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -14914,7 +13971,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -14930,7 +13987,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -14938,7 +13995,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -14987,7 +14044,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -15036,7 +14093,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -15082,8 +14139,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15092,15 +14149,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15133,8 +14190,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15143,15 +14200,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15181,35 +14238,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-tabs-border: var(--rz-border-base-200); - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-200); - --rz-tabs-tab-color: var(--rz-secondary); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); - --rz-tabs-tab-hover-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -15263,7 +14293,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -15306,7 +14337,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -15326,7 +14357,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -15361,6 +14392,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -15391,21 +14425,13 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-tabs-padding); } -.rz-tabview-left-icon { +.rz-tabview-icon { font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: var(--rz-body-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -15431,8 +14457,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15449,8 +14475,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15494,29 +14520,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-100); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 0.6875rem 1.25rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.875rem; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -15529,6 +14534,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -15543,37 +14549,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -15585,7 +14609,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -15599,7 +14623,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -15612,42 +14636,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -15680,161 +14677,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-dialog-side-titlebar-close { - float: right; +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); } -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); } -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); } -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); } -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); -} - -.rz-growl { - position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; -} - -.rz-growl-item-container { - background-color: var(--rz-notification-container-background-color); -} - -.rz-growl-item { - border-radius: var(--rz-notification-border-radius); - box-shadow: var(--rz-notification-shadow); - padding: var(--rz-notification-padding); -} - -.rz-growl-message-success .rz-growl-item { - color: var(--rz-notification-success-color); - background-color: var(--rz-notification-success-background-color); -} - -.rz-growl-message-warn .rz-growl-item { - color: var(--rz-notification-warning-color); - background-color: var(--rz-notification-warning-background-color); -} - -.rz-growl-message-error .rz-growl-item { - color: var(--rz-notification-error-color); - background-color: var(--rz-notification-error-background-color); -} - -.rz-growl-message-info .rz-growl-item { - color: var(--rz-notification-info-color); - background-color: var(--rz-notification-info-background-color); -} - -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close { - float: right; -} -.rz-growl-icon-close:before { - content: "close"; +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1.5rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -15859,16 +14820,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: var(--rz-secondary); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } .rz-layout::-webkit-scrollbar, @@ -15897,14 +14850,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-100); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -15934,7 +14881,7 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -15946,12 +14893,15 @@ a:focus-visible .rz-fieldset-toggler { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -15961,11 +14911,6 @@ a:focus-visible .rz-fieldset-toggler { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -15975,24 +14920,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -16002,14 +14934,8 @@ a:focus-visible .rz-fieldset-toggler { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -16021,18 +14947,9 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -16081,19 +14998,8 @@ a:focus-visible .rz-fieldset-toggler { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-200); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-secondary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -16121,6 +15027,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -16181,6 +15088,9 @@ a:focus-visible .rz-fieldset-toggler { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -16192,6 +15102,9 @@ a:focus-visible .rz-fieldset-toggler { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -16212,6 +15125,26 @@ a:focus-visible .rz-fieldset-toggler { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -16257,48 +15190,6 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -16362,6 +15253,27 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -16404,57 +15316,109 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-success); } -.rz-progressbar-circular-lg { - width: 6rem; - height: 6rem; - font-size: calc(var(--rz-progressbar-font-size) * 1.25); +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); } -.rz-progressbar-circular-md { - width: 3rem; - height: 3rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.75); +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); } - -.rz-progressbar-circular-sm { - width: 2rem; - height: 2rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.5); +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); } -.rz-progressbar-circular-xs { - width: 1.25rem; - height: 1.25rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.375); +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); } - -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); } - -.rz-chart { - position: relative; - height: 300px; +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); } -.rz-area-series { - fill-opacity: 0.8; +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); } -.rz-scheme-pastel .rz-series-0 { - fill: var(--rz-series-1); - stroke: var(--rz-series-1); +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); } -.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { - border: 1px solid var(--rz-series-1); +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); } .rz-scheme-pastel .rz-series-item-0 { fill: var(--rz-series-1); @@ -17212,6 +16176,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -17335,6 +16303,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -17361,24 +16330,8 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary); - --rz-editor-button-selected-color: var(--rz-on-secondary); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -17563,30 +16516,6 @@ a:focus-visible .rz-fieldset-toggler { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -17663,7 +16592,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -17735,7 +16664,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -17748,7 +16677,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -17763,6 +16692,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -17774,27 +16704,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -17810,15 +16737,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -17830,15 +16755,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-secondary); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-secondary); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -17860,7 +16778,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17875,7 +16793,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17962,11 +16880,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -18000,8 +16935,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -18009,8 +16954,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -18024,22 +16969,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: var(--rz-border-radius); - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -18868,30 +17799,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -18910,16 +17846,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -19295,279 +18228,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -19912,36 +18845,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-100); - --rz-form-field-filled-hover-background-color: var(--rz-base-200); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: none; - --rz-form-field-focus-shadow: none; - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -19951,11 +18854,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -19964,12 +18868,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -19997,20 +18901,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -20055,33 +18961,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -20098,16 +19007,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -20115,33 +19024,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -20158,27 +19067,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: 0; -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -20723,6 +19620,7 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; width: 100%; height: 100%; --rz-gap: 1rem; @@ -20742,4 +19640,1559 @@ button.rz-colorpicker-trigger .rzi:before { .rz-picklist-buttons.rz-flex-row .rzi { transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #d9e1ea; + --rz-base-50: #ffffff; + --rz-base-100: #f3f5f7; + --rz-base-200: #ebeef2; + --rz-base-300: #d9e1ea; + --rz-base-400: #87a4c4; + --rz-base-500: #7293b6; + --rz-base-600: #466791; + --rz-base-700: #395374; + --rz-base-800: #30445f; + --rz-base-900: #2b3a50; + --rz-base-light: #ebeef2; + --rz-base-lighter: #ffffff; + --rz-base-dark: #466791; + --rz-base-darker: #2b3a50; + --rz-primary: #d64d42; + --rz-primary-light: #db6259; + --rz-primary-lighter: rgba(214, 77, 66, 0.16); + --rz-primary-dark: #c5473d; + --rz-primary-darker: #a13a32; + --rz-secondary: #3ba5fc; + --rz-secondary-light: #53b0fc; + --rz-secondary-lighter: rgba(59, 165, 252, 0.2); + --rz-secondary-dark: #3698e8; + --rz-secondary-darker: #2c7cbd; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #2b3a50; + --rz-on-base-light: #2b3a50; + --rz-on-base-lighter: #2b3a50; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #d64d42; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #3ba5fc; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); + /* Border Radius */ + --rz-border-radius: 0; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-100); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-200); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-item-border: var(--rz-border-base-200); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-200); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-100); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-200); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-100); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-100); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-normal); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-200); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-200); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-100); + --rz-form-field-filled-hover-background-color: var(--rz-base-200); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-200); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-300); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-200); + --rz-grid-filter-background-color: var(--rz-base-100); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-100); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-100); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-background-color); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-200); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-color); + --rz-column-drag-handle-hover-color: var(--rz-text-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-200); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-100); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-100); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-300); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-100); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-200); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-200); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-background-color); + --rz-pager-numeric-button-selected-color: var(--rz-primary); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-200); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-200); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-200); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-200); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-secondary); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-200); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-300); + --rz-scheduler-minor-border-color: var(--rz-base-200); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-200); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-200); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-secondary); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-200); + --rz-sidebar-toggle-color: var(--rz-base-900); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-normal); + --rz-sidebar-background-color: var(--rz-base-800); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-lighter); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-100); + --rz-slider-disabled-range-border: var(--rz-border-normal); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-300); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-200); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: var(--rz-border-base-200); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-200); + --rz-tabs-tab-color: var(--rz-secondary); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); + --rz-tabs-tab-hover-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: 0; + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-200); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/humanistic-dark-base.css b/_content/Radzen.Blazor/css/humanistic-dark-base.css new file mode 100755 index 0000000..0025814 --- /dev/null +++ b/_content/Radzen.Blazor/css/humanistic-dark-base.css @@ -0,0 +1,21202 @@ +@charset "UTF-8"; +.rz-slot-minor { + border-top: 1px dotted var(--rz-scheduler-minor-border-color) !important; +} + +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +.rz-text-title-color { + color: var(--rz-base-50) !important; +} + +.rz-text-color { + color: var(--rz-base-100) !important; +} + +.rz-text-secondary-color { + color: var(--rz-base-300) !important; +} + +.rz-text-tertiary-color { + color: var(--rz-base-400) !important; +} + +.rz-text-disabled-color { + color: var(--rz-base-600) !important; +} + +.rz-text-contrast-color { + color: var(--rz-white) !important; +} + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; +} + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; +} + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; +} + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; +} + +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; +} + +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; +} + +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; +} + +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; +} + +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; +} + +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; +} + +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; +} + +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; +} + +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; +} + +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; +} + +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; +} + +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; +} + +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; +} + +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; +} + +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; +} + +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; +} + +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; +} + +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; +} + +.rz-display-none { + display: none !important; +} + +.rz-display-block { + display: block !important; +} + +.rz-display-inline { + display: inline !important; +} + +.rz-display-inline-block { + display: inline-block !important; +} + +.rz-display-flex { + display: flex !important; +} + +.rz-display-inline-flex { + display: inline-flex !important; +} + +.rz-display-grid { + display: grid !important; +} + +.rz-display-inline-grid { + display: inline-grid !important; +} + +@media (min-width: 576px) { + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 768px) { + .rz-display-sm-none { + display: none !important; + } + .rz-display-sm-block { + display: block !important; + } + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} + +.rz-justify-content-stretch { + justify-content: stretch !important; +} + +.rz-justify-content-center { + justify-content: center !important; +} + +.rz-justify-content-start { + justify-content: start !important; +} + +.rz-justify-content-end { + justify-content: end !important; +} + +.rz-justify-content-flex-start { + justify-content: flex-start !important; +} + +.rz-justify-content-flex-end { + justify-content: flex-end !important; +} + +.rz-justify-content-left { + justify-content: left !important; +} + +.rz-justify-content-right { + justify-content: right !important; +} + +.rz-justify-content-space-between { + justify-content: space-between !important; +} + +.rz-justify-content-space-around { + justify-content: space-around !important; +} + +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.rz-align-items-normal { + align-items: normal !important; +} + +.rz-align-items-stretch { + align-items: stretch !important; +} + +.rz-align-items-center { + align-items: center !important; +} + +.rz-align-items-start { + align-items: start !important; +} + +.rz-align-items-end { + align-items: end !important; +} + +.rz-align-items-flex-start { + align-items: flex-start !important; +} + +.rz-align-items-flex-end { + align-items: flex-end !important; +} + +.rz-color-white { + color: var(--rz-white) !important; +} + +.rz-color-black { + color: var(--rz-black) !important; +} + +.rz-color-base { + color: var(--rz-base) !important; +} + +.rz-color-base-50 { + color: var(--rz-base-50) !important; +} + +.rz-color-base-100 { + color: var(--rz-base-100) !important; +} + +.rz-color-base-200 { + color: var(--rz-base-200) !important; +} + +.rz-color-base-300 { + color: var(--rz-base-300) !important; +} + +.rz-color-base-400 { + color: var(--rz-base-400) !important; +} + +.rz-color-base-500 { + color: var(--rz-base-500) !important; +} + +.rz-color-base-600 { + color: var(--rz-base-600) !important; +} + +.rz-color-base-700 { + color: var(--rz-base-700) !important; +} + +.rz-color-base-800 { + color: var(--rz-base-800) !important; +} + +.rz-color-base-900 { + color: var(--rz-base-900) !important; +} + +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + +.rz-color-primary { + color: var(--rz-primary) !important; +} + +.rz-color-primary-light { + color: var(--rz-primary-light) !important; +} + +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; +} + +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; +} + +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; +} + +.rz-color-secondary { + color: var(--rz-secondary) !important; +} + +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; +} + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; +} + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; +} + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; +} + +.rz-color-info { + color: var(--rz-info) !important; +} + +.rz-color-info-light { + color: var(--rz-info-light) !important; +} + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; +} + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; +} + +.rz-color-info-darker { + color: var(--rz-info-darker) !important; +} + +.rz-color-success { + color: var(--rz-success) !important; +} + +.rz-color-success-light { + color: var(--rz-success-light) !important; +} + +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; +} + +.rz-color-success-dark { + color: var(--rz-success-dark) !important; +} + +.rz-color-success-darker { + color: var(--rz-success-darker) !important; +} + +.rz-color-warning { + color: var(--rz-warning) !important; +} + +.rz-color-warning-light { + color: var(--rz-warning-light) !important; +} + +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; +} + +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; +} + +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; +} + +.rz-color-danger { + color: var(--rz-danger) !important; +} + +.rz-color-danger-light { + color: var(--rz-danger-light) !important; +} + +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; +} + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; +} + +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; +} + +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + +.rz-color-on-primary { + color: var(--rz-on-primary) !important; +} + +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; +} + +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; +} + +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; +} + +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; +} + +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; +} + +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; +} + +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; +} + +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; +} + +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; +} + +.rz-color-on-info { + color: var(--rz-on-info) !important; +} + +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; +} + +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; +} + +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; +} + +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; +} + +.rz-color-on-success { + color: var(--rz-on-success) !important; +} + +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; +} + +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; +} + +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; +} + +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; +} + +.rz-color-on-warning { + color: var(--rz-on-warning) !important; +} + +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; +} + +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; +} + +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; +} + +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; +} + +.rz-color-on-danger { + color: var(--rz-on-danger) !important; +} + +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; +} + +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; +} + +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; +} + +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; +} + +.rz-color-series-1 { + color: var(--rz-series-1) !important; +} + +.rz-color-series-2 { + color: var(--rz-series-2) !important; +} + +.rz-color-series-3 { + color: var(--rz-series-3) !important; +} + +.rz-color-series-4 { + color: var(--rz-series-4) !important; +} + +.rz-color-series-5 { + color: var(--rz-series-5) !important; +} + +.rz-color-series-6 { + color: var(--rz-series-6) !important; +} + +.rz-color-series-7 { + color: var(--rz-series-7) !important; +} + +.rz-color-series-8 { + color: var(--rz-series-8) !important; +} + +.rz-color-series-9 { + color: var(--rz-series-9) !important; +} + +.rz-color-series-10 { + color: var(--rz-series-10) !important; +} + +.rz-color-series-11 { + color: var(--rz-series-11) !important; +} + +.rz-color-series-12 { + color: var(--rz-series-12) !important; +} + +.rz-color-series-13 { + color: var(--rz-series-13) !important; +} + +.rz-color-series-14 { + color: var(--rz-series-14) !important; +} + +.rz-color-series-15 { + color: var(--rz-series-15) !important; +} + +.rz-color-series-16 { + color: var(--rz-series-16) !important; +} + +.rz-color-series-17 { + color: var(--rz-series-17) !important; +} + +.rz-color-series-18 { + color: var(--rz-series-18) !important; +} + +.rz-color-series-19 { + color: var(--rz-series-19) !important; +} + +.rz-color-series-20 { + color: var(--rz-series-20) !important; +} + +.rz-color-series-21 { + color: var(--rz-series-21) !important; +} + +.rz-color-series-22 { + color: var(--rz-series-22) !important; +} + +.rz-color-series-23 { + color: var(--rz-series-23) !important; +} + +.rz-color-series-24 { + color: var(--rz-series-24) !important; +} + +.rz-background-color-white { + background-color: var(--rz-white) !important; +} + +.rz-background-color-black { + background-color: var(--rz-black) !important; +} + +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; +} + +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; +} + +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; +} + +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; +} + +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; +} + +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; +} + +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; +} + +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; +} + +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; +} + +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; +} + +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + +.rz-background-color-primary { + background-color: var(--rz-primary) !important; +} + +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; +} + +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; +} + +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; +} + +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; +} + +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; +} + +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; +} + +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; +} + +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; +} + +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; +} + +.rz-background-color-info { + background-color: var(--rz-info) !important; +} + +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; +} + +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; +} + +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; +} + +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; +} + +.rz-background-color-success { + background-color: var(--rz-success) !important; +} + +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; +} + +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; +} + +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; +} + +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; +} + +.rz-background-color-warning { + background-color: var(--rz-warning) !important; +} + +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; +} + +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; +} + +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; +} + +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; +} + +.rz-background-color-danger { + background-color: var(--rz-danger) !important; +} + +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; +} + +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; +} + +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; +} + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; +} + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; +} + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; +} + +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; +} + +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; +} + +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; +} + +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; +} + +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; +} + +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; +} + +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; +} + +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; +} + +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; +} + +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; +} + +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; +} + +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; +} + +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; +} + +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; +} + +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; +} + +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; +} + +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; +} + +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; +} + +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; +} + +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; +} + +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; +} + +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; +} + +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; +} + +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; +} + +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; +} + +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; +} + +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; +} + +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; +} + +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; +} + +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; +} + +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; +} + +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; +} + +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; +} + +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; +} + +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; +} + +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; +} + +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; +} + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; +} + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; +} + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; +} + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; +} + +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; +} + +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; +} + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; +} + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; +} + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; +} + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; +} + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; +} + +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; +} + +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; +} + +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; +} + +.rz-border-color-white { + border-color: var(--rz-white) !important; +} + +.rz-border-color-black { + border-color: var(--rz-black) !important; +} + +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; +} + +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; +} + +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; +} + +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; +} + +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; +} + +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; +} + +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; +} + +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; +} + +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; +} + +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; +} + +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + +.rz-border-color-primary { + border-color: var(--rz-primary) !important; +} + +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; +} + +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; +} + +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-color-info { + border-color: var(--rz-info) !important; +} + +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; +} + +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; +} + +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; +} + +.rz-border-color-success { + border-color: var(--rz-success) !important; +} + +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; +} + +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; +} + +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; +} + +.rz-border-color-warning { + border-color: var(--rz-warning) !important; +} + +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; +} + +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-color-danger { + border-color: var(--rz-danger) !important; +} + +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; +} + +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; +} + +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; +} + +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; +} + +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; +} + +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; +} + +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; +} + +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; +} + +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; +} + +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; +} + +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; +} + +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; +} + +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; +} + +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; +} + +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; +} + +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; +} + +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; +} + +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; +} + +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; +} + +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; +} + +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; +} + +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; +} + +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; +} + +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; +} + +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; +} + +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; +} + +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; +} + +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; +} + +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; +} + +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; +} + +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; +} + +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; +} + +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; +} + +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; +} + +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; +} + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; +} + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; +} + +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; +} + +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; +} + +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; +} + +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; +} + +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; +} + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; +} + +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; +} + +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; +} + +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; +} + +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; +} + +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; +} + +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; +} + +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; +} + +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; +} + +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; +} + +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; +} + +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; +} + +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} + +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; +} + +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; +} + +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; +} + +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; +} + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; +} + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; +} + +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; +} + +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; +} + +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; +} + +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; +} + +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; +} + +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; +} + +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; +} + +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; +} + +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; +} + +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; +} + +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; +} + +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; +} + +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; +} + +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; +} + +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; +} + +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; +} + +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; +} + +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; +} + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; +} + +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; +} + +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; +} + +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; +} + +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; +} + +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; +} + +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; +} + +.rz-ripple { + position: relative; + overflow: hidden; +} +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +body { + margin: 0; +} + +.rz-m-0 { + margin: 0 !important; +} + +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; +} + +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; +} + +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; +} + +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; +} + +.rz-ms-0 { + margin-inline-start: 0 !important; +} + +.rz-me-0 { + margin-inline-end: 0 !important; +} + +.rz-m-05 { + margin: 0.125rem !important; +} + +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; +} + +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; +} + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; +} + +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; +} + +.rz-ms-05 { + margin-inline-start: 0.125rem !important; +} + +.rz-me-05 { + margin-inline-end: 0.125rem !important; +} + +.rz-m-1 { + margin: 0.25rem !important; +} + +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; +} + +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; +} + +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; +} + +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; +} + +.rz-ms-1 { + margin-inline-start: 0.25rem !important; +} + +.rz-me-1 { + margin-inline-end: 0.25rem !important; +} + +.rz-m-2 { + margin: 0.5rem !important; +} + +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; +} + +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; +} + +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; +} + +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; +} + +.rz-ms-2 { + margin-inline-start: 0.5rem !important; +} + +.rz-me-2 { + margin-inline-end: 0.5rem !important; +} + +.rz-m-3 { + margin: 0.75rem !important; +} + +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; +} + +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; +} + +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; +} + +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; +} + +.rz-ms-3 { + margin-inline-start: 0.75rem !important; +} + +.rz-me-3 { + margin-inline-end: 0.75rem !important; +} + +.rz-m-4 { + margin: 1rem !important; +} + +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; +} + +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; +} + +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; +} + +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; +} + +.rz-ms-4 { + margin-inline-start: 1rem !important; +} + +.rz-me-4 { + margin-inline-end: 1rem !important; +} + +.rz-m-5 { + margin: 1.25rem !important; +} + +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; +} + +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; +} + +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; +} + +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; +} + +.rz-ms-5 { + margin-inline-start: 1.25rem !important; +} + +.rz-me-5 { + margin-inline-end: 1.25rem !important; +} + +.rz-m-6 { + margin: 1.5rem !important; +} + +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; +} + +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; +} + +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; +} + +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; +} + +.rz-ms-6 { + margin-inline-start: 1.5rem !important; +} + +.rz-me-6 { + margin-inline-end: 1.5rem !important; +} + +.rz-m-7 { + margin: 1.75rem !important; +} + +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; +} + +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; +} + +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; +} + +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; +} + +.rz-ms-7 { + margin-inline-start: 1.75rem !important; +} + +.rz-me-7 { + margin-inline-end: 1.75rem !important; +} + +.rz-m-8 { + margin: 2rem !important; +} + +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; +} + +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; +} + +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; +} + +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; +} + +.rz-ms-8 { + margin-inline-start: 2rem !important; +} + +.rz-me-8 { + margin-inline-end: 2rem !important; +} + +.rz-m-9 { + margin: 2.25rem !important; +} + +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; +} + +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; +} + +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; +} + +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; +} + +.rz-ms-9 { + margin-inline-start: 2.25rem !important; +} + +.rz-me-9 { + margin-inline-end: 2.25rem !important; +} + +.rz-m-10 { + margin: 2.5rem !important; +} + +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; +} + +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; +} + +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; +} + +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; +} + +.rz-ms-10 { + margin-inline-start: 2.5rem !important; +} + +.rz-me-10 { + margin-inline-end: 2.5rem !important; +} + +.rz-m-11 { + margin: 2.75rem !important; +} + +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; +} + +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; +} + +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; +} + +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; +} + +.rz-ms-11 { + margin-inline-start: 2.75rem !important; +} + +.rz-me-11 { + margin-inline-end: 2.75rem !important; +} + +.rz-m-12 { + margin: 3rem !important; +} + +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; +} + +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; +} + +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; +} + +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; +} + +.rz-ms-12 { + margin-inline-start: 3rem !important; +} + +.rz-me-12 { + margin-inline-end: 3rem !important; +} + +.rz-p-0 { + padding: 0 !important; +} + +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; +} + +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; +} + +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; +} + +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; +} + +.rz-ps-0 { + padding-inline-start: 0 !important; +} + +.rz-pe-0 { + padding-inline-end: 0 !important; +} + +.rz-p-05 { + padding: 0.125rem !important; +} + +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; +} + +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; +} + +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; +} + +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; +} + +.rz-ps-05 { + padding-inline-start: 0.125rem !important; +} + +.rz-pe-05 { + padding-inline-end: 0.125rem !important; +} + +.rz-p-1 { + padding: 0.25rem !important; +} + +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; +} + +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; +} + +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; +} + +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; +} + +.rz-ps-1 { + padding-inline-start: 0.25rem !important; +} + +.rz-pe-1 { + padding-inline-end: 0.25rem !important; +} + +.rz-p-2 { + padding: 0.5rem !important; +} + +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; +} + +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; +} + +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; +} + +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; +} + +.rz-ps-2 { + padding-inline-start: 0.5rem !important; +} + +.rz-pe-2 { + padding-inline-end: 0.5rem !important; +} + +.rz-p-3 { + padding: 0.75rem !important; +} + +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; +} + +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; +} + +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; +} + +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; +} + +.rz-ps-3 { + padding-inline-start: 0.75rem !important; +} + +.rz-pe-3 { + padding-inline-end: 0.75rem !important; +} + +.rz-p-4 { + padding: 1rem !important; +} + +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; +} + +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; +} + +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; +} + +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; +} + +.rz-ps-4 { + padding-inline-start: 1rem !important; +} + +.rz-pe-4 { + padding-inline-end: 1rem !important; +} + +.rz-p-5 { + padding: 1.25rem !important; +} + +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; +} + +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; +} + +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; +} + +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; +} + +.rz-ps-5 { + padding-inline-start: 1.25rem !important; +} + +.rz-pe-5 { + padding-inline-end: 1.25rem !important; +} + +.rz-p-6 { + padding: 1.5rem !important; +} + +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; +} + +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; +} + +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; +} + +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; +} + +.rz-ps-6 { + padding-inline-start: 1.5rem !important; +} + +.rz-pe-6 { + padding-inline-end: 1.5rem !important; +} + +.rz-p-7 { + padding: 1.75rem !important; +} + +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; +} + +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; +} + +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; +} + +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; +} + +.rz-ps-7 { + padding-inline-start: 1.75rem !important; +} + +.rz-pe-7 { + padding-inline-end: 1.75rem !important; +} + +.rz-p-8 { + padding: 2rem !important; +} + +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; +} + +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; +} + +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; +} + +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; +} + +.rz-ps-8 { + padding-inline-start: 2rem !important; +} + +.rz-pe-8 { + padding-inline-end: 2rem !important; +} + +.rz-p-9 { + padding: 2.25rem !important; +} + +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; +} + +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; +} + +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; +} + +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; +} + +.rz-ps-9 { + padding-inline-start: 2.25rem !important; +} + +.rz-pe-9 { + padding-inline-end: 2.25rem !important; +} + +.rz-p-10 { + padding: 2.5rem !important; +} + +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; +} + +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; +} + +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; +} + +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; +} + +.rz-ps-10 { + padding-inline-start: 2.5rem !important; +} + +.rz-pe-10 { + padding-inline-end: 2.5rem !important; +} + +.rz-p-11 { + padding: 2.75rem !important; +} + +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; +} + +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; +} + +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; +} + +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; +} + +.rz-ps-11 { + padding-inline-start: 2.75rem !important; +} + +.rz-pe-11 { + padding-inline-end: 2.75rem !important; +} + +.rz-p-12 { + padding: 3rem !important; +} + +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; +} + +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; +} + +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; +} + +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; +} + +.rz-ps-12 { + padding-inline-start: 3rem !important; +} + +.rz-pe-12 { + padding-inline-end: 3rem !important; +} + +.rz-m-auto { + margin: auto !important; +} + +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; +} + +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; +} + +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; +} + +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; +} + +.rz-ms-auto { + margin-inline-start: auto !important; +} + +.rz-me-auto { + margin-inline-end: auto !important; +} + +@media (min-width: 576px) { + .rz-m-xs-0 { + margin: 0 !important; + } + .rz-my-xs-0, + .rz-mt-xs-0 { + margin-top: 0 !important; + } + .rz-mx-xs-0, + .rz-mr-xs-0 { + margin-right: 0 !important; + } + .rz-my-xs-0, + .rz-mb-xs-0 { + margin-bottom: 0 !important; + } + .rz-mx-xs-0, + .rz-ml-xs-0 { + margin-left: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-end: 0 !important; + } + .rz-m-xs-05 { + margin: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mt-xs-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-mr-xs-05 { + margin-right: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mb-xs-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-ml-xs-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xs-1 { + margin: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mt-xs-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-mr-xs-1 { + margin-right: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mb-xs-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-ml-xs-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xs-2 { + margin: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mt-xs-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-mr-xs-2 { + margin-right: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mb-xs-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-ml-xs-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xs-3 { + margin: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mt-xs-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-mr-xs-3 { + margin-right: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mb-xs-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-ml-xs-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xs-4 { + margin: 1rem !important; + } + .rz-my-xs-4, + .rz-mt-xs-4 { + margin-top: 1rem !important; + } + .rz-mx-xs-4, + .rz-mr-xs-4 { + margin-right: 1rem !important; + } + .rz-my-xs-4, + .rz-mb-xs-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xs-4, + .rz-ml-xs-4 { + margin-left: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xs-5 { + margin: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mt-xs-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-mr-xs-5 { + margin-right: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mb-xs-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-ml-xs-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xs-6 { + margin: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mt-xs-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-mr-xs-6 { + margin-right: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mb-xs-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-ml-xs-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xs-7 { + margin: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mt-xs-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-mr-xs-7 { + margin-right: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mb-xs-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-ml-xs-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xs-8 { + margin: 2rem !important; + } + .rz-my-xs-8, + .rz-mt-xs-8 { + margin-top: 2rem !important; + } + .rz-mx-xs-8, + .rz-mr-xs-8 { + margin-right: 2rem !important; + } + .rz-my-xs-8, + .rz-mb-xs-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xs-8, + .rz-ml-xs-8 { + margin-left: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xs-9 { + margin: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mt-xs-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-mr-xs-9 { + margin-right: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mb-xs-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-ml-xs-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xs-10 { + margin: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mt-xs-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-mr-xs-10 { + margin-right: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mb-xs-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-ml-xs-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xs-11 { + margin: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mt-xs-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-mr-xs-11 { + margin-right: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mb-xs-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-ml-xs-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xs-12 { + margin: 3rem !important; + } + .rz-my-xs-12, + .rz-mt-xs-12 { + margin-top: 3rem !important; + } + .rz-mx-xs-12, + .rz-mr-xs-12 { + margin-right: 3rem !important; + } + .rz-my-xs-12, + .rz-mb-xs-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xs-12, + .rz-ml-xs-12 { + margin-left: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xs-0 { + padding: 0 !important; + } + .rz-py-xs-0, + .rz-pt-xs-0 { + padding-top: 0 !important; + } + .rz-px-xs-0, + .rz-pr-xs-0 { + padding-right: 0 !important; + } + .rz-py-xs-0, + .rz-pb-xs-0 { + padding-bottom: 0 !important; + } + .rz-px-xs-0, + .rz-pl-xs-0 { + padding-left: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-end: 0 !important; + } + .rz-p-xs-05 { + padding: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pt-xs-05 { + padding-top: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pr-xs-05 { + padding-right: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pb-xs-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pl-xs-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xs-1 { + padding: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pt-xs-1 { + padding-top: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pr-xs-1 { + padding-right: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pb-xs-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pl-xs-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xs-2 { + padding: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pt-xs-2 { + padding-top: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pr-xs-2 { + padding-right: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pb-xs-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pl-xs-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xs-3 { + padding: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pt-xs-3 { + padding-top: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pr-xs-3 { + padding-right: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pb-xs-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pl-xs-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xs-4 { + padding: 1rem !important; + } + .rz-py-xs-4, + .rz-pt-xs-4 { + padding-top: 1rem !important; + } + .rz-px-xs-4, + .rz-pr-xs-4 { + padding-right: 1rem !important; + } + .rz-py-xs-4, + .rz-pb-xs-4 { + padding-bottom: 1rem !important; + } + .rz-px-xs-4, + .rz-pl-xs-4 { + padding-left: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xs-5 { + padding: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pt-xs-5 { + padding-top: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pr-xs-5 { + padding-right: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pb-xs-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pl-xs-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xs-6 { + padding: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pt-xs-6 { + padding-top: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pr-xs-6 { + padding-right: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pb-xs-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pl-xs-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xs-7 { + padding: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pt-xs-7 { + padding-top: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pr-xs-7 { + padding-right: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pb-xs-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pl-xs-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xs-8 { + padding: 2rem !important; + } + .rz-py-xs-8, + .rz-pt-xs-8 { + padding-top: 2rem !important; + } + .rz-px-xs-8, + .rz-pr-xs-8 { + padding-right: 2rem !important; + } + .rz-py-xs-8, + .rz-pb-xs-8 { + padding-bottom: 2rem !important; + } + .rz-px-xs-8, + .rz-pl-xs-8 { + padding-left: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xs-9 { + padding: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pt-xs-9 { + padding-top: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pr-xs-9 { + padding-right: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pb-xs-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pl-xs-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xs-10 { + padding: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pt-xs-10 { + padding-top: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pr-xs-10 { + padding-right: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pb-xs-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pl-xs-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xs-11 { + padding: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pt-xs-11 { + padding-top: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pr-xs-11 { + padding-right: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pb-xs-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pl-xs-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xs-12 { + padding: 3rem !important; + } + .rz-py-xs-12, + .rz-pt-xs-12 { + padding-top: 3rem !important; + } + .rz-px-xs-12, + .rz-pr-xs-12 { + padding-right: 3rem !important; + } + .rz-py-xs-12, + .rz-pb-xs-12 { + padding-bottom: 3rem !important; + } + .rz-px-xs-12, + .rz-pl-xs-12 { + padding-left: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xs-auto { + margin: auto !important; + } + .rz-my-xs-auto, + .rz-mt-xs-auto { + margin-top: auto !important; + } + .rz-mx-xs-auto, + .rz-mr-xs-auto { + margin-right: auto !important; + } + .rz-my-xs-auto, + .rz-mb-xs-auto { + margin-bottom: auto !important; + } + .rz-mx-xs-auto, + .rz-ml-xs-auto { + margin-left: auto !important; + } + .rz-ms-xs-auto { + margin-inline-start: auto !important; + } + .rz-me-xs-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 768px) { + .rz-m-sm-0 { + margin: 0 !important; + } + .rz-my-sm-0, + .rz-mt-sm-0 { + margin-top: 0 !important; + } + .rz-mx-sm-0, + .rz-mr-sm-0 { + margin-right: 0 !important; + } + .rz-my-sm-0, + .rz-mb-sm-0 { + margin-bottom: 0 !important; + } + .rz-mx-sm-0, + .rz-ml-sm-0 { + margin-left: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-start: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-end: 0 !important; + } + .rz-m-sm-05 { + margin: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mt-sm-05 { + margin-top: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-mr-sm-05 { + margin-right: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mb-sm-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-ml-sm-05 { + margin-left: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-sm-1 { + margin: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mt-sm-1 { + margin-top: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-mr-sm-1 { + margin-right: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-ml-sm-1 { + margin-left: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-sm-2 { + margin: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mt-sm-2 { + margin-top: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-mr-sm-2 { + margin-right: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-ml-sm-2 { + margin-left: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-sm-3 { + margin: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mt-sm-3 { + margin-top: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-mr-sm-3 { + margin-right: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mb-sm-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-ml-sm-3 { + margin-left: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-sm-4 { + margin: 1rem !important; + } + .rz-my-sm-4, + .rz-mt-sm-4 { + margin-top: 1rem !important; + } + .rz-mx-sm-4, + .rz-mr-sm-4 { + margin-right: 1rem !important; + } + .rz-my-sm-4, + .rz-mb-sm-4 { + margin-bottom: 1rem !important; + } + .rz-mx-sm-4, + .rz-ml-sm-4 { + margin-left: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-end: 1rem !important; + } + .rz-m-sm-5 { + margin: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mt-sm-5 { + margin-top: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-mr-sm-5 { + margin-right: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mb-sm-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-ml-sm-5 { + margin-left: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-sm-6 { + margin: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mt-sm-6 { + margin-top: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-mr-sm-6 { + margin-right: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mb-sm-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-ml-sm-6 { + margin-left: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-sm-7 { + margin: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mt-sm-7 { + margin-top: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-mr-sm-7 { + margin-right: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mb-sm-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-ml-sm-7 { + margin-left: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-sm-8 { + margin: 2rem !important; + } + .rz-my-sm-8, + .rz-mt-sm-8 { + margin-top: 2rem !important; + } + .rz-mx-sm-8, + .rz-mr-sm-8 { + margin-right: 2rem !important; + } + .rz-my-sm-8, + .rz-mb-sm-8 { + margin-bottom: 2rem !important; + } + .rz-mx-sm-8, + .rz-ml-sm-8 { + margin-left: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-end: 2rem !important; + } + .rz-m-sm-9 { + margin: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mt-sm-9 { + margin-top: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-mr-sm-9 { + margin-right: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mb-sm-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-ml-sm-9 { + margin-left: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-sm-10 { + margin: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mt-sm-10 { + margin-top: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-mr-sm-10 { + margin-right: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mb-sm-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-ml-sm-10 { + margin-left: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-sm-11 { + margin: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mt-sm-11 { + margin-top: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-mr-sm-11 { + margin-right: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mb-sm-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-ml-sm-11 { + margin-left: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-sm-12 { + margin: 3rem !important; + } + .rz-my-sm-12, + .rz-mt-sm-12 { + margin-top: 3rem !important; + } + .rz-mx-sm-12, + .rz-mr-sm-12 { + margin-right: 3rem !important; + } + .rz-my-sm-12, + .rz-mb-sm-12 { + margin-bottom: 3rem !important; + } + .rz-mx-sm-12, + .rz-ml-sm-12 { + margin-left: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-end: 3rem !important; + } + .rz-p-sm-0 { + padding: 0 !important; + } + .rz-py-sm-0, + .rz-pt-sm-0 { + padding-top: 0 !important; + } + .rz-px-sm-0, + .rz-pr-sm-0 { + padding-right: 0 !important; + } + .rz-py-sm-0, + .rz-pb-sm-0 { + padding-bottom: 0 !important; + } + .rz-px-sm-0, + .rz-pl-sm-0 { + padding-left: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-start: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-end: 0 !important; + } + .rz-p-sm-05 { + padding: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pt-sm-05 { + padding-top: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pr-sm-05 { + padding-right: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pb-sm-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pl-sm-05 { + padding-left: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-sm-1 { + padding: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pt-sm-1 { + padding-top: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pr-sm-1 { + padding-right: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pl-sm-1 { + padding-left: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-sm-2 { + padding: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pt-sm-2 { + padding-top: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pr-sm-2 { + padding-right: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pl-sm-2 { + padding-left: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-sm-3 { + padding: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pt-sm-3 { + padding-top: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pr-sm-3 { + padding-right: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pb-sm-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pl-sm-3 { + padding-left: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-sm-4 { + padding: 1rem !important; + } + .rz-py-sm-4, + .rz-pt-sm-4 { + padding-top: 1rem !important; + } + .rz-px-sm-4, + .rz-pr-sm-4 { + padding-right: 1rem !important; + } + .rz-py-sm-4, + .rz-pb-sm-4 { + padding-bottom: 1rem !important; + } + .rz-px-sm-4, + .rz-pl-sm-4 { + padding-left: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-end: 1rem !important; + } + .rz-p-sm-5 { + padding: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pt-sm-5 { + padding-top: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pr-sm-5 { + padding-right: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pb-sm-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pl-sm-5 { + padding-left: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-sm-6 { + padding: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pt-sm-6 { + padding-top: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pr-sm-6 { + padding-right: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pb-sm-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pl-sm-6 { + padding-left: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-sm-7 { + padding: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pt-sm-7 { + padding-top: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pr-sm-7 { + padding-right: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pb-sm-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pl-sm-7 { + padding-left: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-sm-8 { + padding: 2rem !important; + } + .rz-py-sm-8, + .rz-pt-sm-8 { + padding-top: 2rem !important; + } + .rz-px-sm-8, + .rz-pr-sm-8 { + padding-right: 2rem !important; + } + .rz-py-sm-8, + .rz-pb-sm-8 { + padding-bottom: 2rem !important; + } + .rz-px-sm-8, + .rz-pl-sm-8 { + padding-left: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-end: 2rem !important; + } + .rz-p-sm-9 { + padding: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pt-sm-9 { + padding-top: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pr-sm-9 { + padding-right: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pb-sm-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pl-sm-9 { + padding-left: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-sm-10 { + padding: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pt-sm-10 { + padding-top: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pr-sm-10 { + padding-right: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pb-sm-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pl-sm-10 { + padding-left: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-sm-11 { + padding: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pt-sm-11 { + padding-top: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pr-sm-11 { + padding-right: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pb-sm-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pl-sm-11 { + padding-left: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-sm-12 { + padding: 3rem !important; + } + .rz-py-sm-12, + .rz-pt-sm-12 { + padding-top: 3rem !important; + } + .rz-px-sm-12, + .rz-pr-sm-12 { + padding-right: 3rem !important; + } + .rz-py-sm-12, + .rz-pb-sm-12 { + padding-bottom: 3rem !important; + } + .rz-px-sm-12, + .rz-pl-sm-12 { + padding-left: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-end: 3rem !important; + } + .rz-m-sm-auto { + margin: auto !important; + } + .rz-my-sm-auto, + .rz-mt-sm-auto { + margin-top: auto !important; + } + .rz-mx-sm-auto, + .rz-mr-sm-auto { + margin-right: auto !important; + } + .rz-my-sm-auto, + .rz-mb-sm-auto { + margin-bottom: auto !important; + } + .rz-mx-sm-auto, + .rz-ml-sm-auto { + margin-left: auto !important; + } + .rz-ms-sm-auto { + margin-inline-start: auto !important; + } + .rz-me-sm-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1024px) { + .rz-m-md-0 { + margin: 0 !important; + } + .rz-my-md-0, + .rz-mt-md-0 { + margin-top: 0 !important; + } + .rz-mx-md-0, + .rz-mr-md-0 { + margin-right: 0 !important; + } + .rz-my-md-0, + .rz-mb-md-0 { + margin-bottom: 0 !important; + } + .rz-mx-md-0, + .rz-ml-md-0 { + margin-left: 0 !important; + } + .rz-ms-md-0 { + margin-inline-start: 0 !important; + } + .rz-ms-md-0 { + margin-inline-end: 0 !important; + } + .rz-m-md-05 { + margin: 0.125rem !important; + } + .rz-my-md-05, + .rz-mt-md-05 { + margin-top: 0.125rem !important; + } + .rz-mx-md-05, + .rz-mr-md-05 { + margin-right: 0.125rem !important; + } + .rz-my-md-05, + .rz-mb-md-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-md-05, + .rz-ml-md-05 { + margin-left: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-md-1 { + margin: 0.25rem !important; + } + .rz-my-md-1, + .rz-mt-md-1 { + margin-top: 0.25rem !important; + } + .rz-mx-md-1, + .rz-mr-md-1 { + margin-right: 0.25rem !important; + } + .rz-my-md-1, + .rz-mb-md-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-md-1, + .rz-ml-md-1 { + margin-left: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-md-2 { + margin: 0.5rem !important; + } + .rz-my-md-2, + .rz-mt-md-2 { + margin-top: 0.5rem !important; + } + .rz-mx-md-2, + .rz-mr-md-2 { + margin-right: 0.5rem !important; + } + .rz-my-md-2, + .rz-mb-md-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-md-2, + .rz-ml-md-2 { + margin-left: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-md-3 { + margin: 0.75rem !important; + } + .rz-my-md-3, + .rz-mt-md-3 { + margin-top: 0.75rem !important; + } + .rz-mx-md-3, + .rz-mr-md-3 { + margin-right: 0.75rem !important; + } + .rz-my-md-3, + .rz-mb-md-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-md-3, + .rz-ml-md-3 { + margin-left: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-md-4 { + margin: 1rem !important; + } + .rz-my-md-4, + .rz-mt-md-4 { + margin-top: 1rem !important; + } + .rz-mx-md-4, + .rz-mr-md-4 { + margin-right: 1rem !important; + } + .rz-my-md-4, + .rz-mb-md-4 { + margin-bottom: 1rem !important; + } + .rz-mx-md-4, + .rz-ml-md-4 { + margin-left: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-end: 1rem !important; + } + .rz-m-md-5 { + margin: 1.25rem !important; + } + .rz-my-md-5, + .rz-mt-md-5 { + margin-top: 1.25rem !important; + } + .rz-mx-md-5, + .rz-mr-md-5 { + margin-right: 1.25rem !important; + } + .rz-my-md-5, + .rz-mb-md-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-md-5, + .rz-ml-md-5 { + margin-left: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-md-6 { + margin: 1.5rem !important; + } + .rz-my-md-6, + .rz-mt-md-6 { + margin-top: 1.5rem !important; + } + .rz-mx-md-6, + .rz-mr-md-6 { + margin-right: 1.5rem !important; + } + .rz-my-md-6, + .rz-mb-md-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-md-6, + .rz-ml-md-6 { + margin-left: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-md-7 { + margin: 1.75rem !important; + } + .rz-my-md-7, + .rz-mt-md-7 { + margin-top: 1.75rem !important; + } + .rz-mx-md-7, + .rz-mr-md-7 { + margin-right: 1.75rem !important; + } + .rz-my-md-7, + .rz-mb-md-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-md-7, + .rz-ml-md-7 { + margin-left: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-md-8 { + margin: 2rem !important; + } + .rz-my-md-8, + .rz-mt-md-8 { + margin-top: 2rem !important; + } + .rz-mx-md-8, + .rz-mr-md-8 { + margin-right: 2rem !important; + } + .rz-my-md-8, + .rz-mb-md-8 { + margin-bottom: 2rem !important; + } + .rz-mx-md-8, + .rz-ml-md-8 { + margin-left: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-end: 2rem !important; + } + .rz-m-md-9 { + margin: 2.25rem !important; + } + .rz-my-md-9, + .rz-mt-md-9 { + margin-top: 2.25rem !important; + } + .rz-mx-md-9, + .rz-mr-md-9 { + margin-right: 2.25rem !important; + } + .rz-my-md-9, + .rz-mb-md-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-md-9, + .rz-ml-md-9 { + margin-left: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-md-10 { + margin: 2.5rem !important; + } + .rz-my-md-10, + .rz-mt-md-10 { + margin-top: 2.5rem !important; + } + .rz-mx-md-10, + .rz-mr-md-10 { + margin-right: 2.5rem !important; + } + .rz-my-md-10, + .rz-mb-md-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-md-10, + .rz-ml-md-10 { + margin-left: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-md-11 { + margin: 2.75rem !important; + } + .rz-my-md-11, + .rz-mt-md-11 { + margin-top: 2.75rem !important; + } + .rz-mx-md-11, + .rz-mr-md-11 { + margin-right: 2.75rem !important; + } + .rz-my-md-11, + .rz-mb-md-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-md-11, + .rz-ml-md-11 { + margin-left: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-md-12 { + margin: 3rem !important; + } + .rz-my-md-12, + .rz-mt-md-12 { + margin-top: 3rem !important; + } + .rz-mx-md-12, + .rz-mr-md-12 { + margin-right: 3rem !important; + } + .rz-my-md-12, + .rz-mb-md-12 { + margin-bottom: 3rem !important; + } + .rz-mx-md-12, + .rz-ml-md-12 { + margin-left: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-end: 3rem !important; + } + .rz-p-md-0 { + padding: 0 !important; + } + .rz-py-md-0, + .rz-pt-md-0 { + padding-top: 0 !important; + } + .rz-px-md-0, + .rz-pr-md-0 { + padding-right: 0 !important; + } + .rz-py-md-0, + .rz-pb-md-0 { + padding-bottom: 0 !important; + } + .rz-px-md-0, + .rz-pl-md-0 { + padding-left: 0 !important; + } + .rz-ps-md-0 { + padding-inline-start: 0 !important; + } + .rz-ps-md-0 { + padding-inline-end: 0 !important; + } + .rz-p-md-05 { + padding: 0.125rem !important; + } + .rz-py-md-05, + .rz-pt-md-05 { + padding-top: 0.125rem !important; + } + .rz-px-md-05, + .rz-pr-md-05 { + padding-right: 0.125rem !important; + } + .rz-py-md-05, + .rz-pb-md-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-md-05, + .rz-pl-md-05 { + padding-left: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-md-1 { + padding: 0.25rem !important; + } + .rz-py-md-1, + .rz-pt-md-1 { + padding-top: 0.25rem !important; + } + .rz-px-md-1, + .rz-pr-md-1 { + padding-right: 0.25rem !important; + } + .rz-py-md-1, + .rz-pb-md-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-md-1, + .rz-pl-md-1 { + padding-left: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-md-2 { + padding: 0.5rem !important; + } + .rz-py-md-2, + .rz-pt-md-2 { + padding-top: 0.5rem !important; + } + .rz-px-md-2, + .rz-pr-md-2 { + padding-right: 0.5rem !important; + } + .rz-py-md-2, + .rz-pb-md-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-md-2, + .rz-pl-md-2 { + padding-left: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-md-3 { + padding: 0.75rem !important; + } + .rz-py-md-3, + .rz-pt-md-3 { + padding-top: 0.75rem !important; + } + .rz-px-md-3, + .rz-pr-md-3 { + padding-right: 0.75rem !important; + } + .rz-py-md-3, + .rz-pb-md-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-md-3, + .rz-pl-md-3 { + padding-left: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-md-4 { + padding: 1rem !important; + } + .rz-py-md-4, + .rz-pt-md-4 { + padding-top: 1rem !important; + } + .rz-px-md-4, + .rz-pr-md-4 { + padding-right: 1rem !important; + } + .rz-py-md-4, + .rz-pb-md-4 { + padding-bottom: 1rem !important; + } + .rz-px-md-4, + .rz-pl-md-4 { + padding-left: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-end: 1rem !important; + } + .rz-p-md-5 { + padding: 1.25rem !important; + } + .rz-py-md-5, + .rz-pt-md-5 { + padding-top: 1.25rem !important; + } + .rz-px-md-5, + .rz-pr-md-5 { + padding-right: 1.25rem !important; + } + .rz-py-md-5, + .rz-pb-md-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-md-5, + .rz-pl-md-5 { + padding-left: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-md-6 { + padding: 1.5rem !important; + } + .rz-py-md-6, + .rz-pt-md-6 { + padding-top: 1.5rem !important; + } + .rz-px-md-6, + .rz-pr-md-6 { + padding-right: 1.5rem !important; + } + .rz-py-md-6, + .rz-pb-md-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-md-6, + .rz-pl-md-6 { + padding-left: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-md-7 { + padding: 1.75rem !important; + } + .rz-py-md-7, + .rz-pt-md-7 { + padding-top: 1.75rem !important; + } + .rz-px-md-7, + .rz-pr-md-7 { + padding-right: 1.75rem !important; + } + .rz-py-md-7, + .rz-pb-md-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-md-7, + .rz-pl-md-7 { + padding-left: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-md-8 { + padding: 2rem !important; + } + .rz-py-md-8, + .rz-pt-md-8 { + padding-top: 2rem !important; + } + .rz-px-md-8, + .rz-pr-md-8 { + padding-right: 2rem !important; + } + .rz-py-md-8, + .rz-pb-md-8 { + padding-bottom: 2rem !important; + } + .rz-px-md-8, + .rz-pl-md-8 { + padding-left: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-end: 2rem !important; + } + .rz-p-md-9 { + padding: 2.25rem !important; + } + .rz-py-md-9, + .rz-pt-md-9 { + padding-top: 2.25rem !important; + } + .rz-px-md-9, + .rz-pr-md-9 { + padding-right: 2.25rem !important; + } + .rz-py-md-9, + .rz-pb-md-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-md-9, + .rz-pl-md-9 { + padding-left: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-md-10 { + padding: 2.5rem !important; + } + .rz-py-md-10, + .rz-pt-md-10 { + padding-top: 2.5rem !important; + } + .rz-px-md-10, + .rz-pr-md-10 { + padding-right: 2.5rem !important; + } + .rz-py-md-10, + .rz-pb-md-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-md-10, + .rz-pl-md-10 { + padding-left: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-md-11 { + padding: 2.75rem !important; + } + .rz-py-md-11, + .rz-pt-md-11 { + padding-top: 2.75rem !important; + } + .rz-px-md-11, + .rz-pr-md-11 { + padding-right: 2.75rem !important; + } + .rz-py-md-11, + .rz-pb-md-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-md-11, + .rz-pl-md-11 { + padding-left: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-md-12 { + padding: 3rem !important; + } + .rz-py-md-12, + .rz-pt-md-12 { + padding-top: 3rem !important; + } + .rz-px-md-12, + .rz-pr-md-12 { + padding-right: 3rem !important; + } + .rz-py-md-12, + .rz-pb-md-12 { + padding-bottom: 3rem !important; + } + .rz-px-md-12, + .rz-pl-md-12 { + padding-left: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-end: 3rem !important; + } + .rz-m-md-auto { + margin: auto !important; + } + .rz-my-md-auto, + .rz-mt-md-auto { + margin-top: auto !important; + } + .rz-mx-md-auto, + .rz-mr-md-auto { + margin-right: auto !important; + } + .rz-my-md-auto, + .rz-mb-md-auto { + margin-bottom: auto !important; + } + .rz-mx-md-auto, + .rz-ml-md-auto { + margin-left: auto !important; + } + .rz-ms-md-auto { + margin-inline-start: auto !important; + } + .rz-me-md-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1280px) { + .rz-m-lg-0 { + margin: 0 !important; + } + .rz-my-lg-0, + .rz-mt-lg-0 { + margin-top: 0 !important; + } + .rz-mx-lg-0, + .rz-mr-lg-0 { + margin-right: 0 !important; + } + .rz-my-lg-0, + .rz-mb-lg-0 { + margin-bottom: 0 !important; + } + .rz-mx-lg-0, + .rz-ml-lg-0 { + margin-left: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-start: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-end: 0 !important; + } + .rz-m-lg-05 { + margin: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mt-lg-05 { + margin-top: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-mr-lg-05 { + margin-right: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mb-lg-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-ml-lg-05 { + margin-left: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-lg-1 { + margin: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mt-lg-1 { + margin-top: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-mr-lg-1 { + margin-right: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-ml-lg-1 { + margin-left: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-lg-2 { + margin: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mt-lg-2 { + margin-top: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-mr-lg-2 { + margin-right: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-ml-lg-2 { + margin-left: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-lg-3 { + margin: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mt-lg-3 { + margin-top: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-mr-lg-3 { + margin-right: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mb-lg-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-ml-lg-3 { + margin-left: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-lg-4 { + margin: 1rem !important; + } + .rz-my-lg-4, + .rz-mt-lg-4 { + margin-top: 1rem !important; + } + .rz-mx-lg-4, + .rz-mr-lg-4 { + margin-right: 1rem !important; + } + .rz-my-lg-4, + .rz-mb-lg-4 { + margin-bottom: 1rem !important; + } + .rz-mx-lg-4, + .rz-ml-lg-4 { + margin-left: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-end: 1rem !important; + } + .rz-m-lg-5 { + margin: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mt-lg-5 { + margin-top: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-mr-lg-5 { + margin-right: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mb-lg-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-ml-lg-5 { + margin-left: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-lg-6 { + margin: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mt-lg-6 { + margin-top: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-mr-lg-6 { + margin-right: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mb-lg-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-ml-lg-6 { + margin-left: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-lg-7 { + margin: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mt-lg-7 { + margin-top: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-mr-lg-7 { + margin-right: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mb-lg-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-ml-lg-7 { + margin-left: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-lg-8 { + margin: 2rem !important; + } + .rz-my-lg-8, + .rz-mt-lg-8 { + margin-top: 2rem !important; + } + .rz-mx-lg-8, + .rz-mr-lg-8 { + margin-right: 2rem !important; + } + .rz-my-lg-8, + .rz-mb-lg-8 { + margin-bottom: 2rem !important; + } + .rz-mx-lg-8, + .rz-ml-lg-8 { + margin-left: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-end: 2rem !important; + } + .rz-m-lg-9 { + margin: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mt-lg-9 { + margin-top: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-mr-lg-9 { + margin-right: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mb-lg-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-ml-lg-9 { + margin-left: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-lg-10 { + margin: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mt-lg-10 { + margin-top: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-mr-lg-10 { + margin-right: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mb-lg-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-ml-lg-10 { + margin-left: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-lg-11 { + margin: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mt-lg-11 { + margin-top: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-mr-lg-11 { + margin-right: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mb-lg-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-ml-lg-11 { + margin-left: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-lg-12 { + margin: 3rem !important; + } + .rz-my-lg-12, + .rz-mt-lg-12 { + margin-top: 3rem !important; + } + .rz-mx-lg-12, + .rz-mr-lg-12 { + margin-right: 3rem !important; + } + .rz-my-lg-12, + .rz-mb-lg-12 { + margin-bottom: 3rem !important; + } + .rz-mx-lg-12, + .rz-ml-lg-12 { + margin-left: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-end: 3rem !important; + } + .rz-p-lg-0 { + padding: 0 !important; + } + .rz-py-lg-0, + .rz-pt-lg-0 { + padding-top: 0 !important; + } + .rz-px-lg-0, + .rz-pr-lg-0 { + padding-right: 0 !important; + } + .rz-py-lg-0, + .rz-pb-lg-0 { + padding-bottom: 0 !important; + } + .rz-px-lg-0, + .rz-pl-lg-0 { + padding-left: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-start: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-end: 0 !important; + } + .rz-p-lg-05 { + padding: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pt-lg-05 { + padding-top: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pr-lg-05 { + padding-right: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pb-lg-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pl-lg-05 { + padding-left: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-lg-1 { + padding: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pt-lg-1 { + padding-top: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pr-lg-1 { + padding-right: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pl-lg-1 { + padding-left: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-lg-2 { + padding: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pt-lg-2 { + padding-top: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pr-lg-2 { + padding-right: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pl-lg-2 { + padding-left: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-lg-3 { + padding: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pt-lg-3 { + padding-top: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pr-lg-3 { + padding-right: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pb-lg-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pl-lg-3 { + padding-left: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-lg-4 { + padding: 1rem !important; + } + .rz-py-lg-4, + .rz-pt-lg-4 { + padding-top: 1rem !important; + } + .rz-px-lg-4, + .rz-pr-lg-4 { + padding-right: 1rem !important; + } + .rz-py-lg-4, + .rz-pb-lg-4 { + padding-bottom: 1rem !important; + } + .rz-px-lg-4, + .rz-pl-lg-4 { + padding-left: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-end: 1rem !important; + } + .rz-p-lg-5 { + padding: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pt-lg-5 { + padding-top: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pr-lg-5 { + padding-right: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pb-lg-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pl-lg-5 { + padding-left: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-lg-6 { + padding: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pt-lg-6 { + padding-top: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pr-lg-6 { + padding-right: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pb-lg-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pl-lg-6 { + padding-left: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-lg-7 { + padding: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pt-lg-7 { + padding-top: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pr-lg-7 { + padding-right: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pb-lg-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pl-lg-7 { + padding-left: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-lg-8 { + padding: 2rem !important; + } + .rz-py-lg-8, + .rz-pt-lg-8 { + padding-top: 2rem !important; + } + .rz-px-lg-8, + .rz-pr-lg-8 { + padding-right: 2rem !important; + } + .rz-py-lg-8, + .rz-pb-lg-8 { + padding-bottom: 2rem !important; + } + .rz-px-lg-8, + .rz-pl-lg-8 { + padding-left: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-end: 2rem !important; + } + .rz-p-lg-9 { + padding: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pt-lg-9 { + padding-top: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pr-lg-9 { + padding-right: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pb-lg-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pl-lg-9 { + padding-left: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-lg-10 { + padding: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pt-lg-10 { + padding-top: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pr-lg-10 { + padding-right: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pb-lg-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pl-lg-10 { + padding-left: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-lg-11 { + padding: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pt-lg-11 { + padding-top: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pr-lg-11 { + padding-right: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pb-lg-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pl-lg-11 { + padding-left: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-lg-12 { + padding: 3rem !important; + } + .rz-py-lg-12, + .rz-pt-lg-12 { + padding-top: 3rem !important; + } + .rz-px-lg-12, + .rz-pr-lg-12 { + padding-right: 3rem !important; + } + .rz-py-lg-12, + .rz-pb-lg-12 { + padding-bottom: 3rem !important; + } + .rz-px-lg-12, + .rz-pl-lg-12 { + padding-left: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-end: 3rem !important; + } + .rz-m-lg-auto { + margin: auto !important; + } + .rz-my-lg-auto, + .rz-mt-lg-auto { + margin-top: auto !important; + } + .rz-mx-lg-auto, + .rz-mr-lg-auto { + margin-right: auto !important; + } + .rz-my-lg-auto, + .rz-mb-lg-auto { + margin-bottom: auto !important; + } + .rz-mx-lg-auto, + .rz-ml-lg-auto { + margin-left: auto !important; + } + .rz-ms-lg-auto { + margin-inline-start: auto !important; + } + .rz-me-lg-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1920px) { + .rz-m-xl-0 { + margin: 0 !important; + } + .rz-my-xl-0, + .rz-mt-xl-0 { + margin-top: 0 !important; + } + .rz-mx-xl-0, + .rz-mr-xl-0 { + margin-right: 0 !important; + } + .rz-my-xl-0, + .rz-mb-xl-0 { + margin-bottom: 0 !important; + } + .rz-mx-xl-0, + .rz-ml-xl-0 { + margin-left: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-end: 0 !important; + } + .rz-m-xl-05 { + margin: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mt-xl-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-mr-xl-05 { + margin-right: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mb-xl-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-ml-xl-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xl-1 { + margin: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mt-xl-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-mr-xl-1 { + margin-right: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-ml-xl-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xl-2 { + margin: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mt-xl-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-mr-xl-2 { + margin-right: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-ml-xl-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xl-3 { + margin: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mt-xl-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-mr-xl-3 { + margin-right: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mb-xl-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-ml-xl-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xl-4 { + margin: 1rem !important; + } + .rz-my-xl-4, + .rz-mt-xl-4 { + margin-top: 1rem !important; + } + .rz-mx-xl-4, + .rz-mr-xl-4 { + margin-right: 1rem !important; + } + .rz-my-xl-4, + .rz-mb-xl-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xl-4, + .rz-ml-xl-4 { + margin-left: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xl-5 { + margin: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mt-xl-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-mr-xl-5 { + margin-right: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mb-xl-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-ml-xl-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xl-6 { + margin: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mt-xl-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-mr-xl-6 { + margin-right: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mb-xl-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-ml-xl-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xl-7 { + margin: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mt-xl-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-mr-xl-7 { + margin-right: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mb-xl-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-ml-xl-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xl-8 { + margin: 2rem !important; + } + .rz-my-xl-8, + .rz-mt-xl-8 { + margin-top: 2rem !important; + } + .rz-mx-xl-8, + .rz-mr-xl-8 { + margin-right: 2rem !important; + } + .rz-my-xl-8, + .rz-mb-xl-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xl-8, + .rz-ml-xl-8 { + margin-left: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xl-9 { + margin: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mt-xl-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-mr-xl-9 { + margin-right: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mb-xl-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-ml-xl-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xl-10 { + margin: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mt-xl-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-mr-xl-10 { + margin-right: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mb-xl-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-ml-xl-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xl-11 { + margin: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mt-xl-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-mr-xl-11 { + margin-right: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mb-xl-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-ml-xl-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xl-12 { + margin: 3rem !important; + } + .rz-my-xl-12, + .rz-mt-xl-12 { + margin-top: 3rem !important; + } + .rz-mx-xl-12, + .rz-mr-xl-12 { + margin-right: 3rem !important; + } + .rz-my-xl-12, + .rz-mb-xl-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xl-12, + .rz-ml-xl-12 { + margin-left: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xl-0 { + padding: 0 !important; + } + .rz-py-xl-0, + .rz-pt-xl-0 { + padding-top: 0 !important; + } + .rz-px-xl-0, + .rz-pr-xl-0 { + padding-right: 0 !important; + } + .rz-py-xl-0, + .rz-pb-xl-0 { + padding-bottom: 0 !important; + } + .rz-px-xl-0, + .rz-pl-xl-0 { + padding-left: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-end: 0 !important; + } + .rz-p-xl-05 { + padding: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pt-xl-05 { + padding-top: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pr-xl-05 { + padding-right: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pb-xl-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pl-xl-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xl-1 { + padding: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pt-xl-1 { + padding-top: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pr-xl-1 { + padding-right: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pl-xl-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xl-2 { + padding: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pt-xl-2 { + padding-top: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pr-xl-2 { + padding-right: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pl-xl-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xl-3 { + padding: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pt-xl-3 { + padding-top: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pr-xl-3 { + padding-right: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pb-xl-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pl-xl-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xl-4 { + padding: 1rem !important; + } + .rz-py-xl-4, + .rz-pt-xl-4 { + padding-top: 1rem !important; + } + .rz-px-xl-4, + .rz-pr-xl-4 { + padding-right: 1rem !important; + } + .rz-py-xl-4, + .rz-pb-xl-4 { + padding-bottom: 1rem !important; + } + .rz-px-xl-4, + .rz-pl-xl-4 { + padding-left: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xl-5 { + padding: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pt-xl-5 { + padding-top: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pr-xl-5 { + padding-right: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pb-xl-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pl-xl-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xl-6 { + padding: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pt-xl-6 { + padding-top: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pr-xl-6 { + padding-right: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pb-xl-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pl-xl-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xl-7 { + padding: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pt-xl-7 { + padding-top: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pr-xl-7 { + padding-right: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pb-xl-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pl-xl-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xl-8 { + padding: 2rem !important; + } + .rz-py-xl-8, + .rz-pt-xl-8 { + padding-top: 2rem !important; + } + .rz-px-xl-8, + .rz-pr-xl-8 { + padding-right: 2rem !important; + } + .rz-py-xl-8, + .rz-pb-xl-8 { + padding-bottom: 2rem !important; + } + .rz-px-xl-8, + .rz-pl-xl-8 { + padding-left: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xl-9 { + padding: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pt-xl-9 { + padding-top: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pr-xl-9 { + padding-right: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pb-xl-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pl-xl-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xl-10 { + padding: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pt-xl-10 { + padding-top: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pr-xl-10 { + padding-right: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pb-xl-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pl-xl-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xl-11 { + padding: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pt-xl-11 { + padding-top: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pr-xl-11 { + padding-right: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pb-xl-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pl-xl-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xl-12 { + padding: 3rem !important; + } + .rz-py-xl-12, + .rz-pt-xl-12 { + padding-top: 3rem !important; + } + .rz-px-xl-12, + .rz-pr-xl-12 { + padding-right: 3rem !important; + } + .rz-py-xl-12, + .rz-pb-xl-12 { + padding-bottom: 3rem !important; + } + .rz-px-xl-12, + .rz-pl-xl-12 { + padding-left: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xl-auto { + margin: auto !important; + } + .rz-my-xl-auto, + .rz-mt-xl-auto { + margin-top: auto !important; + } + .rz-mx-xl-auto, + .rz-mr-xl-auto { + margin-right: auto !important; + } + .rz-my-xl-auto, + .rz-mb-xl-auto { + margin-bottom: auto !important; + } + .rz-mx-xl-auto, + .rz-ml-xl-auto { + margin-left: auto !important; + } + .rz-ms-xl-auto { + margin-inline-start: auto !important; + } + .rz-me-xl-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 2560px) { + .rz-m-xx-0 { + margin: 0 !important; + } + .rz-my-xx-0, + .rz-mt-xx-0 { + margin-top: 0 !important; + } + .rz-mx-xx-0, + .rz-mr-xx-0 { + margin-right: 0 !important; + } + .rz-my-xx-0, + .rz-mb-xx-0 { + margin-bottom: 0 !important; + } + .rz-mx-xx-0, + .rz-ml-xx-0 { + margin-left: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-end: 0 !important; + } + .rz-m-xx-05 { + margin: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mt-xx-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-mr-xx-05 { + margin-right: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mb-xx-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-ml-xx-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xx-1 { + margin: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mt-xx-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-mr-xx-1 { + margin-right: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mb-xx-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-ml-xx-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xx-2 { + margin: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mt-xx-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-mr-xx-2 { + margin-right: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mb-xx-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-ml-xx-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xx-3 { + margin: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mt-xx-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-mr-xx-3 { + margin-right: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mb-xx-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-ml-xx-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xx-4 { + margin: 1rem !important; + } + .rz-my-xx-4, + .rz-mt-xx-4 { + margin-top: 1rem !important; + } + .rz-mx-xx-4, + .rz-mr-xx-4 { + margin-right: 1rem !important; + } + .rz-my-xx-4, + .rz-mb-xx-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xx-4, + .rz-ml-xx-4 { + margin-left: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xx-5 { + margin: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mt-xx-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-mr-xx-5 { + margin-right: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mb-xx-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-ml-xx-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xx-6 { + margin: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mt-xx-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-mr-xx-6 { + margin-right: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mb-xx-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-ml-xx-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xx-7 { + margin: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mt-xx-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-mr-xx-7 { + margin-right: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mb-xx-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-ml-xx-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xx-8 { + margin: 2rem !important; + } + .rz-my-xx-8, + .rz-mt-xx-8 { + margin-top: 2rem !important; + } + .rz-mx-xx-8, + .rz-mr-xx-8 { + margin-right: 2rem !important; + } + .rz-my-xx-8, + .rz-mb-xx-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xx-8, + .rz-ml-xx-8 { + margin-left: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xx-9 { + margin: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mt-xx-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-mr-xx-9 { + margin-right: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mb-xx-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-ml-xx-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xx-10 { + margin: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mt-xx-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-mr-xx-10 { + margin-right: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mb-xx-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-ml-xx-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xx-11 { + margin: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mt-xx-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-mr-xx-11 { + margin-right: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mb-xx-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-ml-xx-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xx-12 { + margin: 3rem !important; + } + .rz-my-xx-12, + .rz-mt-xx-12 { + margin-top: 3rem !important; + } + .rz-mx-xx-12, + .rz-mr-xx-12 { + margin-right: 3rem !important; + } + .rz-my-xx-12, + .rz-mb-xx-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xx-12, + .rz-ml-xx-12 { + margin-left: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xx-0 { + padding: 0 !important; + } + .rz-py-xx-0, + .rz-pt-xx-0 { + padding-top: 0 !important; + } + .rz-px-xx-0, + .rz-pr-xx-0 { + padding-right: 0 !important; + } + .rz-py-xx-0, + .rz-pb-xx-0 { + padding-bottom: 0 !important; + } + .rz-px-xx-0, + .rz-pl-xx-0 { + padding-left: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-end: 0 !important; + } + .rz-p-xx-05 { + padding: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pt-xx-05 { + padding-top: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pr-xx-05 { + padding-right: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pb-xx-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pl-xx-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xx-1 { + padding: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pt-xx-1 { + padding-top: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pr-xx-1 { + padding-right: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pb-xx-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pl-xx-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xx-2 { + padding: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pt-xx-2 { + padding-top: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pr-xx-2 { + padding-right: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pb-xx-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pl-xx-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xx-3 { + padding: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pt-xx-3 { + padding-top: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pr-xx-3 { + padding-right: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pb-xx-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pl-xx-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xx-4 { + padding: 1rem !important; + } + .rz-py-xx-4, + .rz-pt-xx-4 { + padding-top: 1rem !important; + } + .rz-px-xx-4, + .rz-pr-xx-4 { + padding-right: 1rem !important; + } + .rz-py-xx-4, + .rz-pb-xx-4 { + padding-bottom: 1rem !important; + } + .rz-px-xx-4, + .rz-pl-xx-4 { + padding-left: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xx-5 { + padding: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pt-xx-5 { + padding-top: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pr-xx-5 { + padding-right: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pb-xx-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pl-xx-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xx-6 { + padding: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pt-xx-6 { + padding-top: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pr-xx-6 { + padding-right: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pb-xx-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pl-xx-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xx-7 { + padding: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pt-xx-7 { + padding-top: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pr-xx-7 { + padding-right: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pb-xx-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pl-xx-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xx-8 { + padding: 2rem !important; + } + .rz-py-xx-8, + .rz-pt-xx-8 { + padding-top: 2rem !important; + } + .rz-px-xx-8, + .rz-pr-xx-8 { + padding-right: 2rem !important; + } + .rz-py-xx-8, + .rz-pb-xx-8 { + padding-bottom: 2rem !important; + } + .rz-px-xx-8, + .rz-pl-xx-8 { + padding-left: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xx-9 { + padding: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pt-xx-9 { + padding-top: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pr-xx-9 { + padding-right: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pb-xx-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pl-xx-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xx-10 { + padding: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pt-xx-10 { + padding-top: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pr-xx-10 { + padding-right: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pb-xx-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pl-xx-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xx-11 { + padding: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pt-xx-11 { + padding-top: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pr-xx-11 { + padding-right: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pb-xx-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pl-xx-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xx-12 { + padding: 3rem !important; + } + .rz-py-xx-12, + .rz-pt-xx-12 { + padding-top: 3rem !important; + } + .rz-px-xx-12, + .rz-pr-xx-12 { + padding-right: 3rem !important; + } + .rz-py-xx-12, + .rz-pb-xx-12 { + padding-bottom: 3rem !important; + } + .rz-px-xx-12, + .rz-pl-xx-12 { + padding-left: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xx-auto { + margin: auto !important; + } + .rz-my-xx-auto, + .rz-mt-xx-auto { + margin-top: auto !important; + } + .rz-mx-xx-auto, + .rz-mr-xx-auto { + margin-right: auto !important; + } + .rz-my-xx-auto, + .rz-mb-xx-auto { + margin-bottom: auto !important; + } + .rz-mx-xx-auto, + .rz-ml-xx-auto { + margin-left: auto !important; + } + .rz-ms-xx-auto { + margin-inline-start: auto !important; + } + .rz-me-xx-auto { + margin-inline-end: auto !important; + } +} +h1.rz-heading { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2.rz-heading { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3.rz-heading { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4.rz-heading { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5.rz-heading { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +.rz-text-display-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h1-font-size); + line-height: var(--rz-text-display-h1-line-height); + font-weight: var(--rz-text-display-h1-font-weight); + letter-spacing: var(--rz-text-display-h1-letter-spacing); + color: var(--rz-text-display-h1-color); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); +} + +.rz-text-display-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h2-font-size); + line-height: var(--rz-text-display-h2-line-height); + font-weight: var(--rz-text-display-h2-font-weight); + letter-spacing: var(--rz-text-display-h2-letter-spacing); + color: var(--rz-text-display-h2-color); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); +} + +.rz-text-display-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h3-font-size); + line-height: var(--rz-text-display-h3-line-height); + font-weight: var(--rz-text-display-h3-font-weight); + letter-spacing: var(--rz-text-display-h3-letter-spacing); + color: var(--rz-text-display-h3-color); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); +} + +.rz-text-display-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h4-font-size); + line-height: var(--rz-text-display-h4-line-height); + font-weight: var(--rz-text-display-h4-font-weight); + letter-spacing: var(--rz-text-display-h4-letter-spacing); + color: var(--rz-text-display-h4-color); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); +} + +.rz-text-display-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h5-font-size); + line-height: var(--rz-text-display-h5-line-height); + font-weight: var(--rz-text-display-h5-font-weight); + letter-spacing: var(--rz-text-display-h5-letter-spacing); + color: var(--rz-text-display-h5-color); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); +} + +.rz-text-display-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h6-font-size); + line-height: var(--rz-text-display-h6-line-height); + font-weight: var(--rz-text-display-h6-font-weight); + letter-spacing: var(--rz-text-display-h6-letter-spacing); + color: var(--rz-text-display-h6-color); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); +} + +.rz-text-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h1-font-size); + line-height: var(--rz-text-h1-line-height); + font-weight: var(--rz-text-h1-font-weight); + letter-spacing: var(--rz-text-h1-letter-spacing); + color: var(--rz-text-h1-color); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); +} + +.rz-text-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h2-font-size); + line-height: var(--rz-text-h2-line-height); + font-weight: var(--rz-text-h2-font-weight); + letter-spacing: var(--rz-text-h2-letter-spacing); + color: var(--rz-text-h2-color); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); +} + +.rz-text-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h3-font-size); + line-height: var(--rz-text-h3-line-height); + font-weight: var(--rz-text-h3-font-weight); + letter-spacing: var(--rz-text-h3-letter-spacing); + color: var(--rz-text-h3-color); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); +} + +.rz-text-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h4-font-size); + line-height: var(--rz-text-h4-line-height); + font-weight: var(--rz-text-h4-font-weight); + letter-spacing: var(--rz-text-h4-letter-spacing); + color: var(--rz-text-h4-color); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); +} + +.rz-text-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h5-font-size); + line-height: var(--rz-text-h5-line-height); + font-weight: var(--rz-text-h5-font-weight); + letter-spacing: var(--rz-text-h5-letter-spacing); + color: var(--rz-text-h5-color); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); +} + +.rz-text-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-text-h6-color); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); +} + +.rz-text-subtitle1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle1-font-size); + line-height: var(--rz-text-subtitle1-line-height); + font-weight: var(--rz-text-subtitle1-font-weight); + letter-spacing: var(--rz-text-subtitle1-letter-spacing); + color: var(--rz-text-subtitle1-color); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); +} + +.rz-text-subtitle2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle2-font-size); + line-height: var(--rz-text-subtitle2-line-height); + font-weight: var(--rz-text-subtitle2-font-weight); + letter-spacing: var(--rz-text-subtitle2-letter-spacing); + color: var(--rz-text-subtitle2-color); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); +} + +.rz-text-body1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body1-font-size); + line-height: var(--rz-text-body1-line-height); + font-weight: var(--rz-text-body1-font-weight); + letter-spacing: var(--rz-text-body1-letter-spacing); + color: var(--rz-text-body1-color); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); +} + +.rz-text-body2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body2-font-size); + line-height: var(--rz-text-body2-line-height); + font-weight: var(--rz-text-body2-font-weight); + letter-spacing: var(--rz-text-body2-letter-spacing); + color: var(--rz-text-body2-color); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); +} + +.rz-text-button { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-button-font-size); + line-height: var(--rz-text-button-line-height); + font-weight: var(--rz-text-button-font-weight); + letter-spacing: var(--rz-text-button-letter-spacing); + color: var(--rz-text-button-color); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); +} + +.rz-text-caption { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-caption-font-size); + line-height: var(--rz-text-caption-line-height); + font-weight: var(--rz-text-caption-font-weight); + letter-spacing: var(--rz-text-caption-letter-spacing); + color: var(--rz-text-caption-color); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); +} + +.rz-text-overline { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-overline-font-size); + line-height: var(--rz-text-overline-line-height); + font-weight: var(--rz-text-overline-font-weight); + letter-spacing: var(--rz-text-overline-letter-spacing); + text-transform: var(--rz-text-overline-text-transform); + color: var(--rz-text-overline-color); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); +} + +.rz-text-align-start { + text-align: start; +} + +.rz-text-align-end { + text-align: end; +} + +.rz-text-align-left { + text-align: left; +} + +.rz-text-align-right { + text-align: right; +} + +.rz-text-align-center { + text-align: center; +} + +.rz-text-align-justify { + text-align: justify; +} + +.rz-text-align-justify-all { + text-align: justify-all; +} + +.rz-text-align-match-parent { + text-align: match-parent; +} + +@media (min-width: 576px) { + .rz-text-align-xs-start { + text-align: start !important; + } + .rz-text-align-xs-end { + text-align: end !important; + } + .rz-text-align-xs-left { + text-align: left !important; + } + .rz-text-align-xs-right { + text-align: right !important; + } + .rz-text-align-xs-center { + text-align: center !important; + } + .rz-text-align-xs-justify { + text-align: justify !important; + } + .rz-text-align-xs-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xs-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 768px) { + .rz-text-align-sm-start { + text-align: start !important; + } + .rz-text-align-sm-end { + text-align: end !important; + } + .rz-text-align-sm-left { + text-align: left !important; + } + .rz-text-align-sm-right { + text-align: right !important; + } + .rz-text-align-sm-center { + text-align: center !important; + } + .rz-text-align-sm-justify { + text-align: justify !important; + } + .rz-text-align-sm-justify-all { + text-align: justify-all !important; + } + .rz-text-align-sm-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1024px) { + .rz-text-align-md-start { + text-align: start !important; + } + .rz-text-align-md-end { + text-align: end !important; + } + .rz-text-align-md-left { + text-align: left !important; + } + .rz-text-align-md-right { + text-align: right !important; + } + .rz-text-align-md-center { + text-align: center !important; + } + .rz-text-align-md-justify { + text-align: justify !important; + } + .rz-text-align-md-justify-all { + text-align: justify-all !important; + } + .rz-text-align-md-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1280px) { + .rz-text-align-lg-start { + text-align: start !important; + } + .rz-text-align-lg-end { + text-align: end !important; + } + .rz-text-align-lg-left { + text-align: left !important; + } + .rz-text-align-lg-right { + text-align: right !important; + } + .rz-text-align-lg-center { + text-align: center !important; + } + .rz-text-align-lg-justify { + text-align: justify !important; + } + .rz-text-align-lg-justify-all { + text-align: justify-all !important; + } + .rz-text-align-lg-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1920px) { + .rz-text-align-xl-start { + text-align: start !important; + } + .rz-text-align-xl-end { + text-align: end !important; + } + .rz-text-align-xl-left { + text-align: left !important; + } + .rz-text-align-xl-right { + text-align: right !important; + } + .rz-text-align-xl-center { + text-align: center !important; + } + .rz-text-align-xl-justify { + text-align: justify !important; + } + .rz-text-align-xl-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xl-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 2560px) { + .rz-text-align-xx-start { + text-align: start !important; + } + .rz-text-align-xx-end { + text-align: end !important; + } + .rz-text-align-xx-left { + text-align: left !important; + } + .rz-text-align-xx-right { + text-align: right !important; + } + .rz-text-align-xx-center { + text-align: center !important; + } + .rz-text-align-xx-justify { + text-align: justify !important; + } + .rz-text-align-xx-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xx-match-parent { + text-align: match-parent !important; + } +} +.rz-text-wrap { + white-space: normal !important; +} + +.rz-text-nowrap { + white-space: nowrap !important; +} + +.rz-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rz-text-capitalize { + text-transform: capitalize; +} + +.rz-text-uppercase { + text-transform: uppercase; +} + +.rz-text-lowercase { + text-transform: lowercase; +} + +.rz-label { + vertical-align: middle; + margin-block-start: 0; + margin-block-end: 0; +} + +.rz-form .row .rz-label { + min-height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; + border-top: var(--rz-input-border); + border-bottom: var(--rz-input-border); + border-color: transparent; +} + +.rz-layout ::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; + font-family: var(--rz-icon-font-family); + font-weight: var(--rz-icon-weight, inherit); + font-style: normal; + font-size: var(--rz-icon-size); + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: "liga"; +} + +i.rzi { + display: inline-flex; + justify-content: center; + align-items: center; +} + +.rzi-primary { + color: var(--rz-primary); +} + +.rzi-secondary { + color: var(--rz-secondary); +} + +.rzi-info { + color: var(--rz-info); +} + +.rzi-warning { + color: var(--rz-warning); +} + +.rzi-error { + color: var(--rz-danger); +} + +.rzi-danger { + color: var(--rz-danger); +} + +.rzi-success { + color: var(--rz-success); +} + +.rzi-base { + color: var(--rz-base-700); +} + +.rzi-light { + color: var(--rz-base-700); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + +.rz-helper-hidden-accessible { + opacity: 0; + height: 0; +} +.rz-helper-hidden-accessible input { + height: 0; + padding: 0; + margin: 0; + border: 0; +} + +.rz-helper-hidden { + display: none; +} + +.rz-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; +} + +.rz-pager-element, .rz-button { + box-sizing: border-box; + display: inline-block; + margin: 0; + color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; + border: none; + border-radius: var(--rz-button-border-radius); + outline: none; + box-shadow: var(--rz-button-shadow); + font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); + text-decoration: none; + transition: var(--rz-button-transition); + -webkit-appearance: none; +} +.rz-pager-element:focus, .rz-button:focus { + outline: var(--rz-outline-normal); +} +.rz-pager-element:focus-visible, .rz-button:focus-visible { + outline: var(--rz-button-focus-outline); + outline-offset: var(--rz-button-focus-outline-offset); +} +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { + cursor: pointer; +} +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { + text-decoration: none; + background-image: var(--rz-button-hover-gradient); + background-size: var(--rz-button-hover-background-size); + box-shadow: var(--rz-button-hover-shadow); +} +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { + text-decoration: none; + background-image: var(--rz-button-focus-gradient); + background-size: var(--rz-button-focus-background-size); + box-shadow: var(--rz-button-focus-shadow); +} +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { + text-decoration: none; + background-image: var(--rz-button-active-gradient); + background-size: var(--rz-button-active-background-size); + box-shadow: var(--rz-button-active-shadow); +} +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { + opacity: var(--rz-button-disabled-opacity); + cursor: initial; +} +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { + opacity: var(--rz-button-empty-opacity); + cursor: initial; +} +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: var(--rz-button-vertical-align); + line-height: var(--rz-button-line-height); +} +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { + vertical-align: var(--rz-button-vertical-align); +} +.rz-pager-element .rzi, .rz-button .rzi { + vertical-align: var(--rz-button-vertical-align); +} + +.rz-button.rz-primary:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-button.rz-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-button.rz-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-button.rz-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} +.rz-button.rz-primary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-button.rz-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-button.rz-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-button.rz-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} +.rz-button.rz-secondary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-secondary.rz-variant-flat:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-button.rz-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-button.rz-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-button.rz-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} +.rz-button.rz-info.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-info.rz-variant-flat:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-button.rz-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-button.rz-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-button.rz-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} +.rz-button.rz-warning.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-warning.rz-variant-flat:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-button.rz-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-button.rz-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-button.rz-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-button.rz-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} +.rz-button.rz-error.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-error.rz-variant-flat:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-button.rz-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-button.rz-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-secondary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-info { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} +.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-warning { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-error { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} +.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-danger { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-success { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} +.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-base { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-light { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-dark { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; +} + +.rz-button.rz-variant-text.rz-primary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-secondary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-info { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-button.rz-variant-text.rz-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-button.rz-variant-text.rz-info.rz-shade-default { + color: var(--rz-info); +} +.rz-button.rz-variant-text.rz-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-button.rz-variant-text.rz-info.rz-shade-darker { + color: var(--rz-info-darker); +} +.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-warning { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-error { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-button.rz-variant-text.rz-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-button.rz-variant-text.rz-error.rz-shade-default { + color: var(--rz-error); +} +.rz-button.rz-variant-text.rz-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-button.rz-variant-text.rz-error.rz-shade-darker { + color: var(--rz-error-darker); +} +.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-danger { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-success { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-button.rz-variant-text.rz-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-button.rz-variant-text.rz-success.rz-shade-default { + color: var(--rz-success); +} +.rz-button.rz-variant-text.rz-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-button.rz-variant-text.rz-success.rz-shade-darker { + color: var(--rz-success-darker); +} +.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-text-contrast-color); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button-lg { + padding: 0.875rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3.25rem; + min-width: 3.25rem; + border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; +} +.rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { + padding: 0.875rem; +} +.rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-pager-element, .rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; +} +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { + padding: 0.5rem 1rem 0.5rem 0.5rem; +} +.rz-pager-element, .rz-button-md.rz-button-icon-only { + padding: 0.5rem; +} +.rz-pager-element .rzi, .rz-button-md .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { + padding: 0.25rem 0.75rem; + height: auto; + line-height: 1.25rem; + min-height: 1.75rem; + min-width: 1.75rem; + font-size: var(--rz-body-font-size); +} +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { + padding: 0.25rem 0.75rem 0.25rem 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { + padding: 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-button-xs { + padding: 0.125rem 0.25rem; + height: auto; + line-height: 1rem; + min-height: 1.25rem; + min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; +} +.rz-button-xs .rz-button-box { + line-height: 1rem; + gap: 0.125rem; +} +.rz-button-xs.rz-button-icon-left { + padding: 0.125rem 0.5rem 0.125rem 0.125rem; +} +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { + padding: 0.125rem; +} +.rz-button-xs .rzi { + font-size: calc(0.8 * var(--rz-icon-size)); + line-height: calc(0.8 * var(--rz-icon-size)); + width: calc(0.8 * var(--rz-icon-size)); + height: calc(0.8 * var(--rz-icon-size)); +} + +@keyframes button-icon-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.rz-badge { + box-sizing: border-box; + color: var(--rz-text-contrast-color); + display: inline-block; + padding: var(--rz-badge-padding); + font-size: var(--rz-badge-font-size); + font-weight: var(--rz-badge-font-weight); + line-height: var(--rz-badge-line-height); + text-align: center; + text-transform: var(--rz-badge-text-transform); + white-space: nowrap; + border-radius: var(--rz-badge-border-radius); + letter-spacing: var(--rz-badge-letter-spacing); +} +.rz-button .rz-badge { + vertical-align: top; +} + +.rz-badge-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-badge-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-badge-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-badge-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} + +.rz-badge-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-badge-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-badge-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-badge-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} + +.rz-badge-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-badge-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-badge-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-badge-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} + +.rz-badge-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-badge-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-badge-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-badge-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} + +.rz-badge-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-badge-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-badge-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-badge-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-badge-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} + +.rz-badge-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-badge-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-badge-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-badge-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} + +.rz-badge-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-badge-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-badge-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-badge-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} + +.rz-badge-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-variant-outlined.rz-badge-primary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} + +.rz-variant-outlined.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-lighter); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} + +.rz-variant-outlined.rz-badge-info { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-lighter); +} +.rz-variant-outlined.rz-badge-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-variant-outlined.rz-badge-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-variant-outlined.rz-badge-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-variant-outlined.rz-badge-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} + +.rz-variant-outlined.rz-badge-warning { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-lighter); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} + +.rz-variant-outlined.rz-badge-error { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-lighter); +} +.rz-variant-outlined.rz-badge-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-variant-outlined.rz-badge-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-variant-outlined.rz-badge-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-variant-outlined.rz-badge-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} + +.rz-variant-outlined.rz-badge-danger { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-lighter); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} + +.rz-variant-outlined.rz-badge-success { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-lighter); +} +.rz-variant-outlined.rz-badge-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-variant-outlined.rz-badge-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-variant-outlined.rz-badge-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-variant-outlined.rz-badge-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} + +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-700); + color: var(--rz-base-700); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + +.rz-variant-text.rz-badge-primary { + background-color: transparent; +} +.rz-variant-text.rz-badge-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-variant-text.rz-badge-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-variant-text.rz-badge-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-variant-text.rz-badge-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-variant-text.rz-badge-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} + +.rz-variant-text.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-text.rz-badge-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-variant-text.rz-badge-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-variant-text.rz-badge-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-variant-text.rz-badge-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-variant-text.rz-badge-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} + +.rz-variant-text.rz-badge-info { + background-color: transparent; +} +.rz-variant-text.rz-badge-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-variant-text.rz-badge-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-variant-text.rz-badge-info.rz-shade-default { + color: var(--rz-info); +} +.rz-variant-text.rz-badge-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-variant-text.rz-badge-info.rz-shade-darker { + color: var(--rz-info-darker); +} + +.rz-variant-text.rz-badge-warning { + background-color: transparent; +} +.rz-variant-text.rz-badge-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-variant-text.rz-badge-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-variant-text.rz-badge-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-variant-text.rz-badge-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-variant-text.rz-badge-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} + +.rz-variant-text.rz-badge-error { + background-color: transparent; +} +.rz-variant-text.rz-badge-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-variant-text.rz-badge-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-variant-text.rz-badge-error.rz-shade-default { + color: var(--rz-error); +} +.rz-variant-text.rz-badge-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-variant-text.rz-badge-error.rz-shade-darker { + color: var(--rz-error-darker); +} + +.rz-variant-text.rz-badge-danger { + background-color: transparent; +} +.rz-variant-text.rz-badge-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-variant-text.rz-badge-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-variant-text.rz-badge-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-variant-text.rz-badge-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-variant-text.rz-badge-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} + +.rz-variant-text.rz-badge-success { + background-color: transparent; +} +.rz-variant-text.rz-badge-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-variant-text.rz-badge-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-variant-text.rz-badge-success.rz-shade-default { + color: var(--rz-success); +} +.rz-variant-text.rz-badge-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-variant-text.rz-badge-success.rz-shade-darker { + color: var(--rz-success-darker); +} + +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-700); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + +.rz-badge-pill { + border-radius: var(--rz-badge-pill-border-radius); + padding: var(--rz-badge-pill-padding); +} + +.rz-dropzone { + user-select: none; +} + +.rz-dropzone-item { + user-select: none; + cursor: grab; +} + +.rz-dragging { + cursor: grabbing; +} + +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { + box-shadow: var(--rz-input-hover-shadow); + border: var(--rz-input-hover-border); +} + +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { + box-shadow: var(--rz-input-focus-shadow); + border: var(--rz-input-focus-border); + outline: var(--rz-input-focus-outline); + outline-offset: var(--rz-input-focus-outline-offset); +} + +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { + background-color: var(--rz-input-disabled-background-color); + color: var(--rz-input-disabled-color); + border: none; +} + +input { + color: var(--rz-input-value-color); + font-size: var(--rz-input-font-size); +} +input::placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); +} + +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + color: var(--rz-input-value-color); + font-family: inherit; + font-size: var(--rz-input-font-size); + transition: var(--rz-input-transition); + outline: none; +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + box-shadow: none; + background-color: transparent; + outline: none; + border: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus-within { + border: none; + box-shadow: none; +} + +.rz-header { + background-color: var(--rz-header-background-color); + min-height: var(--rz-header-min-height); + border-bottom: var(--rz-header-border); + color: var(--rz-header-color); + box-shadow: var(--rz-header-shadow); +} +.rz-header.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--rz-header-z); +} +.rz-header a { + text-decoration: none; +} + +.rz-footer { + padding: var(--rz-footer-padding); + border-top: var(--rz-footer-border); + background-color: var(--rz-footer-background-color); + color: var(--rz-footer-color); +} +.rz-footer.fixed { + position: fixed; + z-index: var(--rz-footer-z); + bottom: 0; + left: 0; + right: 0; +} + +.rz-sidebar { + background-color: var(--rz-sidebar-background-color); + color: var(--rz-sidebar-color); + border-inline-end: var(--rz-sidebar-border-inline-end); + position: fixed; + overflow: auto; + left: 0; + top: 0; + bottom: 0; + z-index: var(--rz-sidebar-z); + width: var(--rz-sidebar-width); + opacity: 1; + transition: width var(--rz-transition), opacity var(--rz-transition); +} + +@media (max-width: 768px) { + .rz-sidebar-responsive { + width: 0; + opacity: 0; + } +} +.rz-sidebar-expanded { + width: var(--rz-sidebar-width); + opacity: 1; +} + +.rz-sidebar-collapsed { + width: 0 !important; + opacity: 0; +} + +.rz-card { + box-sizing: border-box; + padding: var(--rz-card-padding); + border-radius: var(--rz-card-border-radius); + background-color: var(--rz-card-background-color); +} +.rz-card.rz-variant-filled { + box-shadow: var(--rz-card-shadow); +} +.rz-card.rz-variant-flat { + background-color: var(--rz-card-flat-background-color); +} +.rz-card.rz-variant-outlined { + background: transparent; + border: var(--rz-card-border); +} +.rz-card.rz-variant-text { + background: transparent; +} +.rz-card h1, +.rz-card h2, +.rz-card h3, +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + +.rz-accordion { + box-sizing: border-box; + border-radius: var(--rz-accordion-border-radius); + box-shadow: var(--rz-accordion-shadow); +} +.rz-accordion > div:first-child { + border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; +} +.rz-accordion > div:last-child, .rz-accordion > div:last-child > div { + border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); +} +.rz-accordion > div:only-child { + border-radius: var(--rz-accordion-border-radius); +} +.rz-accordion:focus { + outline: var(--rz-outline-normal); +} +.rz-accordion:focus-visible { + outline: var(--rz-accordion-item-focus-outline); +} +.rz-accordion .rz-accordion-header { + background-color: var(--rz-accordion-item-background-color); + margin: var(--rz-accordion-item-margin); +} +.rz-accordion .rz-accordion-header:not(:first-child) { + border-top: var(--rz-accordion-item-border); +} +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); + color: var(--rz-accordion-item-color); + line-height: var(--rz-accordion-item-line-height); + text-decoration: none; + display: flex; + align-items: center; + font-size: var(--rz-accordion-item-font-size); + font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; +} +.rz-accordion .rz-accordion-header > a:hover { + color: var(--rz-accordion-hover-color); +} +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { + flex-grow: 1; +} +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { + outline: var(--rz-accordion-item-focus-outline); + outline-offset: var(--rz-accordion-item-focus-outline-offset); +} +.rz-accordion .rz-accordion-header .rzi { + font-size: var(--rz-accordion-icon-font-size); + margin-inline: var(--rz-accordion-icon-margin-inline); +} + +.rz-accordion-toggle-icon { + width: var(--rz-accordion-icon-width); + height: var(--rz-accordion-icon-height); + font-size: var(--rz-accordion-icon-font-size); + order: var(--rz-accordion-toggle-icon-order); +} +.rz-accordion-toggle-icon.rzi { + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); +} +.rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_right"; +} +.rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-accordion-content-wrapper-overflown { + overflow: hidden; +} + +.rz-accordion-content { + font-size: var(--rz-accordion-content-font-size); + background-color: var(--rz-accordion-item-background-color); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); +} + +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); + background: var(--rz-panel-background-color); + border-radius: var(--rz-panel-border-radius); + box-shadow: var(--rz-panel-shadow); +} + +.rz-panel-titlebar { + display: flex; + justify-content: space-between; +} + +.rz-panel-content { + margin: var(--rz-panel-content-margin); +} + +.rz-panel-content-wrapper[aria-hidden=true] { + display: none; +} + +.rz-panel-title { + line-height: var(--rz-panel-title-line-height); + font-weight: var(--rz-panel-title-font-weight); +} + +.rz-panel-titlebar-toggler { + width: var(--rz-panel-toggle-icon-width); + height: var(--rz-panel-toggle-icon-height); + font-size: var(--rz-panel-toggle-icon-font-size); + border-radius: var(--rz-panel-toggle-icon-border-radius); + background-color: var(--rz-panel-toggle-icon-background-color); + color: inherit; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} +.rz-panel-titlebar-toggler:hover { + text-decoration: none; + color: var(--rz-panel-hover-color); +} +.rz-panel-titlebar-toggler:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-titlebar-toggler:focus-visible { + outline: var(--rz-panel-toggle-icon-focus-outline); + outline-offset: var(--rz-panel-toggle-icon-focus-outline-offset); +} +.rz-panel-titlebar-toggler .rzi-minus:before { + content: "remove"; +} +.rz-panel-titlebar-toggler .rzi-plus:before { + content: "add"; +} + +.rz-sidebar-toggle { + appearance: none; + cursor: pointer; + border: none; + padding: var(--rz-sidebar-toggle-padding); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); + background-color: var(--rz-sidebar-toggle-background-color); + color: var(--rz-sidebar-toggle-color); +} +.rz-justify-content-flex-end .rz-sidebar-toggle { + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; +} +.rz-sidebar-toggle:focus { + outline: none; +} +.rz-sidebar-toggle:focus-visible { + outline: var(--rz-sidebar-toggle-focus-outline); + outline-offset: var(--rz-sidebar-toggle-focus-outline-offset); +} +.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover { + color: var(--rz-sidebar-toggle-hover-color); + background: var(--rz-sidebar-toggle-hover-background-color); + border-radius: var(--rz-sidebar-toggle-hover-border-radius); +} +.rz-sidebar-toggle .rzi { + width: var(--rz-sidebar-toggle-icon-width); + height: var(--rz-sidebar-toggle-icon-height); + font-size: var(--rz-sidebar-toggle-icon-width); +} + +.rz-navigation-item-link { + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.rz-navigation-item-link:hover { + text-decoration: none; +} + +.rz-navigation-item-text { + flex: auto; +} + +.rz-context-menu { + box-sizing: border-box; +} +.rz-context-menu .rz-menu { + flex-direction: column; +} + +.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { + box-shadow: var(--rz-context-menu-box-shadow); + border: var(--rz-menu-border); + border-radius: var(--rz-menu-border-radius); +} + +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + align-items: stretch; + background-color: var(--rz-menu-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + background-color: var(--rz-menu-top-item-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-top-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-top-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-top-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu):focus { + outline: var(--rz-outline-normal); +} +.rz-menu:not(.rz-profile-menu):focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-menu-item-focus-outline); + outline-offset: var(--rz-menu-item-focus-outline-offset); +} +.rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-end: -2px; + height: 1px; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: var(--rz-menu-top-item-selected-color); + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item { + position: relative; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + margin: 0; + min-width: 100%; + box-shadow: var(--rz-context-menu-box-shadow); + z-index: 3; + border-radius: var(--rz-menu-border-radius); + background-color: var(--rz-menu-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu { + position: static; + box-shadow: none; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + margin-inline-start: var(--rz-menu-item-offset); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); +} +.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { + margin-inline: var(--rz-menu-item-icon-margin-inline); +} + +.rz-navigation-item-wrapper, +.rz-navigation-item-link, +.rz-navigation-item-text { + transition: var(--rz-menu-item-transition); +} + +li.rz-navigation-item.rz-state-disabled { + opacity: var(--rz-menu-item-disabled-opacity); + cursor: initial; + pointer-events: none; +} + +.rz-menu-toggle-item { + display: none; + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); + justify-content: end; + align-items: center; + width: 100%; + height: 100%; +} + +.rz-menu-toggle { + appearance: none; + background-color: transparent; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: var(--rz-menu-top-item-color); +} +.rz-menu-toggle:hover { + background-color: transparent; + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu-toggle:active { + background-color: transparent; + color: var(--rz-menu-top-item-color); +} +.rz-context-menu .rz-menu-toggle { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu-toggle:hover { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu-toggle:active { + color: var(--rz-menu-item-color); +} + +@media (max-width: 768px) { + .rz-menu:not(.rz-profile-menu).rz-menu-closed .rz-navigation-item { + display: none; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle .rzi { + margin: 0; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open { + display: block; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-item { + background-color: inherit; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-menu { + position: static; + box-shadow: none; + border-radius: 0; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item { + display: flex; + } + .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active:before { + display: none !important; + } +} +.rz-panel-menu { + box-sizing: border-box; + list-style: none; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; + overflow: auto; + font-size: var(--rz-panel-menu-font-size); + font-weight: var(--rz-panel-menu-font-weight); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ +} +.rz-panel-menu:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-panel-menu-focus-outline); + outline-offset: var(--rz-panel-menu-focus-outline-offset); +} +.rz-panel-menu > .rz-navigation-item { + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); +} +.rz-panel-menu .rz-navigation-item { + border-block-end: var(--rz-panel-menu-item-border); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper { + position: relative; + line-height: var(--rz-panel-menu-item-line-height); + transition: var(--rz-panel-menu-item-transition); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-active-background-color); + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-active:before, +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-start: 0; + inset-block-end: 0; + width: 4px; + background-color: var(--rz-panel-menu-item-active-indicator); +} +.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); + color: inherit; + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu a.rz-navigation-item-link { + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu .rz-navigation-item-text { + flex: auto; +} +.rz-panel-menu .rz-navigation-item-icon-children { + margin-inline-start: auto; + font-size: var(--rz-panel-menu-toggle-icon-font-size); + opacity: var(--rz-panel-menu-toggle-icon-opacity); + z-index: 1; +} +.rz-panel-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-height); + width: var(--rz-panel-menu-icon-width); + color: var(--rz-panel-menu-icon-color); + margin-inline: var(--rz-panel-menu-icon-margin-inline); + font-size: var(--rz-panel-menu-icon-font-size); + transition: var(--rz-panel-menu-item-transition); +} +.rz-panel-menu .rz-navigation-menu { + list-style: none; + padding: 0; + margin-block-end: 0; + overflow: hidden; + /* Third level items */ +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); + border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color); + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-2nd-level-active-background-color); + color: var(--rz-panel-menu-item-2nd-level-active-color); + font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-active-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-2nd-level-icon-size); + width: var(--rz-panel-menu-icon-2nd-level-icon-size); + font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu { + margin: 0; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); + color: var(--rz-panel-menu-item-3rd-level-active-color); +} + +ul.rz-profile-menu { + box-sizing: border-box; + list-style: none; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); + display: inline-block; + background-color: var(--rz-profile-menu-top-item-background-color); + border-inline-start: var(--rz-profile-menu-border); + position: relative; + z-index: 3; +} +ul.rz-profile-menu:focus { + outline: var(--rz-outline-normal); +} +ul.rz-profile-menu:focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +ul.rz-profile-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-profile-menu-item-focus-outline); + outline-offset: var(--rz-profile-menu-item-focus-outline-offset); +} +ul.rz-profile-menu .rz-navigation-item-icon-children { + color: var(--rz-profile-menu-toggle-button-color); +} +ul.rz-profile-menu .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + border-radius: var(--rz-profile-menu-border-radius); + background-color: var(--rz-profile-menu-background-color); + box-shadow: var(--rz-context-menu-box-shadow); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; + min-width: 100%; + white-space: nowrap; +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-profile-menu-item-hover-background-color); + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link, +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text { + color: var(--rz-menu-item-color); +} +ul.rz-profile-menu .rz-navigation-menu .rzi { + width: var(--rz-profile-menu-item-icon-width); + height: var(--rz-profile-menu-item-icon-height); + font-size: var(--rz-profile-menu-item-icon-font-size); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); +} + +.rz-gravatar { + box-sizing: border-box; + width: var(--rz-gravatar-width); + height: var(--rz-gravatar-height); + display: inline-block; + border-radius: var(--rz-gravatar-border-radius); + box-shadow: var(--rz-gravatar-box-shadow); +} + +.rz-steps { + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.rz-steps .rz-widget-content { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.rz-steps ul { + list-style: none; + padding: 0; +} +.rz-steps .rz-menuitem-link { + display: inline-flex; + align-items: center; + color: var(--rz-steps-color); + cursor: pointer; + text-decoration: none; +} +.rz-steps .rz-menuitem-link:hover { + text-decoration: none; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps .rz-state-disabled .rz-menuitem-link { + color: var(--rz-text-disabled-color); + cursor: default; +} +.rz-steps .rz-state-disabled .rz-menuitem-link:hover { + color: var(--rz-text-disabled-color) !important; +} +.rz-steps .rz-state-highlight .rz-steps-title { + color: var(--rz-steps-title-selected-color); +} +.rz-steps .rz-state-highlight .rz-steps-number { + background: var(--rz-steps-number-selected-background); + color: var(--rz-steps-number-selected-color); +} + +.rz-steps-item { + display: inline-block; +} +.rz-steps-item:focus { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible .rz-steps-number { + outline: var(--rz-steps-number-focus-outline); + outline-offset: var(--rz-steps-number-focus-outline-offset); +} + +.rz-steps-title { + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); +} + +.rz-steps-number { + text-align: center; + line-height: var(--rz-steps-number-line-height); + color: var(--rz-steps-number-color); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); + width: var(--rz-steps-number-width); + height: var(--rz-steps-number-height); + background-color: var(--rz-steps-number-background-color); + border-radius: var(--rz-steps-number-border-radius); +} + +.rz-steps-buttons { + display: flex; + justify-content: space-between; + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); +} + +.rz-steps-next, +.rz-steps-prev { + display: inline-flex; + align-items: center; + color: var(--rz-steps-button-color) !important; + text-decoration: none; +} +.rz-steps-next:not(.rz-state-disabled):hover, +.rz-steps-prev:not(.rz-state-disabled):hover { + cursor: pointer; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps-next:hover, +.rz-steps-prev:hover { + text-decoration: none; +} +.rz-steps-next.rz-state-disabled, +.rz-steps-prev.rz-state-disabled { + opacity: 0.5 !important; +} + +.rz-steps-prev .rzi:before { + content: "navigate_before"; +} + +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; +} + +.rz-checkbox-list-vertical { + box-sizing: border-box; +} +.rz-checkbox-list-vertical .rz-checkbox { + display: flex; + align-items: center; + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); + cursor: pointer; +} + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} +.rz-checkbox-list-horizontal .rz-checkbox { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-checkbox { + cursor: initial; +} + +.rz-chkbox-label, +.rz-chkbox-template { + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); +} + +.rz-chkbox { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + width: var(--rz-checkbox-width); + min-width: var(--rz-checkbox-width); + height: var(--rz-checkbox-height); +} +.rz-chkbox:focus { + outline: var(--rz-outline-normal); +} +.rz-chkbox:focus-visible .rz-chkbox-box { + outline: var(--rz-checkbox-focus-outline); + outline-offset: var(--rz-checkbox-focus-outline-offset); +} + +.rz-chkbox-box { + position: absolute; + cursor: pointer; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: var(--rz-input-border); + border-width: var(--rz-checkbox-border-width); + border-radius: var(--rz-checkbox-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-chkbox-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-checkbox-border-width); +} +.rz-chkbox-box.rz-state-disabled { + cursor: initial; + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-checkbox-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-chkbox-box .rzi { + width: var(--rz-checkbox-icon-width); + height: var(--rz-checkbox-icon-height); + font-size: var(--rz-checkbox-icon-font-size); + color: var(--rz-checkbox-checked-color); + vertical-align: middle; + background-color: var(--rz-checkbox-checked-icon-background-color); + border-radius: var(--rz-checkbox-checked-icon-border-radius); +} +.rz-chkbox-box .rzi-check:before { + content: "check"; +} +.rz-chkbox-box .rzi-times { + width: var(--rz-checkbox-tri-icon-width); + height: var(--rz-checkbox-tri-icon-height); + font-size: var(--rz-checkbox-tri-icon-font-size); +} +.rz-chkbox-box .rzi-times:before { + content: "remove"; +} +.rz-chkbox-box.rz-state-active { + background-color: var(--rz-checkbox-checked-background-color); + border: var(--rz-checkbox-checked-border); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-checkbox-checked-hover-background-color); + border: var(--rz-checkbox-checked-hover-border); +} +.rz-chkbox-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-checkbox-checked-disabled-background-color); + border: var(--rz-checkbox-checked-disabled-border); + opacity: 0.5; +} + +.rz-switch { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + width: 3rem; + min-width: 3rem; + height: 1.8rem; + border-radius: calc(5 * var(--rz-border-radius)); +} +.rz-switch:focus { + outline: var(--rz-outline-normal); +} +.rz-switch:focus-visible { + outline: var(--rz-switch-focus-outline); + outline-offset: var(--rz-switch-focus-outline-offset); +} + +.rz-switch-circle { + position: absolute; + cursor: pointer; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; +} + +.rz-switch-circle.rz-disabled { + opacity: 0.5; + cursor: initial; +} + +.rz-switch .rz-switch-circle { + background: var(--rz-switch-background-color); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: calc(5 * var(--rz-border-radius)); +} + +.rz-switch.rz-switch-checked .rz-switch-circle { + background: var(--rz-switch-checked-background-color); +} + +.rz-switch .rz-switch-circle:before { + background: var(--rz-switch-circle-background-color); + width: 1.26rem; + height: 1.26rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; + border-radius: calc(5 * var(--rz-border-radius) - 3px); + transition: transform 0.2s linear; + box-shadow: var(--rz-switch-box-shadow); +} + +.rz-switch-circle:before { + position: absolute; + content: ""; + inset-block-start: 50%; +} + +.rz-switch-circle.rz-disabled:before { + box-shadow: none; +} + +.rz-switch.rz-switch-checked .rz-switch-circle:before { + background: var(--rz-switch-checked-circle-background-color); + transform: translateX(1.2rem); +} + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); +} + +.rz-radio-button-list-vertical { + box-sizing: border-box; +} +.rz-radio-button-list-vertical .rz-radio-btn { + display: flex; + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); + align-items: center; +} + +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} +.rz-radio-button-list-horizontal .rz-radio-btn { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-radiobutton { + cursor: initial; +} + +.rz-radiobutton-label, +.rz-radiobutton-template { + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); +} + +.rz-radiobutton { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + width: var(--rz-radio-width); + height: var(--rz-radio-height); + border-radius: var(--rz-radio-border-radius); +} +.rz-radiobutton:focus { + outline: var(--rz-outline-normal); +} +.rz-radiobutton:focus-visible { + outline: var(--rz-radio-focus-outline); + outline-offset: var(--rz-radio-focus-outline-offset); +} + +.rz-radiobutton-box { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + width: inherit; + border: var(--rz-input-border); + border-width: var(--rz-radio-border-width); + border-radius: var(--rz-radio-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box:active:not(.rz-state-disabled) { + background-color: var(--rz-radio-active-background-color); + box-shadow: var(--rz-radio-active-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-disabled { + cursor: initial; + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-radio-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-radiobutton-box .rzi { + width: var(--rz-radio-icon-width); + height: var(--rz-radio-icon-height); + color: var(--rz-radio-checked-color); +} +.rz-radiobutton-box .rzi-circle-on { + border-radius: var(--rz-radio-border-radius); + vertical-align: middle; + background-color: var(--rz-radio-circle-background-color); + box-shadow: var(--rz-radio-circle-shadow); +} +.rz-radiobutton-box .rzi-circle-on:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-circle-hover-background-color); +} +.rz-radiobutton-box.rz-state-active { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-checked-hover-background-color); + border: var(--rz-radio-checked-border); + box-shadow: var(--rz-radio-checked-hover-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); + opacity: 0.5; +} + +.rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; + border: var(--rz-fieldset-border); + border-radius: var(--rz-fieldset-border-radius); +} + +.rz-fieldset-content { + padding: var(--rz-fieldset-padding); +} + +.rz-fieldset-content-wrapper { + overflow: hidden; +} + +.rz-fieldset-legend-text { + vertical-align: middle; +} + +.rz-fieldset-toggler { + vertical-align: middle; + width: var(--rz-fieldset-toggle-width); + height: var(--rz-fieldset-toggle-height); + background-color: var(--rz-fieldset-toggle-background-color); + color: var(--rz-fieldset-toggle-color); + border: var(--rz-fieldset-toggle-border); +} +.rz-fieldset-toggler.rzi { + text-align: center; + font-size: var(--rz-fieldset-toggle-font-size); + line-height: var(--rz-fieldset-toggle-height); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); +} +.rz-fieldset-toggler.rzi-minus:before { + content: "remove"; +} +.rz-fieldset-toggler.rzi-plus:before { + content: "add"; +} +a:focus .rz-fieldset-toggler { + outline: var(--rz-outline-normal); +} +a:focus-visible .rz-fieldset-toggler { + outline: var(--rz-fieldset-toggle-focus-outline); + outline-offset: var(--rz-fieldset-toggle-focus-outline-offset); +} + +.rz-fieldset-legend { + float: none; + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); + width: auto; + color: var(--rz-fieldset-legend-color); + font-size: var(--rz-fieldset-legend-font-size); +} +.rz-fieldset-legend a { + display: inline-flex; + align-items: center; + color: inherit; + text-decoration: none; +} +.rz-fieldset-legend a:focus { + outline: var(--rz-outline-normal); +} + +.rz-multiselect, .rz-dropdown { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + position: relative; + overflow: hidden; + text-align: start; +} +.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-dropdown.rz-dropdown-open { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect.rz-state-focus { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect-trigger, .rz-dropdown-trigger { + position: absolute; + display: flex; + align-items: center; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; +} +.rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { + width: var(--rz-dropdown-trigger-icon-width); + height: var(--rz-dropdown-trigger-icon-height); + font-size: var(--rz-dropdown-trigger-icon-height); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); +} +.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-dropdown-clear-icon { + position: absolute; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; + height: 100%; + display: flex; + align-items: center; + font-size: var(--rz-dropdown-trigger-icon-height); + opacity: 0.4; +} +.rz-dropdown-clear-icon:before { + content: "close"; +} +.rz-dropdown-clear-icon:hover { + opacity: 1; +} +.rz-state-disabled > .rz-dropdown-clear-icon { + display: none; +} + +.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel { + position: absolute; + background-color: var(--rz-dropdown-open-background-color); + border-radius: var(--rz-input-border-radius); + border: var(--rz-dropdown-panel-border); + box-shadow: var(--rz-dropdown-panel-shadow); +} + +.rz-dropdown-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} + +.rz-multiselect-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} +.rz-multiselect-panel .rz-chkbox { + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); +} + +.rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { + list-style: none; + padding: var(--rz-dropdown-items-padding); + margin: 0; +} +.rz-autocomplete-items li, .rz-multiselect-items li, .rz-dropdown-items li { + /* The 'No results found' item has no CSS class */ +} + +.rz-dropdown-items-wrapper, +.rz-multiselect-items-wrapper { + overflow: auto; + margin: var(--rz-dropdown-items-margin); + border-radius: var(--rz-input-border-radius); +} + +.rz-multiselect-items-wrapper { + overflow: auto; +} + +.rz-dropdown-filter-container { + padding: var(--rz-dropdown-filter-padding); + border-bottom: var(--rz-dropdown-filter-border); +} + +.rz-multiselect-filter-container .rz-inputtext, .rz-dropdown-filter { + background-color: transparent; + color: var(--rz-text-color); +} + +.rz-multiselect-header { + display: flex; + align-items: center; + padding: var(--rz-dropdown-item-padding); + margin: var(--rz-dropdown-items-margin); +} + +.rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-autocomplete-items li, .rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item { + padding: var(--rz-dropdown-item-padding); + transition: var(--rz-dropdown-item-transition); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover, .rz-dropdown-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-state-disabled.rz-menuitem, .rz-state-disabled.rz-autocomplete-list-item, .rz-state-disabled.rz-multiselect-item, .rz-autocomplete-items li.rz-state-disabled, .rz-dropdown-items li.rz-state-disabled, .rz-multiselect-items li.rz-state-disabled, .rz-dropdown-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} +.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} + +.rz-multiselect-close { + display: none; +} + +.rz-multiselect-filter-container { + flex: auto; + border-bottom: var(--rz-dropdown-filter-border); +} +.rz-multiselect-filter-container .rz-inputtext { + padding: 0; +} + +.rz-multiselect-item { + display: flex; + align-items: center; +} + +.rz-multiselect-item-content { + flex: 1; +} + +.rz-multiselect-label-container, +.rz-dropdown-label { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); + margin: 0; +} + +.rz-dropdown-chips { + height: inherit; + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); +} +.rz-dropdown-chips .rz-dropdown-chips-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-inline-end: 3rem; +} +.rz-dropdown-chips .rz-chip { + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: var(--rz-chip-gap); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); + color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); + border-radius: var(--rz-chip-border-radius); +} +.rz-dropdown-chips .rz-chip .rz-chip-text { + font-size: var(--rz-chip-font-size); +} +.rz-dropdown-chips .rz-chip .rz-button { + border-radius: var(--rz-chip-border-radius); + box-shadow: none; + align-self: stretch; +} +.rz-dropdown-chips .rz-chip .rzi { + vertical-align: middle; + font-size: 1rem; +} + +.rz-clear .rz-multiselect-label-container, +.rz-clear .rz-dropdown-label { + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); +} + +.rz-autocomplete { + box-sizing: border-box; + display: inline-block; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + background-color: var(--rz-input-background-color); + transition: var(--rz-input-transition); + overflow: hidden; +} +.rz-autocomplete-input { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + background-color: transparent; + color: var(--rz-input-value-color); + box-shadow: var(--rz-input-shadow); + border: none; + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + width: 100%; + transition: var(--rz-input-transition); +} +.rz-autocomplete-input:focus { + outline: none; +} +.rz-autocomplete-input:disabled { + border: none; +} + +.rz-autocomplete-panel { + overflow: auto; + box-sizing: content-box; +} + +.rz-listbox { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + overflow: hidden; + background-color: var(--rz-listbox-background-color); + border: var(--rz-listbox-border); + border-radius: var(--rz-listbox-border-radius); + text-align: start; +} +.rz-listbox .rz-chkbox { + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); +} +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-listbox:focus, .rz-listbox:focus-within { + outline: var(--rz-outline-normal); + border: var(--rz-listbox-focus-border); + box-shadow: var(--rz-listbox-focus-shadow); +} + +.rz-listbox-list { + margin: 0; + padding: 0; +} + +.rz-listbox-item { + cursor: default; + padding: var(--rz-listbox-item-padding); + margin: var(--rz-listbox-item-margin); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-listbox-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-listbox-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-listbox-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} + +.rz-listbox-header { + display: flex; + align-items: center; + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); + border-bottom: var(--rz-listbox-filter-border); +} + +.rz-listbox-list-wrapper { + flex: auto; + overflow: auto; + padding: var(--rz-listbox-padding); +} + +.rz-listbox-filter-container, .rz-dropdown-filter-container, .rz-multiselect-filter-container { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.rz-listbox-filter-container .rz-inputtext, .rz-dropdown-filter-container .rz-inputtext, .rz-multiselect-filter-container .rz-inputtext { + flex: auto; + width: 0; + border: none; + line-height: var(--rz-input-line-height); +} +.rz-listbox-filter-container .rz-inputtext:focus, .rz-dropdown-filter-container .rz-inputtext:focus, .rz-multiselect-filter-container .rz-inputtext:focus { + outline: none; +} +.rz-listbox-filter-container .rzi-search, .rz-dropdown-filter-container .rzi-search, .rz-multiselect-filter-container .rzi-search { + width: var(--rz-listbox-header-icon-width); + height: var(--rz-listbox-header-icon-height); + line-height: var(--rz-listbox-header-icon-height); + font-size: var(--rz-listbox-header-icon-height); +} +.rz-listbox-filter-container .rzi-search:before, .rz-dropdown-filter-container .rzi-search:before, .rz-multiselect-filter-container .rzi-search:before { + content: "search"; +} + +.rz-listbox-filter-container { + flex: auto; +} +.rz-listbox-filter-container .rz-inputtext { + background-color: transparent; +} + +.rz-splitbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { + display: none; +} +.rz-splitbutton .rz-button.rz-splitbutton-menubutton { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { + flex: auto; + overflow: hidden; + text-overflow: ellipsis; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.rz-splitbutton-menu { + display: none; + position: absolute; + min-width: var(--rz-splitbutton-menu-min-width); + box-shadow: var(--rz-splitbutton-menu-shadow); +} + +.rz-menu-list { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-menuitem .rz-menuitem-link { + color: inherit; + display: block; + text-decoration: none; +} +.rz-menuitem .rz-menuitem-link:hover { + text-decoration: none; +} +.rz-menuitem .rz-menuitem-icon { + vertical-align: top; +} + +.rz-splitbutton-menubutton { + margin-inline-start: 1px; +} +.rz-splitbutton-menubutton.rz-variant-outlined { + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); +} +.rz-splitbutton-menubutton .rz-button-text { + display: none; +} +.rz-splitbutton-menubutton .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-slider { + box-sizing: border-box; + position: relative; + display: inline-block; + border: var(--rz-slider-border); + border-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-background-color); +} +.rz-slider.rz-state-disabled { + background-color: var(--rz-slider-disabled-background-color); + border: var(--rz-slider-disabled-border); +} +.rz-slider.rz-state-disabled .rz-slider-range { + background-color: var(--rz-slider-disabled-range-background-color); + border: var(--rz-slider-disabled-range-border); +} +.rz-slider.rz-state-disabled .rz-slider-handle { + background-color: var(--rz-slider-disabled-handle-background-color); + border: var(--rz-slider-disabled-handle-border); +} + +.rz-slider-horizontal { + height: var(--rz-slider-horizontal-height); + width: var(--rz-slider-horizontal-width); +} + +.rz-slider-range { + position: absolute; + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-range-background-color); + border: var(--rz-slider-range-border); +} + +.rz-slider-handle { + position: absolute; + transform: translateY(-50%); + top: 50%; + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); + background-color: var(--rz-slider-handle-background-color); + border: var(--rz-slider-handle-border); + border-radius: var(--rz-slider-handle-border-radius); + box-shadow: var(--rz-slider-handle-shadow); + width: var(--rz-slider-handle-width); + height: var(--rz-slider-handle-height); + transition: var(--rz-slider-handle-transition); +} + +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active { + background-color: var(--rz-slider-handle-hover-background-color); + box-shadow: var(--rz-slider-handle-hover-shadow); + border: var(--rz-slider-handle-hover-border); + cursor: pointer; + outline: none; +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus { + outline: var(--rz-outline-normal); +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus-visible { + outline: var(--rz-slider-handle-focus-outline); + outline-offset: var(--rz-slider-handle-focus-outline-offset); +} + +.rz-rating { + box-sizing: border-box; + display: inline-flex; + font-size: var(--rz-rating-font-size); + height: 1em; +} +.rz-rating.rz-state-disabled .rzi { + opacity: var(--rz-rating-disabled-opacity); + color: var(--rz-rating-disabled-color); +} +.rz-rating a { + width: 1em; + height: 1em; + text-decoration: none; + cursor: default; + outline: none; +} +.rz-rating .rzi { + color: var(--rz-rating-color); + font-size: 1em; +} +.rz-rating .rzi-ban { + color: var(--rz-rating-ban-icon-color); +} +.rz-rating .rzi-ban:before { + content: "highlight_off"; +} +.rz-rating .rzi-star-o { + opacity: var(--rz-rating-opacity); +} +.rz-rating .rzi-star-o:before { + content: "star_border"; +} +.rz-rating .rzi-star { + color: var(--rz-rating-selected-color); +} +.rz-rating .rzi-star:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover { + cursor: pointer; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-ban { + color: var(--rz-rating-selected-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-ban { + color: var(--rz-rating-focus-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o:before { + content: "star"; +} + +.rz-security-code { + box-sizing: border-box; + display: inline-flex; +} + +.rz-security-code-wrapper { + flex: 1; + --rz-gap: 0.5rem; +} + +.rz-security-code-input { + text-align: center; + min-width: var(--rz-security-code-input-min-width); + min-height: var(--rz-security-code-input-min-height); + width: 100%; + height: 100%; + padding: var(--rz-security-code-input-padding); + font-size: var(--rz-security-code-input-font-size); + font-weight: var(--rz-security-code-input-font-weight); + line-height: var(--rz-security-code-input-line-height); +} + +.rz-selectbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-selectbutton .rz-button:focus-visible { + z-index: 1; +} + +.rz-selectbutton .rz-button.rz-button-xs { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-xs:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-sm { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { + display: inline-block; + position: relative; +} +.rz-datepicker .rz-readonly { + cursor: pointer; +} +.rz-datepicker > .rz-inputtext { + width: 100%; + line-height: var(--rz-datepicker-line-height); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); +} +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { + box-shadow: none; + color: var(--rz-datepicker-trigger-icon-hover-color); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} + +.rz-datepicker-inline { + background-color: var(--rz-datepicker-panel-background-color); + border: var(--rz-input-border); +} + +.rz-datepicker-trigger { + box-shadow: none; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 0.625rem; + transform: translateY(-50%); + background-color: transparent; + padding: 0; + vertical-align: text-top; + color: var(--rz-datepicker-trigger-icon-color); + width: var(--rz-datepicker-trigger-icon-width); + height: var(--rz-datepicker-trigger-icon-height); + font-size: var(--rz-datepicker-trigger-icon-height); +} +.rz-datepicker-trigger.rz-state-disabled { + border: none; + box-shadow: none; + cursor: initial; + opacity: 1; + color: var(--rz-input-disabled-color); +} +.rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active), .rz-datepicker-trigger:not(.rz-state-disabled):hover:active { + background-color: transparent; +} +.rz-datepicker-trigger:not(.rz-state-disabled):active { + box-shadow: none !important; + background-image: none !important; +} +.rz-datepicker-trigger .rzi-calendar, +.rz-datepicker-trigger .rzi-time { + font-size: inherit; + vertical-align: top; +} +.rz-datepicker-trigger .rzi-calendar:before { + content: "calendar_today"; +} +.rz-datepicker-trigger .rzi-time:before { + content: "schedule"; +} +.rz-datepicker-trigger .rz-button-text { + display: none; +} + +.rz-datepicker-popup-container { + box-sizing: content-box; + position: absolute; + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); + box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); +} + +.rz-datepicker-inline-container { + position: static; + white-space: nowrap; +} +.rz-datepicker-inline-container .rz-calendar { + display: inline-block; +} + +.rz-datepicker-footer { + position: relative; + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--rz-datepicker-header-background-color); + border-bottom: var(--rz-datepicker-header-border); + color: var(--rz-datepicker-header-color); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); +} + +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); +} +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { + color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); +} +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); +} + +.rz-calendar-prev { + order: 1; +} +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { + content: "chevron_right"; +} + +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { + outline: var(--rz-outline-normal); +} +.rz-calendar-view-container:focus-visible { + outline: var(--rz-datepicker-focus-outline); + outline-offset: var(--rz-datepicker-focus-outline-offset); +} + +.rz-calendar-view { + table-layout: fixed; + border-collapse: collapse; +} +.rz-calendar-view th { + font-weight: normal; + font-size: var(--rz-datepicker-calendar-header-font-size); + text-transform: var(--rz-datepicker-calendar-header-text-transform); + color: var(--rz-datepicker-calendar-header-color); + padding: var(--rz-datepicker-calendar-item-padding); + text-align: center; +} +.rz-calendar-view td { + text-align: center; + border-top: var(--rz-datepicker-calendar-border); + padding: 0; +} +.rz-calendar-view td .rz-state-default { + display: block; + padding: var(--rz-datepicker-calendar-item-padding); + color: var(--rz-datepicker-calendar-color); + font-size: var(--rz-datepicker-calendar-font-size); + border-radius: var(--rz-datepicker-calendar-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-calendar-view td .rz-state-default.rz-calendar-today { + color: var(--rz-datepicker-calendar-today-color); + background-color: var(--rz-datepicker-calendar-today-background-color); + box-shadow: var(--rz-datepicker-calendar-today-box-shadow); + border-radius: var(--rz-datepicker-calendar-today-border-radius); +} +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { + text-decoration: none; + color: var(--rz-datepicker-calendar-hover-color); + background-color: var(--rz-datepicker-calendar-hover-background-color); + cursor: pointer; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { + color: var(--rz-datepicker-calendar-selected-color); + background-color: var(--rz-datepicker-calendar-selected-background-color); + padding: var(--rz-datepicker-calendar-item-padding); + box-shadow: none; +} +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { + color: var(--rz-datepicker-calendar-selected-hover-color); + background-color: var(--rz-datepicker-calendar-selected-hover-background-color); +} +.rz-calendar-view .rz-state-disabled { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-other-month { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-week-number { + opacity: 0.5; +} + +/* Time Picker Styles */ +.rz-timepicker { + display: flex; + align-items: center; + justify-content: center; + gap: var(--rz-timepicker-gap); + border-top: var(--rz-datepicker-calendar-border); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); + color: var(--rz-timepicker-color); +} +.rz-timepicker .rzi-chevron-up:before { + content: "expand_less"; +} +.rz-timepicker .rzi-chevron-down:before { + content: "expand_more"; +} +.rz-timepicker .rz-separator { + color: var(--rz-timepicker-separator-color); +} +.rz-timepicker .rz-separator a { + display: none; +} +.rz-timepicker .rz-button-md { + padding: var(--rz-timepicker-button-padding); + text-transform: uppercase; +} + +.rz-hour-picker, +.rz-minute-picker, +.rz-second-picker { + background-color: var(--rz-timepicker-background-color); + width: 4rem; +} + +.rz-ampm-picker a { + text-decoration: none; +} + +.rz-numeric { + display: inline-block; + position: relative; + padding: 0px; +} +.rz-numeric input[type=number], +.rz-numeric input[type=text] { + -moz-appearance: textfield; + width: 100%; + height: 100%; + border: none; + background-color: transparent; + line-height: var(--rz-numeric-line-height); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); + outline: none; +} +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.rz-numeric.rz-state-disabled .rz-numeric-button { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); +} +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); + background-image: none; + box-shadow: none; + cursor: initial; +} + +.rz-numeric-button { + position: absolute; + inset-inline-end: var(--rz-numeric-button-offset); + padding: 0; + width: var(--rz-numeric-button-width); + height: var(--rz-numeric-button-height); + border-radius: var(--rz-numeric-button-border-radius); + background-color: var(--rz-numeric-button-background-color); + color: var(--rz-numeric-button-color); +} +.rz-numeric-button:hover { + background-color: var(--rz-numeric-button-background-color); +} +.rz-numeric-button .rzi { + font-size: var(--rz-numeric-button-height); + vertical-align: top; +} +.rz-numeric-button .rzi-caret-up:before { + content: "expand_less"; +} +.rz-numeric-button .rzi-caret-down:before { + content: "expand_more"; +} + +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); +} + +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); +} + +.rz-fileupload { + box-sizing: border-box; + display: inline-block; +} +.rz-fileupload .rz-button { + vertical-align: middle; + -webkit-appearance: none !important; +} + +.rz-fileupload-choose { + position: relative; + display: inline-block; + overflow: hidden; + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose input[type=file] { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + min-height: 100%; + cursor: pointer; +} +.rz-fileupload-choose.rz-state-disabled input[type=file] { + cursor: default; +} +.rz-fileupload-choose:not(.rz-state-disabled) { + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):active { + background-color: var(--rz-upload-choose-active-background-color); + color: var(--rz-upload-choose-active-color); +} + +.rz-fileupload-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.rz-fileupload-row > div { + margin: var(--rz-upload-files-margin); +} +.rz-fileupload-row .rz-button-text { + display: none; +} +.rz-fileupload-row .rz-button { + background-color: var(--rz-upload-files-remove-background-color); + color: var(--rz-upload-files-remove-color); +} +.rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash { + display: block; +} +.rz-fileupload-row .rz-button .rzi-close:before, +.rz-fileupload-row .rz-button .rzi-times:before, +.rz-fileupload-row .rz-button .rz-icon-trash:before { + content: "close"; +} + +.rz-fileupload-buttonbar { + position: relative; + background-color: var(--rz-upload-button-bar-background-color); + padding: var(--rz-upload-button-bar-padding); + border-radius: var(--rz-upload-button-bar-border-radius); +} +.rz-fileupload-buttonbar .rz-button:nth-child(3) { + float: right; + background-color: var(--rz-upload-cancel-background-color); + color: var(--rz-upload-cancel-color); +} + +.rz-fileupload-files { + background-color: var(--rz-upload-files-background-color); + padding: var(--rz-upload-files-padding); +} + +.rz-datatable { + position: relative; + box-shadow: var(--rz-grid-shadow); + border: var(--rz-grid-cell-border); + border-radius: var(--rz-grid-border-radius); + background-color: var(--rz-grid-background-color); + overflow: hidden; +} +.rz-datatable:focus { + outline: var(--rz-outline-normal); +} +.rz-datatable:focus-visible { + outline: var(--rz-grid-focus-outline); + outline-offset: var(--rz-grid-focus-outline-offset); +} +.rz-datatable .rz-col-icon { + text-align: center; + vertical-align: middle; + width: var(--rz-grid-column-icon-width); + padding: var(--rz-grid-column-icon-padding); +} +.rz-datatable .rzi-chevron-circle-right { + vertical-align: top; + /* Right-to-left arrow icons */ +} +.rz-datatable .rzi-chevron-circle-right:before { + content: "arrow_right"; +} +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} +.rz-datatable .rzi-chevron-circle-down { + vertical-align: top; +} +.rz-datatable .rzi-chevron-circle-down:before { + content: "arrow_drop_down"; +} +.rz-datatable.rz-has-template > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view > .rz-datatable-scrollable-body > .rz-datatable-scrollable-table-wrapper > table > .rz-datatable-scrollable-colgroup col:first-child { + width: var(--rz-grid-column-icon-width); +} + +.rz-unselectable-text { + user-select: none; +} + +.rz-datatable-tablewrapper > table, +.rz-datatable-scrollable-header-box > table, +.rz-datatable-scrollable-table-wrapper > table, +.rz-datatable-scrollable-footer-box > table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +.rz-resizable-column { + position: relative; +} + +.rz-datatable-reorder-indicator-up { + position: absolute; +} +.rz-datatable-reorder-indicator-up:before { + content: "arrow_drop_down"; +} + +.rz-datatable-reorder-indicator-down { + position: absolute; +} +.rz-datatable-reorder-indicator-down:before { + content: "arrow_drop_up"; +} + +.rz-column-resizer { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + cursor: col-resize; + width: var(--rz-grid-column-resizer-width); +} +.rz-column-resizer:after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + width: var(--rz-grid-column-resizer-helper-width); + background-color: transparent; +} +.rz-column-resizer:hover:after, .rz-column-resizer:active:after { + background-color: var(--rz-grid-column-resizer-helper-background-color); +} + +.rz-rowgroup-header .fa, +.rz-row-toggler { + color: var(--rz-grid-cell-color); +} + +.rz-datatable-scrollable-footer { + background-color: var(--rz-grid-header-background-color); + border-top: var(--rz-grid-cell-border); +} + +.rz-datatable-thead th, +.rz-grid-table thead th { + background-color: var(--rz-grid-header-background-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: inherit; + border-bottom: var(--rz-grid-header-cell-border-bottom); +} +.rz-datatable-thead th:not(:last-child), +.rz-grid-table thead th:not(:last-child) { + border-inline-end: var(--rz-grid-header-cell-border); +} +.rz-datatable-thead th > div:not(.rz-cell-filter), +.rz-grid-table thead th > div:not(.rz-cell-filter) { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + outline: none; + padding: var(--rz-grid-header-cell-padding); +} +.rz-datatable-thead th.rz-state-focused, +.rz-grid-table thead th.rz-state-focused { + outline: var(--rz-grid-cell-focus-outline); + outline-offset: var(--rz-grid-cell-focus-outline-offset); +} +.rz-datatable-thead th .rz-column-title, +.rz-grid-table thead th .rz-column-title { + display: inline-flex; + flex: auto; + align-items: center; + gap: 0.25rem; + width: 100%; + font-size: var(--rz-grid-header-font-size); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding-inline: var(--rz-grid-header-title-padding-inline); + font-weight: var(--rz-grid-header-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content, +.rz-grid-table thead th .rz-column-title-content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content:has(.rz-chkbox), +.rz-grid-table thead th .rz-column-title-content:has(.rz-chkbox) { + overflow: visible; +} +.rz-datatable-thead th.rz-text-align-center .rz-column-title, +.rz-grid-table thead th.rz-text-align-center .rz-column-title { + justify-content: center; + padding-inline-start: 0; +} +.rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th.rz-text-align-right .rz-column-title, +.rz-grid-table thead th.rz-text-align-right .rz-column-title { + justify-content: right; +} +.rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th .rz-column-drag + .rz-column-title, +.rz-grid-table thead th .rz-column-drag + .rz-column-title { + padding-inline-start: 0; +} + +.rz-datatable-tfoot td, .rz-grid-table tfoot td { + background-color: var(--rz-grid-foot-background-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + color: var(--rz-grid-foot-cell-color); + padding: var(--rz-grid-cell-padding); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} + +.rz-datatable-scrollable-header { + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-datatable-scrollable-body { + overflow: auto; + border-top: none; + flex: auto; + border-bottom-right-radius: var(--rz-border-radius); + border-bottom-left-radius: var(--rz-border-radius); +} + +.rz-has-pager .rz-datatable-scrollable-body { + border-radius: 0; +} + +.rz-sortable-column { + cursor: pointer; +} +.rz-sortable-column:focus { + outline: none; +} +.rz-sortable-column.rz-state-active { + background-color: var(--rz-grid-header-sorted-background-color); +} +.rz-sortable-column > div:hover .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { + color: var(--rz-grid-sort-icon-color); +} +.rz-sortable-column .rzi-grid-sort { + width: var(--rz-grid-sort-icon-width); + height: var(--rz-grid-sort-icon-height); + font-size: var(--rz-grid-sort-icon-height); + text-align: left; +} +.rz-sortable-column .rzi-sort { + color: transparent; +} +.rz-sortable-column .rzi-sort:before { + content: "sort"; +} +.rz-sortable-column .rzi-sort-asc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-asc:before { + content: "arrow_drop_up"; +} +.rz-sortable-column .rzi-sort-desc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-desc:before { + content: "arrow_drop_down"; +} + +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td { + background-color: var(--rz-grid-stripe-background-color); +} +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td { + background-color: var(--rz-grid-stripe-odd-background-color); +} + +.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th { + border-bottom: var(--rz-grid-header-cell-border); +} +.rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { + border-inline-end: var(--rz-grid-header-cell-border); +} + +.rz-datatable-data td, +.rz-grid-table td { + padding: var(--rz-grid-cell-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-data td:not(:last-child), +.rz-grid-table td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td.rz-composite-cell, +.rz-grid-table td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td .rz-cell-data, +.rz-grid-table td .rz-cell-data { + color: var(--rz-grid-cell-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rz-datatable-data td .rz-cell-data:has(.rz-chkbox), .rz-datatable-data td .rz-cell-data:has(.rz-button), +.rz-grid-table td .rz-cell-data:has(.rz-chkbox), +.rz-grid-table td .rz-cell-data:has(.rz-button) { + overflow: visible; +} +.rz-datatable-data td .rz-cell-toggle, +.rz-grid-table td .rz-cell-toggle { + display: flex; + align-items: center; + gap: 0.25rem; +} +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} +.rz-datatable-data tr td:first-child, +.rz-grid-table tr td:first-child { + border-inline-start: none; +} +.rz-datatable-data tr td:last-child:not(.rz-composite-cell), +.rz-grid-table tr td:last-child:not(.rz-composite-cell) { + border-inline-end: none; +} +.rz-datatable-data tr:first-child > td, +.rz-grid-table tr:first-child > td { + border-top: none; +} +.rz-datatable-data tr:last-child > td, +.rz-grid-table tr:last-child > td { + border-bottom: none; +} + +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { + border-bottom: none; + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td { + border-bottom: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} + +.rz-datatable-reflow tbody td > .rz-column-title { + display: none; +} + +.rz-datatable-scrollable { + display: flex; + flex-direction: column; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper { + height: 0; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view { + height: 0; +} + +.rz-datatable-scrollable-wrapper { + display: flex; + flex-direction: column; + flex: auto; +} + +.rz-datatable-scrollable-view { + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; +} + +.rz-datatable-header { + background-color: var(--rz-grid-toolbar-background-color); + padding: var(--rz-grid-header-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-header .rzi-plus { + font-size: var(--rz-grid-cell-font-size); +} +.rz-datatable-header .rzi-plus:before { + content: "add"; +} + +.rz-cell-filter { + padding: var(--rz-grid-filter-padding); + margin: var(--rz-grid-filter-margin); + border-top: var(--rz-grid-filter-border); + font-size: var(--rz-grid-filter-font-size); + font-weight: normal; +} +.rz-cell-filter .rz-cell-filter-label { + display: flex; + flex: auto; + align-items: center; +} +.rz-cell-filter .rz-cell-filter-label > .rzi { + width: var(--rz-grid-filter-icon-width); + height: var(--rz-grid-filter-icon-height); + font-size: var(--rz-grid-filter-icon-font-size); + margin-inline: var(--rz-grid-filter-icon-margin-inline); + color: var(--rz-grid-filter-color); +} +.rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { + margin-inline-start: auto; +} +.rz-cell-filter .rz-cell-filter-label .rz-current-filter { + margin-inline-start: 0.5rem; +} + +.rz-selectable tbody tr.rz-data-row td, +.rz-selectable tbody tr.rz-data-row .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:after { + content: ""; + position: absolute; + inset: 0; + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:before { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:after { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > .rzi { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > th.rz-state-focused { + color: var(--rz-grid-cell-focus-color) !important; +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > .rzi { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-disabled { + opacity: 0.5; + pointer-events: none; +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { + color: var(--rz-grid-hover-color); +} + +.rz-cell-filter-content { + display: flex; + flex: auto; + align-items: center; + color: var(--rz-grid-filter-color); + min-height: 1.375rem; + container-type: inline-size; + container-name: rz-cell-filter-content; +} + +@container rz-cell-filter-content (max-width: 200px) { + .rz-cell-filter-content .rz-filter-button .rzi { + display: none; + } + .rz-cell-filter-content .rz-filter-button { + position: absolute; + z-index: 1; + min-height: 0; + inset-inline-start: calc(var(--rz-border-width)); + height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + max-height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + line-height: calc(1.25rem - var(--rz-border-width) * 2); + border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-start-end-radius: 0; + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } +} +.rz-expanded-row > td { + border-bottom: none; + background-color: var(--rz-grid-hover-background-color); +} +.rz-expanded-row > td .rz-cell-data, +.rz-expanded-row > td .rz-row-toggler { + color: var(--rz-grid-hover-color); +} + +.rz-expanded-row-template { + background-color: var(--rz-grid-detail-template-background-color); + padding: var(--rz-grid-detail-template-padding); + border: var(--rz-grid-detail-template-border); + border-radius: var(--rz-grid-detail-template-border-radius); +} + +.rz-expanded-row-content > td { + padding-top: 0; + background-color: var(--rz-grid-detail-template-background-color); +} + +.rz-rowgroup-header a:hover { + text-decoration: none; +} +.rz-rowgroup-header td { + border-top: var(--rz-grid-border); + border-bottom: var(--rz-grid-border); +} + +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; +} + +.rz-datatable-loading-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--rz-grid-loading-indicator-color); + z-index: 2; +} +.rz-datatable-loading-content .rzi-circle-o-notch { + animation: rotation 0.5s linear infinite; + font-size: 2rem; +} +.rz-datatable-loading-content .rzi-circle-o-notch:before { + content: "refresh"; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@media (max-width: 768px) { + .rz-datatable-reflow .rz-data-grid-data > table, + .rz-datatable-reflow .rz-datatable-tablewrapper > table, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table { + table-layout: auto; + display: block; + } + .rz-datatable-reflow .rz-data-grid-data > table > tbody, + .rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody { + display: block; + } + .rz-datatable-reflow thead th { + display: none; + } + .rz-datatable-reflow .rz-data-row { + display: block; + } + .rz-datatable-reflow .rz-data-row > td { + display: block; + width: 100% !important; + text-align: left !important; + border: none; + } + .rz-datatable-reflow .rz-data-row > td .rz-column-title { + display: block; + } +} +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + +.rz-grid-filter-buttons { + display: flex; + justify-content: space-between; + padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} + +.rz-grid-filter-icon { + justify-self: flex-end; + color: var(--rz-grid-filter-color); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); + font-size: var(--rz-grid-header-filter-icon-font-size); + transition: var(--rz-grid-state-transition); + font-weight: 400; +} +.rz-grid-filter-icon:hover { + cursor: pointer; + color: var(--rz-grid-header-filter-icon-hover-color); +} + +.rz-grid-filter-active { + color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; +} + +.rz-data-grid { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.rz-data-grid-data { + overflow: auto; + flex: 1; + box-shadow: var(--rz-grid-data-border-shadow); +} + +.rz-grid-table td, .rz-grid-table th { + padding: var(--rz-grid-cell-padding); +} + +.rz-grid-table thead { + position: sticky; + top: 0; + z-index: 2; +} +.rz-grid-table thead th { + position: sticky; + top: 0; + z-index: 1; +} + +.rz-grid-table-fixed { + table-layout: fixed; +} +.rz-grid-table-fixed .rz-frozen-cell { + position: -webkit-sticky; + position: sticky; +} +.rz-grid-table-fixed .rz-frozen-cell-left, +.rz-grid-table-fixed .rz-frozen-cell-right, +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + background: var(--rz-grid-frozen-cell-background-color); + z-index: 1; +} +.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} + +.rz-grid-table tfoot, .rz-grid-table tfoot td { + position: sticky; + bottom: 0; + z-index: 1; +} + +.rz-grid-table { + width: 100%; + position: relative; + border-collapse: separate; + border-spacing: 0; +} +.rz-grid-table th { + white-space: nowrap; + overflow: hidden; +} +.rz-grid-table td { + white-space: nowrap; + overflow: hidden; +} + +.rz-grid-table tbody > div { + display: table-row; +} + +.rz-column-drag { + cursor: grab; + font-size: inherit; + color: var(--rz-column-drag-handle-color); + transition: var(--rz-grid-state-transition); + margin-inline: var(--rz-column-drag-handle-margin-inline); +} +.rz-column-drag:after { + content: "more_vert"; +} +.rz-column-drag:hover { + color: var(--rz-column-drag-handle-hover-color); +} +.rz-column-drag:active { + color: var(--rz-column-drag-handle-hover-color); + cursor: grabbing; +} + +.rz-column-draggable { + background-color: var(--rz-grid-header-background-color); + border-radius: var(--rz-border-radius); + box-shadow: var(--rz-column-draggable-shadow); + padding: 0; + display: flex; + align-items: center; +} +.rz-column-draggable > div { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + outline: none; + padding: 0; +} +.rz-column-draggable .rz-column-drag { + max-width: 1rem; +} +.rz-column-draggable .rz-column-title { + display: inline-flex; + flex: auto; + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-column-draggable .rz-grid-filter-icon { + display: none; +} + +.rz-group-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-group-header-items { + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); +} + +.rz-group-header-item { + display: flex; + align-items: center; + color: var(--rz-grid-group-header-item-color); + background-color: var(--rz-grid-group-header-item-background-color); + border: var(--rz-grid-group-header-item-border); + border-radius: var(--rz-grid-group-header-item-border-radius); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); + width: fit-content; + float: left; +} +.rz-group-header-item .rz-dialog-titlebar-close { + display: flex; + align-items: center; + text-decoration: none; +} + +.rz-group-header-item-title { + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); +} + +.rz-group-header-drop { + font-size: var(--rz-body-font-size); + color: var(--rz-text-tertiary-color); + height: fit-content; +} + +.rz-column-picker { + display: flex; +} + +.rz-filter-menu-symbol { + width: 1.75rem; + display: inline-block; +} + +.rz-filter-button { + flex: none; + margin-inline-end: 0.5rem; +} + +.rz-data-grid.rz-density-compact { + --rz-grid-cell-line-height: 1rem; + --rz-grid-cell-padding: 0.25rem 0.5rem; + --rz-grid-header-cell-padding: 0.25rem 0; + --rz-grid-header-padding: 0.25rem 1rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-filter-padding: 0.25rem 0.5rem; + --rz-grid-group-header-padding: 0.25rem; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; + --rz-dialog-close-font-size: 1rem; +} + +.rz-pager { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--rz-pager-gap); + flex-wrap: wrap; + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ +} +.rz-pager:focus { + outline: var(--rz-outline-normal); +} +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-pager.rz-align-right { + justify-content: right; +} +.rz-pager.rz-align-left { + justify-content: left; +} +.rz-pager.rz-align-center { + justify-content: center; +} +.rz-pager .rzi-step-backward:before { + content: "first_page"; +} +.rz-pager .rzi-caret-left:before { + content: "navigate_before"; +} +.rz-pager .rzi-caret-right:before { + content: "navigate_next"; +} +.rz-pager .rzi-step-forward:before { + content: "last_page"; +} +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { + order: 2; + width: var(--rz-pager-dropdown-width); + overflow: visible; +} +.rz-pager .rz-pagesize-text { + order: 2; + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); +} + +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); +} + +.rz-pager-bottom { + border-top: var(--rz-pager-border); +} + +.rz-pager-pages { + display: inline-flex; + gap: var(--rz-pager-gap); + margin: 0 0.5rem; +} + +.rz-pager-element { + letter-spacing: 0; +} + +.rz-align-center .rz-pager-first { + margin-inline-start: auto; +} + +.rz-pager-prev { + margin-inline-end: auto; +} +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; +} + +.rz-pager-next { + margin-inline-start: auto; +} +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; +} + +.rz-align-center .rz-pager-last { + margin-inline-end: auto; +} + +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-element:hover { + text-decoration: none; +} + +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-page { + display: inline-block; + min-width: var(--rz-pager-numeric-button-min-width); + text-align: center; + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { + margin-right: auto; +} +.rz-align-left .rz-pager-summary { + order: 2; + margin-left: auto; + padding: 0; +} +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} + +@media (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +@container rz-lookup-panel (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; +} +.rz-overlaypanel { + position: absolute; + overflow: hidden; + box-shadow: var(--rz-overlay-shadow); + border: var(--rz-overlay-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-overlay-background-color); +} + +.rz-tree { + box-sizing: border-box; + display: inline-block; + overflow: auto; +} +.rz-tree:focus { + outline: var(--rz-outline-normal); +} +.rz-tree:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} + +.rz-tree .rz-treenode.rz-treenode-leaf > .rz-treenode-content > .rz-tree-toggler { + visibility: hidden; +} + +.rz-treenode { + padding-inline-start: var(--rz-tree-node-toggle-width); +} + +.rz-tree-toggler { + cursor: pointer; + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); + width: var(--rz-tree-node-toggle-width); + height: 1.5rem; + font-size: var(--rz-icon-size); + line-height: 1.5rem; + text-align: center; + color: var(--rz-tree-node-toggle-color); + transition: var(--rz-tree-transition); +} +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} +.rz-tree-toggler.rzi-caret-right:before { + content: "arrow_right"; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); +} +.rz-tree-toggler.rzi-caret-down:before { + content: "arrow_drop_down"; + margin-inline-start: -0.125rem; +} +.rz-tree-toggler:hover { + color: var(--rz-tree-node-toggle-hover-color); +} + +.rz-treenode-content { + display: flex; + align-items: center; + cursor: pointer; + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); +} +.rz-treenode-content .rz-treenode-label { + display: flex; + align-items: center; + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); +} +.rz-treenode-content .rz-treenode-label .rzi:first-child { + margin-inline-end: 0.25rem; +} +.rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { + outline: var(--rz-tree-node-focus-outline); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} +.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { + background-color: var(--rz-tree-node-hover-background-color); + color: var(--rz-tree-node-hover-color); + border-radius: var(--rz-tree-node-selected-border-radius); +} +.rz-treenode-content .rz-chkbox { + margin-inline-end: 0.25rem; +} + +.rz-tree-container, +.rz-treenode-children { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-treenode-label { + transition: var(--rz-tree-transition); +} +.rz-treenode-content-selected .rz-treenode-label { + border-radius: var(--rz-tree-node-selected-border-radius); + color: var(--rz-tree-node-selected-color); + background-color: var(--rz-tree-node-selected-background-color); +} + +.rz-datalist, +.rz-datagrid { + background-color: var(--rz-datalist-background-color); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); + box-shadow: var(--rz-datalist-shadow); + border: var(--rz-datalist-border); +} + +.rz-g > div, .rz-datalist-data > li { + border-radius: var(--rz-datalist-border-radius); + border: var(--rz-datalist-item-border); + box-shadow: var(--rz-datalist-item-shadow); + padding: var(--rz-datalist-item-padding); + background-color: var(--rz-datalist-item-background-color); +} + +.rz-datalist-data { + list-style: none; + padding: var(--rz-datalist-padding); + margin: 0; +} +.rz-datalist-data > li { + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} +.rz-datalist-data > li:first-child { + margin-block-start: 0; +} +.rz-datalist-data > li:last-child { + margin-block-end: 0; +} + +.rz-g { + display: flex; + flex-wrap: wrap; +} +.rz-g > div { + flex: auto; + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} + +.rz-datalist-content { + box-sizing: border-box; + position: relative; +} + +.rz-datafilter { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + column-gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-selectbutton { + display: inline-flex; +} +.rz-datafilter .rz-datafilter-group { + position: relative; + margin: 0.25rem 0 0; + padding: 0; + flex-basis: 100%; +} +.rz-datafilter .rz-datafilter-group .rz-datafilter-group { + margin: 0; +} +.rz-datafilter .rz-datafilter-item { + position: relative; + list-style: none; + margin: 0; + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-datafilter-item:before { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item:after { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item .rz-multiselect, +.rz-datafilter .rz-datafilter-item .rz-dropdown { + flex: 10rem 1; +} +.rz-datafilter .rz-datafilter-group-item:after { + height: calc(var(--rz-input-height) / 2); +} +.rz-datafilter .rz-datafilter-bar { + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; +} +.rz-datafilter .rz-datafilter-bar:before { + display: none; +} +.rz-datafilter .rz-datafilter-bar:after { + height: calc(var(--rz-input-height) / 2); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); +} +.rz-datafilter .rz-datafilter-bar .rz-splitbutton { + margin-block-start: 0.3125rem; +} +.rz-datafilter .rz-datafilter-editor { + flex: 10rem 4; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear { + color: var(--rz-text-secondary-color); + opacity: 0.5; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear:hover { + opacity: 1; +} + +.rz-scheduler { + box-sizing: border-box; + container-name: scheduler; + container-type: inline-size; + display: flex; + height: 400px; + flex-direction: column; + border-radius: var(--rz-scheduler-border-radius); + border: 1px solid var(--rz-scheduler-border-color); + box-shadow: var(--rz-scheduler-shadow); + color: var(--rz-scheduler-color); + background: var(--rz-scheduler-background-color); + overflow: hidden; + background-clip: border-box; +} +.rz-scheduler a.rz-event-list-btn { + position: absolute; + padding-inline-start: 0.25rem; + color: var(--rz-scheduler-event-list-button-color); + font-size: var(--rz-scheduler-event-list-button-font-size); +} +.rz-scheduler a.rz-event-list-btn:hover { + cursor: pointer; + color: var(--rz-scheduler-event-list-button-color); + text-decoration: underline; +} + +.rz-slot { + display: flex; + height: 1.5em; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} + +.rz-slot-title { + text-align: end; + font-size: var(--rz-scheduler-slot-title-font-size); + padding: var(--rz-scheduler-slot-title-padding); +} + +.rz-slot-hours { + flex: 0 0 5rem; +} +.rz-slot-hours .rz-slot-header { + height: 1.5rem; + text-align: end; + font-size: var(--rz-scheduler-header-font-size); + padding: 0 0.25rem; + border-inline-end: 1px solid var(--rz-scheduler-border-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.rz-slot-minor { + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); +} + +.rz-day-view .rz-slot, +.rz-slots:first-child .rz-slot { + border-inline-start: none; +} + +.rz-event { + position: absolute; + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); + cursor: pointer; +} + +.rz-event-content { + background: var(--rz-scheduler-event-background-color); + border-radius: var(--rz-scheduler-border-radius); + color: var(--rz-scheduler-event-color); + height: 100%; + padding: var(--rz-scheduler-event-content-padding); + font-size: var(--rz-scheduler-event-font-size); + line-height: var(--rz-scheduler-event-line-height); + overflow: hidden; +} + +.rz-events { + position: relative; +} + +.rz-scheduler-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--rz-scheduler-toolbar-padding); + background: var(--rz-scheduler-toolbar-background-color); +} +.rz-scheduler-nav .rz-scheduler-nav-title { + display: flex; + align-self: center; + font-size: var(--rz-scheduler-toolbar-title-font-size); + font-weight: var(--rz-scheduler-toolbar-title-font-weight); + color: var(--rz-scheduler-toolbar-title-color); +} + +.rz-view-header { + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); + background-color: var(--rz-scheduler-header-background-color); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); + display: flex; +} +.rz-view-header .rz-slot-header { + flex: 1; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rz-view-header .rz-slot-hour-header { + flex: 0 0 5rem; +} + +.rz-view { + display: flex; + flex-direction: column; + flex: 1; +} + +.rz-view-content { + flex: auto; + display: flex; + overflow: auto; + height: 0; +} +.rz-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-slot:has(.rz-state-focused) { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-slots { + flex: 1; + font-size: 1rem; +} + +.rz-scheduler-nav-views { + display: flex; +} +.rz-scheduler-nav-views .rz-button.rz-primary { + background: var(--rz-scheduler-view-button-background-color); + color: var(--rz-scheduler-view-button-color); + border: var(--rz-scheduler-view-button-border); + border-radius: 0; + border-inline-end: none; +} +.rz-scheduler-nav-views .rz-button.rz-primary:first-child { + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); +} +.rz-scheduler-nav-views .rz-button.rz-primary:last-child { + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); +} +.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { + background-color: var(--rz-scheduler-view-selected-background-color); + border-color: var(--rz-scheduler-view-selected-border-color); + color: var(--rz-scheduler-view-selected-color); +} +.rz-scheduler-nav-views .rz-button.rz-primary:focus-visible { + z-index: 1; +} + +.rz-scheduler-nav-prev-next { + display: flex; +} +.rz-scheduler-nav-prev-next .rz-button { + background-color: var(--rz-scheduler-prev-next-button-background-color); + color: var(--rz-scheduler-prev-next-button-color); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); + font-size: var(--rz-scheduler-prev-next-button-font-size); +} +.rz-scheduler-nav-prev-next .rz-button.rz-today { + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); + padding: var(--rz-scheduler-today-button-padding); + font-size: var(--rz-scheduler-today-button-font-size); + text-transform: var(--rz-scheduler-today-button-text-transform); +} +.rz-scheduler-nav-prev-next .rz-button.rz-prev { + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button.rz-next { + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button:focus-visible { + z-index: 1; +} + +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + +.rz-event-list .rz-event { + position: static; +} + +.rz-week { + flex: 1; + font-size: 1rem; +} +.rz-week .rz-slots { + display: flex; + height: 100%; +} +.rz-week:first-child .rz-slot { + border-block-start: none; +} + +.rz-month { + flex: 1; + font-size: 1rem; +} +.rz-month .rz-slots { + display: flex; + height: 100%; +} +.rz-month:nth-child(2) .rz-slot { + border-block-start: none; +} +.rz-month .rz-slot { + flex: 1; + height: 100%; + display: flex; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child { + position: sticky; + z-index: 9998; + inset-inline-start: 0; + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child .rz-slot-header { + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-month .rz-slot:nth-child(2) { + border-inline-start: none; +} + +.rz-day-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-day-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-week-view-content { + flex: 1; + display: flex; +} +.rz-week-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-week-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-slots.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-week-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-week-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-month-view .rz-view-content { + flex: 1; + flex-direction: column; +} +.rz-month-view .rz-slot { + flex: 1; + height: 100%; +} +.rz-month-view .rz-slot:first-child { + border-inline-start: none; +} + +.rz-planner-view { + overflow: auto; +} +.rz-planner-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 2.25rem; + z-index: 9999; +} +.rz-planner-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-planner-view .rz-month .rz-slot:first-child .rz-slot-header { + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +.rz-planner-view .rz-month .rz-slot:last-child { + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); +} +.rz-planner-view .rz-month .rz-slot:last-child .rz-slot-header { + writing-mode: vertical-rl; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-planner-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-planner-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-timeline-view { + flex: auto; + overflow: auto; + flex-wrap: wrap; + flex-direction: unset; +} +.rz-timeline-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 36px; + z-index: 9999; +} +.rz-timeline-view .rz-view-header .rz-slot-header { + min-width: var(--rz-scheduler-timeline-slot-width); + flex: 0 0 auto; +} +.rz-timeline-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-timeline-view .rz-month { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slots { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slot { + width: var(--rz-scheduler-timeline-slot-width); + height: var(--rz-scheduler-timeline-slot-height); +} +.rz-timeline-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-timeline-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-year-view { + overflow: auto; + padding: var(--rz-scheduler-year-padding); + --rz-gap: var(--rz-scheduler-year-padding); +} +.rz-year-view .rz-flex-column, +.rz-year-view .rz-week { + min-width: fit-content; +} +.rz-year-view .rz-slot { + flex: 1; + border-block-start: none; + justify-content: center; + height: initial; + padding: var(--rz-scheduler-year-slot-padding); + cursor: pointer; +} +.rz-year-view .rz-slot .rz-slot-title { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-align: center; + width: var(--rz-scheduler-year-slot-title-width); + min-width: 2rem; + min-height: 2rem; + border-radius: var(--rz-scheduler-year-slot-title-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-year-view .rz-slot .rz-slot-title.rz-other-month { + opacity: 0.5; +} +.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments { + color: var(--rz-scheduler-event-color); + background-color: var(--rz-scheduler-event-background-color); +} +.rz-year-view .rz-slot .rz-slot-title.rz-state-focused { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} +.rz-year-view .rz-slot:hover .rz-slot-title:not(.rz-has-appointments) { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} + +.rz-year-month:focus { + outline: var(--rz-outline-normal); +} +.rz-year-month:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); + border-radius: var(--rz-border-radius); +} + +@container scheduler (width < 640px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@container scheduler (width < 1400px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +@media (max-width: 576px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@media (max-width: 1399px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +.rz-tabview { + box-sizing: border-box; + display: flex; +} +.rz-tabview:focus { + outline: var(--rz-outline-normal); +} +.rz-tabview:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-tabview:focus-visible .rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + outline: var(--rz-tabs-tab-focus-outline); + outline-offset: var(--rz-tabs-tab-focus-outline-offset); +} +.rz-tabview.rz-tabview-top { + flex-direction: column; +} +.rz-tabview.rz-tabview-top-right { + flex-direction: column; +} +.rz-tabview.rz-tabview-bottom { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-bottom-right { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-left { + flex-direction: row; +} +.rz-tabview.rz-tabview-right { + flex-direction: row-reverse; +} + +.rz-tabview-nav { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} +.rz-tabview-nav li { + border: var(--rz-tabs-border); + background-color: var(--rz-tabs-tab-background-color); + color: var(--rz-tabs-tab-color); + transition: var(--rz-tabs-transition); +} +.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-hover-background-color); + color: var(--rz-tabs-tab-hover-color); +} +.rz-tabview-nav li a, +.rz-tabview-nav li a:not([href]):not([class]) { + display: flex; + align-items: center; + color: inherit; + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); + font-size: var(--rz-tabs-tab-font-size); + line-height: var(--rz-tabs-tab-line-height); + font-weight: var(--rz-tabs-tab-font-weight); + text-transform: var(--rz-tabs-tab-text-transform); + letter-spacing: var(--rz-tabs-tab-letter-spacing); + text-decoration: none; + cursor: pointer; +} +.rz-tabview-nav li a:hover, +.rz-tabview-nav li a:not([href]):not([class]):hover { + text-decoration: none; +} +.rz-tabview-nav li.rz-state-disabled { + opacity: 0.5; +} +.rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-focus-background-color); + border-color: var(--rz-tabs-tab-focus-background-color); + color: var(--rz-tabs-tab-focus-color); +} +.rz-tabview-nav .rz-tabview-selected { + background-color: var(--rz-tabs-tab-selected-background-color); + color: var(--rz-tabs-tab-selected-color); + position: relative; +} +.rz-tabview-top > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-top > .rz-tabview-nav li { + border-top-width: 2px; + border-bottom-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-bottom-color: var(--rz-tabs-background-color); + margin-bottom: -1px; + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-bottom > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-bottom > .rz-tabview-nav li { + border-bottom-width: 2px; + border-top-color: var(--rz-tabs-tab-background-color); + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-top-color: var(--rz-tabs-background-color); + margin-top: -1px; + padding-top: 1px; + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-left > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-left > .rz-tabview-nav li { + border-left-width: 2px; + border-right-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} +.rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-right-color: var(--rz-tabs-background-color); + margin-right: -1px; + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-right > .rz-tabview-nav li { + border-right-width: 2px; + border-left-color: var(--rz-tabs-tab-background-color); + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-left-color: var(--rz-tabs-background-color); + margin-left: -1px; + padding-left: 1px; + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} + +.rz-tabview-panels { + background-color: var(--rz-tabs-background-color); + border: var(--rz-tabs-border); + box-shadow: var(--rz-tabs-shadow); + flex: 1; + overflow: auto; +} +.rz-tabview-top > .rz-tabview-panels { + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-left > .rz-tabview-panels { + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .rz-tabview-panels { + flex: auto; + } +} +.rz-tabview-panel { + padding: var(--rz-tabs-padding); +} + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); +} + +.rz-tooltip { + box-sizing: border-box; + position: absolute; + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-tooltip-content { + background: var(--rz-tooltip-background-color); + color: var(--rz-tooltip-color); + box-shadow: var(--rz-tooltip-shadow); + padding: var(--rz-tooltip-padding); + border-radius: var(--rz-tooltip-border-radius); + font-size: var(--rz-tooltip-font-size); + white-space: nowrap; +} + +.rz-tooltip .rz-top-tooltip-content { + margin-bottom: 16px; +} + +.rz-tooltip .rz-top-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-end: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-bottom-tooltip-content { + margin-top: -8px; +} + +.rz-tooltip .rz-bottom-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-start: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-left-tooltip-content { + margin-right: 8px; +} + +.rz-tooltip .rz-left-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + right: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-right-tooltip-content { + margin-left: 0; +} + +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-dialog-wrapper { + box-sizing: border-box; + display: flex; + position: fixed; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + z-index: var(--rz-dialog-zindex); + align-items: center; + justify-content: center; +} + +.rz-dialog { + box-sizing: border-box; + position: absolute; + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 150px; + max-height: 100%; + min-height: 150px; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); +} + +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); + font-size: var(--rz-dialog-title-font-size); + line-height: var(--rz-dialog-title-line-height); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); +} + +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; + font-weight: var(--rz-dialog-title-font-weight); + letter-spacing: var(--rz-dialog-title-letter-spacing); + color: var(--rz-dialog-title-color); + user-select: none; +} + +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { + font-size: var(--rz-dialog-close-font-size); + color: var(--rz-dialog-close-color); + vertical-align: var(--rz-dialog-close-vertical-align); +} +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { + content: "close"; +} +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { + color: var(--rz-dialog-close-hover-color); +} + +.rz-dialog-content, +.rz-dialog-side-content { + flex: 0 1 auto; + padding: var(--rz-dialog-content-padding); + overflow: auto; +} + +.rz-dialog-confirm, .rz-dialog-alert { + max-width: 400px; + margin: 0.75rem; +} + +.rz-dialog-confirm-message, .rz-dialog-alert-message { + margin-block-end: 1.5rem; +} + +.rz-dialog-confirm-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.rz-dialog-confirm-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-alert-buttons { + text-align: end; + gap: 0.5rem; +} +.rz-dialog-alert-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-mask { + position: fixed; + z-index: var(--rz-dialog-mask-zindex); + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--rz-dialog-mask-background-color); + opacity: 0.5; +} + +.no-scroll { + overflow: hidden; + padding-inline-end: 15px; +} + +.rz-dialog-side-position-right { + right: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-left { + left: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-top { + top: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +.rz-dialog-side-position-bottom { + bottom: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; +} + +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; +} + +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); +} +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); +} +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); +} +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); +} + +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); +} + +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.rz-notification-title { + font-weight: bold; +} + +.rz-notification-icon { + margin: var(--rz-notification-icon-margin); +} +.rz-notification-icon.rzi-check { + color: var(--rz-notification-success-icon-color); +} +.rz-notification-icon.rzi-check:before { + content: "check"; +} +.rz-notification-icon.rzi-exclamation-triangle { + color: var(--rz-notification-warning-icon-color); +} +.rz-notification-icon.rzi-exclamation-triangle:before { + content: "warning"; +} +.rz-notification-icon.rzi-info-circle { + color: var(--rz-notification-info-icon-color); +} +.rz-notification-icon.rzi-info-circle:before { + content: "info"; +} +.rz-notification-icon.rzi-times { + color: var(--rz-notification-error-icon-color); +} +.rz-notification-icon.rzi-times:before { + content: "error"; +} + +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; +} + +.rz-form { + box-sizing: border-box; +} + +.rz-message { + box-sizing: border-box; +} + +.rz-messages-error { + display: inline-block; + color: var(--rz-form-error-color); + font-size: var(--rz-form-error-font-size); + padding: var(--rz-validator-text-padding); +} + +.rz-message-popup { + position: absolute; + background-color: var(--rz-validator-background-color); + transform: var(--rz-validator-transform); + box-shadow: var(--rz-validator-shadow); + padding: var(--rz-validator-padding); + border-radius: var(--rz-border-radius); + color: var(--rz-validator-color); + pointer-events: none; +} +.rz-message-popup:before { + content: ""; + border: var(--rz-validator-pointer-size) solid transparent; + border-bottom-color: var(--rz-validator-background-color); + position: absolute; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); +} + +.rz-layout::-webkit-scrollbar, +.rz-layout ::-webkit-scrollbar, +.rz-scrollbars::-webkit-scrollbar, +.rz-scrollbars ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-thumb, +.rz-layout ::-webkit-scrollbar-thumb, +.rz-scrollbars::-webkit-scrollbar-thumb, +.rz-scrollbars ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-corner, +.rz-layout ::-webkit-scrollbar-corner, +.rz-scrollbars::-webkit-scrollbar-corner, +.rz-scrollbars ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-login { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rz-login .rz-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.rz-login .rz-form .rz-form-row { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} +.rz-login .rz-form .rz-form-row .rz-label { + flex: 1 8rem; +} +.rz-login .rz-form .rz-form-row .rz-form-input-wrapper { + flex: 3 14rem; +} +.rz-login .rz-form .rz-form-row .rz-textbox { + display: block; + width: 100%; +} +.rz-login .rz-form .rz-form-row .rz-textbox.invalid { + border: var(--rz-border-danger); +} +.rz-login .rz-form .rz-form-row .rz-switch { + margin-inline-end: 0.5rem; +} +.rz-login .rz-form .rz-messages-error { + position: absolute; +} +.rz-login .rz-register { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: var(--rz-login-register-background-color); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); + border-radius: var(--rz-border-radius); +} +.rz-login .rz-register .rz-button { + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); +} +.rz-login .rz-login-buttons { + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.rz-lookup-panel { + background-color: var(--rz-lookup-panel-background-color); + padding: var(--rz-lookup-panel-padding); + container-type: inline-size; + container-name: rz-lookup-panel; +} + +.rz-lookup-search { + display: flex; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); +} +.rz-lookup-search input { + flex: auto; +} + +.ssrsviewer { + display: flex; +} +.ssrsviewer iframe { + flex: auto; +} + +.rz-map { + box-sizing: border-box; + height: var(--rz-map-height); + padding: var(--rz-map-padding); + background-color: var(--rz-map-background-color); + box-shadow: var(--rz-map-shadow); + border-radius: var(--rz-border-radius); +} + +.rz-map-container { + height: 100%; +} + +.rz-gauge, +.rz-arc-gauge { + box-sizing: border-box; + position: relative; + display: inline-block; + width: 300px; + height: 300px; +} + +.rz-gauge .rz-line, +.rz-gauge .rz-tick { + stroke: var(--rz-gauge-scale-color); +} +.rz-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-scale-label-color); +} + +.rz-arc-gauge .rz-line, +.rz-arc-gauge .rz-tick { + stroke: var(--rz-gauge-arc-scale-color); +} +.rz-arc-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-arc-scale-label-color); +} + +.rz-gauge-value { + position: absolute; + transform: translateX(-50%); + padding: 0.5rem; +} + +.rz-arc-gauge-value { + position: absolute; + transform: translate(-50%, -50%); + padding: 0.5rem; +} + +.rz-gauge-pointer { + fill: var(--rz-gauge-pointer-color); +} + +.rz-arc-gauge-scale-value { + fill: var(--rz-gauge-arc-value-color); +} + +.rz-arc-gauge-scale { + fill: var(--rz-gauge-arc-scale-color); +} + +.rz-progressbar { + box-sizing: border-box; + border-radius: var(--rz-progressbar-border-radius); + height: var(--rz-progressbar-height); + position: relative; + background-color: var(--rz-progressbar-background-color); + text-align: center; + display: flex; + align-items: center; +} + +.rz-progressbar-value { + border-radius: var(--rz-progressbar-border-radius); + position: absolute; + background-color: var(--rz-progressbar-value-background-color); + height: 100%; + width: 100%; + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-label { + position: relative; + width: 100%; + text-align: center; + font-size: var(--rz-progressbar-font-size); + line-height: var(--rz-progressbar-font-size); +} + +.rz-progressbar-circular { + box-sizing: border-box; + position: relative; +} + +.rz-progressbar-circular-viewbox { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.rz-progressbar-circular-label { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +.rz-progressbar-circular-background { + stroke: var(--rz-progressbar-background-color); + stroke-width: var(--rz-progressbar-circular-stroke-width); +} + +.rz-progressbar-circular-value { + stroke-linecap: var(--rz-progressbar-circular-value-endpoint); + stroke-width: var(--rz-progressbar-circular-value-stroke-width); + stroke: var(--rz-progressbar-value-background-color); + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-determinate .rz-progressbar-circular-value { + stroke-dasharray: 100; + transform: rotate(-0.25turn); +} + +.rz-progressbar-indeterminate { + overflow: hidden; +} +.rz-progressbar-indeterminate .rz-progressbar-value { + background-color: transparent; +} +.rz-progressbar-indeterminate .rz-progressbar-value:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} +.rz-progressbar-indeterminate .rz-progressbar-value:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; + animation-delay: 1.15s; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} +@keyframes rz-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 100%, 60% { + left: 100%; + right: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} +.rz-progressbar-indeterminate .rz-progressbar-circular-value { + animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + transform-origin: 0 0; +} +@keyframes rz-progressbar-circular-indeterminate-anim-rotate { + 100% { + transform: rotate(1turn); + } +} +@keyframes rz-progressbar-circular-indeterminate-anim-dash { + 0% { + stroke-dasharray: 1, 100; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -28; + } + 100% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -99; + } +} + +.rz-progressbar.rz-progressbar-primary { + color: var(--rz-on-primary); +} + +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value { + background-color: var(--rz-primary); +} +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:before { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:after { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); +} + +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); +} +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:before { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:after { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar.rz-progressbar-info { + color: var(--rz-on-info); +} + +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-value { + background-color: var(--rz-info); +} +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:before { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:after { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar.rz-progressbar-warning { + color: var(--rz-on-warning); +} + +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-value { + background-color: var(--rz-warning); +} +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:before { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:after { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-danger { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-success { + color: var(--rz-on-success); +} + +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value { + background-color: var(--rz-success); +} +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:before { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:after { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} + +.rz-scheme-pastel .rz-series-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} + +.rz-scheme-pastel .rz-series-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} + +.rz-scheme-pastel .rz-series-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} + +.rz-scheme-pastel .rz-series-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} + +.rz-scheme-pastel .rz-series-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} + +.rz-scheme-pastel .rz-series-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} + +.rz-scheme-pastel .rz-series-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} + +.rz-scheme-pastel .rz-series-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} + +.rz-scheme-pastel .rz-series-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-9-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} + +.rz-scheme-pastel .rz-series-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-10-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} + +.rz-scheme-pastel .rz-series-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-11-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} + +.rz-scheme-pastel .rz-series-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-12-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} + +.rz-scheme-pastel .rz-series-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-13-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} + +.rz-scheme-pastel .rz-series-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-14-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} + +.rz-scheme-pastel .rz-series-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-15-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} + +.rz-scheme-pastel .rz-series-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-16-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} + +.rz-scheme-pastel .rz-series-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-17-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} + +.rz-scheme-pastel .rz-series-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-18-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} + +.rz-scheme-pastel .rz-series-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-19-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} + +.rz-scheme-pastel .rz-series-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-20-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} + +.rz-scheme-pastel .rz-series-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-21-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} + +.rz-scheme-pastel .rz-series-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-22-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} + +.rz-scheme-pastel .rz-series-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-23-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} + +.rz-scheme-palette .rz-series-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} +.rz-scheme-palette .rz-series-item-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} + +.rz-scheme-palette .rz-series-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} + +.rz-scheme-palette .rz-series-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #665191; +} +.rz-scheme-palette .rz-series-item-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #665191; +} + +.rz-scheme-palette .rz-series-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #a05195; +} +.rz-scheme-palette .rz-series-item-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #a05195; +} + +.rz-scheme-palette .rz-series-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #d45087; +} +.rz-scheme-palette .rz-series-item-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #d45087; +} + +.rz-scheme-palette .rz-series-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} + +.rz-scheme-palette .rz-series-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} + +.rz-scheme-palette .rz-series-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} +.rz-scheme-palette .rz-series-item-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} + +.rz-scheme-monochrome .rz-series-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} + +.rz-scheme-monochrome .rz-series-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #296080; +} +.rz-scheme-monochrome .rz-series-item-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #296080; +} + +.rz-scheme-monochrome .rz-series-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #437594; +} +.rz-scheme-monochrome .rz-series-item-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #437594; +} + +.rz-scheme-monochrome .rz-series-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} + +.rz-scheme-monochrome .rz-series-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} + +.rz-scheme-monochrome .rz-series-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} + +.rz-scheme-monochrome .rz-series-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} + +.rz-scheme-monochrome .rz-series-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} + +.rz-scheme-divergent .rz-series-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #00876c; +} +.rz-scheme-divergent .rz-series-item-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #00876c; +} + +.rz-scheme-divergent .rz-series-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} + +.rz-scheme-divergent .rz-series-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} + +.rz-scheme-divergent .rz-series-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} + +.rz-scheme-divergent .rz-series-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} + +.rz-scheme-divergent .rz-series-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} + +.rz-scheme-divergent .rz-series-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} + +.rz-scheme-divergent .rz-series-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #e27076; +} +.rz-scheme-divergent .rz-series-item-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #e27076; +} + +.rz-scheme-divergent .rz-series-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} + +.rz-marker { + stroke: var(--rz-chart-marker-stroke); +} + +.rz-area-series .rz-marker { + fill-opacity: 1; +} + +.rz-axis { + stroke: var(--rz-chart-axis-color); + font-size: var(--rz-chart-axis-font-size); +} + +.rz-axis .rz-grid-line { + stroke: var(--rz-chart-axis-color); +} + +.rz-tick-text { + stroke: none; + fill: var(--rz-chart-axis-label-color); +} + +.rz-series-data-label { + fill: var(--rz-chart-axis-label-color); +} + +.rz-value-axis .rz-tick-text { + text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; +} + +.rz-category-axis .rz-tick-text { + text-anchor: middle; +} + +.rz-axis .rz-axis-title { + stroke: none; + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-title { + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-content { + height: 100%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rz-legend { + position: absolute; + display: flex; + font-size: var(--rz-chart-legend-font-size); +} + +.rz-legend-right { + right: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-left { + left: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-top { + top: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-bottom { + bottom: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-items { + padding: 0; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; +} + +.rz-legend-item { + display: flex; + align-items: center; + gap: 4px; + margin: 4px; + cursor: pointer; +} +.rz-legend-item:focus { + outline: var(--rz-outline-normal); +} +.rz-legend-item:focus-visible { + outline: var(--rz-chart-legend-focus-outline); + outline-offset: var(--rz-chart-legend-focus-outline-offset); + border-radius: var(--rz-border-radius); +} + +.rz-legend-top .rz-legend-item, +.rz-legend-bottom .rz-legend-item { + display: inline-flex; +} + +.rz-chart-tooltip { + position: absolute; + transform: translate(-50%, -100%); + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-chart-tooltip-content { + background: var(--rz-chart-tooltip-background); + color: var(--rz-chart-tooltip-color); + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + padding: 0.25rem 0.5rem; + border-radius: var(--rz-border-radius); + white-space: nowrap; +} + +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content { + margin-bottom: 15px; +} +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + left: 50%; + bottom: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -11px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-link { + box-sizing: border-box; + color: var(--rz-link-color); + text-decoration: none; + cursor: pointer; +} +.rz-link .rz-link-text { + text-decoration: var(--rz-link-text-decoration); +} +.rz-link .rzi { + font-size: inherit; + vertical-align: middle; +} +.rz-link:hover, .rz-link:focus { + color: var(--rz-link-hover-color); + text-decoration: none; +} +.rz-link:hover .rz-link-text, .rz-link:focus .rz-link-text { + text-decoration: var(--rz-link-hover-text-decoration); +} +.rz-link:focus-visible { + outline: var(--rz-link-focus-outline); +} + +.rz-state-highlight .link { + color: var(--rz-text-contrast-color); +} + +.rz-html-editor { + box-sizing: border-box; + display: flex; + flex-direction: column; + border-radius: var(--rz-editor-border-radius); + border: var(--rz-editor-border); + overflow: hidden; +} +.rz-html-editor:focus-within { + outline: var(--rz-editor-focus-outline); + outline-offset: var(--rz-editor-focus-outline-offset); +} + +.rz-html-editor-content { + flex: 1; + overflow: auto; + padding: 0.5rem; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-source.rz-textarea { + --rz-input-hover-shadow: none; + --rz-input-border: none; + --rz-input-hover-border: none; + --rz-input-focus-shadow: none; + --rz-input-focus-border: none; + flex: 1; + padding: 0.5rem; + overflow: auto; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-toolbar { + border-bottom: var(--rz-editor-border); + display: flex; + line-height: 1rem; + flex-wrap: wrap; + background-color: var(--rz-editor-toolbar-background-color); +} +.rz-html-editor-toolbar .rzi { + font-size: 1rem; +} +.rz-html-editor-toolbar > * { + margin: var(--rz-editor-toolbar-item-margin); +} + +.rz-html-editor-colorpicker { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger { + color: inherit; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} +.rz-html-editor-colorpicker .rz-colorpicker-value { + display: none; +} +.rz-html-editor-colorpicker .rz-colorpicker { + border: none; + box-shadow: none; + padding: 0; + height: auto; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} + +.rz-html-editor-color { + border: none; + display: flex; + flex-direction: column; + background: inherit; + color: inherit; + appearance: none; + padding: 0; + position: relative; +} +.rz-html-editor-color:disabled { + color: var(--rz-input-disabled-color); +} + +.rz-html-editor-color-value { + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; +} + +.rz-html-editor-button { + color: var(--rz-editor-button-color); + appearance: none; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-button.rz-selected { + background-color: var(--rz-editor-button-selected-background-color); + color: var(--rz-editor-button-selected-color); + border-radius: var(--rz-editor-border-radius); +} +.rz-html-editor-button:disabled { + color: var(--rz-editor-button-disabled-color); +} + +.rz-html-editor-dropdown { + display: inline-flex; + padding: var(--rz-editor-button-padding); + align-items: center; + cursor: pointer; +} +.rz-html-editor-dropdown.rz-disabled { + color: var(--rz-input-disabled-color); + cursor: default; +} + +.rz-html-editor-dropdown-item { + cursor: default; + font-size: var(--rz-dropdown-item-font-size); + padding: var(--rz-dropdown-item-padding); + white-space: nowrap; +} +.rz-html-editor-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-html-editor-dropdown-item.rz-selected { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); +} + +.rz-html-editor-dropdown-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: inherit; + background-color: inherit; +} +.rz-html-editor-dropdown-trigger .rzi:before { + content: "arrow_drop_down"; +} + +.rz-html-editor-dropdown-items { + display: none; +} + +.rz-html-editor-dialog-item { + margin-bottom: 1rem; +} +.rz-html-editor-dialog-item label:first-child { + display: block; +} + +.rz-html-editor-dialog-buttons { + text-align: right; +} + +.rz-html-editor-separator { + width: 1px; + background-color: var(--rz-editor-separator-background-color); +} + +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; +} +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} + +.rz-colorpicker { + display: inline-flex; + align-items: center; + cursor: pointer; +} +.rz-colorpicker.rz-state-disabled { + cursor: default; +} + +button.rz-colorpicker-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: var(--rz-text-color); + background-color: inherit; + outline: none; +} +button.rz-colorpicker-trigger .rzi { + font-size: var(--rz-icon-size); +} +button.rz-colorpicker-trigger .rzi:before { + content: "arrow_drop_down"; +} +.rz-state-disabled button.rz-colorpicker-trigger { + color: var(--rz-input-disabled-color); +} + +.rz-colorpicker-popup { + display: none; + position: absolute; + border: var(--rz-colorpicker-panel-border); + background-color: var(--rz-colorpicker-panel-background-color); + box-shadow: var(--rz-colorpicker-panel-shadow); + min-width: 200px; + max-width: var(--rz-colorpicker-panel-max-width); + padding: var(--rz-colorpicker-panel-padding); + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-value { + flex: 1; + border-radius: var(--rz-colorpicker-value-border-radius); + border: var(--rz-colorpicker-panel-border); + min-width: 20px; + min-height: 20px; +} + +.rz-saturation-picker { + height: var(--rz-colorpicker-saturation-height); + position: relative; + touch-action: none; + border-radius: var(--rz-border-radius); +} +.rz-saturation-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-saturation-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-saturation-white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} + +.rz-saturation-black, +.rz-saturation-white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--rz-border-radius); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); +} + +.rz-saturation-black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} + +.rz-saturation-handle { + position: absolute; + width: var(--rz-colorpicker-handle-size); + height: var(--rz-colorpicker-handle-size); + border: var(--rz-colorpicker-handle-border); + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-hue-picker { + margin-bottom: 8px; + touch-action: none; + position: relative; + background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-hue-picker:active { + cursor: none; +} +.rz-hue-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-hue-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-alpha-picker { + touch-action: none; + position: relative; + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-alpha-picker:active { + cursor: none; +} +.rz-alpha-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-alpha-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-hue-handle, +.rz-alpha-handle { + position: absolute; + height: 100%; + width: 8px; + border: var(--rz-colorpicker-handle-border); + border-radius: calc(var(--rz-border-radius) / 2); + transform: translateX(-50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-colorpicker-preview-area { + display: flex; +} + +.rz-hue-and-alpha { + flex: 1; + padding-inline-end: 8px; +} + +.rz-alpha-picker:before, +.rz-colorpicker-preview:before { + position: absolute; + z-index: -1; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--rz-border-radius); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); + background-size: 8px 8px; + background-position: 0 0, 0 4px, 4px -4px, -4px 0px; +} + +.rz-colorpicker-preview { + position: relative; + width: 32px; + height: 32px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-rgba { + display: flex; + gap: 4px; +} + +.rz-color-box { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + color: var(--rz-colorpicker-input-labels-color); + font-size: 0.75rem; + text-transform: uppercase; +} +.rz-color-box .rz-textbox { + width: 80px; + margin-inline-end: 4px; + padding: var(--rz-colorpicker-hex-input-padding); + height: var(--rz-colorpicker-hex-input-height); +} +.rz-color-box .rz-numeric { + padding: var(--rz-colorpicker-rgba-input-padding); + height: var(--rz-colorpicker-rgba-input-height); +} +.rz-color-box .rz-numeric .rz-numeric-input { + padding: 0; + outline: none; +} +.rz-color-box .rz-numeric button { + display: none; +} +.rz-color-box .rz-numeric button:hover { + display: initial; +} + +.rz-colorpicker-button { + justify-content: flex-end; + display: flex; +} + +.rz-colorpicker-section:not(:last-child) { + margin-bottom: 8px; +} + +.rz-colorpicker-colors { + display: flex; + flex-wrap: wrap; + gap: var(--rz-colorpicker-items-gap); +} + +.rz-colorpicker-item { + width: var(--rz-colorpicker-item-size); + height: var(--rz-colorpicker-item-size); + border-radius: var(--rz-colorpicker-item-border-radius); + box-shadow: var(--rz-colorpicker-item-shadow); + cursor: pointer; +} +.rz-colorpicker-item:focus { + outline: var(--rz-outline-normal); +} +.rz-colorpicker-item:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-splitter { + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 100%; +} +.rz-splitter > .rz-splitter-bar { + flex: 0 0 auto; + position: relative; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--rz-splitter-bar-color); + background-color: var(--rz-splitter-bar-background-color); + opacity: 0.4; + user-select: none; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color); + border-radius: 1px; +} +.rz-splitter > .rz-splitter-bar > .rz-expand { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar-resizable:hover { + background-color: var(--rz-splitter-bar-background-color); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active { + background-color: var(--rz-splitter-bar-background-color-active); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-expand, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-collapse { + color: var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:disabled { + opacity: 0.2; +} +.rz-splitter-horizontal { + flex-direction: row; +} +.rz-splitter-horizontal > .rz-splitter-bar { + flex-direction: column; + width: 8px; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_left"; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-resize { + height: 16px; + margin: 2px 0; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before { + content: "arrow_right"; +} +.rz-splitter-horizontal > .rz-splitter-bar-resizable:hover { + cursor: col-resize; +} +.rz-splitter-vertical { + flex-direction: column; +} +.rz-splitter-vertical > .rz-splitter-bar { + flex-direction: row; + height: 8px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_drop_up"; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-resize { + width: 16px; + margin: 0 2px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-expand:before { + content: "arrow_drop_down"; +} +.rz-splitter-vertical > .rz-splitter-bar-resizable:hover { + cursor: row-resize; +} +.rz-splitter-pane { + overflow: hidden; + position: relative; + flex: 0 0 auto; +} +.rz-splitter-pane-collapsed { + flex: 0 1 0% !important; + overflow: hidden !important; + display: block !important; +} +.rz-splitter-pane-lastresizable { + flex: 1 1 auto; +} + +.rz-splitter-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* RadzenLayout styles */ +.rz-layout { + box-sizing: border-box; + height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; + background-color: var(--rz-layout-background-color); +} +.rz-layout .rz-body { + grid-area: rz-body; + overflow: auto; +} +.rz-layout .rz-sidebar { + grid-area: rz-sidebar; + position: static; +} +.rz-layout .rz-header { + grid-area: rz-header; + z-index: 2; +} +.rz-layout .rz-footer { + grid-area: rz-footer; +} + +@media (max-width: 768px) { + body:has(> .rz-layout) { + overflow-x: hidden; + } + .rz-header, + .rz-footer, + .rz-body { + width: 100vw; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } +} +.rz-breadcrumb { + box-sizing: border-box; + display: flex; + align-items: center; +} + +.rz-breadcrumb-item + .rz-breadcrumb-item::before { + content: "»"; + display: inline-block; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + font-size: 1rem; + line-height: 1.25rem; +} + +.rz-breadcrumb-item { + display: inline-flex; + align-items: center; +} +.rz-breadcrumb-item .rz-link { + display: inline-flex; + align-items: center; +} + +.rz-alert { + box-sizing: border-box; + display: flex; + align-items: flex-start; + gap: var(--rz-alert-gap); + margin: var(--rz-alert-margin); + padding: var(--rz-alert-padding); + width: 100%; + border-radius: var(--rz-alert-border-radius); + background-color: var(--rz-alert-background-color); + color: var(--rz-alert-color); +} +.rz-alert-lg { + --rz-alert-gap: 1.5rem; + --rz-alert-margin: 1.5rem 0; + --rz-alert-padding: 1.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-md { + --rz-alert-gap: 1rem; + --rz-alert-margin: 1rem 0; + --rz-alert-padding: 1rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-sm { + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 0.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-xs { + --rz-alert-gap: 0.25rem; + --rz-alert-margin: 0.25rem 0; + --rz-alert-padding: 0.25rem; + --rz-alert-message-margin: 0; + --rz-alert-icon-margin: 0; +} +.rz-alert .rz-alert-item { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-alert-gap); +} +.rz-alert .rz-alert-icon { + color: var(--rz-alert-icon-color); + margin: var(--rz-alert-icon-margin); + font-size: var(--rz-alert-icon-size); +} +.rz-alert .rz-alert-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + margin: var(--rz-alert-message-margin); +} +.rz-alert .rz-alert-title { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-alert-title-color); + margin-bottom: var(--rz-text-h6-margin-bottom); +} +.rz-alert.rz-variant-filled { + box-shadow: var(--rz-alert-box-shadow); +} +.rz-alert.rz-variant-text { + --rz-alert-padding: 0; + --rz-alert-background-color: transparent; + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0; +} +.rz-alert.rz-variant-text .rz-alert-item { + flex: unset; +} +.rz-alert.rz-variant-text .rz-alert-message { + flex-direction: row; +} +.rz-alert.rz-variant-text .rz-alert-title { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + margin-bottom: 0; + margin-right: 0.5rem; +} +.rz-alert.rz-primary { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-primary-lighter); + --rz-alert-color: var(--rz-on-primary-lighter); + --rz-alert-title-color: var(--rz-on-primary-lighter); + --rz-alert-icon-color: var(--rz-on-primary-lighter); +} +.rz-alert.rz-primary.rz-shade-light { + --rz-alert-background-color: var(--rz-primary-light); + --rz-alert-color: var(--rz-on-primary-light); + --rz-alert-title-color: var(--rz-on-primary-light); + --rz-alert-icon-color: var(--rz-on-primary-light); +} +.rz-alert.rz-primary.rz-shade-default { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-dark { + --rz-alert-background-color: var(--rz-primary-dark); + --rz-alert-color: var(--rz-on-primary-dark); + --rz-alert-title-color: var(--rz-on-primary-dark); + --rz-alert-icon-color: var(--rz-on-primary-dark); +} +.rz-alert.rz-primary.rz-shade-darker { + --rz-alert-background-color: var(--rz-primary-darker); + --rz-alert-color: var(--rz-on-primary-darker); + --rz-alert-title-color: var(--rz-on-primary-darker); + --rz-alert-icon-color: var(--rz-on-primary-darker); +} +.rz-alert.rz-variant-outlined.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + --rz-alert-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-variant-text.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-default { + --rz-alert-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-lighter { + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-light { + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-dark { + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-darker { + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-secondary { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-on-secondary-lighter); + --rz-alert-title-color: var(--rz-on-secondary-lighter); + --rz-alert-icon-color: var(--rz-on-secondary-lighter); +} +.rz-alert.rz-secondary.rz-shade-light { + --rz-alert-background-color: var(--rz-secondary-light); + --rz-alert-color: var(--rz-on-secondary-light); + --rz-alert-title-color: var(--rz-on-secondary-light); + --rz-alert-icon-color: var(--rz-on-secondary-light); +} +.rz-alert.rz-secondary.rz-shade-default { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-dark { + --rz-alert-background-color: var(--rz-secondary-dark); + --rz-alert-color: var(--rz-on-secondary-dark); + --rz-alert-title-color: var(--rz-on-secondary-dark); + --rz-alert-icon-color: var(--rz-on-secondary-dark); +} +.rz-alert.rz-secondary.rz-shade-darker { + --rz-alert-background-color: var(--rz-secondary-darker); + --rz-alert-color: var(--rz-on-secondary-darker); + --rz-alert-title-color: var(--rz-on-secondary-darker); + --rz-alert-icon-color: var(--rz-on-secondary-darker); +} +.rz-alert.rz-variant-outlined.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + --rz-alert-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-variant-text.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-default { + --rz-alert-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-lighter { + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-light { + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-dark { + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-darker { + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-info { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-lighter { + --rz-alert-background-color: var(--rz-info-lighter); + --rz-alert-color: var(--rz-on-info-lighter); + --rz-alert-title-color: var(--rz-on-info-lighter); + --rz-alert-icon-color: var(--rz-on-info-lighter); +} +.rz-alert.rz-info.rz-shade-light { + --rz-alert-background-color: var(--rz-info-light); + --rz-alert-color: var(--rz-on-info-light); + --rz-alert-title-color: var(--rz-on-info-light); + --rz-alert-icon-color: var(--rz-on-info-light); +} +.rz-alert.rz-info.rz-shade-default { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-dark { + --rz-alert-background-color: var(--rz-info-dark); + --rz-alert-color: var(--rz-on-info-dark); + --rz-alert-title-color: var(--rz-on-info-dark); + --rz-alert-icon-color: var(--rz-on-info-dark); +} +.rz-alert.rz-info.rz-shade-darker { + --rz-alert-background-color: var(--rz-info-darker); + --rz-alert-color: var(--rz-on-info-darker); + --rz-alert-title-color: var(--rz-on-info-darker); + --rz-alert-icon-color: var(--rz-on-info-darker); +} +.rz-alert.rz-variant-outlined.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + --rz-alert-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-variant-text.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-info.rz-shade-default { + --rz-alert-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-lighter { + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-light { + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-dark { + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-darker { + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-warning { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-lighter { + --rz-alert-background-color: var(--rz-warning-lighter); + --rz-alert-color: var(--rz-on-warning-lighter); + --rz-alert-title-color: var(--rz-on-warning-lighter); + --rz-alert-icon-color: var(--rz-on-warning-lighter); +} +.rz-alert.rz-warning.rz-shade-light { + --rz-alert-background-color: var(--rz-warning-light); + --rz-alert-color: var(--rz-on-warning-light); + --rz-alert-title-color: var(--rz-on-warning-light); + --rz-alert-icon-color: var(--rz-on-warning-light); +} +.rz-alert.rz-warning.rz-shade-default { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-dark { + --rz-alert-background-color: var(--rz-warning-dark); + --rz-alert-color: var(--rz-on-warning-dark); + --rz-alert-title-color: var(--rz-on-warning-dark); + --rz-alert-icon-color: var(--rz-on-warning-dark); +} +.rz-alert.rz-warning.rz-shade-darker { + --rz-alert-background-color: var(--rz-warning-darker); + --rz-alert-color: var(--rz-on-warning-darker); + --rz-alert-title-color: var(--rz-on-warning-darker); + --rz-alert-icon-color: var(--rz-on-warning-darker); +} +.rz-alert.rz-variant-outlined.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + --rz-alert-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-variant-text.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-default { + --rz-alert-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-lighter { + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-light { + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-dark { + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-darker { + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-error { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-error.rz-shade-lighter { + --rz-alert-background-color: var(--rz-error-lighter); + --rz-alert-color: var(--rz-on-error-lighter); + --rz-alert-title-color: var(--rz-on-error-lighter); + --rz-alert-icon-color: var(--rz-on-error-lighter); +} +.rz-alert.rz-error.rz-shade-light { + --rz-alert-background-color: var(--rz-error-light); + --rz-alert-color: var(--rz-on-error-light); + --rz-alert-title-color: var(--rz-on-error-light); + --rz-alert-icon-color: var(--rz-on-error-light); +} +.rz-alert.rz-error.rz-shade-default { + --rz-alert-background-color: var(--rz-error); + --rz-alert-color: var(--rz-on-error); + --rz-alert-title-color: var(--rz-on-error); + --rz-alert-icon-color: var(--rz-on-error); +} +.rz-alert.rz-error.rz-shade-dark { + --rz-alert-background-color: var(--rz-error-dark); + --rz-alert-color: var(--rz-on-error-dark); + --rz-alert-title-color: var(--rz-on-error-dark); + --rz-alert-icon-color: var(--rz-on-error-dark); +} +.rz-alert.rz-error.rz-shade-darker { + --rz-alert-background-color: var(--rz-error-darker); + --rz-alert-color: var(--rz-on-error-darker); + --rz-alert-title-color: var(--rz-on-error-darker); + --rz-alert-icon-color: var(--rz-on-error-darker); +} +.rz-alert.rz-variant-outlined.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-variant-text.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-error.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-lighter { + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-light { + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-dark { + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-darker { + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-danger { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-lighter { + --rz-alert-background-color: var(--rz-danger-lighter); + --rz-alert-color: var(--rz-on-danger-lighter); + --rz-alert-title-color: var(--rz-on-danger-lighter); + --rz-alert-icon-color: var(--rz-on-danger-lighter); +} +.rz-alert.rz-danger.rz-shade-light { + --rz-alert-background-color: var(--rz-danger-light); + --rz-alert-color: var(--rz-on-danger-light); + --rz-alert-title-color: var(--rz-on-danger-light); + --rz-alert-icon-color: var(--rz-on-danger-light); +} +.rz-alert.rz-danger.rz-shade-default { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-dark { + --rz-alert-background-color: var(--rz-danger-dark); + --rz-alert-color: var(--rz-on-danger-dark); + --rz-alert-title-color: var(--rz-on-danger-dark); + --rz-alert-icon-color: var(--rz-on-danger-dark); +} +.rz-alert.rz-danger.rz-shade-darker { + --rz-alert-background-color: var(--rz-danger-darker); + --rz-alert-color: var(--rz-on-danger-darker); + --rz-alert-title-color: var(--rz-on-danger-darker); + --rz-alert-icon-color: var(--rz-on-danger-darker); +} +.rz-alert.rz-variant-outlined.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-variant-text.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-lighter { + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-light { + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-dark { + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-darker { + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-success { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-lighter { + --rz-alert-background-color: var(--rz-success-lighter); + --rz-alert-color: var(--rz-on-success-lighter); + --rz-alert-title-color: var(--rz-on-success-lighter); + --rz-alert-icon-color: var(--rz-on-success-lighter); +} +.rz-alert.rz-success.rz-shade-light { + --rz-alert-background-color: var(--rz-success-light); + --rz-alert-color: var(--rz-on-success-light); + --rz-alert-title-color: var(--rz-on-success-light); + --rz-alert-icon-color: var(--rz-on-success-light); +} +.rz-alert.rz-success.rz-shade-default { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-dark { + --rz-alert-background-color: var(--rz-success-dark); + --rz-alert-color: var(--rz-on-success-dark); + --rz-alert-title-color: var(--rz-on-success-dark); + --rz-alert-icon-color: var(--rz-on-success-dark); +} +.rz-alert.rz-success.rz-shade-darker { + --rz-alert-background-color: var(--rz-success-darker); + --rz-alert-color: var(--rz-on-success-darker); + --rz-alert-title-color: var(--rz-on-success-darker); + --rz-alert-icon-color: var(--rz-on-success-darker); +} +.rz-alert.rz-variant-outlined.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + --rz-alert-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-variant-text.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-success.rz-shade-default { + --rz-alert-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-lighter { + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-light { + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-dark { + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-darker { + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-base { + --rz-alert-background-color: var(--rz-base-700); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-base { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-base { + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-light { + --rz-alert-background-color: var(--rz-base-700); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-light { + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-dark { + --rz-alert-background-color: var(--rz-base-900); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-dark { + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} + +@keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +@-webkit-keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +.rz-button.rz-speech-to-text-button-recording { + -webkit-animation: mic-blink 2s linear infinite; + -moz-animation: mic-blink 2s linear infinite; + animation: mic-blink 2s linear infinite; +} + +.rz-flex-row { + flex-direction: row !important; +} + +.rz-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.rz-flex-column { + flex-direction: column !important; +} + +.rz-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.rz-stack { + box-sizing: border-box; + gap: var(--rz-gap); +} + +.rz-row { + box-sizing: border-box; + flex-wrap: wrap; + gap: var(--rz-gap); + row-gap: var(--rz-row-gap); +} + +.rz-row > [class^=rz-col] { + flex: 1 0 0%; +} + +.rz-row > [class*=rz-col-] { + flex: 0 0 auto; + width: 100%; +} + +.rz-row > .rz-col-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); +} + +.rz-row > .rz-col-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-row > .rz-col-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-row > .rz-col-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-row > .rz-col-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-row > .rz-col-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-row > .rz-col-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-row > .rz-col-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-row > .rz-col-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-row > .rz-col-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-row > .rz-col-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-row > .rz-col-12 { + max-width: 100%; + flex-basis: 100%; +} + +@media (min-width: 576px) { + .rz-row > .rz-col-xs-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xs-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 768px) { + .rz-row > .rz-col-sm-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-sm-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1024px) { + .rz-row > .rz-col-md-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-md-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-md-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-md-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-md-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-md-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-md-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-md-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-md-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-md-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-md-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-md-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1280px) { + .rz-row > .rz-col-lg-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-lg-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1920px) { + .rz-row > .rz-col-xl-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xl-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 2560px) { + .rz-row > .rz-col-xx-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xx-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-12 { + max-width: 100%; + flex-basis: 100%; + } +} +.rz-offset-0 { + margin-inline-start: 0; +} + +.rz-offset-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-offset-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-offset-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-offset-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-offset-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-offset-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-offset-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-offset-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-offset-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-offset-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-offset-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); +} + +@media (min-width: 576px) { + .rz-offset-xs-0 { + margin-inline-start: 0; + } + .rz-offset-xs-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xs-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xs-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xs-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xs-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xs-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xs-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xs-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xs-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xs-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xs-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 768px) { + .rz-offset-sm-0 { + margin-inline-start: 0; + } + .rz-offset-sm-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-sm-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-sm-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-sm-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-sm-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-sm-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-sm-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-sm-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-sm-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-sm-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-sm-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1024px) { + .rz-offset-md-0 { + margin-inline-start: 0; + } + .rz-offset-md-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-md-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-md-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-md-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-md-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-md-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-md-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-md-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-md-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-md-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-md-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1280px) { + .rz-offset-lg-0 { + margin-inline-start: 0; + } + .rz-offset-lg-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-lg-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-lg-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-lg-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-lg-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-lg-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-lg-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-lg-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-lg-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-lg-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-lg-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1920px) { + .rz-offset-xl-0 { + margin-inline-start: 0; + } + .rz-offset-xl-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xl-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xl-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xl-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xl-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xl-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xl-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xl-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xl-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xl-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xl-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 2560px) { + .rz-offset-xx-0 { + margin-inline-start: 0; + } + .rz-offset-xx-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xx-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xx-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xx-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xx-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xx-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xx-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xx-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xx-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xx-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xx-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +.rz-order-first { + order: -1 !important; +} + +.rz-order-last { + order: 13 !important; +} + +.rz-order-0 { + order: 0 !important; +} + +.rz-order-1 { + order: 1 !important; +} + +.rz-order-2 { + order: 2 !important; +} + +.rz-order-3 { + order: 3 !important; +} + +.rz-order-4 { + order: 4 !important; +} + +.rz-order-5 { + order: 5 !important; +} + +.rz-order-6 { + order: 6 !important; +} + +.rz-order-7 { + order: 7 !important; +} + +.rz-order-8 { + order: 8 !important; +} + +.rz-order-9 { + order: 9 !important; +} + +.rz-order-10 { + order: 10 !important; +} + +.rz-order-11 { + order: 11 !important; +} + +.rz-order-12 { + order: 12 !important; +} + +@media (min-width: 576px) { + .rz-order-xs-first { + order: -1 !important; + } + .rz-order-xs-last { + order: 13 !important; + } + .rz-order-xs-0 { + order: 0 !important; + } + .rz-order-xs-1 { + order: 1 !important; + } + .rz-order-xs-2 { + order: 2 !important; + } + .rz-order-xs-3 { + order: 3 !important; + } + .rz-order-xs-4 { + order: 4 !important; + } + .rz-order-xs-5 { + order: 5 !important; + } + .rz-order-xs-6 { + order: 6 !important; + } + .rz-order-xs-7 { + order: 7 !important; + } + .rz-order-xs-8 { + order: 8 !important; + } + .rz-order-xs-9 { + order: 9 !important; + } + .rz-order-xs-10 { + order: 10 !important; + } + .rz-order-xs-11 { + order: 11 !important; + } + .rz-order-xs-12 { + order: 12 !important; + } +} +@media (min-width: 768px) { + .rz-order-sm-first { + order: -1 !important; + } + .rz-order-sm-last { + order: 13 !important; + } + .rz-order-sm-0 { + order: 0 !important; + } + .rz-order-sm-1 { + order: 1 !important; + } + .rz-order-sm-2 { + order: 2 !important; + } + .rz-order-sm-3 { + order: 3 !important; + } + .rz-order-sm-4 { + order: 4 !important; + } + .rz-order-sm-5 { + order: 5 !important; + } + .rz-order-sm-6 { + order: 6 !important; + } + .rz-order-sm-7 { + order: 7 !important; + } + .rz-order-sm-8 { + order: 8 !important; + } + .rz-order-sm-9 { + order: 9 !important; + } + .rz-order-sm-10 { + order: 10 !important; + } + .rz-order-sm-11 { + order: 11 !important; + } + .rz-order-sm-12 { + order: 12 !important; + } +} +@media (min-width: 1024px) { + .rz-order-md-first { + order: -1 !important; + } + .rz-order-md-last { + order: 13 !important; + } + .rz-order-md-0 { + order: 0 !important; + } + .rz-order-md-1 { + order: 1 !important; + } + .rz-order-md-2 { + order: 2 !important; + } + .rz-order-md-3 { + order: 3 !important; + } + .rz-order-md-4 { + order: 4 !important; + } + .rz-order-md-5 { + order: 5 !important; + } + .rz-order-md-6 { + order: 6 !important; + } + .rz-order-md-7 { + order: 7 !important; + } + .rz-order-md-8 { + order: 8 !important; + } + .rz-order-md-9 { + order: 9 !important; + } + .rz-order-md-10 { + order: 10 !important; + } + .rz-order-md-11 { + order: 11 !important; + } + .rz-order-md-12 { + order: 12 !important; + } +} +@media (min-width: 1280px) { + .rz-order-lg-first { + order: -1 !important; + } + .rz-order-lg-last { + order: 13 !important; + } + .rz-order-lg-0 { + order: 0 !important; + } + .rz-order-lg-1 { + order: 1 !important; + } + .rz-order-lg-2 { + order: 2 !important; + } + .rz-order-lg-3 { + order: 3 !important; + } + .rz-order-lg-4 { + order: 4 !important; + } + .rz-order-lg-5 { + order: 5 !important; + } + .rz-order-lg-6 { + order: 6 !important; + } + .rz-order-lg-7 { + order: 7 !important; + } + .rz-order-lg-8 { + order: 8 !important; + } + .rz-order-lg-9 { + order: 9 !important; + } + .rz-order-lg-10 { + order: 10 !important; + } + .rz-order-lg-11 { + order: 11 !important; + } + .rz-order-lg-12 { + order: 12 !important; + } +} +@media (min-width: 1920px) { + .rz-order-xl-first { + order: -1 !important; + } + .rz-order-xl-last { + order: 13 !important; + } + .rz-order-xl-0 { + order: 0 !important; + } + .rz-order-xl-1 { + order: 1 !important; + } + .rz-order-xl-2 { + order: 2 !important; + } + .rz-order-xl-3 { + order: 3 !important; + } + .rz-order-xl-4 { + order: 4 !important; + } + .rz-order-xl-5 { + order: 5 !important; + } + .rz-order-xl-6 { + order: 6 !important; + } + .rz-order-xl-7 { + order: 7 !important; + } + .rz-order-xl-8 { + order: 8 !important; + } + .rz-order-xl-9 { + order: 9 !important; + } + .rz-order-xl-10 { + order: 10 !important; + } + .rz-order-xl-11 { + order: 11 !important; + } + .rz-order-xl-12 { + order: 12 !important; + } +} +@media (min-width: 2560px) { + .rz-order-xx-first { + order: -1 !important; + } + .rz-order-xx-last { + order: 13 !important; + } + .rz-order-xx-0 { + order: 0 !important; + } + .rz-order-xx-1 { + order: 1 !important; + } + .rz-order-xx-2 { + order: 2 !important; + } + .rz-order-xx-3 { + order: 3 !important; + } + .rz-order-xx-4 { + order: 4 !important; + } + .rz-order-xx-5 { + order: 5 !important; + } + .rz-order-xx-6 { + order: 6 !important; + } + .rz-order-xx-7 { + order: 7 !important; + } + .rz-order-xx-8 { + order: 8 !important; + } + .rz-order-xx-9 { + order: 9 !important; + } + .rz-order-xx-10 { + order: 10 !important; + } + .rz-order-xx-11 { + order: 11 !important; + } + .rz-order-xx-12 { + order: 12 !important; + } +} +.rz-form-field-helper { + padding: var(--rz-form-field-helper-padding); +} + +.rz-form-field-content { + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); + box-shadow: var(--rz-form-field-shadow); + transition: var(--rz-input-transition); +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + flex: 1; +} +.rz-form-field-content .rz-form-field-start, +.rz-form-field-content .rz-form-field-end { + display: flex; + flex: 0; + align-items: center; + white-space: nowrap; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); +} + +.rz-form-field { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + vertical-align: top; +} +.rz-form-field:hover .rz-form-field-content { + box-shadow: var(--rz-form-field-hover-shadow); +} +.rz-form-field.rz-state-focused .rz-form-field-content { + box-shadow: var(--rz-form-field-focus-shadow); +} +.rz-form-field.rz-state-disabled .rz-form-field-content { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); +} +.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content { + border: var(--rz-input-disabled-border); +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled { + color: var(--rz-input-disabled-color); + opacity: 1; +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled::placeholder, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +.rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { + margin: 0; + --rz-input-height: var(--rz-form-field-filled-height); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); + --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); + box-shadow: var(--rz-input-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { + top: calc(var(--rz-numeric-button-offset) + 1rem); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end { + padding-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-textarea, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-textarea { + margin-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-datepicker-trigger, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-datepicker-trigger { + top: calc(50% + 0.4375rem); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-input-hover-border); + box-shadow: var(--rz-input-hover-shadow); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content { + border: var(--rz-input-focus-border); + box-shadow: var(--rz-input-focus-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content { + border: var(--rz-form-field-filled-border); + border-radius: var(--rz-form-field-filled-border-radius); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-filled .rz-form-field-content:after { + display: var(--rz-form-field-filled-underline-display); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-form-field-filled-hover-border); + box-shadow: var(--rz-form-field-filled-hover-shadow); + background-color: var(--rz-form-field-filled-hover-background-color); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused .rz-form-field-content, .rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused:hover .rz-form-field-content { + border: var(--rz-form-field-filled-focus-border); + box-shadow: var(--rz-form-field-filled-focus-shadow); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-text .rz-form-field-content { + border-color: transparent; + box-shadow: none; + --rz-input-background-color: transparent; + --rz-input-border-radius: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; + --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); +} +.rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { + padding: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-start { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-end { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { + content: ""; + position: absolute; + z-index: 1; + inset-inline-start: 50%; + inset-inline-end: 50%; + bottom: calc(-1 * var(--rz-border-width)); + height: calc(var(--rz-border-width) + 1px); + border: var(--rz-input-focus-border); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { + content: ""; + position: absolute; + inset: calc(-1 * var(--rz-border-width)); + top: auto; + height: var(--rz-border-width); + border-bottom: var(--rz-input-border); +} +.rz-form-field.rz-variant-filled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-hover-border); +} +.rz-form-field.rz-variant-filled.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-filled.rz-state-disabled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-disabled-border); +} +.rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); + border: var(--rz-input-focus-border); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); +} +.rz-form-field .rz-numeric-button { + display: none; +} +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { + display: block; +} + +.rz-form-field-label { + position: absolute; + pointer-events: none; + padding: var(--rz-form-field-label-padding); + inset-block-start: 50%; + inset-inline-end: auto; + border-radius: var(--rz-border-radius); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); + max-width: calc(100% - 1.5rem); + transform: translate(0, -50%); + background-color: transparent; + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); +} +.rz-state-disabled .rz-form-field-content > .rz-form-field-label { + color: var(--rz-input-disabled-color) !important; +} +.rz-form-field-label:last-child { + inset-inline-end: 1.5rem; +} +.rz-textarea ~ .rz-form-field-label { + inset-block-start: var(--rz-form-field-label-textarea-top); + transform: translate(0, 0); +} +.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { + transform: translate(0, 0.625rem); +} +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; + transform: translate(0, 0); + color: var(--rz-input-placeholder-color); + background-color: var(--rz-form-field-label-floating-background-color); + font-size: 0.75rem; + line-height: 1rem; + max-width: calc(100% - 1.5rem); +} +.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + background-color: inherit !important; +} +.invalid ~ .rz-form-field-label { + color: var(--rz-danger) !important; +} +.rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} + +.rz-timeline { + box-sizing: border-box; + display: flex; +} +.rz-timeline.rz-timeline-column { + flex-direction: column; +} +.rz-timeline.rz-timeline-column .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row { + flex-direction: row; +} +.rz-timeline.rz-timeline-row .rz-timeline-item { + flex-direction: column; + justify-content: end; + width: 100%; +} +.rz-timeline.rz-timeline-row.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: column-reverse; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse .rz-timeline-item { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column; + justify-content: end; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item { + flex-direction: column; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-end { + display: none; +} + +.rz-timeline-item { + display: flex; + padding: var(--rz-timeline-item-padding); + position: relative; +} +.rz-timeline-align-items-center .rz-timeline-item { + align-items: center; +} +.rz-timeline-align-items-normal .rz-timeline-item { + align-items: normal; +} +.rz-timeline-align-items-start .rz-timeline-item { + align-items: start; +} +.rz-timeline-align-items-end .rz-timeline-item { + align-items: end; +} +.rz-timeline-align-items-stretch .rz-timeline-item { + align-items: stretch; +} +.rz-timeline-item:before { + content: ""; + position: absolute; + background-color: var(--rz-timeline-line-color); +} +.rz-timeline-column .rz-timeline-item:before { + width: var(--rz-timeline-line-width); + top: 0; + bottom: 0; + left: calc(50% - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline-column .rz-timeline-item:first-child:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-top-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + top: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column .rz-timeline-item:last-child:before { + bottom: calc(50% - var(--rz-timeline-line-width) / 2); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + bottom: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + bottom: auto; + left: 0; + right: 0; + height: var(--rz-timeline-line-width); +} +.rz-timeline-row .rz-timeline-item:first-child:before { + left: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + left: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:last-child:before { + right: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-right-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + right: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} + +.rz-timeline-content-start { + text-align: center; +} +.rz-timeline-column .rz-timeline-content-start { + flex: 1 1 auto; + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-content-end { + flex: 1 1 auto; + text-align: center; +} +.rz-timeline-column .rz-timeline-content-end { + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} +.rz-timeline-row .rz-timeline-content-end { + max-height: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-axis { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 var(--rz-timeline-axis-size); +} +.rz-timeline-column .rz-timeline-axis { + width: var(--rz-timeline-axis-size); +} +.rz-timeline-row .rz-timeline-axis { + height: var(--rz-timeline-axis-size); +} + +.rz-timeline-point { + position: relative; + display: flex; + flex: 0 1 var(--rz-timeline-point-size); + align-items: center; + justify-content: center; + height: var(--rz-timeline-point-size); + width: var(--rz-timeline-point-size); + border: var(--rz-timeline-point-border); + border-radius: var(--rz-timeline-point-border-radius); + background-color: var(--rz-timeline-point-background-color); + color: var(--rz-timeline-point-color); +} + +.rz-timeline-point-outlined { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border-color: var(--rz-timeline-point-background-color); +} + +.rz-timeline-point-flat { + border: 0; +} + +.rz-timeline-point-text { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border: 0; +} + +.rz-timeline-point-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} + +.rz-timeline-point-outlined.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); + border-color: var(--rz-primary); +} + +.rz-timeline-point-text.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); +} + +.rz-timeline-point-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} + +.rz-timeline-point-outlined.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); + border-color: var(--rz-secondary); +} + +.rz-timeline-point-text.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); +} + +.rz-timeline-point-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} + +.rz-timeline-point-outlined.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); + border-color: var(--rz-info); +} + +.rz-timeline-point-text.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); +} + +.rz-timeline-point-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} + +.rz-timeline-point-outlined.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); + border-color: var(--rz-warning); +} + +.rz-timeline-point-text.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); +} + +.rz-timeline-point-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} + +.rz-timeline-point-outlined.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); + border-color: var(--rz-success); +} + +.rz-timeline-point-text.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); +} + +.rz-timeline-point-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); + border-color: var(--rz-base-700); +} + +.rz-timeline-point-text.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); +} + +.rz-timeline-point-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); + border-color: var(--rz-base-700); +} + +.rz-timeline-point-text.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); +} + +.rz-timeline-point-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); + border-color: var(--rz-base-900); +} + +.rz-timeline-point-text.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); +} + +.rz-timeline-axis-lg { + --rz-timeline-point-size: 3rem; +} +.rz-timeline-axis-lg .rzi { + font-size: 2rem; +} + +.rz-timeline-axis-md { + --rz-timeline-point-size: 1.5rem; +} +.rz-timeline-axis-md .rzi { + font-size: 1rem; +} + +.rz-timeline-axis-sm { + --rz-timeline-point-size: 1rem; +} +.rz-timeline-axis-sm .rzi { + font-size: 0.625rem; +} + +.rz-timeline-axis-xs { + --rz-timeline-point-size: 0.75rem; +} +.rz-timeline-axis-xs .rzi { + font-size: 0.5rem; +} + +.rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { + width: 100%; + height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #466791; + --rz-base-50: #ffffff; + --rz-base-100: #f3f5f7; + --rz-base-200: #ebeef2; + --rz-base-300: #d9e1ea; + --rz-base-400: #87a4c4; + --rz-base-500: #7293b6; + --rz-base-600: #466791; + --rz-base-700: #395374; + --rz-base-800: #30445f; + --rz-base-900: #2b3a50; + --rz-base-light: #87a4c4; + --rz-base-lighter: #ffffff; + --rz-base-dark: #395374; + --rz-base-darker: #2b3a50; + --rz-primary: #d64d42; + --rz-primary-light: #db6259; + --rz-primary-lighter: rgba(214, 77, 66, 0.16); + --rz-primary-dark: #c5473d; + --rz-primary-darker: #a13a32; + --rz-secondary: #3ba5fc; + --rz-secondary-light: #53b0fc; + --rz-secondary-lighter: rgba(59, 165, 252, 0.2); + --rz-secondary-dark: #3698e8; + --rz-secondary-darker: #2c7cbd; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #ffffff; + --rz-on-base-light: #2b3a50; + --rz-on-base-lighter: #2b3a50; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #d64d42; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #3ba5fc; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-100); + --rz-text-secondary-color: var(--rz-base-300); + --rz-text-tertiary-color: var(--rz-base-400); + --rz-text-disabled-color: var(--rz-base-600); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); + /* Border Radius */ + --rz-border-radius: 0; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-700); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-600); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-700); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-700); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-datalist-item-border: none; + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-800); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-700); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-900); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-700); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-700); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-700); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-700); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-700); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-700); + --rz-form-field-filled-hover-background-color: var(--rz-base-700); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-900); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-secondary-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-800); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-900); + --rz-grid-filter-background-color: var(--rz-base-800); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-secondary-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-800); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-700); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-900); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-700); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-900); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-800); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-700); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-700); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-background-color); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-700); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-700); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-900); + --rz-pager-numeric-button-selected-color: var(--rz-text-contrast-color); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-900); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-700); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-700); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-700); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-900); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-700); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-700); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-900); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-700); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: none; + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-900); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-base-600); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-700); + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: var(--rz-base-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-900); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-dark); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-700); + --rz-slider-disabled-range-border: var(--rz-border-base-700); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-700); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-700); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 0.8; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-700); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: none; + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-700); + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-800); + --rz-tabs-tab-hover-color: var(--rz-text-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-600); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-600); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: 0; + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-700); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/humanistic-dark-wcag.css b/_content/Radzen.Blazor/css/humanistic-dark-wcag.css new file mode 100755 index 0000000..ed6897f --- /dev/null +++ b/_content/Radzen.Blazor/css/humanistic-dark-wcag.css @@ -0,0 +1,87 @@ +:root, +.rz-humanistic-dark { + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #466791; + --rz-base-50: #ffffff; + --rz-base-100: #f3f5f7; + --rz-base-200: #ebeef2; + --rz-base-300: #d9e1ea; + --rz-base-400: #87a4c4; + --rz-base-500: #7293b6; + --rz-base-600: #466791; + --rz-base-700: #395374; + --rz-base-800: #30445f; + --rz-base-900: #2b3a50; + --rz-base-light: #87a4c4; + --rz-base-lighter: #ffffff; + --rz-base-dark: #395374; + --rz-base-darker: #2b3a50; + --rz-primary: #a9352d; + --rz-primary-light: #b34d46; + --rz-primary-lighter: rgba(169, 53, 45, 0.16); + --rz-primary-dark: #9b3129; + --rz-primary-darker: #7f2822; + --rz-secondary: #005fad; + --rz-secondary-light: #1f72b7; + --rz-secondary-lighter: rgba(0, 95, 173, 0.2); + --rz-secondary-dark: #00579f; + --rz-secondary-darker: #004782; + --rz-info: #026969; + --rz-info-light: #2a8181; + --rz-info-lighter: rgba(2, 105, 105, 0.2); + --rz-info-dark: #025858; + --rz-info-darker: #024f4f; + --rz-success: #0f6c23; + --rz-success-light: #358446; + --rz-success-lighter: rgba(15, 108, 35, 0.16); + --rz-success-dark: #0d5b1d; + --rz-success-darker: #0b511a; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #b2242e; + --rz-danger-light: #be474f; + --rz-danger-lighter: rgba(178, 36, 46, 0.2); + --rz-danger-dark: #961e27; + --rz-danger-darker: #861b23; + --rz-on-base: #ffffff; + --rz-on-base-light: #2b3a50; + --rz-on-base-lighter: #2b3a50; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #a9352d; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #005fad; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #026969; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #0f6c23; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #000000; + --rz-on-warning-light: #000000; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #000000; + --rz-on-warning-darker: #000000; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #b2242e; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-link-color: #73bce2; + --rz-link-hover-color: #58abd8; +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/humanistic-dark.css b/_content/Radzen.Blazor/css/humanistic-dark.css new file mode 100755 index 0000000..8cdb3af --- /dev/null +++ b/_content/Radzen.Blazor/css/humanistic-dark.css @@ -0,0 +1,21349 @@ +@charset "UTF-8"; +.rz-slot-minor { + border-top: 1px dotted var(--rz-scheduler-minor-border-color) !important; +} + +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +.rz-text-title-color { + color: var(--rz-base-50) !important; +} + +.rz-text-color { + color: var(--rz-base-100) !important; +} + +.rz-text-secondary-color { + color: var(--rz-base-300) !important; +} + +.rz-text-tertiary-color { + color: var(--rz-base-400) !important; +} + +.rz-text-disabled-color { + color: var(--rz-base-600) !important; +} + +.rz-text-contrast-color { + color: var(--rz-white) !important; +} + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; +} + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; +} + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; +} + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; +} + +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; +} + +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; +} + +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; +} + +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; +} + +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; +} + +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; +} + +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; +} + +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; +} + +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; +} + +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; +} + +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; +} + +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; +} + +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; +} + +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; +} + +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; +} + +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; +} + +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; +} + +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; +} + +.rz-display-none { + display: none !important; +} + +.rz-display-block { + display: block !important; +} + +.rz-display-inline { + display: inline !important; +} + +.rz-display-inline-block { + display: inline-block !important; +} + +.rz-display-flex { + display: flex !important; +} + +.rz-display-inline-flex { + display: inline-flex !important; +} + +.rz-display-grid { + display: grid !important; +} + +.rz-display-inline-grid { + display: inline-grid !important; +} + +@media (min-width: 576px) { + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 768px) { + .rz-display-sm-none { + display: none !important; + } + .rz-display-sm-block { + display: block !important; + } + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} + +.rz-justify-content-stretch { + justify-content: stretch !important; +} + +.rz-justify-content-center { + justify-content: center !important; +} + +.rz-justify-content-start { + justify-content: start !important; +} + +.rz-justify-content-end { + justify-content: end !important; +} + +.rz-justify-content-flex-start { + justify-content: flex-start !important; +} + +.rz-justify-content-flex-end { + justify-content: flex-end !important; +} + +.rz-justify-content-left { + justify-content: left !important; +} + +.rz-justify-content-right { + justify-content: right !important; +} + +.rz-justify-content-space-between { + justify-content: space-between !important; +} + +.rz-justify-content-space-around { + justify-content: space-around !important; +} + +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.rz-align-items-normal { + align-items: normal !important; +} + +.rz-align-items-stretch { + align-items: stretch !important; +} + +.rz-align-items-center { + align-items: center !important; +} + +.rz-align-items-start { + align-items: start !important; +} + +.rz-align-items-end { + align-items: end !important; +} + +.rz-align-items-flex-start { + align-items: flex-start !important; +} + +.rz-align-items-flex-end { + align-items: flex-end !important; +} + +.rz-color-white { + color: var(--rz-white) !important; +} + +.rz-color-black { + color: var(--rz-black) !important; +} + +.rz-color-base { + color: var(--rz-base) !important; +} + +.rz-color-base-50 { + color: var(--rz-base-50) !important; +} + +.rz-color-base-100 { + color: var(--rz-base-100) !important; +} + +.rz-color-base-200 { + color: var(--rz-base-200) !important; +} + +.rz-color-base-300 { + color: var(--rz-base-300) !important; +} + +.rz-color-base-400 { + color: var(--rz-base-400) !important; +} + +.rz-color-base-500 { + color: var(--rz-base-500) !important; +} + +.rz-color-base-600 { + color: var(--rz-base-600) !important; +} + +.rz-color-base-700 { + color: var(--rz-base-700) !important; +} + +.rz-color-base-800 { + color: var(--rz-base-800) !important; +} + +.rz-color-base-900 { + color: var(--rz-base-900) !important; +} + +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + +.rz-color-primary { + color: var(--rz-primary) !important; +} + +.rz-color-primary-light { + color: var(--rz-primary-light) !important; +} + +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; +} + +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; +} + +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; +} + +.rz-color-secondary { + color: var(--rz-secondary) !important; +} + +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; +} + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; +} + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; +} + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; +} + +.rz-color-info { + color: var(--rz-info) !important; +} + +.rz-color-info-light { + color: var(--rz-info-light) !important; +} + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; +} + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; +} + +.rz-color-info-darker { + color: var(--rz-info-darker) !important; +} + +.rz-color-success { + color: var(--rz-success) !important; +} + +.rz-color-success-light { + color: var(--rz-success-light) !important; +} + +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; +} + +.rz-color-success-dark { + color: var(--rz-success-dark) !important; +} + +.rz-color-success-darker { + color: var(--rz-success-darker) !important; +} + +.rz-color-warning { + color: var(--rz-warning) !important; +} + +.rz-color-warning-light { + color: var(--rz-warning-light) !important; +} + +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; +} + +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; +} + +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; +} + +.rz-color-danger { + color: var(--rz-danger) !important; +} + +.rz-color-danger-light { + color: var(--rz-danger-light) !important; +} + +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; +} + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; +} + +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; +} + +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + +.rz-color-on-primary { + color: var(--rz-on-primary) !important; +} + +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; +} + +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; +} + +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; +} + +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; +} + +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; +} + +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; +} + +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; +} + +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; +} + +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; +} + +.rz-color-on-info { + color: var(--rz-on-info) !important; +} + +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; +} + +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; +} + +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; +} + +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; +} + +.rz-color-on-success { + color: var(--rz-on-success) !important; +} + +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; +} + +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; +} + +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; +} + +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; +} + +.rz-color-on-warning { + color: var(--rz-on-warning) !important; +} + +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; +} + +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; +} + +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; +} + +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; +} + +.rz-color-on-danger { + color: var(--rz-on-danger) !important; +} + +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; +} + +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; +} + +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; +} + +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; +} + +.rz-color-series-1 { + color: var(--rz-series-1) !important; +} + +.rz-color-series-2 { + color: var(--rz-series-2) !important; +} + +.rz-color-series-3 { + color: var(--rz-series-3) !important; +} + +.rz-color-series-4 { + color: var(--rz-series-4) !important; +} + +.rz-color-series-5 { + color: var(--rz-series-5) !important; +} + +.rz-color-series-6 { + color: var(--rz-series-6) !important; +} + +.rz-color-series-7 { + color: var(--rz-series-7) !important; +} + +.rz-color-series-8 { + color: var(--rz-series-8) !important; +} + +.rz-color-series-9 { + color: var(--rz-series-9) !important; +} + +.rz-color-series-10 { + color: var(--rz-series-10) !important; +} + +.rz-color-series-11 { + color: var(--rz-series-11) !important; +} + +.rz-color-series-12 { + color: var(--rz-series-12) !important; +} + +.rz-color-series-13 { + color: var(--rz-series-13) !important; +} + +.rz-color-series-14 { + color: var(--rz-series-14) !important; +} + +.rz-color-series-15 { + color: var(--rz-series-15) !important; +} + +.rz-color-series-16 { + color: var(--rz-series-16) !important; +} + +.rz-color-series-17 { + color: var(--rz-series-17) !important; +} + +.rz-color-series-18 { + color: var(--rz-series-18) !important; +} + +.rz-color-series-19 { + color: var(--rz-series-19) !important; +} + +.rz-color-series-20 { + color: var(--rz-series-20) !important; +} + +.rz-color-series-21 { + color: var(--rz-series-21) !important; +} + +.rz-color-series-22 { + color: var(--rz-series-22) !important; +} + +.rz-color-series-23 { + color: var(--rz-series-23) !important; +} + +.rz-color-series-24 { + color: var(--rz-series-24) !important; +} + +.rz-background-color-white { + background-color: var(--rz-white) !important; +} + +.rz-background-color-black { + background-color: var(--rz-black) !important; +} + +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; +} + +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; +} + +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; +} + +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; +} + +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; +} + +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; +} + +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; +} + +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; +} + +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; +} + +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; +} + +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + +.rz-background-color-primary { + background-color: var(--rz-primary) !important; +} + +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; +} + +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; +} + +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; +} + +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; +} + +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; +} + +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; +} + +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; +} + +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; +} + +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; +} + +.rz-background-color-info { + background-color: var(--rz-info) !important; +} + +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; +} + +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; +} + +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; +} + +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; +} + +.rz-background-color-success { + background-color: var(--rz-success) !important; +} + +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; +} + +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; +} + +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; +} + +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; +} + +.rz-background-color-warning { + background-color: var(--rz-warning) !important; +} + +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; +} + +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; +} + +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; +} + +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; +} + +.rz-background-color-danger { + background-color: var(--rz-danger) !important; +} + +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; +} + +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; +} + +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; +} + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; +} + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; +} + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; +} + +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; +} + +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; +} + +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; +} + +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; +} + +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; +} + +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; +} + +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; +} + +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; +} + +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; +} + +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; +} + +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; +} + +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; +} + +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; +} + +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; +} + +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; +} + +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; +} + +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; +} + +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; +} + +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; +} + +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; +} + +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; +} + +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; +} + +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; +} + +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; +} + +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; +} + +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; +} + +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; +} + +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; +} + +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; +} + +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; +} + +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; +} + +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; +} + +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; +} + +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; +} + +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; +} + +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; +} + +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; +} + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; +} + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; +} + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; +} + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; +} + +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; +} + +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; +} + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; +} + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; +} + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; +} + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; +} + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; +} + +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; +} + +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; +} + +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; +} + +.rz-border-color-white { + border-color: var(--rz-white) !important; +} + +.rz-border-color-black { + border-color: var(--rz-black) !important; +} + +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; +} + +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; +} + +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; +} + +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; +} + +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; +} + +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; +} + +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; +} + +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; +} + +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; +} + +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; +} + +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + +.rz-border-color-primary { + border-color: var(--rz-primary) !important; +} + +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; +} + +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; +} + +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-color-info { + border-color: var(--rz-info) !important; +} + +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; +} + +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; +} + +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; +} + +.rz-border-color-success { + border-color: var(--rz-success) !important; +} + +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; +} + +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; +} + +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; +} + +.rz-border-color-warning { + border-color: var(--rz-warning) !important; +} + +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; +} + +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-color-danger { + border-color: var(--rz-danger) !important; +} + +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; +} + +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; +} + +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; +} + +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; +} + +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; +} + +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; +} + +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; +} + +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; +} + +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; +} + +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; +} + +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; +} + +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; +} + +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; +} + +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; +} + +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; +} + +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; +} + +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; +} + +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; +} + +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; +} + +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; +} + +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; +} + +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; +} + +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; +} + +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; +} + +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; +} + +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; +} + +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; +} + +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; +} + +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; +} + +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; +} + +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; +} + +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; +} + +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; +} + +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; +} + +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; +} + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; +} + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; +} + +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; +} + +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; +} + +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; +} + +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; +} + +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; +} + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; +} + +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; +} + +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; +} + +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; +} + +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; +} + +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; +} + +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; +} + +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; +} + +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; +} + +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; +} + +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; +} + +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; +} + +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} + +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; +} + +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; +} + +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; +} + +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; +} + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; +} + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; +} + +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; +} + +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; +} + +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; +} + +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; +} + +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; +} + +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; +} + +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; +} + +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; +} + +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; +} + +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; +} + +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; +} + +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; +} + +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; +} + +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; +} + +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; +} + +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; +} + +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; +} + +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; +} + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; +} + +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; +} + +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; +} + +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; +} + +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; +} + +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; +} + +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; +} + +.rz-ripple { + position: relative; + overflow: hidden; +} +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +body { + margin: 0; +} + +.rz-m-0 { + margin: 0 !important; +} + +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; +} + +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; +} + +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; +} + +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; +} + +.rz-ms-0 { + margin-inline-start: 0 !important; +} + +.rz-me-0 { + margin-inline-end: 0 !important; +} + +.rz-m-05 { + margin: 0.125rem !important; +} + +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; +} + +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; +} + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; +} + +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; +} + +.rz-ms-05 { + margin-inline-start: 0.125rem !important; +} + +.rz-me-05 { + margin-inline-end: 0.125rem !important; +} + +.rz-m-1 { + margin: 0.25rem !important; +} + +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; +} + +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; +} + +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; +} + +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; +} + +.rz-ms-1 { + margin-inline-start: 0.25rem !important; +} + +.rz-me-1 { + margin-inline-end: 0.25rem !important; +} + +.rz-m-2 { + margin: 0.5rem !important; +} + +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; +} + +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; +} + +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; +} + +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; +} + +.rz-ms-2 { + margin-inline-start: 0.5rem !important; +} + +.rz-me-2 { + margin-inline-end: 0.5rem !important; +} + +.rz-m-3 { + margin: 0.75rem !important; +} + +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; +} + +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; +} + +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; +} + +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; +} + +.rz-ms-3 { + margin-inline-start: 0.75rem !important; +} + +.rz-me-3 { + margin-inline-end: 0.75rem !important; +} + +.rz-m-4 { + margin: 1rem !important; +} + +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; +} + +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; +} + +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; +} + +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; +} + +.rz-ms-4 { + margin-inline-start: 1rem !important; +} + +.rz-me-4 { + margin-inline-end: 1rem !important; +} + +.rz-m-5 { + margin: 1.25rem !important; +} + +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; +} + +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; +} + +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; +} + +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; +} + +.rz-ms-5 { + margin-inline-start: 1.25rem !important; +} + +.rz-me-5 { + margin-inline-end: 1.25rem !important; +} + +.rz-m-6 { + margin: 1.5rem !important; +} + +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; +} + +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; +} + +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; +} + +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; +} + +.rz-ms-6 { + margin-inline-start: 1.5rem !important; +} + +.rz-me-6 { + margin-inline-end: 1.5rem !important; +} + +.rz-m-7 { + margin: 1.75rem !important; +} + +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; +} + +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; +} + +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; +} + +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; +} + +.rz-ms-7 { + margin-inline-start: 1.75rem !important; +} + +.rz-me-7 { + margin-inline-end: 1.75rem !important; +} + +.rz-m-8 { + margin: 2rem !important; +} + +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; +} + +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; +} + +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; +} + +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; +} + +.rz-ms-8 { + margin-inline-start: 2rem !important; +} + +.rz-me-8 { + margin-inline-end: 2rem !important; +} + +.rz-m-9 { + margin: 2.25rem !important; +} + +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; +} + +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; +} + +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; +} + +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; +} + +.rz-ms-9 { + margin-inline-start: 2.25rem !important; +} + +.rz-me-9 { + margin-inline-end: 2.25rem !important; +} + +.rz-m-10 { + margin: 2.5rem !important; +} + +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; +} + +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; +} + +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; +} + +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; +} + +.rz-ms-10 { + margin-inline-start: 2.5rem !important; +} + +.rz-me-10 { + margin-inline-end: 2.5rem !important; +} + +.rz-m-11 { + margin: 2.75rem !important; +} + +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; +} + +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; +} + +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; +} + +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; +} + +.rz-ms-11 { + margin-inline-start: 2.75rem !important; +} + +.rz-me-11 { + margin-inline-end: 2.75rem !important; +} + +.rz-m-12 { + margin: 3rem !important; +} + +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; +} + +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; +} + +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; +} + +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; +} + +.rz-ms-12 { + margin-inline-start: 3rem !important; +} + +.rz-me-12 { + margin-inline-end: 3rem !important; +} + +.rz-p-0 { + padding: 0 !important; +} + +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; +} + +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; +} + +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; +} + +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; +} + +.rz-ps-0 { + padding-inline-start: 0 !important; +} + +.rz-pe-0 { + padding-inline-end: 0 !important; +} + +.rz-p-05 { + padding: 0.125rem !important; +} + +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; +} + +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; +} + +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; +} + +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; +} + +.rz-ps-05 { + padding-inline-start: 0.125rem !important; +} + +.rz-pe-05 { + padding-inline-end: 0.125rem !important; +} + +.rz-p-1 { + padding: 0.25rem !important; +} + +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; +} + +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; +} + +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; +} + +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; +} + +.rz-ps-1 { + padding-inline-start: 0.25rem !important; +} + +.rz-pe-1 { + padding-inline-end: 0.25rem !important; +} + +.rz-p-2 { + padding: 0.5rem !important; +} + +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; +} + +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; +} + +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; +} + +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; +} + +.rz-ps-2 { + padding-inline-start: 0.5rem !important; +} + +.rz-pe-2 { + padding-inline-end: 0.5rem !important; +} + +.rz-p-3 { + padding: 0.75rem !important; +} + +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; +} + +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; +} + +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; +} + +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; +} + +.rz-ps-3 { + padding-inline-start: 0.75rem !important; +} + +.rz-pe-3 { + padding-inline-end: 0.75rem !important; +} + +.rz-p-4 { + padding: 1rem !important; +} + +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; +} + +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; +} + +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; +} + +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; +} + +.rz-ps-4 { + padding-inline-start: 1rem !important; +} + +.rz-pe-4 { + padding-inline-end: 1rem !important; +} + +.rz-p-5 { + padding: 1.25rem !important; +} + +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; +} + +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; +} + +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; +} + +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; +} + +.rz-ps-5 { + padding-inline-start: 1.25rem !important; +} + +.rz-pe-5 { + padding-inline-end: 1.25rem !important; +} + +.rz-p-6 { + padding: 1.5rem !important; +} + +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; +} + +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; +} + +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; +} + +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; +} + +.rz-ps-6 { + padding-inline-start: 1.5rem !important; +} + +.rz-pe-6 { + padding-inline-end: 1.5rem !important; +} + +.rz-p-7 { + padding: 1.75rem !important; +} + +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; +} + +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; +} + +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; +} + +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; +} + +.rz-ps-7 { + padding-inline-start: 1.75rem !important; +} + +.rz-pe-7 { + padding-inline-end: 1.75rem !important; +} + +.rz-p-8 { + padding: 2rem !important; +} + +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; +} + +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; +} + +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; +} + +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; +} + +.rz-ps-8 { + padding-inline-start: 2rem !important; +} + +.rz-pe-8 { + padding-inline-end: 2rem !important; +} + +.rz-p-9 { + padding: 2.25rem !important; +} + +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; +} + +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; +} + +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; +} + +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; +} + +.rz-ps-9 { + padding-inline-start: 2.25rem !important; +} + +.rz-pe-9 { + padding-inline-end: 2.25rem !important; +} + +.rz-p-10 { + padding: 2.5rem !important; +} + +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; +} + +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; +} + +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; +} + +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; +} + +.rz-ps-10 { + padding-inline-start: 2.5rem !important; +} + +.rz-pe-10 { + padding-inline-end: 2.5rem !important; +} + +.rz-p-11 { + padding: 2.75rem !important; +} + +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; +} + +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; +} + +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; +} + +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; +} + +.rz-ps-11 { + padding-inline-start: 2.75rem !important; +} + +.rz-pe-11 { + padding-inline-end: 2.75rem !important; +} + +.rz-p-12 { + padding: 3rem !important; +} + +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; +} + +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; +} + +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; +} + +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; +} + +.rz-ps-12 { + padding-inline-start: 3rem !important; +} + +.rz-pe-12 { + padding-inline-end: 3rem !important; +} + +.rz-m-auto { + margin: auto !important; +} + +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; +} + +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; +} + +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; +} + +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; +} + +.rz-ms-auto { + margin-inline-start: auto !important; +} + +.rz-me-auto { + margin-inline-end: auto !important; +} + +@media (min-width: 576px) { + .rz-m-xs-0 { + margin: 0 !important; + } + .rz-my-xs-0, + .rz-mt-xs-0 { + margin-top: 0 !important; + } + .rz-mx-xs-0, + .rz-mr-xs-0 { + margin-right: 0 !important; + } + .rz-my-xs-0, + .rz-mb-xs-0 { + margin-bottom: 0 !important; + } + .rz-mx-xs-0, + .rz-ml-xs-0 { + margin-left: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-end: 0 !important; + } + .rz-m-xs-05 { + margin: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mt-xs-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-mr-xs-05 { + margin-right: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mb-xs-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-ml-xs-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xs-1 { + margin: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mt-xs-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-mr-xs-1 { + margin-right: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mb-xs-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-ml-xs-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xs-2 { + margin: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mt-xs-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-mr-xs-2 { + margin-right: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mb-xs-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-ml-xs-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xs-3 { + margin: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mt-xs-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-mr-xs-3 { + margin-right: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mb-xs-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-ml-xs-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xs-4 { + margin: 1rem !important; + } + .rz-my-xs-4, + .rz-mt-xs-4 { + margin-top: 1rem !important; + } + .rz-mx-xs-4, + .rz-mr-xs-4 { + margin-right: 1rem !important; + } + .rz-my-xs-4, + .rz-mb-xs-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xs-4, + .rz-ml-xs-4 { + margin-left: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xs-5 { + margin: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mt-xs-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-mr-xs-5 { + margin-right: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mb-xs-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-ml-xs-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xs-6 { + margin: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mt-xs-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-mr-xs-6 { + margin-right: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mb-xs-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-ml-xs-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xs-7 { + margin: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mt-xs-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-mr-xs-7 { + margin-right: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mb-xs-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-ml-xs-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xs-8 { + margin: 2rem !important; + } + .rz-my-xs-8, + .rz-mt-xs-8 { + margin-top: 2rem !important; + } + .rz-mx-xs-8, + .rz-mr-xs-8 { + margin-right: 2rem !important; + } + .rz-my-xs-8, + .rz-mb-xs-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xs-8, + .rz-ml-xs-8 { + margin-left: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xs-9 { + margin: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mt-xs-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-mr-xs-9 { + margin-right: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mb-xs-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-ml-xs-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xs-10 { + margin: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mt-xs-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-mr-xs-10 { + margin-right: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mb-xs-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-ml-xs-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xs-11 { + margin: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mt-xs-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-mr-xs-11 { + margin-right: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mb-xs-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-ml-xs-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xs-12 { + margin: 3rem !important; + } + .rz-my-xs-12, + .rz-mt-xs-12 { + margin-top: 3rem !important; + } + .rz-mx-xs-12, + .rz-mr-xs-12 { + margin-right: 3rem !important; + } + .rz-my-xs-12, + .rz-mb-xs-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xs-12, + .rz-ml-xs-12 { + margin-left: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xs-0 { + padding: 0 !important; + } + .rz-py-xs-0, + .rz-pt-xs-0 { + padding-top: 0 !important; + } + .rz-px-xs-0, + .rz-pr-xs-0 { + padding-right: 0 !important; + } + .rz-py-xs-0, + .rz-pb-xs-0 { + padding-bottom: 0 !important; + } + .rz-px-xs-0, + .rz-pl-xs-0 { + padding-left: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-end: 0 !important; + } + .rz-p-xs-05 { + padding: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pt-xs-05 { + padding-top: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pr-xs-05 { + padding-right: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pb-xs-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pl-xs-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xs-1 { + padding: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pt-xs-1 { + padding-top: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pr-xs-1 { + padding-right: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pb-xs-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pl-xs-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xs-2 { + padding: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pt-xs-2 { + padding-top: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pr-xs-2 { + padding-right: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pb-xs-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pl-xs-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xs-3 { + padding: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pt-xs-3 { + padding-top: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pr-xs-3 { + padding-right: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pb-xs-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pl-xs-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xs-4 { + padding: 1rem !important; + } + .rz-py-xs-4, + .rz-pt-xs-4 { + padding-top: 1rem !important; + } + .rz-px-xs-4, + .rz-pr-xs-4 { + padding-right: 1rem !important; + } + .rz-py-xs-4, + .rz-pb-xs-4 { + padding-bottom: 1rem !important; + } + .rz-px-xs-4, + .rz-pl-xs-4 { + padding-left: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xs-5 { + padding: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pt-xs-5 { + padding-top: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pr-xs-5 { + padding-right: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pb-xs-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pl-xs-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xs-6 { + padding: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pt-xs-6 { + padding-top: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pr-xs-6 { + padding-right: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pb-xs-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pl-xs-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xs-7 { + padding: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pt-xs-7 { + padding-top: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pr-xs-7 { + padding-right: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pb-xs-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pl-xs-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xs-8 { + padding: 2rem !important; + } + .rz-py-xs-8, + .rz-pt-xs-8 { + padding-top: 2rem !important; + } + .rz-px-xs-8, + .rz-pr-xs-8 { + padding-right: 2rem !important; + } + .rz-py-xs-8, + .rz-pb-xs-8 { + padding-bottom: 2rem !important; + } + .rz-px-xs-8, + .rz-pl-xs-8 { + padding-left: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xs-9 { + padding: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pt-xs-9 { + padding-top: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pr-xs-9 { + padding-right: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pb-xs-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pl-xs-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xs-10 { + padding: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pt-xs-10 { + padding-top: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pr-xs-10 { + padding-right: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pb-xs-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pl-xs-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xs-11 { + padding: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pt-xs-11 { + padding-top: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pr-xs-11 { + padding-right: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pb-xs-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pl-xs-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xs-12 { + padding: 3rem !important; + } + .rz-py-xs-12, + .rz-pt-xs-12 { + padding-top: 3rem !important; + } + .rz-px-xs-12, + .rz-pr-xs-12 { + padding-right: 3rem !important; + } + .rz-py-xs-12, + .rz-pb-xs-12 { + padding-bottom: 3rem !important; + } + .rz-px-xs-12, + .rz-pl-xs-12 { + padding-left: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xs-auto { + margin: auto !important; + } + .rz-my-xs-auto, + .rz-mt-xs-auto { + margin-top: auto !important; + } + .rz-mx-xs-auto, + .rz-mr-xs-auto { + margin-right: auto !important; + } + .rz-my-xs-auto, + .rz-mb-xs-auto { + margin-bottom: auto !important; + } + .rz-mx-xs-auto, + .rz-ml-xs-auto { + margin-left: auto !important; + } + .rz-ms-xs-auto { + margin-inline-start: auto !important; + } + .rz-me-xs-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 768px) { + .rz-m-sm-0 { + margin: 0 !important; + } + .rz-my-sm-0, + .rz-mt-sm-0 { + margin-top: 0 !important; + } + .rz-mx-sm-0, + .rz-mr-sm-0 { + margin-right: 0 !important; + } + .rz-my-sm-0, + .rz-mb-sm-0 { + margin-bottom: 0 !important; + } + .rz-mx-sm-0, + .rz-ml-sm-0 { + margin-left: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-start: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-end: 0 !important; + } + .rz-m-sm-05 { + margin: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mt-sm-05 { + margin-top: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-mr-sm-05 { + margin-right: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mb-sm-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-ml-sm-05 { + margin-left: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-sm-1 { + margin: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mt-sm-1 { + margin-top: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-mr-sm-1 { + margin-right: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-ml-sm-1 { + margin-left: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-sm-2 { + margin: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mt-sm-2 { + margin-top: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-mr-sm-2 { + margin-right: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-ml-sm-2 { + margin-left: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-sm-3 { + margin: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mt-sm-3 { + margin-top: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-mr-sm-3 { + margin-right: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mb-sm-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-ml-sm-3 { + margin-left: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-sm-4 { + margin: 1rem !important; + } + .rz-my-sm-4, + .rz-mt-sm-4 { + margin-top: 1rem !important; + } + .rz-mx-sm-4, + .rz-mr-sm-4 { + margin-right: 1rem !important; + } + .rz-my-sm-4, + .rz-mb-sm-4 { + margin-bottom: 1rem !important; + } + .rz-mx-sm-4, + .rz-ml-sm-4 { + margin-left: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-end: 1rem !important; + } + .rz-m-sm-5 { + margin: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mt-sm-5 { + margin-top: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-mr-sm-5 { + margin-right: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mb-sm-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-ml-sm-5 { + margin-left: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-sm-6 { + margin: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mt-sm-6 { + margin-top: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-mr-sm-6 { + margin-right: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mb-sm-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-ml-sm-6 { + margin-left: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-sm-7 { + margin: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mt-sm-7 { + margin-top: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-mr-sm-7 { + margin-right: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mb-sm-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-ml-sm-7 { + margin-left: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-sm-8 { + margin: 2rem !important; + } + .rz-my-sm-8, + .rz-mt-sm-8 { + margin-top: 2rem !important; + } + .rz-mx-sm-8, + .rz-mr-sm-8 { + margin-right: 2rem !important; + } + .rz-my-sm-8, + .rz-mb-sm-8 { + margin-bottom: 2rem !important; + } + .rz-mx-sm-8, + .rz-ml-sm-8 { + margin-left: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-end: 2rem !important; + } + .rz-m-sm-9 { + margin: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mt-sm-9 { + margin-top: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-mr-sm-9 { + margin-right: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mb-sm-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-ml-sm-9 { + margin-left: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-sm-10 { + margin: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mt-sm-10 { + margin-top: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-mr-sm-10 { + margin-right: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mb-sm-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-ml-sm-10 { + margin-left: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-sm-11 { + margin: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mt-sm-11 { + margin-top: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-mr-sm-11 { + margin-right: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mb-sm-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-ml-sm-11 { + margin-left: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-sm-12 { + margin: 3rem !important; + } + .rz-my-sm-12, + .rz-mt-sm-12 { + margin-top: 3rem !important; + } + .rz-mx-sm-12, + .rz-mr-sm-12 { + margin-right: 3rem !important; + } + .rz-my-sm-12, + .rz-mb-sm-12 { + margin-bottom: 3rem !important; + } + .rz-mx-sm-12, + .rz-ml-sm-12 { + margin-left: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-end: 3rem !important; + } + .rz-p-sm-0 { + padding: 0 !important; + } + .rz-py-sm-0, + .rz-pt-sm-0 { + padding-top: 0 !important; + } + .rz-px-sm-0, + .rz-pr-sm-0 { + padding-right: 0 !important; + } + .rz-py-sm-0, + .rz-pb-sm-0 { + padding-bottom: 0 !important; + } + .rz-px-sm-0, + .rz-pl-sm-0 { + padding-left: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-start: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-end: 0 !important; + } + .rz-p-sm-05 { + padding: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pt-sm-05 { + padding-top: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pr-sm-05 { + padding-right: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pb-sm-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pl-sm-05 { + padding-left: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-sm-1 { + padding: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pt-sm-1 { + padding-top: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pr-sm-1 { + padding-right: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pl-sm-1 { + padding-left: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-sm-2 { + padding: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pt-sm-2 { + padding-top: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pr-sm-2 { + padding-right: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pl-sm-2 { + padding-left: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-sm-3 { + padding: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pt-sm-3 { + padding-top: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pr-sm-3 { + padding-right: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pb-sm-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pl-sm-3 { + padding-left: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-sm-4 { + padding: 1rem !important; + } + .rz-py-sm-4, + .rz-pt-sm-4 { + padding-top: 1rem !important; + } + .rz-px-sm-4, + .rz-pr-sm-4 { + padding-right: 1rem !important; + } + .rz-py-sm-4, + .rz-pb-sm-4 { + padding-bottom: 1rem !important; + } + .rz-px-sm-4, + .rz-pl-sm-4 { + padding-left: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-end: 1rem !important; + } + .rz-p-sm-5 { + padding: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pt-sm-5 { + padding-top: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pr-sm-5 { + padding-right: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pb-sm-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pl-sm-5 { + padding-left: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-sm-6 { + padding: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pt-sm-6 { + padding-top: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pr-sm-6 { + padding-right: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pb-sm-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pl-sm-6 { + padding-left: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-sm-7 { + padding: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pt-sm-7 { + padding-top: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pr-sm-7 { + padding-right: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pb-sm-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pl-sm-7 { + padding-left: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-sm-8 { + padding: 2rem !important; + } + .rz-py-sm-8, + .rz-pt-sm-8 { + padding-top: 2rem !important; + } + .rz-px-sm-8, + .rz-pr-sm-8 { + padding-right: 2rem !important; + } + .rz-py-sm-8, + .rz-pb-sm-8 { + padding-bottom: 2rem !important; + } + .rz-px-sm-8, + .rz-pl-sm-8 { + padding-left: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-end: 2rem !important; + } + .rz-p-sm-9 { + padding: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pt-sm-9 { + padding-top: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pr-sm-9 { + padding-right: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pb-sm-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pl-sm-9 { + padding-left: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-sm-10 { + padding: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pt-sm-10 { + padding-top: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pr-sm-10 { + padding-right: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pb-sm-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pl-sm-10 { + padding-left: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-sm-11 { + padding: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pt-sm-11 { + padding-top: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pr-sm-11 { + padding-right: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pb-sm-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pl-sm-11 { + padding-left: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-sm-12 { + padding: 3rem !important; + } + .rz-py-sm-12, + .rz-pt-sm-12 { + padding-top: 3rem !important; + } + .rz-px-sm-12, + .rz-pr-sm-12 { + padding-right: 3rem !important; + } + .rz-py-sm-12, + .rz-pb-sm-12 { + padding-bottom: 3rem !important; + } + .rz-px-sm-12, + .rz-pl-sm-12 { + padding-left: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-end: 3rem !important; + } + .rz-m-sm-auto { + margin: auto !important; + } + .rz-my-sm-auto, + .rz-mt-sm-auto { + margin-top: auto !important; + } + .rz-mx-sm-auto, + .rz-mr-sm-auto { + margin-right: auto !important; + } + .rz-my-sm-auto, + .rz-mb-sm-auto { + margin-bottom: auto !important; + } + .rz-mx-sm-auto, + .rz-ml-sm-auto { + margin-left: auto !important; + } + .rz-ms-sm-auto { + margin-inline-start: auto !important; + } + .rz-me-sm-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1024px) { + .rz-m-md-0 { + margin: 0 !important; + } + .rz-my-md-0, + .rz-mt-md-0 { + margin-top: 0 !important; + } + .rz-mx-md-0, + .rz-mr-md-0 { + margin-right: 0 !important; + } + .rz-my-md-0, + .rz-mb-md-0 { + margin-bottom: 0 !important; + } + .rz-mx-md-0, + .rz-ml-md-0 { + margin-left: 0 !important; + } + .rz-ms-md-0 { + margin-inline-start: 0 !important; + } + .rz-ms-md-0 { + margin-inline-end: 0 !important; + } + .rz-m-md-05 { + margin: 0.125rem !important; + } + .rz-my-md-05, + .rz-mt-md-05 { + margin-top: 0.125rem !important; + } + .rz-mx-md-05, + .rz-mr-md-05 { + margin-right: 0.125rem !important; + } + .rz-my-md-05, + .rz-mb-md-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-md-05, + .rz-ml-md-05 { + margin-left: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-md-1 { + margin: 0.25rem !important; + } + .rz-my-md-1, + .rz-mt-md-1 { + margin-top: 0.25rem !important; + } + .rz-mx-md-1, + .rz-mr-md-1 { + margin-right: 0.25rem !important; + } + .rz-my-md-1, + .rz-mb-md-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-md-1, + .rz-ml-md-1 { + margin-left: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-md-2 { + margin: 0.5rem !important; + } + .rz-my-md-2, + .rz-mt-md-2 { + margin-top: 0.5rem !important; + } + .rz-mx-md-2, + .rz-mr-md-2 { + margin-right: 0.5rem !important; + } + .rz-my-md-2, + .rz-mb-md-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-md-2, + .rz-ml-md-2 { + margin-left: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-md-3 { + margin: 0.75rem !important; + } + .rz-my-md-3, + .rz-mt-md-3 { + margin-top: 0.75rem !important; + } + .rz-mx-md-3, + .rz-mr-md-3 { + margin-right: 0.75rem !important; + } + .rz-my-md-3, + .rz-mb-md-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-md-3, + .rz-ml-md-3 { + margin-left: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-md-4 { + margin: 1rem !important; + } + .rz-my-md-4, + .rz-mt-md-4 { + margin-top: 1rem !important; + } + .rz-mx-md-4, + .rz-mr-md-4 { + margin-right: 1rem !important; + } + .rz-my-md-4, + .rz-mb-md-4 { + margin-bottom: 1rem !important; + } + .rz-mx-md-4, + .rz-ml-md-4 { + margin-left: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-end: 1rem !important; + } + .rz-m-md-5 { + margin: 1.25rem !important; + } + .rz-my-md-5, + .rz-mt-md-5 { + margin-top: 1.25rem !important; + } + .rz-mx-md-5, + .rz-mr-md-5 { + margin-right: 1.25rem !important; + } + .rz-my-md-5, + .rz-mb-md-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-md-5, + .rz-ml-md-5 { + margin-left: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-md-6 { + margin: 1.5rem !important; + } + .rz-my-md-6, + .rz-mt-md-6 { + margin-top: 1.5rem !important; + } + .rz-mx-md-6, + .rz-mr-md-6 { + margin-right: 1.5rem !important; + } + .rz-my-md-6, + .rz-mb-md-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-md-6, + .rz-ml-md-6 { + margin-left: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-md-7 { + margin: 1.75rem !important; + } + .rz-my-md-7, + .rz-mt-md-7 { + margin-top: 1.75rem !important; + } + .rz-mx-md-7, + .rz-mr-md-7 { + margin-right: 1.75rem !important; + } + .rz-my-md-7, + .rz-mb-md-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-md-7, + .rz-ml-md-7 { + margin-left: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-md-8 { + margin: 2rem !important; + } + .rz-my-md-8, + .rz-mt-md-8 { + margin-top: 2rem !important; + } + .rz-mx-md-8, + .rz-mr-md-8 { + margin-right: 2rem !important; + } + .rz-my-md-8, + .rz-mb-md-8 { + margin-bottom: 2rem !important; + } + .rz-mx-md-8, + .rz-ml-md-8 { + margin-left: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-end: 2rem !important; + } + .rz-m-md-9 { + margin: 2.25rem !important; + } + .rz-my-md-9, + .rz-mt-md-9 { + margin-top: 2.25rem !important; + } + .rz-mx-md-9, + .rz-mr-md-9 { + margin-right: 2.25rem !important; + } + .rz-my-md-9, + .rz-mb-md-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-md-9, + .rz-ml-md-9 { + margin-left: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-md-10 { + margin: 2.5rem !important; + } + .rz-my-md-10, + .rz-mt-md-10 { + margin-top: 2.5rem !important; + } + .rz-mx-md-10, + .rz-mr-md-10 { + margin-right: 2.5rem !important; + } + .rz-my-md-10, + .rz-mb-md-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-md-10, + .rz-ml-md-10 { + margin-left: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-md-11 { + margin: 2.75rem !important; + } + .rz-my-md-11, + .rz-mt-md-11 { + margin-top: 2.75rem !important; + } + .rz-mx-md-11, + .rz-mr-md-11 { + margin-right: 2.75rem !important; + } + .rz-my-md-11, + .rz-mb-md-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-md-11, + .rz-ml-md-11 { + margin-left: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-md-12 { + margin: 3rem !important; + } + .rz-my-md-12, + .rz-mt-md-12 { + margin-top: 3rem !important; + } + .rz-mx-md-12, + .rz-mr-md-12 { + margin-right: 3rem !important; + } + .rz-my-md-12, + .rz-mb-md-12 { + margin-bottom: 3rem !important; + } + .rz-mx-md-12, + .rz-ml-md-12 { + margin-left: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-end: 3rem !important; + } + .rz-p-md-0 { + padding: 0 !important; + } + .rz-py-md-0, + .rz-pt-md-0 { + padding-top: 0 !important; + } + .rz-px-md-0, + .rz-pr-md-0 { + padding-right: 0 !important; + } + .rz-py-md-0, + .rz-pb-md-0 { + padding-bottom: 0 !important; + } + .rz-px-md-0, + .rz-pl-md-0 { + padding-left: 0 !important; + } + .rz-ps-md-0 { + padding-inline-start: 0 !important; + } + .rz-ps-md-0 { + padding-inline-end: 0 !important; + } + .rz-p-md-05 { + padding: 0.125rem !important; + } + .rz-py-md-05, + .rz-pt-md-05 { + padding-top: 0.125rem !important; + } + .rz-px-md-05, + .rz-pr-md-05 { + padding-right: 0.125rem !important; + } + .rz-py-md-05, + .rz-pb-md-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-md-05, + .rz-pl-md-05 { + padding-left: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-md-1 { + padding: 0.25rem !important; + } + .rz-py-md-1, + .rz-pt-md-1 { + padding-top: 0.25rem !important; + } + .rz-px-md-1, + .rz-pr-md-1 { + padding-right: 0.25rem !important; + } + .rz-py-md-1, + .rz-pb-md-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-md-1, + .rz-pl-md-1 { + padding-left: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-md-2 { + padding: 0.5rem !important; + } + .rz-py-md-2, + .rz-pt-md-2 { + padding-top: 0.5rem !important; + } + .rz-px-md-2, + .rz-pr-md-2 { + padding-right: 0.5rem !important; + } + .rz-py-md-2, + .rz-pb-md-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-md-2, + .rz-pl-md-2 { + padding-left: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-md-3 { + padding: 0.75rem !important; + } + .rz-py-md-3, + .rz-pt-md-3 { + padding-top: 0.75rem !important; + } + .rz-px-md-3, + .rz-pr-md-3 { + padding-right: 0.75rem !important; + } + .rz-py-md-3, + .rz-pb-md-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-md-3, + .rz-pl-md-3 { + padding-left: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-md-4 { + padding: 1rem !important; + } + .rz-py-md-4, + .rz-pt-md-4 { + padding-top: 1rem !important; + } + .rz-px-md-4, + .rz-pr-md-4 { + padding-right: 1rem !important; + } + .rz-py-md-4, + .rz-pb-md-4 { + padding-bottom: 1rem !important; + } + .rz-px-md-4, + .rz-pl-md-4 { + padding-left: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-end: 1rem !important; + } + .rz-p-md-5 { + padding: 1.25rem !important; + } + .rz-py-md-5, + .rz-pt-md-5 { + padding-top: 1.25rem !important; + } + .rz-px-md-5, + .rz-pr-md-5 { + padding-right: 1.25rem !important; + } + .rz-py-md-5, + .rz-pb-md-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-md-5, + .rz-pl-md-5 { + padding-left: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-md-6 { + padding: 1.5rem !important; + } + .rz-py-md-6, + .rz-pt-md-6 { + padding-top: 1.5rem !important; + } + .rz-px-md-6, + .rz-pr-md-6 { + padding-right: 1.5rem !important; + } + .rz-py-md-6, + .rz-pb-md-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-md-6, + .rz-pl-md-6 { + padding-left: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-md-7 { + padding: 1.75rem !important; + } + .rz-py-md-7, + .rz-pt-md-7 { + padding-top: 1.75rem !important; + } + .rz-px-md-7, + .rz-pr-md-7 { + padding-right: 1.75rem !important; + } + .rz-py-md-7, + .rz-pb-md-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-md-7, + .rz-pl-md-7 { + padding-left: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-md-8 { + padding: 2rem !important; + } + .rz-py-md-8, + .rz-pt-md-8 { + padding-top: 2rem !important; + } + .rz-px-md-8, + .rz-pr-md-8 { + padding-right: 2rem !important; + } + .rz-py-md-8, + .rz-pb-md-8 { + padding-bottom: 2rem !important; + } + .rz-px-md-8, + .rz-pl-md-8 { + padding-left: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-end: 2rem !important; + } + .rz-p-md-9 { + padding: 2.25rem !important; + } + .rz-py-md-9, + .rz-pt-md-9 { + padding-top: 2.25rem !important; + } + .rz-px-md-9, + .rz-pr-md-9 { + padding-right: 2.25rem !important; + } + .rz-py-md-9, + .rz-pb-md-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-md-9, + .rz-pl-md-9 { + padding-left: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-md-10 { + padding: 2.5rem !important; + } + .rz-py-md-10, + .rz-pt-md-10 { + padding-top: 2.5rem !important; + } + .rz-px-md-10, + .rz-pr-md-10 { + padding-right: 2.5rem !important; + } + .rz-py-md-10, + .rz-pb-md-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-md-10, + .rz-pl-md-10 { + padding-left: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-md-11 { + padding: 2.75rem !important; + } + .rz-py-md-11, + .rz-pt-md-11 { + padding-top: 2.75rem !important; + } + .rz-px-md-11, + .rz-pr-md-11 { + padding-right: 2.75rem !important; + } + .rz-py-md-11, + .rz-pb-md-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-md-11, + .rz-pl-md-11 { + padding-left: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-md-12 { + padding: 3rem !important; + } + .rz-py-md-12, + .rz-pt-md-12 { + padding-top: 3rem !important; + } + .rz-px-md-12, + .rz-pr-md-12 { + padding-right: 3rem !important; + } + .rz-py-md-12, + .rz-pb-md-12 { + padding-bottom: 3rem !important; + } + .rz-px-md-12, + .rz-pl-md-12 { + padding-left: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-end: 3rem !important; + } + .rz-m-md-auto { + margin: auto !important; + } + .rz-my-md-auto, + .rz-mt-md-auto { + margin-top: auto !important; + } + .rz-mx-md-auto, + .rz-mr-md-auto { + margin-right: auto !important; + } + .rz-my-md-auto, + .rz-mb-md-auto { + margin-bottom: auto !important; + } + .rz-mx-md-auto, + .rz-ml-md-auto { + margin-left: auto !important; + } + .rz-ms-md-auto { + margin-inline-start: auto !important; + } + .rz-me-md-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1280px) { + .rz-m-lg-0 { + margin: 0 !important; + } + .rz-my-lg-0, + .rz-mt-lg-0 { + margin-top: 0 !important; + } + .rz-mx-lg-0, + .rz-mr-lg-0 { + margin-right: 0 !important; + } + .rz-my-lg-0, + .rz-mb-lg-0 { + margin-bottom: 0 !important; + } + .rz-mx-lg-0, + .rz-ml-lg-0 { + margin-left: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-start: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-end: 0 !important; + } + .rz-m-lg-05 { + margin: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mt-lg-05 { + margin-top: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-mr-lg-05 { + margin-right: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mb-lg-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-ml-lg-05 { + margin-left: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-lg-1 { + margin: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mt-lg-1 { + margin-top: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-mr-lg-1 { + margin-right: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-ml-lg-1 { + margin-left: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-lg-2 { + margin: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mt-lg-2 { + margin-top: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-mr-lg-2 { + margin-right: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-ml-lg-2 { + margin-left: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-lg-3 { + margin: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mt-lg-3 { + margin-top: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-mr-lg-3 { + margin-right: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mb-lg-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-ml-lg-3 { + margin-left: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-lg-4 { + margin: 1rem !important; + } + .rz-my-lg-4, + .rz-mt-lg-4 { + margin-top: 1rem !important; + } + .rz-mx-lg-4, + .rz-mr-lg-4 { + margin-right: 1rem !important; + } + .rz-my-lg-4, + .rz-mb-lg-4 { + margin-bottom: 1rem !important; + } + .rz-mx-lg-4, + .rz-ml-lg-4 { + margin-left: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-end: 1rem !important; + } + .rz-m-lg-5 { + margin: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mt-lg-5 { + margin-top: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-mr-lg-5 { + margin-right: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mb-lg-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-ml-lg-5 { + margin-left: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-lg-6 { + margin: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mt-lg-6 { + margin-top: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-mr-lg-6 { + margin-right: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mb-lg-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-ml-lg-6 { + margin-left: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-lg-7 { + margin: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mt-lg-7 { + margin-top: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-mr-lg-7 { + margin-right: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mb-lg-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-ml-lg-7 { + margin-left: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-lg-8 { + margin: 2rem !important; + } + .rz-my-lg-8, + .rz-mt-lg-8 { + margin-top: 2rem !important; + } + .rz-mx-lg-8, + .rz-mr-lg-8 { + margin-right: 2rem !important; + } + .rz-my-lg-8, + .rz-mb-lg-8 { + margin-bottom: 2rem !important; + } + .rz-mx-lg-8, + .rz-ml-lg-8 { + margin-left: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-end: 2rem !important; + } + .rz-m-lg-9 { + margin: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mt-lg-9 { + margin-top: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-mr-lg-9 { + margin-right: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mb-lg-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-ml-lg-9 { + margin-left: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-lg-10 { + margin: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mt-lg-10 { + margin-top: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-mr-lg-10 { + margin-right: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mb-lg-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-ml-lg-10 { + margin-left: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-lg-11 { + margin: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mt-lg-11 { + margin-top: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-mr-lg-11 { + margin-right: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mb-lg-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-ml-lg-11 { + margin-left: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-lg-12 { + margin: 3rem !important; + } + .rz-my-lg-12, + .rz-mt-lg-12 { + margin-top: 3rem !important; + } + .rz-mx-lg-12, + .rz-mr-lg-12 { + margin-right: 3rem !important; + } + .rz-my-lg-12, + .rz-mb-lg-12 { + margin-bottom: 3rem !important; + } + .rz-mx-lg-12, + .rz-ml-lg-12 { + margin-left: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-end: 3rem !important; + } + .rz-p-lg-0 { + padding: 0 !important; + } + .rz-py-lg-0, + .rz-pt-lg-0 { + padding-top: 0 !important; + } + .rz-px-lg-0, + .rz-pr-lg-0 { + padding-right: 0 !important; + } + .rz-py-lg-0, + .rz-pb-lg-0 { + padding-bottom: 0 !important; + } + .rz-px-lg-0, + .rz-pl-lg-0 { + padding-left: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-start: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-end: 0 !important; + } + .rz-p-lg-05 { + padding: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pt-lg-05 { + padding-top: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pr-lg-05 { + padding-right: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pb-lg-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pl-lg-05 { + padding-left: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-lg-1 { + padding: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pt-lg-1 { + padding-top: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pr-lg-1 { + padding-right: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pl-lg-1 { + padding-left: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-lg-2 { + padding: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pt-lg-2 { + padding-top: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pr-lg-2 { + padding-right: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pl-lg-2 { + padding-left: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-lg-3 { + padding: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pt-lg-3 { + padding-top: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pr-lg-3 { + padding-right: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pb-lg-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pl-lg-3 { + padding-left: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-lg-4 { + padding: 1rem !important; + } + .rz-py-lg-4, + .rz-pt-lg-4 { + padding-top: 1rem !important; + } + .rz-px-lg-4, + .rz-pr-lg-4 { + padding-right: 1rem !important; + } + .rz-py-lg-4, + .rz-pb-lg-4 { + padding-bottom: 1rem !important; + } + .rz-px-lg-4, + .rz-pl-lg-4 { + padding-left: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-end: 1rem !important; + } + .rz-p-lg-5 { + padding: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pt-lg-5 { + padding-top: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pr-lg-5 { + padding-right: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pb-lg-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pl-lg-5 { + padding-left: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-lg-6 { + padding: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pt-lg-6 { + padding-top: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pr-lg-6 { + padding-right: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pb-lg-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pl-lg-6 { + padding-left: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-lg-7 { + padding: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pt-lg-7 { + padding-top: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pr-lg-7 { + padding-right: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pb-lg-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pl-lg-7 { + padding-left: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-lg-8 { + padding: 2rem !important; + } + .rz-py-lg-8, + .rz-pt-lg-8 { + padding-top: 2rem !important; + } + .rz-px-lg-8, + .rz-pr-lg-8 { + padding-right: 2rem !important; + } + .rz-py-lg-8, + .rz-pb-lg-8 { + padding-bottom: 2rem !important; + } + .rz-px-lg-8, + .rz-pl-lg-8 { + padding-left: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-end: 2rem !important; + } + .rz-p-lg-9 { + padding: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pt-lg-9 { + padding-top: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pr-lg-9 { + padding-right: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pb-lg-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pl-lg-9 { + padding-left: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-lg-10 { + padding: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pt-lg-10 { + padding-top: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pr-lg-10 { + padding-right: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pb-lg-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pl-lg-10 { + padding-left: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-lg-11 { + padding: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pt-lg-11 { + padding-top: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pr-lg-11 { + padding-right: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pb-lg-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pl-lg-11 { + padding-left: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-lg-12 { + padding: 3rem !important; + } + .rz-py-lg-12, + .rz-pt-lg-12 { + padding-top: 3rem !important; + } + .rz-px-lg-12, + .rz-pr-lg-12 { + padding-right: 3rem !important; + } + .rz-py-lg-12, + .rz-pb-lg-12 { + padding-bottom: 3rem !important; + } + .rz-px-lg-12, + .rz-pl-lg-12 { + padding-left: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-end: 3rem !important; + } + .rz-m-lg-auto { + margin: auto !important; + } + .rz-my-lg-auto, + .rz-mt-lg-auto { + margin-top: auto !important; + } + .rz-mx-lg-auto, + .rz-mr-lg-auto { + margin-right: auto !important; + } + .rz-my-lg-auto, + .rz-mb-lg-auto { + margin-bottom: auto !important; + } + .rz-mx-lg-auto, + .rz-ml-lg-auto { + margin-left: auto !important; + } + .rz-ms-lg-auto { + margin-inline-start: auto !important; + } + .rz-me-lg-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1920px) { + .rz-m-xl-0 { + margin: 0 !important; + } + .rz-my-xl-0, + .rz-mt-xl-0 { + margin-top: 0 !important; + } + .rz-mx-xl-0, + .rz-mr-xl-0 { + margin-right: 0 !important; + } + .rz-my-xl-0, + .rz-mb-xl-0 { + margin-bottom: 0 !important; + } + .rz-mx-xl-0, + .rz-ml-xl-0 { + margin-left: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-end: 0 !important; + } + .rz-m-xl-05 { + margin: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mt-xl-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-mr-xl-05 { + margin-right: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mb-xl-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-ml-xl-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xl-1 { + margin: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mt-xl-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-mr-xl-1 { + margin-right: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-ml-xl-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xl-2 { + margin: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mt-xl-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-mr-xl-2 { + margin-right: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-ml-xl-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xl-3 { + margin: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mt-xl-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-mr-xl-3 { + margin-right: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mb-xl-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-ml-xl-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xl-4 { + margin: 1rem !important; + } + .rz-my-xl-4, + .rz-mt-xl-4 { + margin-top: 1rem !important; + } + .rz-mx-xl-4, + .rz-mr-xl-4 { + margin-right: 1rem !important; + } + .rz-my-xl-4, + .rz-mb-xl-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xl-4, + .rz-ml-xl-4 { + margin-left: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xl-5 { + margin: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mt-xl-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-mr-xl-5 { + margin-right: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mb-xl-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-ml-xl-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xl-6 { + margin: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mt-xl-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-mr-xl-6 { + margin-right: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mb-xl-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-ml-xl-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xl-7 { + margin: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mt-xl-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-mr-xl-7 { + margin-right: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mb-xl-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-ml-xl-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xl-8 { + margin: 2rem !important; + } + .rz-my-xl-8, + .rz-mt-xl-8 { + margin-top: 2rem !important; + } + .rz-mx-xl-8, + .rz-mr-xl-8 { + margin-right: 2rem !important; + } + .rz-my-xl-8, + .rz-mb-xl-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xl-8, + .rz-ml-xl-8 { + margin-left: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xl-9 { + margin: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mt-xl-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-mr-xl-9 { + margin-right: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mb-xl-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-ml-xl-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xl-10 { + margin: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mt-xl-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-mr-xl-10 { + margin-right: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mb-xl-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-ml-xl-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xl-11 { + margin: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mt-xl-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-mr-xl-11 { + margin-right: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mb-xl-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-ml-xl-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xl-12 { + margin: 3rem !important; + } + .rz-my-xl-12, + .rz-mt-xl-12 { + margin-top: 3rem !important; + } + .rz-mx-xl-12, + .rz-mr-xl-12 { + margin-right: 3rem !important; + } + .rz-my-xl-12, + .rz-mb-xl-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xl-12, + .rz-ml-xl-12 { + margin-left: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xl-0 { + padding: 0 !important; + } + .rz-py-xl-0, + .rz-pt-xl-0 { + padding-top: 0 !important; + } + .rz-px-xl-0, + .rz-pr-xl-0 { + padding-right: 0 !important; + } + .rz-py-xl-0, + .rz-pb-xl-0 { + padding-bottom: 0 !important; + } + .rz-px-xl-0, + .rz-pl-xl-0 { + padding-left: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-end: 0 !important; + } + .rz-p-xl-05 { + padding: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pt-xl-05 { + padding-top: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pr-xl-05 { + padding-right: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pb-xl-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pl-xl-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xl-1 { + padding: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pt-xl-1 { + padding-top: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pr-xl-1 { + padding-right: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pl-xl-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xl-2 { + padding: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pt-xl-2 { + padding-top: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pr-xl-2 { + padding-right: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pl-xl-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xl-3 { + padding: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pt-xl-3 { + padding-top: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pr-xl-3 { + padding-right: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pb-xl-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pl-xl-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xl-4 { + padding: 1rem !important; + } + .rz-py-xl-4, + .rz-pt-xl-4 { + padding-top: 1rem !important; + } + .rz-px-xl-4, + .rz-pr-xl-4 { + padding-right: 1rem !important; + } + .rz-py-xl-4, + .rz-pb-xl-4 { + padding-bottom: 1rem !important; + } + .rz-px-xl-4, + .rz-pl-xl-4 { + padding-left: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xl-5 { + padding: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pt-xl-5 { + padding-top: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pr-xl-5 { + padding-right: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pb-xl-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pl-xl-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xl-6 { + padding: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pt-xl-6 { + padding-top: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pr-xl-6 { + padding-right: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pb-xl-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pl-xl-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xl-7 { + padding: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pt-xl-7 { + padding-top: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pr-xl-7 { + padding-right: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pb-xl-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pl-xl-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xl-8 { + padding: 2rem !important; + } + .rz-py-xl-8, + .rz-pt-xl-8 { + padding-top: 2rem !important; + } + .rz-px-xl-8, + .rz-pr-xl-8 { + padding-right: 2rem !important; + } + .rz-py-xl-8, + .rz-pb-xl-8 { + padding-bottom: 2rem !important; + } + .rz-px-xl-8, + .rz-pl-xl-8 { + padding-left: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xl-9 { + padding: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pt-xl-9 { + padding-top: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pr-xl-9 { + padding-right: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pb-xl-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pl-xl-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xl-10 { + padding: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pt-xl-10 { + padding-top: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pr-xl-10 { + padding-right: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pb-xl-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pl-xl-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xl-11 { + padding: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pt-xl-11 { + padding-top: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pr-xl-11 { + padding-right: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pb-xl-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pl-xl-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xl-12 { + padding: 3rem !important; + } + .rz-py-xl-12, + .rz-pt-xl-12 { + padding-top: 3rem !important; + } + .rz-px-xl-12, + .rz-pr-xl-12 { + padding-right: 3rem !important; + } + .rz-py-xl-12, + .rz-pb-xl-12 { + padding-bottom: 3rem !important; + } + .rz-px-xl-12, + .rz-pl-xl-12 { + padding-left: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xl-auto { + margin: auto !important; + } + .rz-my-xl-auto, + .rz-mt-xl-auto { + margin-top: auto !important; + } + .rz-mx-xl-auto, + .rz-mr-xl-auto { + margin-right: auto !important; + } + .rz-my-xl-auto, + .rz-mb-xl-auto { + margin-bottom: auto !important; + } + .rz-mx-xl-auto, + .rz-ml-xl-auto { + margin-left: auto !important; + } + .rz-ms-xl-auto { + margin-inline-start: auto !important; + } + .rz-me-xl-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 2560px) { + .rz-m-xx-0 { + margin: 0 !important; + } + .rz-my-xx-0, + .rz-mt-xx-0 { + margin-top: 0 !important; + } + .rz-mx-xx-0, + .rz-mr-xx-0 { + margin-right: 0 !important; + } + .rz-my-xx-0, + .rz-mb-xx-0 { + margin-bottom: 0 !important; + } + .rz-mx-xx-0, + .rz-ml-xx-0 { + margin-left: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-end: 0 !important; + } + .rz-m-xx-05 { + margin: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mt-xx-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-mr-xx-05 { + margin-right: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mb-xx-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-ml-xx-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xx-1 { + margin: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mt-xx-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-mr-xx-1 { + margin-right: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mb-xx-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-ml-xx-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xx-2 { + margin: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mt-xx-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-mr-xx-2 { + margin-right: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mb-xx-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-ml-xx-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xx-3 { + margin: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mt-xx-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-mr-xx-3 { + margin-right: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mb-xx-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-ml-xx-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xx-4 { + margin: 1rem !important; + } + .rz-my-xx-4, + .rz-mt-xx-4 { + margin-top: 1rem !important; + } + .rz-mx-xx-4, + .rz-mr-xx-4 { + margin-right: 1rem !important; + } + .rz-my-xx-4, + .rz-mb-xx-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xx-4, + .rz-ml-xx-4 { + margin-left: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xx-5 { + margin: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mt-xx-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-mr-xx-5 { + margin-right: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mb-xx-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-ml-xx-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xx-6 { + margin: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mt-xx-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-mr-xx-6 { + margin-right: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mb-xx-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-ml-xx-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xx-7 { + margin: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mt-xx-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-mr-xx-7 { + margin-right: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mb-xx-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-ml-xx-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xx-8 { + margin: 2rem !important; + } + .rz-my-xx-8, + .rz-mt-xx-8 { + margin-top: 2rem !important; + } + .rz-mx-xx-8, + .rz-mr-xx-8 { + margin-right: 2rem !important; + } + .rz-my-xx-8, + .rz-mb-xx-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xx-8, + .rz-ml-xx-8 { + margin-left: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xx-9 { + margin: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mt-xx-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-mr-xx-9 { + margin-right: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mb-xx-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-ml-xx-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xx-10 { + margin: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mt-xx-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-mr-xx-10 { + margin-right: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mb-xx-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-ml-xx-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xx-11 { + margin: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mt-xx-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-mr-xx-11 { + margin-right: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mb-xx-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-ml-xx-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xx-12 { + margin: 3rem !important; + } + .rz-my-xx-12, + .rz-mt-xx-12 { + margin-top: 3rem !important; + } + .rz-mx-xx-12, + .rz-mr-xx-12 { + margin-right: 3rem !important; + } + .rz-my-xx-12, + .rz-mb-xx-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xx-12, + .rz-ml-xx-12 { + margin-left: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xx-0 { + padding: 0 !important; + } + .rz-py-xx-0, + .rz-pt-xx-0 { + padding-top: 0 !important; + } + .rz-px-xx-0, + .rz-pr-xx-0 { + padding-right: 0 !important; + } + .rz-py-xx-0, + .rz-pb-xx-0 { + padding-bottom: 0 !important; + } + .rz-px-xx-0, + .rz-pl-xx-0 { + padding-left: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-end: 0 !important; + } + .rz-p-xx-05 { + padding: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pt-xx-05 { + padding-top: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pr-xx-05 { + padding-right: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pb-xx-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pl-xx-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xx-1 { + padding: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pt-xx-1 { + padding-top: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pr-xx-1 { + padding-right: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pb-xx-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pl-xx-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xx-2 { + padding: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pt-xx-2 { + padding-top: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pr-xx-2 { + padding-right: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pb-xx-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pl-xx-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xx-3 { + padding: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pt-xx-3 { + padding-top: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pr-xx-3 { + padding-right: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pb-xx-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pl-xx-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xx-4 { + padding: 1rem !important; + } + .rz-py-xx-4, + .rz-pt-xx-4 { + padding-top: 1rem !important; + } + .rz-px-xx-4, + .rz-pr-xx-4 { + padding-right: 1rem !important; + } + .rz-py-xx-4, + .rz-pb-xx-4 { + padding-bottom: 1rem !important; + } + .rz-px-xx-4, + .rz-pl-xx-4 { + padding-left: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xx-5 { + padding: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pt-xx-5 { + padding-top: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pr-xx-5 { + padding-right: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pb-xx-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pl-xx-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xx-6 { + padding: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pt-xx-6 { + padding-top: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pr-xx-6 { + padding-right: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pb-xx-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pl-xx-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xx-7 { + padding: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pt-xx-7 { + padding-top: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pr-xx-7 { + padding-right: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pb-xx-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pl-xx-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xx-8 { + padding: 2rem !important; + } + .rz-py-xx-8, + .rz-pt-xx-8 { + padding-top: 2rem !important; + } + .rz-px-xx-8, + .rz-pr-xx-8 { + padding-right: 2rem !important; + } + .rz-py-xx-8, + .rz-pb-xx-8 { + padding-bottom: 2rem !important; + } + .rz-px-xx-8, + .rz-pl-xx-8 { + padding-left: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xx-9 { + padding: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pt-xx-9 { + padding-top: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pr-xx-9 { + padding-right: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pb-xx-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pl-xx-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xx-10 { + padding: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pt-xx-10 { + padding-top: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pr-xx-10 { + padding-right: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pb-xx-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pl-xx-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xx-11 { + padding: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pt-xx-11 { + padding-top: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pr-xx-11 { + padding-right: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pb-xx-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pl-xx-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xx-12 { + padding: 3rem !important; + } + .rz-py-xx-12, + .rz-pt-xx-12 { + padding-top: 3rem !important; + } + .rz-px-xx-12, + .rz-pr-xx-12 { + padding-right: 3rem !important; + } + .rz-py-xx-12, + .rz-pb-xx-12 { + padding-bottom: 3rem !important; + } + .rz-px-xx-12, + .rz-pl-xx-12 { + padding-left: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xx-auto { + margin: auto !important; + } + .rz-my-xx-auto, + .rz-mt-xx-auto { + margin-top: auto !important; + } + .rz-mx-xx-auto, + .rz-mr-xx-auto { + margin-right: auto !important; + } + .rz-my-xx-auto, + .rz-mb-xx-auto { + margin-bottom: auto !important; + } + .rz-mx-xx-auto, + .rz-ml-xx-auto { + margin-left: auto !important; + } + .rz-ms-xx-auto { + margin-inline-start: auto !important; + } + .rz-me-xx-auto { + margin-inline-end: auto !important; + } +} +h1.rz-heading { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2.rz-heading { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3.rz-heading { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4.rz-heading { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5.rz-heading { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1, +.h1 { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2, +.h2 { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3, +.h3 { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4, +.h4 { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5, +.h5 { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; +} + +.rz-text-display-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h1-font-size); + line-height: var(--rz-text-display-h1-line-height); + font-weight: var(--rz-text-display-h1-font-weight); + letter-spacing: var(--rz-text-display-h1-letter-spacing); + color: var(--rz-text-display-h1-color); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); +} + +.rz-text-display-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h2-font-size); + line-height: var(--rz-text-display-h2-line-height); + font-weight: var(--rz-text-display-h2-font-weight); + letter-spacing: var(--rz-text-display-h2-letter-spacing); + color: var(--rz-text-display-h2-color); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); +} + +.rz-text-display-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h3-font-size); + line-height: var(--rz-text-display-h3-line-height); + font-weight: var(--rz-text-display-h3-font-weight); + letter-spacing: var(--rz-text-display-h3-letter-spacing); + color: var(--rz-text-display-h3-color); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); +} + +.rz-text-display-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h4-font-size); + line-height: var(--rz-text-display-h4-line-height); + font-weight: var(--rz-text-display-h4-font-weight); + letter-spacing: var(--rz-text-display-h4-letter-spacing); + color: var(--rz-text-display-h4-color); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); +} + +.rz-text-display-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h5-font-size); + line-height: var(--rz-text-display-h5-line-height); + font-weight: var(--rz-text-display-h5-font-weight); + letter-spacing: var(--rz-text-display-h5-letter-spacing); + color: var(--rz-text-display-h5-color); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); +} + +.rz-text-display-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h6-font-size); + line-height: var(--rz-text-display-h6-line-height); + font-weight: var(--rz-text-display-h6-font-weight); + letter-spacing: var(--rz-text-display-h6-letter-spacing); + color: var(--rz-text-display-h6-color); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); +} + +.rz-text-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h1-font-size); + line-height: var(--rz-text-h1-line-height); + font-weight: var(--rz-text-h1-font-weight); + letter-spacing: var(--rz-text-h1-letter-spacing); + color: var(--rz-text-h1-color); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); +} + +.rz-text-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h2-font-size); + line-height: var(--rz-text-h2-line-height); + font-weight: var(--rz-text-h2-font-weight); + letter-spacing: var(--rz-text-h2-letter-spacing); + color: var(--rz-text-h2-color); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); +} + +.rz-text-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h3-font-size); + line-height: var(--rz-text-h3-line-height); + font-weight: var(--rz-text-h3-font-weight); + letter-spacing: var(--rz-text-h3-letter-spacing); + color: var(--rz-text-h3-color); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); +} + +.rz-text-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h4-font-size); + line-height: var(--rz-text-h4-line-height); + font-weight: var(--rz-text-h4-font-weight); + letter-spacing: var(--rz-text-h4-letter-spacing); + color: var(--rz-text-h4-color); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); +} + +.rz-text-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h5-font-size); + line-height: var(--rz-text-h5-line-height); + font-weight: var(--rz-text-h5-font-weight); + letter-spacing: var(--rz-text-h5-letter-spacing); + color: var(--rz-text-h5-color); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); +} + +.rz-text-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-text-h6-color); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); +} + +.rz-text-subtitle1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle1-font-size); + line-height: var(--rz-text-subtitle1-line-height); + font-weight: var(--rz-text-subtitle1-font-weight); + letter-spacing: var(--rz-text-subtitle1-letter-spacing); + color: var(--rz-text-subtitle1-color); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); +} + +.rz-text-subtitle2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle2-font-size); + line-height: var(--rz-text-subtitle2-line-height); + font-weight: var(--rz-text-subtitle2-font-weight); + letter-spacing: var(--rz-text-subtitle2-letter-spacing); + color: var(--rz-text-subtitle2-color); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); +} + +.rz-text-body1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body1-font-size); + line-height: var(--rz-text-body1-line-height); + font-weight: var(--rz-text-body1-font-weight); + letter-spacing: var(--rz-text-body1-letter-spacing); + color: var(--rz-text-body1-color); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); +} + +.rz-text-body2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body2-font-size); + line-height: var(--rz-text-body2-line-height); + font-weight: var(--rz-text-body2-font-weight); + letter-spacing: var(--rz-text-body2-letter-spacing); + color: var(--rz-text-body2-color); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); +} + +.rz-text-button { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-button-font-size); + line-height: var(--rz-text-button-line-height); + font-weight: var(--rz-text-button-font-weight); + letter-spacing: var(--rz-text-button-letter-spacing); + color: var(--rz-text-button-color); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); +} + +.rz-text-caption { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-caption-font-size); + line-height: var(--rz-text-caption-line-height); + font-weight: var(--rz-text-caption-font-weight); + letter-spacing: var(--rz-text-caption-letter-spacing); + color: var(--rz-text-caption-color); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); +} + +.rz-text-overline { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-overline-font-size); + line-height: var(--rz-text-overline-line-height); + font-weight: var(--rz-text-overline-font-weight); + letter-spacing: var(--rz-text-overline-letter-spacing); + text-transform: var(--rz-text-overline-text-transform); + color: var(--rz-text-overline-color); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); +} + +.rz-text-align-start { + text-align: start; +} + +.rz-text-align-end { + text-align: end; +} + +.rz-text-align-left { + text-align: left; +} + +.rz-text-align-right { + text-align: right; +} + +.rz-text-align-center { + text-align: center; +} + +.rz-text-align-justify { + text-align: justify; +} + +.rz-text-align-justify-all { + text-align: justify-all; +} + +.rz-text-align-match-parent { + text-align: match-parent; +} + +@media (min-width: 576px) { + .rz-text-align-xs-start { + text-align: start !important; + } + .rz-text-align-xs-end { + text-align: end !important; + } + .rz-text-align-xs-left { + text-align: left !important; + } + .rz-text-align-xs-right { + text-align: right !important; + } + .rz-text-align-xs-center { + text-align: center !important; + } + .rz-text-align-xs-justify { + text-align: justify !important; + } + .rz-text-align-xs-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xs-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 768px) { + .rz-text-align-sm-start { + text-align: start !important; + } + .rz-text-align-sm-end { + text-align: end !important; + } + .rz-text-align-sm-left { + text-align: left !important; + } + .rz-text-align-sm-right { + text-align: right !important; + } + .rz-text-align-sm-center { + text-align: center !important; + } + .rz-text-align-sm-justify { + text-align: justify !important; + } + .rz-text-align-sm-justify-all { + text-align: justify-all !important; + } + .rz-text-align-sm-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1024px) { + .rz-text-align-md-start { + text-align: start !important; + } + .rz-text-align-md-end { + text-align: end !important; + } + .rz-text-align-md-left { + text-align: left !important; + } + .rz-text-align-md-right { + text-align: right !important; + } + .rz-text-align-md-center { + text-align: center !important; + } + .rz-text-align-md-justify { + text-align: justify !important; + } + .rz-text-align-md-justify-all { + text-align: justify-all !important; + } + .rz-text-align-md-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1280px) { + .rz-text-align-lg-start { + text-align: start !important; + } + .rz-text-align-lg-end { + text-align: end !important; + } + .rz-text-align-lg-left { + text-align: left !important; + } + .rz-text-align-lg-right { + text-align: right !important; + } + .rz-text-align-lg-center { + text-align: center !important; + } + .rz-text-align-lg-justify { + text-align: justify !important; + } + .rz-text-align-lg-justify-all { + text-align: justify-all !important; + } + .rz-text-align-lg-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1920px) { + .rz-text-align-xl-start { + text-align: start !important; + } + .rz-text-align-xl-end { + text-align: end !important; + } + .rz-text-align-xl-left { + text-align: left !important; + } + .rz-text-align-xl-right { + text-align: right !important; + } + .rz-text-align-xl-center { + text-align: center !important; + } + .rz-text-align-xl-justify { + text-align: justify !important; + } + .rz-text-align-xl-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xl-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 2560px) { + .rz-text-align-xx-start { + text-align: start !important; + } + .rz-text-align-xx-end { + text-align: end !important; + } + .rz-text-align-xx-left { + text-align: left !important; + } + .rz-text-align-xx-right { + text-align: right !important; + } + .rz-text-align-xx-center { + text-align: center !important; + } + .rz-text-align-xx-justify { + text-align: justify !important; + } + .rz-text-align-xx-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xx-match-parent { + text-align: match-parent !important; + } +} +.rz-text-wrap { + white-space: normal !important; +} + +.rz-text-nowrap { + white-space: nowrap !important; +} + +.rz-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rz-text-capitalize { + text-transform: capitalize; +} + +.rz-text-uppercase { + text-transform: uppercase; +} + +.rz-text-lowercase { + text-transform: lowercase; +} + +:root { + font-size: var(--rz-root-font-size); +} + +body { + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +p { + line-height: var(--rz-body-line-height); +} + +.rz-label { + vertical-align: middle; + margin-block-start: 0; + margin-block-end: 0; +} + +.rz-form .row .rz-label { + min-height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; + border-top: var(--rz-input-border); + border-bottom: var(--rz-input-border); + border-color: transparent; +} + +label { + margin-block-start: 0; + margin-block-end: 0; +} + +::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-layout ::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; + font-family: var(--rz-icon-font-family); + font-weight: var(--rz-icon-weight, inherit); + font-style: normal; + font-size: var(--rz-icon-size); + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: "liga"; +} + +i.rzi { + display: inline-flex; + justify-content: center; + align-items: center; +} + +.rzi-primary { + color: var(--rz-primary); +} + +.rzi-secondary { + color: var(--rz-secondary); +} + +.rzi-info { + color: var(--rz-info); +} + +.rzi-warning { + color: var(--rz-warning); +} + +.rzi-error { + color: var(--rz-danger); +} + +.rzi-danger { + color: var(--rz-danger); +} + +.rzi-success { + color: var(--rz-success); +} + +.rzi-base { + color: var(--rz-base-700); +} + +.rzi-light { + color: var(--rz-base-700); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + +.rz-helper-hidden-accessible { + opacity: 0; + height: 0; +} +.rz-helper-hidden-accessible input { + height: 0; + padding: 0; + margin: 0; + border: 0; +} + +.rz-helper-hidden { + display: none; +} + +.rz-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; +} + +.rz-pager-element, .rz-button { + box-sizing: border-box; + display: inline-block; + margin: 0; + color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; + border: none; + border-radius: var(--rz-button-border-radius); + outline: none; + box-shadow: var(--rz-button-shadow); + font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); + text-decoration: none; + transition: var(--rz-button-transition); + -webkit-appearance: none; +} +.rz-pager-element:focus, .rz-button:focus { + outline: var(--rz-outline-normal); +} +.rz-pager-element:focus-visible, .rz-button:focus-visible { + outline: var(--rz-button-focus-outline); + outline-offset: var(--rz-button-focus-outline-offset); +} +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { + cursor: pointer; +} +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { + text-decoration: none; + background-image: var(--rz-button-hover-gradient); + background-size: var(--rz-button-hover-background-size); + box-shadow: var(--rz-button-hover-shadow); +} +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { + text-decoration: none; + background-image: var(--rz-button-focus-gradient); + background-size: var(--rz-button-focus-background-size); + box-shadow: var(--rz-button-focus-shadow); +} +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { + text-decoration: none; + background-image: var(--rz-button-active-gradient); + background-size: var(--rz-button-active-background-size); + box-shadow: var(--rz-button-active-shadow); +} +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { + opacity: var(--rz-button-disabled-opacity); + cursor: initial; +} +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { + opacity: var(--rz-button-empty-opacity); + cursor: initial; +} +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: var(--rz-button-vertical-align); + line-height: var(--rz-button-line-height); +} +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { + vertical-align: var(--rz-button-vertical-align); +} +.rz-pager-element .rzi, .rz-button .rzi { + vertical-align: var(--rz-button-vertical-align); +} + +.rz-button.rz-primary:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-button.rz-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-button.rz-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-button.rz-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} +.rz-button.rz-primary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-button.rz-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-button.rz-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-button.rz-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} +.rz-button.rz-secondary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-secondary.rz-variant-flat:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-button.rz-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-button.rz-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-button.rz-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} +.rz-button.rz-info.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-info.rz-variant-flat:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-button.rz-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-button.rz-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-button.rz-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} +.rz-button.rz-warning.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-warning.rz-variant-flat:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-button.rz-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-button.rz-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-button.rz-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-button.rz-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} +.rz-button.rz-error.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-error.rz-variant-flat:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-button.rz-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-button.rz-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-secondary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-info { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} +.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-warning { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-error { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} +.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-danger { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-success { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} +.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-base { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-light { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-dark { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; +} + +.rz-button.rz-variant-text.rz-primary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-secondary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-info { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-button.rz-variant-text.rz-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-button.rz-variant-text.rz-info.rz-shade-default { + color: var(--rz-info); +} +.rz-button.rz-variant-text.rz-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-button.rz-variant-text.rz-info.rz-shade-darker { + color: var(--rz-info-darker); +} +.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-warning { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-error { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-button.rz-variant-text.rz-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-button.rz-variant-text.rz-error.rz-shade-default { + color: var(--rz-error); +} +.rz-button.rz-variant-text.rz-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-button.rz-variant-text.rz-error.rz-shade-darker { + color: var(--rz-error-darker); +} +.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-danger { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-success { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-button.rz-variant-text.rz-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-button.rz-variant-text.rz-success.rz-shade-default { + color: var(--rz-success); +} +.rz-button.rz-variant-text.rz-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-button.rz-variant-text.rz-success.rz-shade-darker { + color: var(--rz-success-darker); +} +.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-text-contrast-color); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button-lg { + padding: 0.875rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3.25rem; + min-width: 3.25rem; + border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; +} +.rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { + padding: 0.875rem; +} +.rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-pager-element, .rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; +} +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { + padding: 0.5rem 1rem 0.5rem 0.5rem; +} +.rz-pager-element, .rz-button-md.rz-button-icon-only { + padding: 0.5rem; +} +.rz-pager-element .rzi, .rz-button-md .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { + padding: 0.25rem 0.75rem; + height: auto; + line-height: 1.25rem; + min-height: 1.75rem; + min-width: 1.75rem; + font-size: var(--rz-body-font-size); +} +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { + padding: 0.25rem 0.75rem 0.25rem 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { + padding: 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-button-xs { + padding: 0.125rem 0.25rem; + height: auto; + line-height: 1rem; + min-height: 1.25rem; + min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; +} +.rz-button-xs .rz-button-box { + line-height: 1rem; + gap: 0.125rem; +} +.rz-button-xs.rz-button-icon-left { + padding: 0.125rem 0.5rem 0.125rem 0.125rem; +} +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { + padding: 0.125rem; +} +.rz-button-xs .rzi { + font-size: calc(0.8 * var(--rz-icon-size)); + line-height: calc(0.8 * var(--rz-icon-size)); + width: calc(0.8 * var(--rz-icon-size)); + height: calc(0.8 * var(--rz-icon-size)); +} + +@keyframes button-icon-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.rz-badge { + box-sizing: border-box; + color: var(--rz-text-contrast-color); + display: inline-block; + padding: var(--rz-badge-padding); + font-size: var(--rz-badge-font-size); + font-weight: var(--rz-badge-font-weight); + line-height: var(--rz-badge-line-height); + text-align: center; + text-transform: var(--rz-badge-text-transform); + white-space: nowrap; + border-radius: var(--rz-badge-border-radius); + letter-spacing: var(--rz-badge-letter-spacing); +} +.rz-button .rz-badge { + vertical-align: top; +} + +.rz-badge-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-badge-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-badge-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-badge-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} + +.rz-badge-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-badge-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-badge-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-badge-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} + +.rz-badge-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-badge-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-badge-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-badge-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} + +.rz-badge-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-badge-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-badge-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-badge-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} + +.rz-badge-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-badge-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-badge-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-badge-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-badge-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} + +.rz-badge-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-badge-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-badge-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-badge-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} + +.rz-badge-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-badge-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-badge-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-badge-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} + +.rz-badge-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-variant-outlined.rz-badge-primary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} + +.rz-variant-outlined.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-lighter); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} + +.rz-variant-outlined.rz-badge-info { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-lighter); +} +.rz-variant-outlined.rz-badge-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-variant-outlined.rz-badge-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-variant-outlined.rz-badge-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-variant-outlined.rz-badge-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} + +.rz-variant-outlined.rz-badge-warning { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-lighter); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} + +.rz-variant-outlined.rz-badge-error { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-lighter); +} +.rz-variant-outlined.rz-badge-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-variant-outlined.rz-badge-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-variant-outlined.rz-badge-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-variant-outlined.rz-badge-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} + +.rz-variant-outlined.rz-badge-danger { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-lighter); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} + +.rz-variant-outlined.rz-badge-success { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-lighter); +} +.rz-variant-outlined.rz-badge-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-variant-outlined.rz-badge-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-variant-outlined.rz-badge-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-variant-outlined.rz-badge-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} + +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-700); + color: var(--rz-base-700); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + +.rz-variant-text.rz-badge-primary { + background-color: transparent; +} +.rz-variant-text.rz-badge-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-variant-text.rz-badge-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-variant-text.rz-badge-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-variant-text.rz-badge-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-variant-text.rz-badge-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} + +.rz-variant-text.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-text.rz-badge-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-variant-text.rz-badge-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-variant-text.rz-badge-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-variant-text.rz-badge-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-variant-text.rz-badge-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} + +.rz-variant-text.rz-badge-info { + background-color: transparent; +} +.rz-variant-text.rz-badge-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-variant-text.rz-badge-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-variant-text.rz-badge-info.rz-shade-default { + color: var(--rz-info); +} +.rz-variant-text.rz-badge-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-variant-text.rz-badge-info.rz-shade-darker { + color: var(--rz-info-darker); +} + +.rz-variant-text.rz-badge-warning { + background-color: transparent; +} +.rz-variant-text.rz-badge-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-variant-text.rz-badge-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-variant-text.rz-badge-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-variant-text.rz-badge-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-variant-text.rz-badge-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} + +.rz-variant-text.rz-badge-error { + background-color: transparent; +} +.rz-variant-text.rz-badge-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-variant-text.rz-badge-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-variant-text.rz-badge-error.rz-shade-default { + color: var(--rz-error); +} +.rz-variant-text.rz-badge-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-variant-text.rz-badge-error.rz-shade-darker { + color: var(--rz-error-darker); +} + +.rz-variant-text.rz-badge-danger { + background-color: transparent; +} +.rz-variant-text.rz-badge-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-variant-text.rz-badge-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-variant-text.rz-badge-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-variant-text.rz-badge-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-variant-text.rz-badge-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} + +.rz-variant-text.rz-badge-success { + background-color: transparent; +} +.rz-variant-text.rz-badge-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-variant-text.rz-badge-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-variant-text.rz-badge-success.rz-shade-default { + color: var(--rz-success); +} +.rz-variant-text.rz-badge-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-variant-text.rz-badge-success.rz-shade-darker { + color: var(--rz-success-darker); +} + +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-700); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + +.rz-badge-pill { + border-radius: var(--rz-badge-pill-border-radius); + padding: var(--rz-badge-pill-padding); +} + +.rz-dropzone { + user-select: none; +} + +.rz-dropzone-item { + user-select: none; + cursor: grab; +} + +.rz-dragging { + cursor: grabbing; +} + +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { + box-shadow: var(--rz-input-hover-shadow); + border: var(--rz-input-hover-border); +} + +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { + box-shadow: var(--rz-input-focus-shadow); + border: var(--rz-input-focus-border); + outline: var(--rz-input-focus-outline); + outline-offset: var(--rz-input-focus-outline-offset); +} + +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { + background-color: var(--rz-input-disabled-background-color); + color: var(--rz-input-disabled-color); + border: none; +} + +input { + color: var(--rz-input-value-color); + font-size: var(--rz-input-font-size); +} +input::placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); +} + +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + color: var(--rz-input-value-color); + font-family: inherit; + font-size: var(--rz-input-font-size); + transition: var(--rz-input-transition); + outline: none; +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + box-shadow: none; + background-color: transparent; + outline: none; + border: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus-within { + border: none; + box-shadow: none; +} + +.rz-header { + background-color: var(--rz-header-background-color); + min-height: var(--rz-header-min-height); + border-bottom: var(--rz-header-border); + color: var(--rz-header-color); + box-shadow: var(--rz-header-shadow); +} +.rz-header.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--rz-header-z); +} +.rz-header a { + text-decoration: none; +} + +.rz-footer { + padding: var(--rz-footer-padding); + border-top: var(--rz-footer-border); + background-color: var(--rz-footer-background-color); + color: var(--rz-footer-color); +} +.rz-footer.fixed { + position: fixed; + z-index: var(--rz-footer-z); + bottom: 0; + left: 0; + right: 0; +} + +.rz-sidebar { + background-color: var(--rz-sidebar-background-color); + color: var(--rz-sidebar-color); + border-inline-end: var(--rz-sidebar-border-inline-end); + position: fixed; + overflow: auto; + left: 0; + top: 0; + bottom: 0; + z-index: var(--rz-sidebar-z); + width: var(--rz-sidebar-width); + opacity: 1; + transition: width var(--rz-transition), opacity var(--rz-transition); +} + +@media (max-width: 768px) { + .rz-sidebar-responsive { + width: 0; + opacity: 0; + } +} +.rz-sidebar-expanded { + width: var(--rz-sidebar-width); + opacity: 1; +} + +.rz-sidebar-collapsed { + width: 0 !important; + opacity: 0; +} + +.rz-card { + box-sizing: border-box; + padding: var(--rz-card-padding); + border-radius: var(--rz-card-border-radius); + background-color: var(--rz-card-background-color); +} +.rz-card.rz-variant-filled { + box-shadow: var(--rz-card-shadow); +} +.rz-card.rz-variant-flat { + background-color: var(--rz-card-flat-background-color); +} +.rz-card.rz-variant-outlined { + background: transparent; + border: var(--rz-card-border); +} +.rz-card.rz-variant-text { + background: transparent; +} +.rz-card h1, +.rz-card h2, +.rz-card h3, +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + +.rz-accordion { + box-sizing: border-box; + border-radius: var(--rz-accordion-border-radius); + box-shadow: var(--rz-accordion-shadow); +} +.rz-accordion > div:first-child { + border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; +} +.rz-accordion > div:last-child, .rz-accordion > div:last-child > div { + border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); +} +.rz-accordion > div:only-child { + border-radius: var(--rz-accordion-border-radius); +} +.rz-accordion:focus { + outline: var(--rz-outline-normal); +} +.rz-accordion:focus-visible { + outline: var(--rz-accordion-item-focus-outline); +} +.rz-accordion .rz-accordion-header { + background-color: var(--rz-accordion-item-background-color); + margin: var(--rz-accordion-item-margin); +} +.rz-accordion .rz-accordion-header:not(:first-child) { + border-top: var(--rz-accordion-item-border); +} +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); + color: var(--rz-accordion-item-color); + line-height: var(--rz-accordion-item-line-height); + text-decoration: none; + display: flex; + align-items: center; + font-size: var(--rz-accordion-item-font-size); + font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; +} +.rz-accordion .rz-accordion-header > a:hover { + color: var(--rz-accordion-hover-color); +} +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { + flex-grow: 1; +} +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { + outline: var(--rz-accordion-item-focus-outline); + outline-offset: var(--rz-accordion-item-focus-outline-offset); +} +.rz-accordion .rz-accordion-header .rzi { + font-size: var(--rz-accordion-icon-font-size); + margin-inline: var(--rz-accordion-icon-margin-inline); +} + +.rz-accordion-toggle-icon { + width: var(--rz-accordion-icon-width); + height: var(--rz-accordion-icon-height); + font-size: var(--rz-accordion-icon-font-size); + order: var(--rz-accordion-toggle-icon-order); +} +.rz-accordion-toggle-icon.rzi { + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); +} +.rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_right"; +} +.rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-accordion-content-wrapper-overflown { + overflow: hidden; +} + +.rz-accordion-content { + font-size: var(--rz-accordion-content-font-size); + background-color: var(--rz-accordion-item-background-color); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); +} + +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); + background: var(--rz-panel-background-color); + border-radius: var(--rz-panel-border-radius); + box-shadow: var(--rz-panel-shadow); +} + +.rz-panel-titlebar { + display: flex; + justify-content: space-between; +} + +.rz-panel-content { + margin: var(--rz-panel-content-margin); +} + +.rz-panel-content-wrapper[aria-hidden=true] { + display: none; +} + +.rz-panel-title { + line-height: var(--rz-panel-title-line-height); + font-weight: var(--rz-panel-title-font-weight); +} + +.rz-panel-titlebar-toggler { + width: var(--rz-panel-toggle-icon-width); + height: var(--rz-panel-toggle-icon-height); + font-size: var(--rz-panel-toggle-icon-font-size); + border-radius: var(--rz-panel-toggle-icon-border-radius); + background-color: var(--rz-panel-toggle-icon-background-color); + color: inherit; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} +.rz-panel-titlebar-toggler:hover { + text-decoration: none; + color: var(--rz-panel-hover-color); +} +.rz-panel-titlebar-toggler:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-titlebar-toggler:focus-visible { + outline: var(--rz-panel-toggle-icon-focus-outline); + outline-offset: var(--rz-panel-toggle-icon-focus-outline-offset); +} +.rz-panel-titlebar-toggler .rzi-minus:before { + content: "remove"; +} +.rz-panel-titlebar-toggler .rzi-plus:before { + content: "add"; +} + +.rz-sidebar-toggle { + appearance: none; + cursor: pointer; + border: none; + padding: var(--rz-sidebar-toggle-padding); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); + background-color: var(--rz-sidebar-toggle-background-color); + color: var(--rz-sidebar-toggle-color); +} +.rz-justify-content-flex-end .rz-sidebar-toggle { + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; +} +.rz-sidebar-toggle:focus { + outline: none; +} +.rz-sidebar-toggle:focus-visible { + outline: var(--rz-sidebar-toggle-focus-outline); + outline-offset: var(--rz-sidebar-toggle-focus-outline-offset); +} +.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover { + color: var(--rz-sidebar-toggle-hover-color); + background: var(--rz-sidebar-toggle-hover-background-color); + border-radius: var(--rz-sidebar-toggle-hover-border-radius); +} +.rz-sidebar-toggle .rzi { + width: var(--rz-sidebar-toggle-icon-width); + height: var(--rz-sidebar-toggle-icon-height); + font-size: var(--rz-sidebar-toggle-icon-width); +} + +.rz-navigation-item-link { + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.rz-navigation-item-link:hover { + text-decoration: none; +} + +.rz-navigation-item-text { + flex: auto; +} + +.rz-context-menu { + box-sizing: border-box; +} +.rz-context-menu .rz-menu { + flex-direction: column; +} + +.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { + box-shadow: var(--rz-context-menu-box-shadow); + border: var(--rz-menu-border); + border-radius: var(--rz-menu-border-radius); +} + +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + align-items: stretch; + background-color: var(--rz-menu-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + background-color: var(--rz-menu-top-item-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-top-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-top-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-top-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu):focus { + outline: var(--rz-outline-normal); +} +.rz-menu:not(.rz-profile-menu):focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-menu-item-focus-outline); + outline-offset: var(--rz-menu-item-focus-outline-offset); +} +.rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-end: -2px; + height: 1px; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: var(--rz-menu-top-item-selected-color); + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item { + position: relative; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + margin: 0; + min-width: 100%; + box-shadow: var(--rz-context-menu-box-shadow); + z-index: 3; + border-radius: var(--rz-menu-border-radius); + background-color: var(--rz-menu-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu { + position: static; + box-shadow: none; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + margin-inline-start: var(--rz-menu-item-offset); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); +} +.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { + margin-inline: var(--rz-menu-item-icon-margin-inline); +} + +.rz-navigation-item-wrapper, +.rz-navigation-item-link, +.rz-navigation-item-text { + transition: var(--rz-menu-item-transition); +} + +li.rz-navigation-item.rz-state-disabled { + opacity: var(--rz-menu-item-disabled-opacity); + cursor: initial; + pointer-events: none; +} + +.rz-menu-toggle-item { + display: none; + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); + justify-content: end; + align-items: center; + width: 100%; + height: 100%; +} + +.rz-menu-toggle { + appearance: none; + background-color: transparent; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: var(--rz-menu-top-item-color); +} +.rz-menu-toggle:hover { + background-color: transparent; + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu-toggle:active { + background-color: transparent; + color: var(--rz-menu-top-item-color); +} +.rz-context-menu .rz-menu-toggle { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu-toggle:hover { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu-toggle:active { + color: var(--rz-menu-item-color); +} + +@media (max-width: 768px) { + .rz-menu:not(.rz-profile-menu).rz-menu-closed .rz-navigation-item { + display: none; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle .rzi { + margin: 0; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open { + display: block; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-item { + background-color: inherit; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-menu { + position: static; + box-shadow: none; + border-radius: 0; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item { + display: flex; + } + .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active:before { + display: none !important; + } +} +.rz-panel-menu { + box-sizing: border-box; + list-style: none; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; + overflow: auto; + font-size: var(--rz-panel-menu-font-size); + font-weight: var(--rz-panel-menu-font-weight); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ +} +.rz-panel-menu:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-panel-menu-focus-outline); + outline-offset: var(--rz-panel-menu-focus-outline-offset); +} +.rz-panel-menu > .rz-navigation-item { + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); +} +.rz-panel-menu .rz-navigation-item { + border-block-end: var(--rz-panel-menu-item-border); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper { + position: relative; + line-height: var(--rz-panel-menu-item-line-height); + transition: var(--rz-panel-menu-item-transition); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-active-background-color); + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-active:before, +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-start: 0; + inset-block-end: 0; + width: 4px; + background-color: var(--rz-panel-menu-item-active-indicator); +} +.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); + color: inherit; + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu a.rz-navigation-item-link { + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu .rz-navigation-item-text { + flex: auto; +} +.rz-panel-menu .rz-navigation-item-icon-children { + margin-inline-start: auto; + font-size: var(--rz-panel-menu-toggle-icon-font-size); + opacity: var(--rz-panel-menu-toggle-icon-opacity); + z-index: 1; +} +.rz-panel-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-height); + width: var(--rz-panel-menu-icon-width); + color: var(--rz-panel-menu-icon-color); + margin-inline: var(--rz-panel-menu-icon-margin-inline); + font-size: var(--rz-panel-menu-icon-font-size); + transition: var(--rz-panel-menu-item-transition); +} +.rz-panel-menu .rz-navigation-menu { + list-style: none; + padding: 0; + margin-block-end: 0; + overflow: hidden; + /* Third level items */ +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); + border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color); + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-2nd-level-active-background-color); + color: var(--rz-panel-menu-item-2nd-level-active-color); + font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-active-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-2nd-level-icon-size); + width: var(--rz-panel-menu-icon-2nd-level-icon-size); + font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu { + margin: 0; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); + color: var(--rz-panel-menu-item-3rd-level-active-color); +} + +ul.rz-profile-menu { + box-sizing: border-box; + list-style: none; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); + display: inline-block; + background-color: var(--rz-profile-menu-top-item-background-color); + border-inline-start: var(--rz-profile-menu-border); + position: relative; + z-index: 3; +} +ul.rz-profile-menu:focus { + outline: var(--rz-outline-normal); +} +ul.rz-profile-menu:focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +ul.rz-profile-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-profile-menu-item-focus-outline); + outline-offset: var(--rz-profile-menu-item-focus-outline-offset); +} +ul.rz-profile-menu .rz-navigation-item-icon-children { + color: var(--rz-profile-menu-toggle-button-color); +} +ul.rz-profile-menu .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + border-radius: var(--rz-profile-menu-border-radius); + background-color: var(--rz-profile-menu-background-color); + box-shadow: var(--rz-context-menu-box-shadow); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; + min-width: 100%; + white-space: nowrap; +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-profile-menu-item-hover-background-color); + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link, +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text { + color: var(--rz-menu-item-color); +} +ul.rz-profile-menu .rz-navigation-menu .rzi { + width: var(--rz-profile-menu-item-icon-width); + height: var(--rz-profile-menu-item-icon-height); + font-size: var(--rz-profile-menu-item-icon-font-size); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); +} + +.rz-gravatar { + box-sizing: border-box; + width: var(--rz-gravatar-width); + height: var(--rz-gravatar-height); + display: inline-block; + border-radius: var(--rz-gravatar-border-radius); + box-shadow: var(--rz-gravatar-box-shadow); +} + +.rz-steps { + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.rz-steps .rz-widget-content { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.rz-steps ul { + list-style: none; + padding: 0; +} +.rz-steps .rz-menuitem-link { + display: inline-flex; + align-items: center; + color: var(--rz-steps-color); + cursor: pointer; + text-decoration: none; +} +.rz-steps .rz-menuitem-link:hover { + text-decoration: none; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps .rz-state-disabled .rz-menuitem-link { + color: var(--rz-text-disabled-color); + cursor: default; +} +.rz-steps .rz-state-disabled .rz-menuitem-link:hover { + color: var(--rz-text-disabled-color) !important; +} +.rz-steps .rz-state-highlight .rz-steps-title { + color: var(--rz-steps-title-selected-color); +} +.rz-steps .rz-state-highlight .rz-steps-number { + background: var(--rz-steps-number-selected-background); + color: var(--rz-steps-number-selected-color); +} + +.rz-steps-item { + display: inline-block; +} +.rz-steps-item:focus { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible .rz-steps-number { + outline: var(--rz-steps-number-focus-outline); + outline-offset: var(--rz-steps-number-focus-outline-offset); +} + +.rz-steps-title { + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); +} + +.rz-steps-number { + text-align: center; + line-height: var(--rz-steps-number-line-height); + color: var(--rz-steps-number-color); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); + width: var(--rz-steps-number-width); + height: var(--rz-steps-number-height); + background-color: var(--rz-steps-number-background-color); + border-radius: var(--rz-steps-number-border-radius); +} + +.rz-steps-buttons { + display: flex; + justify-content: space-between; + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); +} + +.rz-steps-next, +.rz-steps-prev { + display: inline-flex; + align-items: center; + color: var(--rz-steps-button-color) !important; + text-decoration: none; +} +.rz-steps-next:not(.rz-state-disabled):hover, +.rz-steps-prev:not(.rz-state-disabled):hover { + cursor: pointer; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps-next:hover, +.rz-steps-prev:hover { + text-decoration: none; +} +.rz-steps-next.rz-state-disabled, +.rz-steps-prev.rz-state-disabled { + opacity: 0.5 !important; +} + +.rz-steps-prev .rzi:before { + content: "navigate_before"; +} + +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; +} + +.rz-checkbox-list-vertical { + box-sizing: border-box; +} +.rz-checkbox-list-vertical .rz-checkbox { + display: flex; + align-items: center; + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); + cursor: pointer; +} + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} +.rz-checkbox-list-horizontal .rz-checkbox { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-checkbox { + cursor: initial; +} + +.rz-chkbox-label, +.rz-chkbox-template { + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); +} + +.rz-chkbox { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + width: var(--rz-checkbox-width); + min-width: var(--rz-checkbox-width); + height: var(--rz-checkbox-height); +} +.rz-chkbox:focus { + outline: var(--rz-outline-normal); +} +.rz-chkbox:focus-visible .rz-chkbox-box { + outline: var(--rz-checkbox-focus-outline); + outline-offset: var(--rz-checkbox-focus-outline-offset); +} + +.rz-chkbox-box { + position: absolute; + cursor: pointer; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: var(--rz-input-border); + border-width: var(--rz-checkbox-border-width); + border-radius: var(--rz-checkbox-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-chkbox-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-checkbox-border-width); +} +.rz-chkbox-box.rz-state-disabled { + cursor: initial; + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-checkbox-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-chkbox-box .rzi { + width: var(--rz-checkbox-icon-width); + height: var(--rz-checkbox-icon-height); + font-size: var(--rz-checkbox-icon-font-size); + color: var(--rz-checkbox-checked-color); + vertical-align: middle; + background-color: var(--rz-checkbox-checked-icon-background-color); + border-radius: var(--rz-checkbox-checked-icon-border-radius); +} +.rz-chkbox-box .rzi-check:before { + content: "check"; +} +.rz-chkbox-box .rzi-times { + width: var(--rz-checkbox-tri-icon-width); + height: var(--rz-checkbox-tri-icon-height); + font-size: var(--rz-checkbox-tri-icon-font-size); +} +.rz-chkbox-box .rzi-times:before { + content: "remove"; +} +.rz-chkbox-box.rz-state-active { + background-color: var(--rz-checkbox-checked-background-color); + border: var(--rz-checkbox-checked-border); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-checkbox-checked-hover-background-color); + border: var(--rz-checkbox-checked-hover-border); +} +.rz-chkbox-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-checkbox-checked-disabled-background-color); + border: var(--rz-checkbox-checked-disabled-border); + opacity: 0.5; +} + +.rz-switch { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + width: 3rem; + min-width: 3rem; + height: 1.8rem; + border-radius: calc(5 * var(--rz-border-radius)); +} +.rz-switch:focus { + outline: var(--rz-outline-normal); +} +.rz-switch:focus-visible { + outline: var(--rz-switch-focus-outline); + outline-offset: var(--rz-switch-focus-outline-offset); +} + +.rz-switch-circle { + position: absolute; + cursor: pointer; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; +} + +.rz-switch-circle.rz-disabled { + opacity: 0.5; + cursor: initial; +} + +.rz-switch .rz-switch-circle { + background: var(--rz-switch-background-color); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: calc(5 * var(--rz-border-radius)); +} + +.rz-switch.rz-switch-checked .rz-switch-circle { + background: var(--rz-switch-checked-background-color); +} + +.rz-switch .rz-switch-circle:before { + background: var(--rz-switch-circle-background-color); + width: 1.26rem; + height: 1.26rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; + border-radius: calc(5 * var(--rz-border-radius) - 3px); + transition: transform 0.2s linear; + box-shadow: var(--rz-switch-box-shadow); +} + +.rz-switch-circle:before { + position: absolute; + content: ""; + inset-block-start: 50%; +} + +.rz-switch-circle.rz-disabled:before { + box-shadow: none; +} + +.rz-switch.rz-switch-checked .rz-switch-circle:before { + background: var(--rz-switch-checked-circle-background-color); + transform: translateX(1.2rem); +} + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); +} + +.rz-radio-button-list-vertical { + box-sizing: border-box; +} +.rz-radio-button-list-vertical .rz-radio-btn { + display: flex; + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); + align-items: center; +} + +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} +.rz-radio-button-list-horizontal .rz-radio-btn { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-radiobutton { + cursor: initial; +} + +.rz-radiobutton-label, +.rz-radiobutton-template { + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); +} + +.rz-radiobutton { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + width: var(--rz-radio-width); + height: var(--rz-radio-height); + border-radius: var(--rz-radio-border-radius); +} +.rz-radiobutton:focus { + outline: var(--rz-outline-normal); +} +.rz-radiobutton:focus-visible { + outline: var(--rz-radio-focus-outline); + outline-offset: var(--rz-radio-focus-outline-offset); +} + +.rz-radiobutton-box { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + width: inherit; + border: var(--rz-input-border); + border-width: var(--rz-radio-border-width); + border-radius: var(--rz-radio-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box:active:not(.rz-state-disabled) { + background-color: var(--rz-radio-active-background-color); + box-shadow: var(--rz-radio-active-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-disabled { + cursor: initial; + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-radio-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-radiobutton-box .rzi { + width: var(--rz-radio-icon-width); + height: var(--rz-radio-icon-height); + color: var(--rz-radio-checked-color); +} +.rz-radiobutton-box .rzi-circle-on { + border-radius: var(--rz-radio-border-radius); + vertical-align: middle; + background-color: var(--rz-radio-circle-background-color); + box-shadow: var(--rz-radio-circle-shadow); +} +.rz-radiobutton-box .rzi-circle-on:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-circle-hover-background-color); +} +.rz-radiobutton-box.rz-state-active { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-checked-hover-background-color); + border: var(--rz-radio-checked-border); + box-shadow: var(--rz-radio-checked-hover-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); + opacity: 0.5; +} + +.rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; + border: var(--rz-fieldset-border); + border-radius: var(--rz-fieldset-border-radius); +} + +.rz-fieldset-content { + padding: var(--rz-fieldset-padding); +} + +.rz-fieldset-content-wrapper { + overflow: hidden; +} + +.rz-fieldset-legend-text { + vertical-align: middle; +} + +.rz-fieldset-toggler { + vertical-align: middle; + width: var(--rz-fieldset-toggle-width); + height: var(--rz-fieldset-toggle-height); + background-color: var(--rz-fieldset-toggle-background-color); + color: var(--rz-fieldset-toggle-color); + border: var(--rz-fieldset-toggle-border); +} +.rz-fieldset-toggler.rzi { + text-align: center; + font-size: var(--rz-fieldset-toggle-font-size); + line-height: var(--rz-fieldset-toggle-height); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); +} +.rz-fieldset-toggler.rzi-minus:before { + content: "remove"; +} +.rz-fieldset-toggler.rzi-plus:before { + content: "add"; +} +a:focus .rz-fieldset-toggler { + outline: var(--rz-outline-normal); +} +a:focus-visible .rz-fieldset-toggler { + outline: var(--rz-fieldset-toggle-focus-outline); + outline-offset: var(--rz-fieldset-toggle-focus-outline-offset); +} + +.rz-fieldset-legend { + float: none; + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); + width: auto; + color: var(--rz-fieldset-legend-color); + font-size: var(--rz-fieldset-legend-font-size); +} +.rz-fieldset-legend a { + display: inline-flex; + align-items: center; + color: inherit; + text-decoration: none; +} +.rz-fieldset-legend a:focus { + outline: var(--rz-outline-normal); +} + +.rz-multiselect, .rz-dropdown { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + position: relative; + overflow: hidden; + text-align: start; +} +.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-dropdown.rz-dropdown-open { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect.rz-state-focus { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect-trigger, .rz-dropdown-trigger { + position: absolute; + display: flex; + align-items: center; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; +} +.rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { + width: var(--rz-dropdown-trigger-icon-width); + height: var(--rz-dropdown-trigger-icon-height); + font-size: var(--rz-dropdown-trigger-icon-height); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); +} +.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-dropdown-clear-icon { + position: absolute; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; + height: 100%; + display: flex; + align-items: center; + font-size: var(--rz-dropdown-trigger-icon-height); + opacity: 0.4; +} +.rz-dropdown-clear-icon:before { + content: "close"; +} +.rz-dropdown-clear-icon:hover { + opacity: 1; +} +.rz-state-disabled > .rz-dropdown-clear-icon { + display: none; +} + +.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel { + position: absolute; + background-color: var(--rz-dropdown-open-background-color); + border-radius: var(--rz-input-border-radius); + border: var(--rz-dropdown-panel-border); + box-shadow: var(--rz-dropdown-panel-shadow); +} + +.rz-dropdown-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} + +.rz-multiselect-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} +.rz-multiselect-panel .rz-chkbox { + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); +} + +.rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { + list-style: none; + padding: var(--rz-dropdown-items-padding); + margin: 0; +} +.rz-autocomplete-items li, .rz-multiselect-items li, .rz-dropdown-items li { + /* The 'No results found' item has no CSS class */ +} + +.rz-dropdown-items-wrapper, +.rz-multiselect-items-wrapper { + overflow: auto; + margin: var(--rz-dropdown-items-margin); + border-radius: var(--rz-input-border-radius); +} + +.rz-multiselect-items-wrapper { + overflow: auto; +} + +.rz-dropdown-filter-container { + padding: var(--rz-dropdown-filter-padding); + border-bottom: var(--rz-dropdown-filter-border); +} + +.rz-multiselect-filter-container .rz-inputtext, .rz-dropdown-filter { + background-color: transparent; + color: var(--rz-text-color); +} + +.rz-multiselect-header { + display: flex; + align-items: center; + padding: var(--rz-dropdown-item-padding); + margin: var(--rz-dropdown-items-margin); +} + +.rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-autocomplete-items li, .rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item { + padding: var(--rz-dropdown-item-padding); + transition: var(--rz-dropdown-item-transition); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover, .rz-dropdown-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-state-disabled.rz-menuitem, .rz-state-disabled.rz-autocomplete-list-item, .rz-state-disabled.rz-multiselect-item, .rz-autocomplete-items li.rz-state-disabled, .rz-dropdown-items li.rz-state-disabled, .rz-multiselect-items li.rz-state-disabled, .rz-dropdown-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} +.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} + +.rz-multiselect-close { + display: none; +} + +.rz-multiselect-filter-container { + flex: auto; + border-bottom: var(--rz-dropdown-filter-border); +} +.rz-multiselect-filter-container .rz-inputtext { + padding: 0; +} + +.rz-multiselect-item { + display: flex; + align-items: center; +} + +.rz-multiselect-item-content { + flex: 1; +} + +.rz-multiselect-label-container, +.rz-dropdown-label { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); + margin: 0; +} + +.rz-dropdown-chips { + height: inherit; + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); +} +.rz-dropdown-chips .rz-dropdown-chips-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-inline-end: 3rem; +} +.rz-dropdown-chips .rz-chip { + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: var(--rz-chip-gap); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); + color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); + border-radius: var(--rz-chip-border-radius); +} +.rz-dropdown-chips .rz-chip .rz-chip-text { + font-size: var(--rz-chip-font-size); +} +.rz-dropdown-chips .rz-chip .rz-button { + border-radius: var(--rz-chip-border-radius); + box-shadow: none; + align-self: stretch; +} +.rz-dropdown-chips .rz-chip .rzi { + vertical-align: middle; + font-size: 1rem; +} + +.rz-clear .rz-multiselect-label-container, +.rz-clear .rz-dropdown-label { + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); +} + +.rz-autocomplete { + box-sizing: border-box; + display: inline-block; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + background-color: var(--rz-input-background-color); + transition: var(--rz-input-transition); + overflow: hidden; +} +.rz-autocomplete-input { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + background-color: transparent; + color: var(--rz-input-value-color); + box-shadow: var(--rz-input-shadow); + border: none; + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + width: 100%; + transition: var(--rz-input-transition); +} +.rz-autocomplete-input:focus { + outline: none; +} +.rz-autocomplete-input:disabled { + border: none; +} + +.rz-autocomplete-panel { + overflow: auto; + box-sizing: content-box; +} + +.rz-listbox { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + overflow: hidden; + background-color: var(--rz-listbox-background-color); + border: var(--rz-listbox-border); + border-radius: var(--rz-listbox-border-radius); + text-align: start; +} +.rz-listbox .rz-chkbox { + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); +} +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-listbox:focus, .rz-listbox:focus-within { + outline: var(--rz-outline-normal); + border: var(--rz-listbox-focus-border); + box-shadow: var(--rz-listbox-focus-shadow); +} + +.rz-listbox-list { + margin: 0; + padding: 0; +} + +.rz-listbox-item { + cursor: default; + padding: var(--rz-listbox-item-padding); + margin: var(--rz-listbox-item-margin); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-listbox-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-listbox-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-listbox-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} + +.rz-listbox-header { + display: flex; + align-items: center; + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); + border-bottom: var(--rz-listbox-filter-border); +} + +.rz-listbox-list-wrapper { + flex: auto; + overflow: auto; + padding: var(--rz-listbox-padding); +} + +.rz-listbox-filter-container, .rz-dropdown-filter-container, .rz-multiselect-filter-container { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.rz-listbox-filter-container .rz-inputtext, .rz-dropdown-filter-container .rz-inputtext, .rz-multiselect-filter-container .rz-inputtext { + flex: auto; + width: 0; + border: none; + line-height: var(--rz-input-line-height); +} +.rz-listbox-filter-container .rz-inputtext:focus, .rz-dropdown-filter-container .rz-inputtext:focus, .rz-multiselect-filter-container .rz-inputtext:focus { + outline: none; +} +.rz-listbox-filter-container .rzi-search, .rz-dropdown-filter-container .rzi-search, .rz-multiselect-filter-container .rzi-search { + width: var(--rz-listbox-header-icon-width); + height: var(--rz-listbox-header-icon-height); + line-height: var(--rz-listbox-header-icon-height); + font-size: var(--rz-listbox-header-icon-height); +} +.rz-listbox-filter-container .rzi-search:before, .rz-dropdown-filter-container .rzi-search:before, .rz-multiselect-filter-container .rzi-search:before { + content: "search"; +} + +.rz-listbox-filter-container { + flex: auto; +} +.rz-listbox-filter-container .rz-inputtext { + background-color: transparent; +} + +.rz-splitbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { + display: none; +} +.rz-splitbutton .rz-button.rz-splitbutton-menubutton { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { + flex: auto; + overflow: hidden; + text-overflow: ellipsis; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.rz-splitbutton-menu { + display: none; + position: absolute; + min-width: var(--rz-splitbutton-menu-min-width); + box-shadow: var(--rz-splitbutton-menu-shadow); +} + +.rz-menu-list { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-menuitem .rz-menuitem-link { + color: inherit; + display: block; + text-decoration: none; +} +.rz-menuitem .rz-menuitem-link:hover { + text-decoration: none; +} +.rz-menuitem .rz-menuitem-icon { + vertical-align: top; +} + +.rz-splitbutton-menubutton { + margin-inline-start: 1px; +} +.rz-splitbutton-menubutton.rz-variant-outlined { + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); +} +.rz-splitbutton-menubutton .rz-button-text { + display: none; +} +.rz-splitbutton-menubutton .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-slider { + box-sizing: border-box; + position: relative; + display: inline-block; + border: var(--rz-slider-border); + border-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-background-color); +} +.rz-slider.rz-state-disabled { + background-color: var(--rz-slider-disabled-background-color); + border: var(--rz-slider-disabled-border); +} +.rz-slider.rz-state-disabled .rz-slider-range { + background-color: var(--rz-slider-disabled-range-background-color); + border: var(--rz-slider-disabled-range-border); +} +.rz-slider.rz-state-disabled .rz-slider-handle { + background-color: var(--rz-slider-disabled-handle-background-color); + border: var(--rz-slider-disabled-handle-border); +} + +.rz-slider-horizontal { + height: var(--rz-slider-horizontal-height); + width: var(--rz-slider-horizontal-width); +} + +.rz-slider-range { + position: absolute; + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-range-background-color); + border: var(--rz-slider-range-border); +} + +.rz-slider-handle { + position: absolute; + transform: translateY(-50%); + top: 50%; + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); + background-color: var(--rz-slider-handle-background-color); + border: var(--rz-slider-handle-border); + border-radius: var(--rz-slider-handle-border-radius); + box-shadow: var(--rz-slider-handle-shadow); + width: var(--rz-slider-handle-width); + height: var(--rz-slider-handle-height); + transition: var(--rz-slider-handle-transition); +} + +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active { + background-color: var(--rz-slider-handle-hover-background-color); + box-shadow: var(--rz-slider-handle-hover-shadow); + border: var(--rz-slider-handle-hover-border); + cursor: pointer; + outline: none; +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus { + outline: var(--rz-outline-normal); +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus-visible { + outline: var(--rz-slider-handle-focus-outline); + outline-offset: var(--rz-slider-handle-focus-outline-offset); +} + +.rz-rating { + box-sizing: border-box; + display: inline-flex; + font-size: var(--rz-rating-font-size); + height: 1em; +} +.rz-rating.rz-state-disabled .rzi { + opacity: var(--rz-rating-disabled-opacity); + color: var(--rz-rating-disabled-color); +} +.rz-rating a { + width: 1em; + height: 1em; + text-decoration: none; + cursor: default; + outline: none; +} +.rz-rating .rzi { + color: var(--rz-rating-color); + font-size: 1em; +} +.rz-rating .rzi-ban { + color: var(--rz-rating-ban-icon-color); +} +.rz-rating .rzi-ban:before { + content: "highlight_off"; +} +.rz-rating .rzi-star-o { + opacity: var(--rz-rating-opacity); +} +.rz-rating .rzi-star-o:before { + content: "star_border"; +} +.rz-rating .rzi-star { + color: var(--rz-rating-selected-color); +} +.rz-rating .rzi-star:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover { + cursor: pointer; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-ban { + color: var(--rz-rating-selected-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-ban { + color: var(--rz-rating-focus-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o:before { + content: "star"; +} + +.rz-security-code { + box-sizing: border-box; + display: inline-flex; +} + +.rz-security-code-wrapper { + flex: 1; + --rz-gap: 0.5rem; +} + +.rz-security-code-input { + text-align: center; + min-width: var(--rz-security-code-input-min-width); + min-height: var(--rz-security-code-input-min-height); + width: 100%; + height: 100%; + padding: var(--rz-security-code-input-padding); + font-size: var(--rz-security-code-input-font-size); + font-weight: var(--rz-security-code-input-font-weight); + line-height: var(--rz-security-code-input-line-height); +} + +.rz-selectbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-selectbutton .rz-button:focus-visible { + z-index: 1; +} + +.rz-selectbutton .rz-button.rz-button-xs { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-xs:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-sm { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { + display: inline-block; + position: relative; +} +.rz-datepicker .rz-readonly { + cursor: pointer; +} +.rz-datepicker > .rz-inputtext { + width: 100%; + line-height: var(--rz-datepicker-line-height); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); +} +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { + box-shadow: none; + color: var(--rz-datepicker-trigger-icon-hover-color); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} + +.rz-datepicker-inline { + background-color: var(--rz-datepicker-panel-background-color); + border: var(--rz-input-border); +} + +.rz-datepicker-trigger { + box-shadow: none; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 0.625rem; + transform: translateY(-50%); + background-color: transparent; + padding: 0; + vertical-align: text-top; + color: var(--rz-datepicker-trigger-icon-color); + width: var(--rz-datepicker-trigger-icon-width); + height: var(--rz-datepicker-trigger-icon-height); + font-size: var(--rz-datepicker-trigger-icon-height); +} +.rz-datepicker-trigger.rz-state-disabled { + border: none; + box-shadow: none; + cursor: initial; + opacity: 1; + color: var(--rz-input-disabled-color); +} +.rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active), .rz-datepicker-trigger:not(.rz-state-disabled):hover:active { + background-color: transparent; +} +.rz-datepicker-trigger:not(.rz-state-disabled):active { + box-shadow: none !important; + background-image: none !important; +} +.rz-datepicker-trigger .rzi-calendar, +.rz-datepicker-trigger .rzi-time { + font-size: inherit; + vertical-align: top; +} +.rz-datepicker-trigger .rzi-calendar:before { + content: "calendar_today"; +} +.rz-datepicker-trigger .rzi-time:before { + content: "schedule"; +} +.rz-datepicker-trigger .rz-button-text { + display: none; +} + +.rz-datepicker-popup-container { + box-sizing: content-box; + position: absolute; + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); + box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); +} + +.rz-datepicker-inline-container { + position: static; + white-space: nowrap; +} +.rz-datepicker-inline-container .rz-calendar { + display: inline-block; +} + +.rz-datepicker-footer { + position: relative; + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--rz-datepicker-header-background-color); + border-bottom: var(--rz-datepicker-header-border); + color: var(--rz-datepicker-header-color); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); +} + +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); +} +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { + color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); +} +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); +} + +.rz-calendar-prev { + order: 1; +} +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { + content: "chevron_right"; +} + +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { + outline: var(--rz-outline-normal); +} +.rz-calendar-view-container:focus-visible { + outline: var(--rz-datepicker-focus-outline); + outline-offset: var(--rz-datepicker-focus-outline-offset); +} + +.rz-calendar-view { + table-layout: fixed; + border-collapse: collapse; +} +.rz-calendar-view th { + font-weight: normal; + font-size: var(--rz-datepicker-calendar-header-font-size); + text-transform: var(--rz-datepicker-calendar-header-text-transform); + color: var(--rz-datepicker-calendar-header-color); + padding: var(--rz-datepicker-calendar-item-padding); + text-align: center; +} +.rz-calendar-view td { + text-align: center; + border-top: var(--rz-datepicker-calendar-border); + padding: 0; +} +.rz-calendar-view td .rz-state-default { + display: block; + padding: var(--rz-datepicker-calendar-item-padding); + color: var(--rz-datepicker-calendar-color); + font-size: var(--rz-datepicker-calendar-font-size); + border-radius: var(--rz-datepicker-calendar-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-calendar-view td .rz-state-default.rz-calendar-today { + color: var(--rz-datepicker-calendar-today-color); + background-color: var(--rz-datepicker-calendar-today-background-color); + box-shadow: var(--rz-datepicker-calendar-today-box-shadow); + border-radius: var(--rz-datepicker-calendar-today-border-radius); +} +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { + text-decoration: none; + color: var(--rz-datepicker-calendar-hover-color); + background-color: var(--rz-datepicker-calendar-hover-background-color); + cursor: pointer; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { + color: var(--rz-datepicker-calendar-selected-color); + background-color: var(--rz-datepicker-calendar-selected-background-color); + padding: var(--rz-datepicker-calendar-item-padding); + box-shadow: none; +} +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { + color: var(--rz-datepicker-calendar-selected-hover-color); + background-color: var(--rz-datepicker-calendar-selected-hover-background-color); +} +.rz-calendar-view .rz-state-disabled { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-other-month { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-week-number { + opacity: 0.5; +} + +/* Time Picker Styles */ +.rz-timepicker { + display: flex; + align-items: center; + justify-content: center; + gap: var(--rz-timepicker-gap); + border-top: var(--rz-datepicker-calendar-border); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); + color: var(--rz-timepicker-color); +} +.rz-timepicker .rzi-chevron-up:before { + content: "expand_less"; +} +.rz-timepicker .rzi-chevron-down:before { + content: "expand_more"; +} +.rz-timepicker .rz-separator { + color: var(--rz-timepicker-separator-color); +} +.rz-timepicker .rz-separator a { + display: none; +} +.rz-timepicker .rz-button-md { + padding: var(--rz-timepicker-button-padding); + text-transform: uppercase; +} + +.rz-hour-picker, +.rz-minute-picker, +.rz-second-picker { + background-color: var(--rz-timepicker-background-color); + width: 4rem; +} + +.rz-ampm-picker a { + text-decoration: none; +} + +.rz-numeric { + display: inline-block; + position: relative; + padding: 0px; +} +.rz-numeric input[type=number], +.rz-numeric input[type=text] { + -moz-appearance: textfield; + width: 100%; + height: 100%; + border: none; + background-color: transparent; + line-height: var(--rz-numeric-line-height); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); + outline: none; +} +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.rz-numeric.rz-state-disabled .rz-numeric-button { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); +} +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); + background-image: none; + box-shadow: none; + cursor: initial; +} + +.rz-numeric-button { + position: absolute; + inset-inline-end: var(--rz-numeric-button-offset); + padding: 0; + width: var(--rz-numeric-button-width); + height: var(--rz-numeric-button-height); + border-radius: var(--rz-numeric-button-border-radius); + background-color: var(--rz-numeric-button-background-color); + color: var(--rz-numeric-button-color); +} +.rz-numeric-button:hover { + background-color: var(--rz-numeric-button-background-color); +} +.rz-numeric-button .rzi { + font-size: var(--rz-numeric-button-height); + vertical-align: top; +} +.rz-numeric-button .rzi-caret-up:before { + content: "expand_less"; +} +.rz-numeric-button .rzi-caret-down:before { + content: "expand_more"; +} + +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); +} + +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); +} + +.rz-fileupload { + box-sizing: border-box; + display: inline-block; +} +.rz-fileupload .rz-button { + vertical-align: middle; + -webkit-appearance: none !important; +} + +.rz-fileupload-choose { + position: relative; + display: inline-block; + overflow: hidden; + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose input[type=file] { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + min-height: 100%; + cursor: pointer; +} +.rz-fileupload-choose.rz-state-disabled input[type=file] { + cursor: default; +} +.rz-fileupload-choose:not(.rz-state-disabled) { + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):active { + background-color: var(--rz-upload-choose-active-background-color); + color: var(--rz-upload-choose-active-color); +} + +.rz-fileupload-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.rz-fileupload-row > div { + margin: var(--rz-upload-files-margin); +} +.rz-fileupload-row .rz-button-text { + display: none; +} +.rz-fileupload-row .rz-button { + background-color: var(--rz-upload-files-remove-background-color); + color: var(--rz-upload-files-remove-color); +} +.rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash { + display: block; +} +.rz-fileupload-row .rz-button .rzi-close:before, +.rz-fileupload-row .rz-button .rzi-times:before, +.rz-fileupload-row .rz-button .rz-icon-trash:before { + content: "close"; +} + +.rz-fileupload-buttonbar { + position: relative; + background-color: var(--rz-upload-button-bar-background-color); + padding: var(--rz-upload-button-bar-padding); + border-radius: var(--rz-upload-button-bar-border-radius); +} +.rz-fileupload-buttonbar .rz-button:nth-child(3) { + float: right; + background-color: var(--rz-upload-cancel-background-color); + color: var(--rz-upload-cancel-color); +} + +.rz-fileupload-files { + background-color: var(--rz-upload-files-background-color); + padding: var(--rz-upload-files-padding); +} + +.rz-datatable { + position: relative; + box-shadow: var(--rz-grid-shadow); + border: var(--rz-grid-cell-border); + border-radius: var(--rz-grid-border-radius); + background-color: var(--rz-grid-background-color); + overflow: hidden; +} +.rz-datatable:focus { + outline: var(--rz-outline-normal); +} +.rz-datatable:focus-visible { + outline: var(--rz-grid-focus-outline); + outline-offset: var(--rz-grid-focus-outline-offset); +} +.rz-datatable .rz-col-icon { + text-align: center; + vertical-align: middle; + width: var(--rz-grid-column-icon-width); + padding: var(--rz-grid-column-icon-padding); +} +.rz-datatable .rzi-chevron-circle-right { + vertical-align: top; + /* Right-to-left arrow icons */ +} +.rz-datatable .rzi-chevron-circle-right:before { + content: "arrow_right"; +} +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} +.rz-datatable .rzi-chevron-circle-down { + vertical-align: top; +} +.rz-datatable .rzi-chevron-circle-down:before { + content: "arrow_drop_down"; +} +.rz-datatable.rz-has-template > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view > .rz-datatable-scrollable-body > .rz-datatable-scrollable-table-wrapper > table > .rz-datatable-scrollable-colgroup col:first-child { + width: var(--rz-grid-column-icon-width); +} + +.rz-unselectable-text { + user-select: none; +} + +.rz-datatable-tablewrapper > table, +.rz-datatable-scrollable-header-box > table, +.rz-datatable-scrollable-table-wrapper > table, +.rz-datatable-scrollable-footer-box > table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +.rz-resizable-column { + position: relative; +} + +.rz-datatable-reorder-indicator-up { + position: absolute; +} +.rz-datatable-reorder-indicator-up:before { + content: "arrow_drop_down"; +} + +.rz-datatable-reorder-indicator-down { + position: absolute; +} +.rz-datatable-reorder-indicator-down:before { + content: "arrow_drop_up"; +} + +.rz-column-resizer { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + cursor: col-resize; + width: var(--rz-grid-column-resizer-width); +} +.rz-column-resizer:after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + width: var(--rz-grid-column-resizer-helper-width); + background-color: transparent; +} +.rz-column-resizer:hover:after, .rz-column-resizer:active:after { + background-color: var(--rz-grid-column-resizer-helper-background-color); +} + +.rz-rowgroup-header .fa, +.rz-row-toggler { + color: var(--rz-grid-cell-color); +} + +.rz-datatable-scrollable-footer { + background-color: var(--rz-grid-header-background-color); + border-top: var(--rz-grid-cell-border); +} + +.rz-datatable-thead th, +.rz-grid-table thead th { + background-color: var(--rz-grid-header-background-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: inherit; + border-bottom: var(--rz-grid-header-cell-border-bottom); +} +.rz-datatable-thead th:not(:last-child), +.rz-grid-table thead th:not(:last-child) { + border-inline-end: var(--rz-grid-header-cell-border); +} +.rz-datatable-thead th > div:not(.rz-cell-filter), +.rz-grid-table thead th > div:not(.rz-cell-filter) { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + outline: none; + padding: var(--rz-grid-header-cell-padding); +} +.rz-datatable-thead th.rz-state-focused, +.rz-grid-table thead th.rz-state-focused { + outline: var(--rz-grid-cell-focus-outline); + outline-offset: var(--rz-grid-cell-focus-outline-offset); +} +.rz-datatable-thead th .rz-column-title, +.rz-grid-table thead th .rz-column-title { + display: inline-flex; + flex: auto; + align-items: center; + gap: 0.25rem; + width: 100%; + font-size: var(--rz-grid-header-font-size); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding-inline: var(--rz-grid-header-title-padding-inline); + font-weight: var(--rz-grid-header-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content, +.rz-grid-table thead th .rz-column-title-content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content:has(.rz-chkbox), +.rz-grid-table thead th .rz-column-title-content:has(.rz-chkbox) { + overflow: visible; +} +.rz-datatable-thead th.rz-text-align-center .rz-column-title, +.rz-grid-table thead th.rz-text-align-center .rz-column-title { + justify-content: center; + padding-inline-start: 0; +} +.rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th.rz-text-align-right .rz-column-title, +.rz-grid-table thead th.rz-text-align-right .rz-column-title { + justify-content: right; +} +.rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th .rz-column-drag + .rz-column-title, +.rz-grid-table thead th .rz-column-drag + .rz-column-title { + padding-inline-start: 0; +} + +.rz-datatable-tfoot td, .rz-grid-table tfoot td { + background-color: var(--rz-grid-foot-background-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + color: var(--rz-grid-foot-cell-color); + padding: var(--rz-grid-cell-padding); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} + +.rz-datatable-scrollable-header { + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-datatable-scrollable-body { + overflow: auto; + border-top: none; + flex: auto; + border-bottom-right-radius: var(--rz-border-radius); + border-bottom-left-radius: var(--rz-border-radius); +} + +.rz-has-pager .rz-datatable-scrollable-body { + border-radius: 0; +} + +.rz-sortable-column { + cursor: pointer; +} +.rz-sortable-column:focus { + outline: none; +} +.rz-sortable-column.rz-state-active { + background-color: var(--rz-grid-header-sorted-background-color); +} +.rz-sortable-column > div:hover .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { + color: var(--rz-grid-sort-icon-color); +} +.rz-sortable-column .rzi-grid-sort { + width: var(--rz-grid-sort-icon-width); + height: var(--rz-grid-sort-icon-height); + font-size: var(--rz-grid-sort-icon-height); + text-align: left; +} +.rz-sortable-column .rzi-sort { + color: transparent; +} +.rz-sortable-column .rzi-sort:before { + content: "sort"; +} +.rz-sortable-column .rzi-sort-asc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-asc:before { + content: "arrow_drop_up"; +} +.rz-sortable-column .rzi-sort-desc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-desc:before { + content: "arrow_drop_down"; +} + +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td { + background-color: var(--rz-grid-stripe-background-color); +} +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td { + background-color: var(--rz-grid-stripe-odd-background-color); +} + +.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th { + border-bottom: var(--rz-grid-header-cell-border); +} +.rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { + border-inline-end: var(--rz-grid-header-cell-border); +} + +.rz-datatable-data td, +.rz-grid-table td { + padding: var(--rz-grid-cell-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-data td:not(:last-child), +.rz-grid-table td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td.rz-composite-cell, +.rz-grid-table td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td .rz-cell-data, +.rz-grid-table td .rz-cell-data { + color: var(--rz-grid-cell-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rz-datatable-data td .rz-cell-data:has(.rz-chkbox), .rz-datatable-data td .rz-cell-data:has(.rz-button), +.rz-grid-table td .rz-cell-data:has(.rz-chkbox), +.rz-grid-table td .rz-cell-data:has(.rz-button) { + overflow: visible; +} +.rz-datatable-data td .rz-cell-toggle, +.rz-grid-table td .rz-cell-toggle { + display: flex; + align-items: center; + gap: 0.25rem; +} +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} +.rz-datatable-data tr td:first-child, +.rz-grid-table tr td:first-child { + border-inline-start: none; +} +.rz-datatable-data tr td:last-child:not(.rz-composite-cell), +.rz-grid-table tr td:last-child:not(.rz-composite-cell) { + border-inline-end: none; +} +.rz-datatable-data tr:first-child > td, +.rz-grid-table tr:first-child > td { + border-top: none; +} +.rz-datatable-data tr:last-child > td, +.rz-grid-table tr:last-child > td { + border-bottom: none; +} + +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { + border-bottom: none; + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td { + border-bottom: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} + +.rz-datatable-reflow tbody td > .rz-column-title { + display: none; +} + +.rz-datatable-scrollable { + display: flex; + flex-direction: column; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper { + height: 0; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view { + height: 0; +} + +.rz-datatable-scrollable-wrapper { + display: flex; + flex-direction: column; + flex: auto; +} + +.rz-datatable-scrollable-view { + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; +} + +.rz-datatable-header { + background-color: var(--rz-grid-toolbar-background-color); + padding: var(--rz-grid-header-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-header .rzi-plus { + font-size: var(--rz-grid-cell-font-size); +} +.rz-datatable-header .rzi-plus:before { + content: "add"; +} + +.rz-cell-filter { + padding: var(--rz-grid-filter-padding); + margin: var(--rz-grid-filter-margin); + border-top: var(--rz-grid-filter-border); + font-size: var(--rz-grid-filter-font-size); + font-weight: normal; +} +.rz-cell-filter .rz-cell-filter-label { + display: flex; + flex: auto; + align-items: center; +} +.rz-cell-filter .rz-cell-filter-label > .rzi { + width: var(--rz-grid-filter-icon-width); + height: var(--rz-grid-filter-icon-height); + font-size: var(--rz-grid-filter-icon-font-size); + margin-inline: var(--rz-grid-filter-icon-margin-inline); + color: var(--rz-grid-filter-color); +} +.rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { + margin-inline-start: auto; +} +.rz-cell-filter .rz-cell-filter-label .rz-current-filter { + margin-inline-start: 0.5rem; +} + +.rz-selectable tbody tr.rz-data-row td, +.rz-selectable tbody tr.rz-data-row .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:after { + content: ""; + position: absolute; + inset: 0; + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:before { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:after { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > .rzi { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > th.rz-state-focused { + color: var(--rz-grid-cell-focus-color) !important; +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > .rzi { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-disabled { + opacity: 0.5; + pointer-events: none; +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { + color: var(--rz-grid-hover-color); +} + +.rz-cell-filter-content { + display: flex; + flex: auto; + align-items: center; + color: var(--rz-grid-filter-color); + min-height: 1.375rem; + container-type: inline-size; + container-name: rz-cell-filter-content; +} + +@container rz-cell-filter-content (max-width: 200px) { + .rz-cell-filter-content .rz-filter-button .rzi { + display: none; + } + .rz-cell-filter-content .rz-filter-button { + position: absolute; + z-index: 1; + min-height: 0; + inset-inline-start: calc(var(--rz-border-width)); + height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + max-height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + line-height: calc(1.25rem - var(--rz-border-width) * 2); + border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-start-end-radius: 0; + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } +} +.rz-expanded-row > td { + border-bottom: none; + background-color: var(--rz-grid-hover-background-color); +} +.rz-expanded-row > td .rz-cell-data, +.rz-expanded-row > td .rz-row-toggler { + color: var(--rz-grid-hover-color); +} + +.rz-expanded-row-template { + background-color: var(--rz-grid-detail-template-background-color); + padding: var(--rz-grid-detail-template-padding); + border: var(--rz-grid-detail-template-border); + border-radius: var(--rz-grid-detail-template-border-radius); +} + +.rz-expanded-row-content > td { + padding-top: 0; + background-color: var(--rz-grid-detail-template-background-color); +} + +.rz-rowgroup-header a:hover { + text-decoration: none; +} +.rz-rowgroup-header td { + border-top: var(--rz-grid-border); + border-bottom: var(--rz-grid-border); +} + +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; +} + +.rz-datatable-loading-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--rz-grid-loading-indicator-color); + z-index: 2; +} +.rz-datatable-loading-content .rzi-circle-o-notch { + animation: rotation 0.5s linear infinite; + font-size: 2rem; +} +.rz-datatable-loading-content .rzi-circle-o-notch:before { + content: "refresh"; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@media (max-width: 768px) { + .rz-datatable-reflow .rz-data-grid-data > table, + .rz-datatable-reflow .rz-datatable-tablewrapper > table, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table { + table-layout: auto; + display: block; + } + .rz-datatable-reflow .rz-data-grid-data > table > tbody, + .rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody { + display: block; + } + .rz-datatable-reflow thead th { + display: none; + } + .rz-datatable-reflow .rz-data-row { + display: block; + } + .rz-datatable-reflow .rz-data-row > td { + display: block; + width: 100% !important; + text-align: left !important; + border: none; + } + .rz-datatable-reflow .rz-data-row > td .rz-column-title { + display: block; + } +} +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + +.rz-grid-filter-buttons { + display: flex; + justify-content: space-between; + padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} + +.rz-grid-filter-icon { + justify-self: flex-end; + color: var(--rz-grid-filter-color); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); + font-size: var(--rz-grid-header-filter-icon-font-size); + transition: var(--rz-grid-state-transition); + font-weight: 400; +} +.rz-grid-filter-icon:hover { + cursor: pointer; + color: var(--rz-grid-header-filter-icon-hover-color); +} + +.rz-grid-filter-active { + color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; +} + +.rz-data-grid { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.rz-data-grid-data { + overflow: auto; + flex: 1; + box-shadow: var(--rz-grid-data-border-shadow); +} + +.rz-grid-table td, .rz-grid-table th { + padding: var(--rz-grid-cell-padding); +} + +.rz-grid-table thead { + position: sticky; + top: 0; + z-index: 2; +} +.rz-grid-table thead th { + position: sticky; + top: 0; + z-index: 1; +} + +.rz-grid-table-fixed { + table-layout: fixed; +} +.rz-grid-table-fixed .rz-frozen-cell { + position: -webkit-sticky; + position: sticky; +} +.rz-grid-table-fixed .rz-frozen-cell-left, +.rz-grid-table-fixed .rz-frozen-cell-right, +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + background: var(--rz-grid-frozen-cell-background-color); + z-index: 1; +} +.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} + +.rz-grid-table tfoot, .rz-grid-table tfoot td { + position: sticky; + bottom: 0; + z-index: 1; +} + +.rz-grid-table { + width: 100%; + position: relative; + border-collapse: separate; + border-spacing: 0; +} +.rz-grid-table th { + white-space: nowrap; + overflow: hidden; +} +.rz-grid-table td { + white-space: nowrap; + overflow: hidden; +} + +.rz-grid-table tbody > div { + display: table-row; +} + +.rz-column-drag { + cursor: grab; + font-size: inherit; + color: var(--rz-column-drag-handle-color); + transition: var(--rz-grid-state-transition); + margin-inline: var(--rz-column-drag-handle-margin-inline); +} +.rz-column-drag:after { + content: "more_vert"; +} +.rz-column-drag:hover { + color: var(--rz-column-drag-handle-hover-color); +} +.rz-column-drag:active { + color: var(--rz-column-drag-handle-hover-color); + cursor: grabbing; +} + +.rz-column-draggable { + background-color: var(--rz-grid-header-background-color); + border-radius: var(--rz-border-radius); + box-shadow: var(--rz-column-draggable-shadow); + padding: 0; + display: flex; + align-items: center; +} +.rz-column-draggable > div { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + outline: none; + padding: 0; +} +.rz-column-draggable .rz-column-drag { + max-width: 1rem; +} +.rz-column-draggable .rz-column-title { + display: inline-flex; + flex: auto; + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-column-draggable .rz-grid-filter-icon { + display: none; +} + +.rz-group-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-group-header-items { + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); +} + +.rz-group-header-item { + display: flex; + align-items: center; + color: var(--rz-grid-group-header-item-color); + background-color: var(--rz-grid-group-header-item-background-color); + border: var(--rz-grid-group-header-item-border); + border-radius: var(--rz-grid-group-header-item-border-radius); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); + width: fit-content; + float: left; +} +.rz-group-header-item .rz-dialog-titlebar-close { + display: flex; + align-items: center; + text-decoration: none; +} + +.rz-group-header-item-title { + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); +} + +.rz-group-header-drop { + font-size: var(--rz-body-font-size); + color: var(--rz-text-tertiary-color); + height: fit-content; +} + +.rz-column-picker { + display: flex; +} + +.rz-filter-menu-symbol { + width: 1.75rem; + display: inline-block; +} + +.rz-filter-button { + flex: none; + margin-inline-end: 0.5rem; +} + +.rz-data-grid.rz-density-compact { + --rz-grid-cell-line-height: 1rem; + --rz-grid-cell-padding: 0.25rem 0.5rem; + --rz-grid-header-cell-padding: 0.25rem 0; + --rz-grid-header-padding: 0.25rem 1rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-filter-padding: 0.25rem 0.5rem; + --rz-grid-group-header-padding: 0.25rem; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; + --rz-dialog-close-font-size: 1rem; +} + +.rz-pager { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--rz-pager-gap); + flex-wrap: wrap; + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ +} +.rz-pager:focus { + outline: var(--rz-outline-normal); +} +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-pager.rz-align-right { + justify-content: right; +} +.rz-pager.rz-align-left { + justify-content: left; +} +.rz-pager.rz-align-center { + justify-content: center; +} +.rz-pager .rzi-step-backward:before { + content: "first_page"; +} +.rz-pager .rzi-caret-left:before { + content: "navigate_before"; +} +.rz-pager .rzi-caret-right:before { + content: "navigate_next"; +} +.rz-pager .rzi-step-forward:before { + content: "last_page"; +} +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { + order: 2; + width: var(--rz-pager-dropdown-width); + overflow: visible; +} +.rz-pager .rz-pagesize-text { + order: 2; + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); +} + +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); +} + +.rz-pager-bottom { + border-top: var(--rz-pager-border); +} + +.rz-pager-pages { + display: inline-flex; + gap: var(--rz-pager-gap); + margin: 0 0.5rem; +} + +.rz-pager-element { + letter-spacing: 0; +} + +.rz-align-center .rz-pager-first { + margin-inline-start: auto; +} + +.rz-pager-prev { + margin-inline-end: auto; +} +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; +} + +.rz-pager-next { + margin-inline-start: auto; +} +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; +} + +.rz-align-center .rz-pager-last { + margin-inline-end: auto; +} + +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-element:hover { + text-decoration: none; +} + +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-page { + display: inline-block; + min-width: var(--rz-pager-numeric-button-min-width); + text-align: center; + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { + margin-right: auto; +} +.rz-align-left .rz-pager-summary { + order: 2; + margin-left: auto; + padding: 0; +} +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} + +@media (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +@container rz-lookup-panel (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; +} +.rz-overlaypanel { + position: absolute; + overflow: hidden; + box-shadow: var(--rz-overlay-shadow); + border: var(--rz-overlay-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-overlay-background-color); +} + +.rz-tree { + box-sizing: border-box; + display: inline-block; + overflow: auto; +} +.rz-tree:focus { + outline: var(--rz-outline-normal); +} +.rz-tree:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} + +.rz-tree .rz-treenode.rz-treenode-leaf > .rz-treenode-content > .rz-tree-toggler { + visibility: hidden; +} + +.rz-treenode { + padding-inline-start: var(--rz-tree-node-toggle-width); +} + +.rz-tree-toggler { + cursor: pointer; + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); + width: var(--rz-tree-node-toggle-width); + height: 1.5rem; + font-size: var(--rz-icon-size); + line-height: 1.5rem; + text-align: center; + color: var(--rz-tree-node-toggle-color); + transition: var(--rz-tree-transition); +} +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} +.rz-tree-toggler.rzi-caret-right:before { + content: "arrow_right"; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); +} +.rz-tree-toggler.rzi-caret-down:before { + content: "arrow_drop_down"; + margin-inline-start: -0.125rem; +} +.rz-tree-toggler:hover { + color: var(--rz-tree-node-toggle-hover-color); +} + +.rz-treenode-content { + display: flex; + align-items: center; + cursor: pointer; + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); +} +.rz-treenode-content .rz-treenode-label { + display: flex; + align-items: center; + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); +} +.rz-treenode-content .rz-treenode-label .rzi:first-child { + margin-inline-end: 0.25rem; +} +.rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { + outline: var(--rz-tree-node-focus-outline); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} +.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { + background-color: var(--rz-tree-node-hover-background-color); + color: var(--rz-tree-node-hover-color); + border-radius: var(--rz-tree-node-selected-border-radius); +} +.rz-treenode-content .rz-chkbox { + margin-inline-end: 0.25rem; +} + +.rz-tree-container, +.rz-treenode-children { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-treenode-label { + transition: var(--rz-tree-transition); +} +.rz-treenode-content-selected .rz-treenode-label { + border-radius: var(--rz-tree-node-selected-border-radius); + color: var(--rz-tree-node-selected-color); + background-color: var(--rz-tree-node-selected-background-color); +} + +.rz-datalist, +.rz-datagrid { + background-color: var(--rz-datalist-background-color); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); + box-shadow: var(--rz-datalist-shadow); + border: var(--rz-datalist-border); +} + +.rz-g > div, .rz-datalist-data > li { + border-radius: var(--rz-datalist-border-radius); + border: var(--rz-datalist-item-border); + box-shadow: var(--rz-datalist-item-shadow); + padding: var(--rz-datalist-item-padding); + background-color: var(--rz-datalist-item-background-color); +} + +.rz-datalist-data { + list-style: none; + padding: var(--rz-datalist-padding); + margin: 0; +} +.rz-datalist-data > li { + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} +.rz-datalist-data > li:first-child { + margin-block-start: 0; +} +.rz-datalist-data > li:last-child { + margin-block-end: 0; +} + +.rz-g { + display: flex; + flex-wrap: wrap; +} +.rz-g > div { + flex: auto; + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} + +.rz-datalist-content { + box-sizing: border-box; + position: relative; +} + +.rz-datafilter { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + column-gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-selectbutton { + display: inline-flex; +} +.rz-datafilter .rz-datafilter-group { + position: relative; + margin: 0.25rem 0 0; + padding: 0; + flex-basis: 100%; +} +.rz-datafilter .rz-datafilter-group .rz-datafilter-group { + margin: 0; +} +.rz-datafilter .rz-datafilter-item { + position: relative; + list-style: none; + margin: 0; + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-datafilter-item:before { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item:after { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item .rz-multiselect, +.rz-datafilter .rz-datafilter-item .rz-dropdown { + flex: 10rem 1; +} +.rz-datafilter .rz-datafilter-group-item:after { + height: calc(var(--rz-input-height) / 2); +} +.rz-datafilter .rz-datafilter-bar { + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; +} +.rz-datafilter .rz-datafilter-bar:before { + display: none; +} +.rz-datafilter .rz-datafilter-bar:after { + height: calc(var(--rz-input-height) / 2); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); +} +.rz-datafilter .rz-datafilter-bar .rz-splitbutton { + margin-block-start: 0.3125rem; +} +.rz-datafilter .rz-datafilter-editor { + flex: 10rem 4; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear { + color: var(--rz-text-secondary-color); + opacity: 0.5; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear:hover { + opacity: 1; +} + +.rz-scheduler { + box-sizing: border-box; + container-name: scheduler; + container-type: inline-size; + display: flex; + height: 400px; + flex-direction: column; + border-radius: var(--rz-scheduler-border-radius); + border: 1px solid var(--rz-scheduler-border-color); + box-shadow: var(--rz-scheduler-shadow); + color: var(--rz-scheduler-color); + background: var(--rz-scheduler-background-color); + overflow: hidden; + background-clip: border-box; +} +.rz-scheduler a.rz-event-list-btn { + position: absolute; + padding-inline-start: 0.25rem; + color: var(--rz-scheduler-event-list-button-color); + font-size: var(--rz-scheduler-event-list-button-font-size); +} +.rz-scheduler a.rz-event-list-btn:hover { + cursor: pointer; + color: var(--rz-scheduler-event-list-button-color); + text-decoration: underline; +} + +.rz-slot { + display: flex; + height: 1.5em; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} + +.rz-slot-title { + text-align: end; + font-size: var(--rz-scheduler-slot-title-font-size); + padding: var(--rz-scheduler-slot-title-padding); +} + +.rz-slot-hours { + flex: 0 0 5rem; +} +.rz-slot-hours .rz-slot-header { + height: 1.5rem; + text-align: end; + font-size: var(--rz-scheduler-header-font-size); + padding: 0 0.25rem; + border-inline-end: 1px solid var(--rz-scheduler-border-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.rz-slot-minor { + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); +} + +.rz-day-view .rz-slot, +.rz-slots:first-child .rz-slot { + border-inline-start: none; +} + +.rz-event { + position: absolute; + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); + cursor: pointer; +} + +.rz-event-content { + background: var(--rz-scheduler-event-background-color); + border-radius: var(--rz-scheduler-border-radius); + color: var(--rz-scheduler-event-color); + height: 100%; + padding: var(--rz-scheduler-event-content-padding); + font-size: var(--rz-scheduler-event-font-size); + line-height: var(--rz-scheduler-event-line-height); + overflow: hidden; +} + +.rz-events { + position: relative; +} + +.rz-scheduler-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--rz-scheduler-toolbar-padding); + background: var(--rz-scheduler-toolbar-background-color); +} +.rz-scheduler-nav .rz-scheduler-nav-title { + display: flex; + align-self: center; + font-size: var(--rz-scheduler-toolbar-title-font-size); + font-weight: var(--rz-scheduler-toolbar-title-font-weight); + color: var(--rz-scheduler-toolbar-title-color); +} + +.rz-view-header { + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); + background-color: var(--rz-scheduler-header-background-color); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); + display: flex; +} +.rz-view-header .rz-slot-header { + flex: 1; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rz-view-header .rz-slot-hour-header { + flex: 0 0 5rem; +} + +.rz-view { + display: flex; + flex-direction: column; + flex: 1; +} + +.rz-view-content { + flex: auto; + display: flex; + overflow: auto; + height: 0; +} +.rz-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-slot:has(.rz-state-focused) { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-slots { + flex: 1; + font-size: 1rem; +} + +.rz-scheduler-nav-views { + display: flex; +} +.rz-scheduler-nav-views .rz-button.rz-primary { + background: var(--rz-scheduler-view-button-background-color); + color: var(--rz-scheduler-view-button-color); + border: var(--rz-scheduler-view-button-border); + border-radius: 0; + border-inline-end: none; +} +.rz-scheduler-nav-views .rz-button.rz-primary:first-child { + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); +} +.rz-scheduler-nav-views .rz-button.rz-primary:last-child { + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); +} +.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { + background-color: var(--rz-scheduler-view-selected-background-color); + border-color: var(--rz-scheduler-view-selected-border-color); + color: var(--rz-scheduler-view-selected-color); +} +.rz-scheduler-nav-views .rz-button.rz-primary:focus-visible { + z-index: 1; +} + +.rz-scheduler-nav-prev-next { + display: flex; +} +.rz-scheduler-nav-prev-next .rz-button { + background-color: var(--rz-scheduler-prev-next-button-background-color); + color: var(--rz-scheduler-prev-next-button-color); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); + font-size: var(--rz-scheduler-prev-next-button-font-size); +} +.rz-scheduler-nav-prev-next .rz-button.rz-today { + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); + padding: var(--rz-scheduler-today-button-padding); + font-size: var(--rz-scheduler-today-button-font-size); + text-transform: var(--rz-scheduler-today-button-text-transform); +} +.rz-scheduler-nav-prev-next .rz-button.rz-prev { + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button.rz-next { + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button:focus-visible { + z-index: 1; +} + +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + +.rz-event-list .rz-event { + position: static; +} + +.rz-week { + flex: 1; + font-size: 1rem; +} +.rz-week .rz-slots { + display: flex; + height: 100%; +} +.rz-week:first-child .rz-slot { + border-block-start: none; +} + +.rz-month { + flex: 1; + font-size: 1rem; +} +.rz-month .rz-slots { + display: flex; + height: 100%; +} +.rz-month:nth-child(2) .rz-slot { + border-block-start: none; +} +.rz-month .rz-slot { + flex: 1; + height: 100%; + display: flex; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child { + position: sticky; + z-index: 9998; + inset-inline-start: 0; + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child .rz-slot-header { + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-month .rz-slot:nth-child(2) { + border-inline-start: none; +} + +.rz-day-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-day-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-week-view-content { + flex: 1; + display: flex; +} +.rz-week-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-week-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-slots.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-week-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-week-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-month-view .rz-view-content { + flex: 1; + flex-direction: column; +} +.rz-month-view .rz-slot { + flex: 1; + height: 100%; +} +.rz-month-view .rz-slot:first-child { + border-inline-start: none; +} + +.rz-planner-view { + overflow: auto; +} +.rz-planner-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 2.25rem; + z-index: 9999; +} +.rz-planner-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-planner-view .rz-month .rz-slot:first-child .rz-slot-header { + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +.rz-planner-view .rz-month .rz-slot:last-child { + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); +} +.rz-planner-view .rz-month .rz-slot:last-child .rz-slot-header { + writing-mode: vertical-rl; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-planner-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-planner-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-timeline-view { + flex: auto; + overflow: auto; + flex-wrap: wrap; + flex-direction: unset; +} +.rz-timeline-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 36px; + z-index: 9999; +} +.rz-timeline-view .rz-view-header .rz-slot-header { + min-width: var(--rz-scheduler-timeline-slot-width); + flex: 0 0 auto; +} +.rz-timeline-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-timeline-view .rz-month { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slots { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slot { + width: var(--rz-scheduler-timeline-slot-width); + height: var(--rz-scheduler-timeline-slot-height); +} +.rz-timeline-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-timeline-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-year-view { + overflow: auto; + padding: var(--rz-scheduler-year-padding); + --rz-gap: var(--rz-scheduler-year-padding); +} +.rz-year-view .rz-flex-column, +.rz-year-view .rz-week { + min-width: fit-content; +} +.rz-year-view .rz-slot { + flex: 1; + border-block-start: none; + justify-content: center; + height: initial; + padding: var(--rz-scheduler-year-slot-padding); + cursor: pointer; +} +.rz-year-view .rz-slot .rz-slot-title { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-align: center; + width: var(--rz-scheduler-year-slot-title-width); + min-width: 2rem; + min-height: 2rem; + border-radius: var(--rz-scheduler-year-slot-title-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-year-view .rz-slot .rz-slot-title.rz-other-month { + opacity: 0.5; +} +.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments { + color: var(--rz-scheduler-event-color); + background-color: var(--rz-scheduler-event-background-color); +} +.rz-year-view .rz-slot .rz-slot-title.rz-state-focused { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} +.rz-year-view .rz-slot:hover .rz-slot-title:not(.rz-has-appointments) { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} + +.rz-year-month:focus { + outline: var(--rz-outline-normal); +} +.rz-year-month:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); + border-radius: var(--rz-border-radius); +} + +@container scheduler (width < 640px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@container scheduler (width < 1400px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +@media (max-width: 576px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@media (max-width: 1399px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +.rz-tabview { + box-sizing: border-box; + display: flex; +} +.rz-tabview:focus { + outline: var(--rz-outline-normal); +} +.rz-tabview:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-tabview:focus-visible .rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + outline: var(--rz-tabs-tab-focus-outline); + outline-offset: var(--rz-tabs-tab-focus-outline-offset); +} +.rz-tabview.rz-tabview-top { + flex-direction: column; +} +.rz-tabview.rz-tabview-top-right { + flex-direction: column; +} +.rz-tabview.rz-tabview-bottom { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-bottom-right { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-left { + flex-direction: row; +} +.rz-tabview.rz-tabview-right { + flex-direction: row-reverse; +} + +.rz-tabview-nav { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} +.rz-tabview-nav li { + border: var(--rz-tabs-border); + background-color: var(--rz-tabs-tab-background-color); + color: var(--rz-tabs-tab-color); + transition: var(--rz-tabs-transition); +} +.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-hover-background-color); + color: var(--rz-tabs-tab-hover-color); +} +.rz-tabview-nav li a, +.rz-tabview-nav li a:not([href]):not([class]) { + display: flex; + align-items: center; + color: inherit; + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); + font-size: var(--rz-tabs-tab-font-size); + line-height: var(--rz-tabs-tab-line-height); + font-weight: var(--rz-tabs-tab-font-weight); + text-transform: var(--rz-tabs-tab-text-transform); + letter-spacing: var(--rz-tabs-tab-letter-spacing); + text-decoration: none; + cursor: pointer; +} +.rz-tabview-nav li a:hover, +.rz-tabview-nav li a:not([href]):not([class]):hover { + text-decoration: none; +} +.rz-tabview-nav li.rz-state-disabled { + opacity: 0.5; +} +.rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-focus-background-color); + border-color: var(--rz-tabs-tab-focus-background-color); + color: var(--rz-tabs-tab-focus-color); +} +.rz-tabview-nav .rz-tabview-selected { + background-color: var(--rz-tabs-tab-selected-background-color); + color: var(--rz-tabs-tab-selected-color); + position: relative; +} +.rz-tabview-top > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-top > .rz-tabview-nav li { + border-top-width: 2px; + border-bottom-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-bottom-color: var(--rz-tabs-background-color); + margin-bottom: -1px; + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-bottom > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-bottom > .rz-tabview-nav li { + border-bottom-width: 2px; + border-top-color: var(--rz-tabs-tab-background-color); + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-top-color: var(--rz-tabs-background-color); + margin-top: -1px; + padding-top: 1px; + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-left > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-left > .rz-tabview-nav li { + border-left-width: 2px; + border-right-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} +.rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-right-color: var(--rz-tabs-background-color); + margin-right: -1px; + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-right > .rz-tabview-nav li { + border-right-width: 2px; + border-left-color: var(--rz-tabs-tab-background-color); + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-left-color: var(--rz-tabs-background-color); + margin-left: -1px; + padding-left: 1px; + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} + +.rz-tabview-panels { + background-color: var(--rz-tabs-background-color); + border: var(--rz-tabs-border); + box-shadow: var(--rz-tabs-shadow); + flex: 1; + overflow: auto; +} +.rz-tabview-top > .rz-tabview-panels { + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-left > .rz-tabview-panels { + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .rz-tabview-panels { + flex: auto; + } +} +.rz-tabview-panel { + padding: var(--rz-tabs-padding); +} + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); +} + +.rz-tooltip { + box-sizing: border-box; + position: absolute; + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-tooltip-content { + background: var(--rz-tooltip-background-color); + color: var(--rz-tooltip-color); + box-shadow: var(--rz-tooltip-shadow); + padding: var(--rz-tooltip-padding); + border-radius: var(--rz-tooltip-border-radius); + font-size: var(--rz-tooltip-font-size); + white-space: nowrap; +} + +.rz-tooltip .rz-top-tooltip-content { + margin-bottom: 16px; +} + +.rz-tooltip .rz-top-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-end: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-bottom-tooltip-content { + margin-top: -8px; +} + +.rz-tooltip .rz-bottom-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-start: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-left-tooltip-content { + margin-right: 8px; +} + +.rz-tooltip .rz-left-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + right: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-right-tooltip-content { + margin-left: 0; +} + +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-dialog-wrapper { + box-sizing: border-box; + display: flex; + position: fixed; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + z-index: var(--rz-dialog-zindex); + align-items: center; + justify-content: center; +} + +.rz-dialog { + box-sizing: border-box; + position: absolute; + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 150px; + max-height: 100%; + min-height: 150px; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); +} + +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); + font-size: var(--rz-dialog-title-font-size); + line-height: var(--rz-dialog-title-line-height); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); +} + +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; + font-weight: var(--rz-dialog-title-font-weight); + letter-spacing: var(--rz-dialog-title-letter-spacing); + color: var(--rz-dialog-title-color); + user-select: none; +} + +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { + font-size: var(--rz-dialog-close-font-size); + color: var(--rz-dialog-close-color); + vertical-align: var(--rz-dialog-close-vertical-align); +} +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { + content: "close"; +} +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { + color: var(--rz-dialog-close-hover-color); +} + +.rz-dialog-content, +.rz-dialog-side-content { + flex: 0 1 auto; + padding: var(--rz-dialog-content-padding); + overflow: auto; +} + +.rz-dialog-confirm, .rz-dialog-alert { + max-width: 400px; + margin: 0.75rem; +} + +.rz-dialog-confirm-message, .rz-dialog-alert-message { + margin-block-end: 1.5rem; +} + +.rz-dialog-confirm-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.rz-dialog-confirm-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-alert-buttons { + text-align: end; + gap: 0.5rem; +} +.rz-dialog-alert-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-mask { + position: fixed; + z-index: var(--rz-dialog-mask-zindex); + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--rz-dialog-mask-background-color); + opacity: 0.5; +} + +.no-scroll { + overflow: hidden; + padding-inline-end: 15px; +} + +.rz-dialog-side-position-right { + right: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-left { + left: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-top { + top: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +.rz-dialog-side-position-bottom { + bottom: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; +} + +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; +} + +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); +} +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); +} +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); +} +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); +} + +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); +} + +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.rz-notification-title { + font-weight: bold; +} + +.rz-notification-icon { + margin: var(--rz-notification-icon-margin); +} +.rz-notification-icon.rzi-check { + color: var(--rz-notification-success-icon-color); +} +.rz-notification-icon.rzi-check:before { + content: "check"; +} +.rz-notification-icon.rzi-exclamation-triangle { + color: var(--rz-notification-warning-icon-color); +} +.rz-notification-icon.rzi-exclamation-triangle:before { + content: "warning"; +} +.rz-notification-icon.rzi-info-circle { + color: var(--rz-notification-info-icon-color); +} +.rz-notification-icon.rzi-info-circle:before { + content: "info"; +} +.rz-notification-icon.rzi-times { + color: var(--rz-notification-error-icon-color); +} +.rz-notification-icon.rzi-times:before { + content: "error"; +} + +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; +} + +.rz-form { + box-sizing: border-box; +} + +.rz-message { + box-sizing: border-box; +} + +.rz-messages-error { + display: inline-block; + color: var(--rz-form-error-color); + font-size: var(--rz-form-error-font-size); + padding: var(--rz-validator-text-padding); +} + +.rz-message-popup { + position: absolute; + background-color: var(--rz-validator-background-color); + transform: var(--rz-validator-transform); + box-shadow: var(--rz-validator-shadow); + padding: var(--rz-validator-padding); + border-radius: var(--rz-border-radius); + color: var(--rz-validator-color); + pointer-events: none; +} +.rz-message-popup:before { + content: ""; + border: var(--rz-validator-pointer-size) solid transparent; + border-bottom-color: var(--rz-validator-background-color); + position: absolute; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); +} + +body:not(.rz-default-scrollbars)::-webkit-scrollbar, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +body:not(.rz-default-scrollbars)::-webkit-scrollbar-corner, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-layout::-webkit-scrollbar, +.rz-layout ::-webkit-scrollbar, +.rz-scrollbars::-webkit-scrollbar, +.rz-scrollbars ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-thumb, +.rz-layout ::-webkit-scrollbar-thumb, +.rz-scrollbars::-webkit-scrollbar-thumb, +.rz-scrollbars ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-corner, +.rz-layout ::-webkit-scrollbar-corner, +.rz-scrollbars::-webkit-scrollbar-corner, +.rz-scrollbars ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-login { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rz-login .rz-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.rz-login .rz-form .rz-form-row { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} +.rz-login .rz-form .rz-form-row .rz-label { + flex: 1 8rem; +} +.rz-login .rz-form .rz-form-row .rz-form-input-wrapper { + flex: 3 14rem; +} +.rz-login .rz-form .rz-form-row .rz-textbox { + display: block; + width: 100%; +} +.rz-login .rz-form .rz-form-row .rz-textbox.invalid { + border: var(--rz-border-danger); +} +.rz-login .rz-form .rz-form-row .rz-switch { + margin-inline-end: 0.5rem; +} +.rz-login .rz-form .rz-messages-error { + position: absolute; +} +.rz-login .rz-register { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: var(--rz-login-register-background-color); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); + border-radius: var(--rz-border-radius); +} +.rz-login .rz-register .rz-button { + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); +} +.rz-login .rz-login-buttons { + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.rz-lookup-panel { + background-color: var(--rz-lookup-panel-background-color); + padding: var(--rz-lookup-panel-padding); + container-type: inline-size; + container-name: rz-lookup-panel; +} + +.rz-lookup-search { + display: flex; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); +} +.rz-lookup-search input { + flex: auto; +} + +.ssrsviewer { + display: flex; +} +.ssrsviewer iframe { + flex: auto; +} + +.rz-map { + box-sizing: border-box; + height: var(--rz-map-height); + padding: var(--rz-map-padding); + background-color: var(--rz-map-background-color); + box-shadow: var(--rz-map-shadow); + border-radius: var(--rz-border-radius); +} + +.rz-map-container { + height: 100%; +} + +.rz-gauge, +.rz-arc-gauge { + box-sizing: border-box; + position: relative; + display: inline-block; + width: 300px; + height: 300px; +} + +.rz-gauge .rz-line, +.rz-gauge .rz-tick { + stroke: var(--rz-gauge-scale-color); +} +.rz-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-scale-label-color); +} + +.rz-arc-gauge .rz-line, +.rz-arc-gauge .rz-tick { + stroke: var(--rz-gauge-arc-scale-color); +} +.rz-arc-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-arc-scale-label-color); +} + +.rz-gauge-value { + position: absolute; + transform: translateX(-50%); + padding: 0.5rem; +} + +.rz-arc-gauge-value { + position: absolute; + transform: translate(-50%, -50%); + padding: 0.5rem; +} + +.rz-gauge-pointer { + fill: var(--rz-gauge-pointer-color); +} + +.rz-arc-gauge-scale-value { + fill: var(--rz-gauge-arc-value-color); +} + +.rz-arc-gauge-scale { + fill: var(--rz-gauge-arc-scale-color); +} + +.rz-progressbar { + box-sizing: border-box; + border-radius: var(--rz-progressbar-border-radius); + height: var(--rz-progressbar-height); + position: relative; + background-color: var(--rz-progressbar-background-color); + text-align: center; + display: flex; + align-items: center; +} + +.rz-progressbar-value { + border-radius: var(--rz-progressbar-border-radius); + position: absolute; + background-color: var(--rz-progressbar-value-background-color); + height: 100%; + width: 100%; + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-label { + position: relative; + width: 100%; + text-align: center; + font-size: var(--rz-progressbar-font-size); + line-height: var(--rz-progressbar-font-size); +} + +.rz-progressbar-circular { + box-sizing: border-box; + position: relative; +} + +.rz-progressbar-circular-viewbox { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.rz-progressbar-circular-label { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +.rz-progressbar-circular-background { + stroke: var(--rz-progressbar-background-color); + stroke-width: var(--rz-progressbar-circular-stroke-width); +} + +.rz-progressbar-circular-value { + stroke-linecap: var(--rz-progressbar-circular-value-endpoint); + stroke-width: var(--rz-progressbar-circular-value-stroke-width); + stroke: var(--rz-progressbar-value-background-color); + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-determinate .rz-progressbar-circular-value { + stroke-dasharray: 100; + transform: rotate(-0.25turn); +} + +.rz-progressbar-indeterminate { + overflow: hidden; +} +.rz-progressbar-indeterminate .rz-progressbar-value { + background-color: transparent; +} +.rz-progressbar-indeterminate .rz-progressbar-value:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} +.rz-progressbar-indeterminate .rz-progressbar-value:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; + animation-delay: 1.15s; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} +@keyframes rz-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 100%, 60% { + left: 100%; + right: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} +.rz-progressbar-indeterminate .rz-progressbar-circular-value { + animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + transform-origin: 0 0; +} +@keyframes rz-progressbar-circular-indeterminate-anim-rotate { + 100% { + transform: rotate(1turn); + } +} +@keyframes rz-progressbar-circular-indeterminate-anim-dash { + 0% { + stroke-dasharray: 1, 100; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -28; + } + 100% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -99; + } +} + +.rz-progressbar.rz-progressbar-primary { + color: var(--rz-on-primary); +} + +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value { + background-color: var(--rz-primary); +} +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:before { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:after { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); +} + +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); +} +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:before { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:after { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar.rz-progressbar-info { + color: var(--rz-on-info); +} + +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-value { + background-color: var(--rz-info); +} +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:before { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:after { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar.rz-progressbar-warning { + color: var(--rz-on-warning); +} + +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-value { + background-color: var(--rz-warning); +} +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:before { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:after { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-danger { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-success { + color: var(--rz-on-success); +} + +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value { + background-color: var(--rz-success); +} +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:before { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:after { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} + +.rz-scheme-pastel .rz-series-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} + +.rz-scheme-pastel .rz-series-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} + +.rz-scheme-pastel .rz-series-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} + +.rz-scheme-pastel .rz-series-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} + +.rz-scheme-pastel .rz-series-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} + +.rz-scheme-pastel .rz-series-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} + +.rz-scheme-pastel .rz-series-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} + +.rz-scheme-pastel .rz-series-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} + +.rz-scheme-pastel .rz-series-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-9-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} + +.rz-scheme-pastel .rz-series-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-10-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} + +.rz-scheme-pastel .rz-series-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-11-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} + +.rz-scheme-pastel .rz-series-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-12-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} + +.rz-scheme-pastel .rz-series-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-13-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} + +.rz-scheme-pastel .rz-series-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-14-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} + +.rz-scheme-pastel .rz-series-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-15-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} + +.rz-scheme-pastel .rz-series-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-16-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} + +.rz-scheme-pastel .rz-series-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-17-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} + +.rz-scheme-pastel .rz-series-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-18-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} + +.rz-scheme-pastel .rz-series-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-19-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} + +.rz-scheme-pastel .rz-series-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-20-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} + +.rz-scheme-pastel .rz-series-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-21-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} + +.rz-scheme-pastel .rz-series-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-22-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} + +.rz-scheme-pastel .rz-series-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-23-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} + +.rz-scheme-palette .rz-series-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} +.rz-scheme-palette .rz-series-item-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} + +.rz-scheme-palette .rz-series-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} + +.rz-scheme-palette .rz-series-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #665191; +} +.rz-scheme-palette .rz-series-item-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #665191; +} + +.rz-scheme-palette .rz-series-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #a05195; +} +.rz-scheme-palette .rz-series-item-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #a05195; +} + +.rz-scheme-palette .rz-series-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #d45087; +} +.rz-scheme-palette .rz-series-item-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #d45087; +} + +.rz-scheme-palette .rz-series-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} + +.rz-scheme-palette .rz-series-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} + +.rz-scheme-palette .rz-series-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} +.rz-scheme-palette .rz-series-item-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} + +.rz-scheme-monochrome .rz-series-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} + +.rz-scheme-monochrome .rz-series-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #296080; +} +.rz-scheme-monochrome .rz-series-item-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #296080; +} + +.rz-scheme-monochrome .rz-series-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #437594; +} +.rz-scheme-monochrome .rz-series-item-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #437594; +} + +.rz-scheme-monochrome .rz-series-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} + +.rz-scheme-monochrome .rz-series-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} + +.rz-scheme-monochrome .rz-series-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} + +.rz-scheme-monochrome .rz-series-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} + +.rz-scheme-monochrome .rz-series-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} + +.rz-scheme-divergent .rz-series-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #00876c; +} +.rz-scheme-divergent .rz-series-item-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #00876c; +} + +.rz-scheme-divergent .rz-series-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} + +.rz-scheme-divergent .rz-series-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} + +.rz-scheme-divergent .rz-series-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} + +.rz-scheme-divergent .rz-series-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} + +.rz-scheme-divergent .rz-series-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} + +.rz-scheme-divergent .rz-series-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} + +.rz-scheme-divergent .rz-series-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #e27076; +} +.rz-scheme-divergent .rz-series-item-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #e27076; +} + +.rz-scheme-divergent .rz-series-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} + +.rz-marker { + stroke: var(--rz-chart-marker-stroke); +} + +.rz-area-series .rz-marker { + fill-opacity: 1; +} + +.rz-axis { + stroke: var(--rz-chart-axis-color); + font-size: var(--rz-chart-axis-font-size); +} + +.rz-axis .rz-grid-line { + stroke: var(--rz-chart-axis-color); +} + +.rz-tick-text { + stroke: none; + fill: var(--rz-chart-axis-label-color); +} + +.rz-series-data-label { + fill: var(--rz-chart-axis-label-color); +} + +.rz-value-axis .rz-tick-text { + text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; +} + +.rz-category-axis .rz-tick-text { + text-anchor: middle; +} + +.rz-axis .rz-axis-title { + stroke: none; + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-title { + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-content { + height: 100%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rz-legend { + position: absolute; + display: flex; + font-size: var(--rz-chart-legend-font-size); +} + +.rz-legend-right { + right: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-left { + left: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-top { + top: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-bottom { + bottom: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-items { + padding: 0; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; +} + +.rz-legend-item { + display: flex; + align-items: center; + gap: 4px; + margin: 4px; + cursor: pointer; +} +.rz-legend-item:focus { + outline: var(--rz-outline-normal); +} +.rz-legend-item:focus-visible { + outline: var(--rz-chart-legend-focus-outline); + outline-offset: var(--rz-chart-legend-focus-outline-offset); + border-radius: var(--rz-border-radius); +} + +.rz-legend-top .rz-legend-item, +.rz-legend-bottom .rz-legend-item { + display: inline-flex; +} + +.rz-chart-tooltip { + position: absolute; + transform: translate(-50%, -100%); + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-chart-tooltip-content { + background: var(--rz-chart-tooltip-background); + color: var(--rz-chart-tooltip-color); + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + padding: 0.25rem 0.5rem; + border-radius: var(--rz-border-radius); + white-space: nowrap; +} + +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content { + margin-bottom: 15px; +} +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + left: 50%; + bottom: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -11px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-link { + box-sizing: border-box; + color: var(--rz-link-color); + text-decoration: none; + cursor: pointer; +} +.rz-link .rz-link-text { + text-decoration: var(--rz-link-text-decoration); +} +.rz-link .rzi { + font-size: inherit; + vertical-align: middle; +} +.rz-link:hover, .rz-link:focus { + color: var(--rz-link-hover-color); + text-decoration: none; +} +.rz-link:hover .rz-link-text, .rz-link:focus .rz-link-text { + text-decoration: var(--rz-link-hover-text-decoration); +} +.rz-link:focus-visible { + outline: var(--rz-link-focus-outline); +} + +.rz-state-highlight .link { + color: var(--rz-text-contrast-color); +} + +.rz-html-editor { + box-sizing: border-box; + display: flex; + flex-direction: column; + border-radius: var(--rz-editor-border-radius); + border: var(--rz-editor-border); + overflow: hidden; +} +.rz-html-editor:focus-within { + outline: var(--rz-editor-focus-outline); + outline-offset: var(--rz-editor-focus-outline-offset); +} + +.rz-html-editor-content { + flex: 1; + overflow: auto; + padding: 0.5rem; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-source.rz-textarea { + --rz-input-hover-shadow: none; + --rz-input-border: none; + --rz-input-hover-border: none; + --rz-input-focus-shadow: none; + --rz-input-focus-border: none; + flex: 1; + padding: 0.5rem; + overflow: auto; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-toolbar { + border-bottom: var(--rz-editor-border); + display: flex; + line-height: 1rem; + flex-wrap: wrap; + background-color: var(--rz-editor-toolbar-background-color); +} +.rz-html-editor-toolbar .rzi { + font-size: 1rem; +} +.rz-html-editor-toolbar > * { + margin: var(--rz-editor-toolbar-item-margin); +} + +.rz-html-editor-colorpicker { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger { + color: inherit; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} +.rz-html-editor-colorpicker .rz-colorpicker-value { + display: none; +} +.rz-html-editor-colorpicker .rz-colorpicker { + border: none; + box-shadow: none; + padding: 0; + height: auto; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} + +.rz-html-editor-color { + border: none; + display: flex; + flex-direction: column; + background: inherit; + color: inherit; + appearance: none; + padding: 0; + position: relative; +} +.rz-html-editor-color:disabled { + color: var(--rz-input-disabled-color); +} + +.rz-html-editor-color-value { + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; +} + +.rz-html-editor-button { + color: var(--rz-editor-button-color); + appearance: none; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-button.rz-selected { + background-color: var(--rz-editor-button-selected-background-color); + color: var(--rz-editor-button-selected-color); + border-radius: var(--rz-editor-border-radius); +} +.rz-html-editor-button:disabled { + color: var(--rz-editor-button-disabled-color); +} + +.rz-html-editor-dropdown { + display: inline-flex; + padding: var(--rz-editor-button-padding); + align-items: center; + cursor: pointer; +} +.rz-html-editor-dropdown.rz-disabled { + color: var(--rz-input-disabled-color); + cursor: default; +} + +.rz-html-editor-dropdown-item { + cursor: default; + font-size: var(--rz-dropdown-item-font-size); + padding: var(--rz-dropdown-item-padding); + white-space: nowrap; +} +.rz-html-editor-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-html-editor-dropdown-item.rz-selected { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); +} + +.rz-html-editor-dropdown-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: inherit; + background-color: inherit; +} +.rz-html-editor-dropdown-trigger .rzi:before { + content: "arrow_drop_down"; +} + +.rz-html-editor-dropdown-items { + display: none; +} + +.rz-html-editor-dialog-item { + margin-bottom: 1rem; +} +.rz-html-editor-dialog-item label:first-child { + display: block; +} + +.rz-html-editor-dialog-buttons { + text-align: right; +} + +.rz-html-editor-separator { + width: 1px; + background-color: var(--rz-editor-separator-background-color); +} + +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; +} +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} + +.rz-colorpicker { + display: inline-flex; + align-items: center; + cursor: pointer; +} +.rz-colorpicker.rz-state-disabled { + cursor: default; +} + +button.rz-colorpicker-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: var(--rz-text-color); + background-color: inherit; + outline: none; +} +button.rz-colorpicker-trigger .rzi { + font-size: var(--rz-icon-size); +} +button.rz-colorpicker-trigger .rzi:before { + content: "arrow_drop_down"; +} +.rz-state-disabled button.rz-colorpicker-trigger { + color: var(--rz-input-disabled-color); +} + +.rz-colorpicker-popup { + display: none; + position: absolute; + border: var(--rz-colorpicker-panel-border); + background-color: var(--rz-colorpicker-panel-background-color); + box-shadow: var(--rz-colorpicker-panel-shadow); + min-width: 200px; + max-width: var(--rz-colorpicker-panel-max-width); + padding: var(--rz-colorpicker-panel-padding); + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-value { + flex: 1; + border-radius: var(--rz-colorpicker-value-border-radius); + border: var(--rz-colorpicker-panel-border); + min-width: 20px; + min-height: 20px; +} + +.rz-saturation-picker { + height: var(--rz-colorpicker-saturation-height); + position: relative; + touch-action: none; + border-radius: var(--rz-border-radius); +} +.rz-saturation-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-saturation-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-saturation-white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} + +.rz-saturation-black, +.rz-saturation-white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--rz-border-radius); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); +} + +.rz-saturation-black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} + +.rz-saturation-handle { + position: absolute; + width: var(--rz-colorpicker-handle-size); + height: var(--rz-colorpicker-handle-size); + border: var(--rz-colorpicker-handle-border); + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-hue-picker { + margin-bottom: 8px; + touch-action: none; + position: relative; + background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-hue-picker:active { + cursor: none; +} +.rz-hue-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-hue-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-alpha-picker { + touch-action: none; + position: relative; + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-alpha-picker:active { + cursor: none; +} +.rz-alpha-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-alpha-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-hue-handle, +.rz-alpha-handle { + position: absolute; + height: 100%; + width: 8px; + border: var(--rz-colorpicker-handle-border); + border-radius: calc(var(--rz-border-radius) / 2); + transform: translateX(-50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-colorpicker-preview-area { + display: flex; +} + +.rz-hue-and-alpha { + flex: 1; + padding-inline-end: 8px; +} + +.rz-alpha-picker:before, +.rz-colorpicker-preview:before { + position: absolute; + z-index: -1; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--rz-border-radius); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); + background-size: 8px 8px; + background-position: 0 0, 0 4px, 4px -4px, -4px 0px; +} + +.rz-colorpicker-preview { + position: relative; + width: 32px; + height: 32px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-rgba { + display: flex; + gap: 4px; +} + +.rz-color-box { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + color: var(--rz-colorpicker-input-labels-color); + font-size: 0.75rem; + text-transform: uppercase; +} +.rz-color-box .rz-textbox { + width: 80px; + margin-inline-end: 4px; + padding: var(--rz-colorpicker-hex-input-padding); + height: var(--rz-colorpicker-hex-input-height); +} +.rz-color-box .rz-numeric { + padding: var(--rz-colorpicker-rgba-input-padding); + height: var(--rz-colorpicker-rgba-input-height); +} +.rz-color-box .rz-numeric .rz-numeric-input { + padding: 0; + outline: none; +} +.rz-color-box .rz-numeric button { + display: none; +} +.rz-color-box .rz-numeric button:hover { + display: initial; +} + +.rz-colorpicker-button { + justify-content: flex-end; + display: flex; +} + +.rz-colorpicker-section:not(:last-child) { + margin-bottom: 8px; +} + +.rz-colorpicker-colors { + display: flex; + flex-wrap: wrap; + gap: var(--rz-colorpicker-items-gap); +} + +.rz-colorpicker-item { + width: var(--rz-colorpicker-item-size); + height: var(--rz-colorpicker-item-size); + border-radius: var(--rz-colorpicker-item-border-radius); + box-shadow: var(--rz-colorpicker-item-shadow); + cursor: pointer; +} +.rz-colorpicker-item:focus { + outline: var(--rz-outline-normal); +} +.rz-colorpicker-item:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-splitter { + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 100%; +} +.rz-splitter > .rz-splitter-bar { + flex: 0 0 auto; + position: relative; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--rz-splitter-bar-color); + background-color: var(--rz-splitter-bar-background-color); + opacity: 0.4; + user-select: none; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color); + border-radius: 1px; +} +.rz-splitter > .rz-splitter-bar > .rz-expand { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar-resizable:hover { + background-color: var(--rz-splitter-bar-background-color); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active { + background-color: var(--rz-splitter-bar-background-color-active); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-expand, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-collapse { + color: var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:disabled { + opacity: 0.2; +} +.rz-splitter-horizontal { + flex-direction: row; +} +.rz-splitter-horizontal > .rz-splitter-bar { + flex-direction: column; + width: 8px; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_left"; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-resize { + height: 16px; + margin: 2px 0; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before { + content: "arrow_right"; +} +.rz-splitter-horizontal > .rz-splitter-bar-resizable:hover { + cursor: col-resize; +} +.rz-splitter-vertical { + flex-direction: column; +} +.rz-splitter-vertical > .rz-splitter-bar { + flex-direction: row; + height: 8px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_drop_up"; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-resize { + width: 16px; + margin: 0 2px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-expand:before { + content: "arrow_drop_down"; +} +.rz-splitter-vertical > .rz-splitter-bar-resizable:hover { + cursor: row-resize; +} +.rz-splitter-pane { + overflow: hidden; + position: relative; + flex: 0 0 auto; +} +.rz-splitter-pane-collapsed { + flex: 0 1 0% !important; + overflow: hidden !important; + display: block !important; +} +.rz-splitter-pane-lastresizable { + flex: 1 1 auto; +} + +.rz-splitter-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* RadzenLayout styles */ +.rz-layout { + box-sizing: border-box; + height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; + background-color: var(--rz-layout-background-color); +} +.rz-layout .rz-body { + grid-area: rz-body; + overflow: auto; +} +.rz-layout .rz-sidebar { + grid-area: rz-sidebar; + position: static; +} +.rz-layout .rz-header { + grid-area: rz-header; + z-index: 2; +} +.rz-layout .rz-footer { + grid-area: rz-footer; +} + +@media (max-width: 768px) { + body:has(> .rz-layout) { + overflow-x: hidden; + } + .rz-header, + .rz-footer, + .rz-body { + width: 100vw; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } +} +.rz-breadcrumb { + box-sizing: border-box; + display: flex; + align-items: center; +} + +.rz-breadcrumb-item + .rz-breadcrumb-item::before { + content: "»"; + display: inline-block; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + font-size: 1rem; + line-height: 1.25rem; +} + +.rz-breadcrumb-item { + display: inline-flex; + align-items: center; +} +.rz-breadcrumb-item .rz-link { + display: inline-flex; + align-items: center; +} + +.rz-alert { + box-sizing: border-box; + display: flex; + align-items: flex-start; + gap: var(--rz-alert-gap); + margin: var(--rz-alert-margin); + padding: var(--rz-alert-padding); + width: 100%; + border-radius: var(--rz-alert-border-radius); + background-color: var(--rz-alert-background-color); + color: var(--rz-alert-color); +} +.rz-alert-lg { + --rz-alert-gap: 1.5rem; + --rz-alert-margin: 1.5rem 0; + --rz-alert-padding: 1.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-md { + --rz-alert-gap: 1rem; + --rz-alert-margin: 1rem 0; + --rz-alert-padding: 1rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-sm { + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 0.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-xs { + --rz-alert-gap: 0.25rem; + --rz-alert-margin: 0.25rem 0; + --rz-alert-padding: 0.25rem; + --rz-alert-message-margin: 0; + --rz-alert-icon-margin: 0; +} +.rz-alert .rz-alert-item { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-alert-gap); +} +.rz-alert .rz-alert-icon { + color: var(--rz-alert-icon-color); + margin: var(--rz-alert-icon-margin); + font-size: var(--rz-alert-icon-size); +} +.rz-alert .rz-alert-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + margin: var(--rz-alert-message-margin); +} +.rz-alert .rz-alert-title { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-alert-title-color); + margin-bottom: var(--rz-text-h6-margin-bottom); +} +.rz-alert.rz-variant-filled { + box-shadow: var(--rz-alert-box-shadow); +} +.rz-alert.rz-variant-text { + --rz-alert-padding: 0; + --rz-alert-background-color: transparent; + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0; +} +.rz-alert.rz-variant-text .rz-alert-item { + flex: unset; +} +.rz-alert.rz-variant-text .rz-alert-message { + flex-direction: row; +} +.rz-alert.rz-variant-text .rz-alert-title { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + margin-bottom: 0; + margin-right: 0.5rem; +} +.rz-alert.rz-primary { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-primary-lighter); + --rz-alert-color: var(--rz-on-primary-lighter); + --rz-alert-title-color: var(--rz-on-primary-lighter); + --rz-alert-icon-color: var(--rz-on-primary-lighter); +} +.rz-alert.rz-primary.rz-shade-light { + --rz-alert-background-color: var(--rz-primary-light); + --rz-alert-color: var(--rz-on-primary-light); + --rz-alert-title-color: var(--rz-on-primary-light); + --rz-alert-icon-color: var(--rz-on-primary-light); +} +.rz-alert.rz-primary.rz-shade-default { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-dark { + --rz-alert-background-color: var(--rz-primary-dark); + --rz-alert-color: var(--rz-on-primary-dark); + --rz-alert-title-color: var(--rz-on-primary-dark); + --rz-alert-icon-color: var(--rz-on-primary-dark); +} +.rz-alert.rz-primary.rz-shade-darker { + --rz-alert-background-color: var(--rz-primary-darker); + --rz-alert-color: var(--rz-on-primary-darker); + --rz-alert-title-color: var(--rz-on-primary-darker); + --rz-alert-icon-color: var(--rz-on-primary-darker); +} +.rz-alert.rz-variant-outlined.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + --rz-alert-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-variant-text.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-default { + --rz-alert-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-lighter { + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-light { + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-dark { + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-darker { + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-secondary { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-on-secondary-lighter); + --rz-alert-title-color: var(--rz-on-secondary-lighter); + --rz-alert-icon-color: var(--rz-on-secondary-lighter); +} +.rz-alert.rz-secondary.rz-shade-light { + --rz-alert-background-color: var(--rz-secondary-light); + --rz-alert-color: var(--rz-on-secondary-light); + --rz-alert-title-color: var(--rz-on-secondary-light); + --rz-alert-icon-color: var(--rz-on-secondary-light); +} +.rz-alert.rz-secondary.rz-shade-default { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-dark { + --rz-alert-background-color: var(--rz-secondary-dark); + --rz-alert-color: var(--rz-on-secondary-dark); + --rz-alert-title-color: var(--rz-on-secondary-dark); + --rz-alert-icon-color: var(--rz-on-secondary-dark); +} +.rz-alert.rz-secondary.rz-shade-darker { + --rz-alert-background-color: var(--rz-secondary-darker); + --rz-alert-color: var(--rz-on-secondary-darker); + --rz-alert-title-color: var(--rz-on-secondary-darker); + --rz-alert-icon-color: var(--rz-on-secondary-darker); +} +.rz-alert.rz-variant-outlined.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + --rz-alert-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-variant-text.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-default { + --rz-alert-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-lighter { + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-light { + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-dark { + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-darker { + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-info { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-lighter { + --rz-alert-background-color: var(--rz-info-lighter); + --rz-alert-color: var(--rz-on-info-lighter); + --rz-alert-title-color: var(--rz-on-info-lighter); + --rz-alert-icon-color: var(--rz-on-info-lighter); +} +.rz-alert.rz-info.rz-shade-light { + --rz-alert-background-color: var(--rz-info-light); + --rz-alert-color: var(--rz-on-info-light); + --rz-alert-title-color: var(--rz-on-info-light); + --rz-alert-icon-color: var(--rz-on-info-light); +} +.rz-alert.rz-info.rz-shade-default { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-dark { + --rz-alert-background-color: var(--rz-info-dark); + --rz-alert-color: var(--rz-on-info-dark); + --rz-alert-title-color: var(--rz-on-info-dark); + --rz-alert-icon-color: var(--rz-on-info-dark); +} +.rz-alert.rz-info.rz-shade-darker { + --rz-alert-background-color: var(--rz-info-darker); + --rz-alert-color: var(--rz-on-info-darker); + --rz-alert-title-color: var(--rz-on-info-darker); + --rz-alert-icon-color: var(--rz-on-info-darker); +} +.rz-alert.rz-variant-outlined.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + --rz-alert-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-variant-text.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-info.rz-shade-default { + --rz-alert-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-lighter { + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-light { + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-dark { + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-darker { + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-warning { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-lighter { + --rz-alert-background-color: var(--rz-warning-lighter); + --rz-alert-color: var(--rz-on-warning-lighter); + --rz-alert-title-color: var(--rz-on-warning-lighter); + --rz-alert-icon-color: var(--rz-on-warning-lighter); +} +.rz-alert.rz-warning.rz-shade-light { + --rz-alert-background-color: var(--rz-warning-light); + --rz-alert-color: var(--rz-on-warning-light); + --rz-alert-title-color: var(--rz-on-warning-light); + --rz-alert-icon-color: var(--rz-on-warning-light); +} +.rz-alert.rz-warning.rz-shade-default { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-dark { + --rz-alert-background-color: var(--rz-warning-dark); + --rz-alert-color: var(--rz-on-warning-dark); + --rz-alert-title-color: var(--rz-on-warning-dark); + --rz-alert-icon-color: var(--rz-on-warning-dark); +} +.rz-alert.rz-warning.rz-shade-darker { + --rz-alert-background-color: var(--rz-warning-darker); + --rz-alert-color: var(--rz-on-warning-darker); + --rz-alert-title-color: var(--rz-on-warning-darker); + --rz-alert-icon-color: var(--rz-on-warning-darker); +} +.rz-alert.rz-variant-outlined.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + --rz-alert-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-variant-text.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-default { + --rz-alert-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-lighter { + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-light { + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-dark { + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-darker { + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-error { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-error.rz-shade-lighter { + --rz-alert-background-color: var(--rz-error-lighter); + --rz-alert-color: var(--rz-on-error-lighter); + --rz-alert-title-color: var(--rz-on-error-lighter); + --rz-alert-icon-color: var(--rz-on-error-lighter); +} +.rz-alert.rz-error.rz-shade-light { + --rz-alert-background-color: var(--rz-error-light); + --rz-alert-color: var(--rz-on-error-light); + --rz-alert-title-color: var(--rz-on-error-light); + --rz-alert-icon-color: var(--rz-on-error-light); +} +.rz-alert.rz-error.rz-shade-default { + --rz-alert-background-color: var(--rz-error); + --rz-alert-color: var(--rz-on-error); + --rz-alert-title-color: var(--rz-on-error); + --rz-alert-icon-color: var(--rz-on-error); +} +.rz-alert.rz-error.rz-shade-dark { + --rz-alert-background-color: var(--rz-error-dark); + --rz-alert-color: var(--rz-on-error-dark); + --rz-alert-title-color: var(--rz-on-error-dark); + --rz-alert-icon-color: var(--rz-on-error-dark); +} +.rz-alert.rz-error.rz-shade-darker { + --rz-alert-background-color: var(--rz-error-darker); + --rz-alert-color: var(--rz-on-error-darker); + --rz-alert-title-color: var(--rz-on-error-darker); + --rz-alert-icon-color: var(--rz-on-error-darker); +} +.rz-alert.rz-variant-outlined.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-variant-text.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-error.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-lighter { + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-light { + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-dark { + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-darker { + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-danger { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-lighter { + --rz-alert-background-color: var(--rz-danger-lighter); + --rz-alert-color: var(--rz-on-danger-lighter); + --rz-alert-title-color: var(--rz-on-danger-lighter); + --rz-alert-icon-color: var(--rz-on-danger-lighter); +} +.rz-alert.rz-danger.rz-shade-light { + --rz-alert-background-color: var(--rz-danger-light); + --rz-alert-color: var(--rz-on-danger-light); + --rz-alert-title-color: var(--rz-on-danger-light); + --rz-alert-icon-color: var(--rz-on-danger-light); +} +.rz-alert.rz-danger.rz-shade-default { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-dark { + --rz-alert-background-color: var(--rz-danger-dark); + --rz-alert-color: var(--rz-on-danger-dark); + --rz-alert-title-color: var(--rz-on-danger-dark); + --rz-alert-icon-color: var(--rz-on-danger-dark); +} +.rz-alert.rz-danger.rz-shade-darker { + --rz-alert-background-color: var(--rz-danger-darker); + --rz-alert-color: var(--rz-on-danger-darker); + --rz-alert-title-color: var(--rz-on-danger-darker); + --rz-alert-icon-color: var(--rz-on-danger-darker); +} +.rz-alert.rz-variant-outlined.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-variant-text.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-lighter { + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-light { + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-dark { + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-darker { + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-success { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-lighter { + --rz-alert-background-color: var(--rz-success-lighter); + --rz-alert-color: var(--rz-on-success-lighter); + --rz-alert-title-color: var(--rz-on-success-lighter); + --rz-alert-icon-color: var(--rz-on-success-lighter); +} +.rz-alert.rz-success.rz-shade-light { + --rz-alert-background-color: var(--rz-success-light); + --rz-alert-color: var(--rz-on-success-light); + --rz-alert-title-color: var(--rz-on-success-light); + --rz-alert-icon-color: var(--rz-on-success-light); +} +.rz-alert.rz-success.rz-shade-default { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-dark { + --rz-alert-background-color: var(--rz-success-dark); + --rz-alert-color: var(--rz-on-success-dark); + --rz-alert-title-color: var(--rz-on-success-dark); + --rz-alert-icon-color: var(--rz-on-success-dark); +} +.rz-alert.rz-success.rz-shade-darker { + --rz-alert-background-color: var(--rz-success-darker); + --rz-alert-color: var(--rz-on-success-darker); + --rz-alert-title-color: var(--rz-on-success-darker); + --rz-alert-icon-color: var(--rz-on-success-darker); +} +.rz-alert.rz-variant-outlined.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + --rz-alert-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-variant-text.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-success.rz-shade-default { + --rz-alert-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-lighter { + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-light { + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-dark { + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-darker { + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-base { + --rz-alert-background-color: var(--rz-base-700); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-base { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-base { + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-light { + --rz-alert-background-color: var(--rz-base-700); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-light { + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-dark { + --rz-alert-background-color: var(--rz-base-900); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-dark { + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} + +@keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +@-webkit-keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +.rz-button.rz-speech-to-text-button-recording { + -webkit-animation: mic-blink 2s linear infinite; + -moz-animation: mic-blink 2s linear infinite; + animation: mic-blink 2s linear infinite; +} + +.rz-flex-row { + flex-direction: row !important; +} + +.rz-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.rz-flex-column { + flex-direction: column !important; +} + +.rz-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.rz-stack { + box-sizing: border-box; + gap: var(--rz-gap); +} + +.rz-row { + box-sizing: border-box; + flex-wrap: wrap; + gap: var(--rz-gap); + row-gap: var(--rz-row-gap); +} + +.rz-row > [class^=rz-col] { + flex: 1 0 0%; +} + +.rz-row > [class*=rz-col-] { + flex: 0 0 auto; + width: 100%; +} + +.rz-row > .rz-col-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); +} + +.rz-row > .rz-col-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-row > .rz-col-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-row > .rz-col-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-row > .rz-col-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-row > .rz-col-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-row > .rz-col-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-row > .rz-col-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-row > .rz-col-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-row > .rz-col-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-row > .rz-col-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-row > .rz-col-12 { + max-width: 100%; + flex-basis: 100%; +} + +@media (min-width: 576px) { + .rz-row > .rz-col-xs-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xs-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 768px) { + .rz-row > .rz-col-sm-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-sm-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1024px) { + .rz-row > .rz-col-md-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-md-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-md-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-md-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-md-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-md-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-md-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-md-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-md-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-md-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-md-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-md-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1280px) { + .rz-row > .rz-col-lg-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-lg-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1920px) { + .rz-row > .rz-col-xl-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xl-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 2560px) { + .rz-row > .rz-col-xx-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xx-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-12 { + max-width: 100%; + flex-basis: 100%; + } +} +.rz-offset-0 { + margin-inline-start: 0; +} + +.rz-offset-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-offset-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-offset-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-offset-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-offset-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-offset-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-offset-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-offset-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-offset-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-offset-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-offset-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); +} + +@media (min-width: 576px) { + .rz-offset-xs-0 { + margin-inline-start: 0; + } + .rz-offset-xs-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xs-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xs-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xs-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xs-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xs-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xs-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xs-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xs-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xs-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xs-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 768px) { + .rz-offset-sm-0 { + margin-inline-start: 0; + } + .rz-offset-sm-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-sm-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-sm-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-sm-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-sm-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-sm-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-sm-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-sm-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-sm-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-sm-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-sm-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1024px) { + .rz-offset-md-0 { + margin-inline-start: 0; + } + .rz-offset-md-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-md-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-md-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-md-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-md-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-md-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-md-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-md-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-md-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-md-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-md-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1280px) { + .rz-offset-lg-0 { + margin-inline-start: 0; + } + .rz-offset-lg-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-lg-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-lg-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-lg-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-lg-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-lg-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-lg-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-lg-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-lg-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-lg-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-lg-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1920px) { + .rz-offset-xl-0 { + margin-inline-start: 0; + } + .rz-offset-xl-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xl-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xl-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xl-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xl-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xl-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xl-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xl-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xl-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xl-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xl-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 2560px) { + .rz-offset-xx-0 { + margin-inline-start: 0; + } + .rz-offset-xx-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xx-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xx-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xx-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xx-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xx-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xx-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xx-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xx-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xx-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xx-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +.rz-order-first { + order: -1 !important; +} + +.rz-order-last { + order: 13 !important; +} + +.rz-order-0 { + order: 0 !important; +} + +.rz-order-1 { + order: 1 !important; +} + +.rz-order-2 { + order: 2 !important; +} + +.rz-order-3 { + order: 3 !important; +} + +.rz-order-4 { + order: 4 !important; +} + +.rz-order-5 { + order: 5 !important; +} + +.rz-order-6 { + order: 6 !important; +} + +.rz-order-7 { + order: 7 !important; +} + +.rz-order-8 { + order: 8 !important; +} + +.rz-order-9 { + order: 9 !important; +} + +.rz-order-10 { + order: 10 !important; +} + +.rz-order-11 { + order: 11 !important; +} + +.rz-order-12 { + order: 12 !important; +} + +@media (min-width: 576px) { + .rz-order-xs-first { + order: -1 !important; + } + .rz-order-xs-last { + order: 13 !important; + } + .rz-order-xs-0 { + order: 0 !important; + } + .rz-order-xs-1 { + order: 1 !important; + } + .rz-order-xs-2 { + order: 2 !important; + } + .rz-order-xs-3 { + order: 3 !important; + } + .rz-order-xs-4 { + order: 4 !important; + } + .rz-order-xs-5 { + order: 5 !important; + } + .rz-order-xs-6 { + order: 6 !important; + } + .rz-order-xs-7 { + order: 7 !important; + } + .rz-order-xs-8 { + order: 8 !important; + } + .rz-order-xs-9 { + order: 9 !important; + } + .rz-order-xs-10 { + order: 10 !important; + } + .rz-order-xs-11 { + order: 11 !important; + } + .rz-order-xs-12 { + order: 12 !important; + } +} +@media (min-width: 768px) { + .rz-order-sm-first { + order: -1 !important; + } + .rz-order-sm-last { + order: 13 !important; + } + .rz-order-sm-0 { + order: 0 !important; + } + .rz-order-sm-1 { + order: 1 !important; + } + .rz-order-sm-2 { + order: 2 !important; + } + .rz-order-sm-3 { + order: 3 !important; + } + .rz-order-sm-4 { + order: 4 !important; + } + .rz-order-sm-5 { + order: 5 !important; + } + .rz-order-sm-6 { + order: 6 !important; + } + .rz-order-sm-7 { + order: 7 !important; + } + .rz-order-sm-8 { + order: 8 !important; + } + .rz-order-sm-9 { + order: 9 !important; + } + .rz-order-sm-10 { + order: 10 !important; + } + .rz-order-sm-11 { + order: 11 !important; + } + .rz-order-sm-12 { + order: 12 !important; + } +} +@media (min-width: 1024px) { + .rz-order-md-first { + order: -1 !important; + } + .rz-order-md-last { + order: 13 !important; + } + .rz-order-md-0 { + order: 0 !important; + } + .rz-order-md-1 { + order: 1 !important; + } + .rz-order-md-2 { + order: 2 !important; + } + .rz-order-md-3 { + order: 3 !important; + } + .rz-order-md-4 { + order: 4 !important; + } + .rz-order-md-5 { + order: 5 !important; + } + .rz-order-md-6 { + order: 6 !important; + } + .rz-order-md-7 { + order: 7 !important; + } + .rz-order-md-8 { + order: 8 !important; + } + .rz-order-md-9 { + order: 9 !important; + } + .rz-order-md-10 { + order: 10 !important; + } + .rz-order-md-11 { + order: 11 !important; + } + .rz-order-md-12 { + order: 12 !important; + } +} +@media (min-width: 1280px) { + .rz-order-lg-first { + order: -1 !important; + } + .rz-order-lg-last { + order: 13 !important; + } + .rz-order-lg-0 { + order: 0 !important; + } + .rz-order-lg-1 { + order: 1 !important; + } + .rz-order-lg-2 { + order: 2 !important; + } + .rz-order-lg-3 { + order: 3 !important; + } + .rz-order-lg-4 { + order: 4 !important; + } + .rz-order-lg-5 { + order: 5 !important; + } + .rz-order-lg-6 { + order: 6 !important; + } + .rz-order-lg-7 { + order: 7 !important; + } + .rz-order-lg-8 { + order: 8 !important; + } + .rz-order-lg-9 { + order: 9 !important; + } + .rz-order-lg-10 { + order: 10 !important; + } + .rz-order-lg-11 { + order: 11 !important; + } + .rz-order-lg-12 { + order: 12 !important; + } +} +@media (min-width: 1920px) { + .rz-order-xl-first { + order: -1 !important; + } + .rz-order-xl-last { + order: 13 !important; + } + .rz-order-xl-0 { + order: 0 !important; + } + .rz-order-xl-1 { + order: 1 !important; + } + .rz-order-xl-2 { + order: 2 !important; + } + .rz-order-xl-3 { + order: 3 !important; + } + .rz-order-xl-4 { + order: 4 !important; + } + .rz-order-xl-5 { + order: 5 !important; + } + .rz-order-xl-6 { + order: 6 !important; + } + .rz-order-xl-7 { + order: 7 !important; + } + .rz-order-xl-8 { + order: 8 !important; + } + .rz-order-xl-9 { + order: 9 !important; + } + .rz-order-xl-10 { + order: 10 !important; + } + .rz-order-xl-11 { + order: 11 !important; + } + .rz-order-xl-12 { + order: 12 !important; + } +} +@media (min-width: 2560px) { + .rz-order-xx-first { + order: -1 !important; + } + .rz-order-xx-last { + order: 13 !important; + } + .rz-order-xx-0 { + order: 0 !important; + } + .rz-order-xx-1 { + order: 1 !important; + } + .rz-order-xx-2 { + order: 2 !important; + } + .rz-order-xx-3 { + order: 3 !important; + } + .rz-order-xx-4 { + order: 4 !important; + } + .rz-order-xx-5 { + order: 5 !important; + } + .rz-order-xx-6 { + order: 6 !important; + } + .rz-order-xx-7 { + order: 7 !important; + } + .rz-order-xx-8 { + order: 8 !important; + } + .rz-order-xx-9 { + order: 9 !important; + } + .rz-order-xx-10 { + order: 10 !important; + } + .rz-order-xx-11 { + order: 11 !important; + } + .rz-order-xx-12 { + order: 12 !important; + } +} +.rz-form-field-helper { + padding: var(--rz-form-field-helper-padding); +} + +.rz-form-field-content { + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); + box-shadow: var(--rz-form-field-shadow); + transition: var(--rz-input-transition); +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + flex: 1; +} +.rz-form-field-content .rz-form-field-start, +.rz-form-field-content .rz-form-field-end { + display: flex; + flex: 0; + align-items: center; + white-space: nowrap; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); +} + +.rz-form-field { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + vertical-align: top; +} +.rz-form-field:hover .rz-form-field-content { + box-shadow: var(--rz-form-field-hover-shadow); +} +.rz-form-field.rz-state-focused .rz-form-field-content { + box-shadow: var(--rz-form-field-focus-shadow); +} +.rz-form-field.rz-state-disabled .rz-form-field-content { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); +} +.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content { + border: var(--rz-input-disabled-border); +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled { + color: var(--rz-input-disabled-color); + opacity: 1; +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled::placeholder, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +.rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { + margin: 0; + --rz-input-height: var(--rz-form-field-filled-height); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); + --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); + box-shadow: var(--rz-input-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { + top: calc(var(--rz-numeric-button-offset) + 1rem); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end { + padding-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-textarea, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-textarea { + margin-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-datepicker-trigger, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-datepicker-trigger { + top: calc(50% + 0.4375rem); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-input-hover-border); + box-shadow: var(--rz-input-hover-shadow); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content { + border: var(--rz-input-focus-border); + box-shadow: var(--rz-input-focus-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content { + border: var(--rz-form-field-filled-border); + border-radius: var(--rz-form-field-filled-border-radius); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-filled .rz-form-field-content:after { + display: var(--rz-form-field-filled-underline-display); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-form-field-filled-hover-border); + box-shadow: var(--rz-form-field-filled-hover-shadow); + background-color: var(--rz-form-field-filled-hover-background-color); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused .rz-form-field-content, .rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused:hover .rz-form-field-content { + border: var(--rz-form-field-filled-focus-border); + box-shadow: var(--rz-form-field-filled-focus-shadow); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-text .rz-form-field-content { + border-color: transparent; + box-shadow: none; + --rz-input-background-color: transparent; + --rz-input-border-radius: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; + --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); +} +.rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { + padding: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-start { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-end { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { + content: ""; + position: absolute; + z-index: 1; + inset-inline-start: 50%; + inset-inline-end: 50%; + bottom: calc(-1 * var(--rz-border-width)); + height: calc(var(--rz-border-width) + 1px); + border: var(--rz-input-focus-border); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { + content: ""; + position: absolute; + inset: calc(-1 * var(--rz-border-width)); + top: auto; + height: var(--rz-border-width); + border-bottom: var(--rz-input-border); +} +.rz-form-field.rz-variant-filled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-hover-border); +} +.rz-form-field.rz-variant-filled.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-filled.rz-state-disabled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-disabled-border); +} +.rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); + border: var(--rz-input-focus-border); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); +} +.rz-form-field .rz-numeric-button { + display: none; +} +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { + display: block; +} + +.rz-form-field-label { + position: absolute; + pointer-events: none; + padding: var(--rz-form-field-label-padding); + inset-block-start: 50%; + inset-inline-end: auto; + border-radius: var(--rz-border-radius); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); + max-width: calc(100% - 1.5rem); + transform: translate(0, -50%); + background-color: transparent; + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); +} +.rz-state-disabled .rz-form-field-content > .rz-form-field-label { + color: var(--rz-input-disabled-color) !important; +} +.rz-form-field-label:last-child { + inset-inline-end: 1.5rem; +} +.rz-textarea ~ .rz-form-field-label { + inset-block-start: var(--rz-form-field-label-textarea-top); + transform: translate(0, 0); +} +.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { + transform: translate(0, 0.625rem); +} +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; + transform: translate(0, 0); + color: var(--rz-input-placeholder-color); + background-color: var(--rz-form-field-label-floating-background-color); + font-size: 0.75rem; + line-height: 1rem; + max-width: calc(100% - 1.5rem); +} +.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + background-color: inherit !important; +} +.invalid ~ .rz-form-field-label { + color: var(--rz-danger) !important; +} +.rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} + +.rz-timeline { + box-sizing: border-box; + display: flex; +} +.rz-timeline.rz-timeline-column { + flex-direction: column; +} +.rz-timeline.rz-timeline-column .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row { + flex-direction: row; +} +.rz-timeline.rz-timeline-row .rz-timeline-item { + flex-direction: column; + justify-content: end; + width: 100%; +} +.rz-timeline.rz-timeline-row.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: column-reverse; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse .rz-timeline-item { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column; + justify-content: end; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item { + flex-direction: column; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-end { + display: none; +} + +.rz-timeline-item { + display: flex; + padding: var(--rz-timeline-item-padding); + position: relative; +} +.rz-timeline-align-items-center .rz-timeline-item { + align-items: center; +} +.rz-timeline-align-items-normal .rz-timeline-item { + align-items: normal; +} +.rz-timeline-align-items-start .rz-timeline-item { + align-items: start; +} +.rz-timeline-align-items-end .rz-timeline-item { + align-items: end; +} +.rz-timeline-align-items-stretch .rz-timeline-item { + align-items: stretch; +} +.rz-timeline-item:before { + content: ""; + position: absolute; + background-color: var(--rz-timeline-line-color); +} +.rz-timeline-column .rz-timeline-item:before { + width: var(--rz-timeline-line-width); + top: 0; + bottom: 0; + left: calc(50% - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline-column .rz-timeline-item:first-child:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-top-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + top: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column .rz-timeline-item:last-child:before { + bottom: calc(50% - var(--rz-timeline-line-width) / 2); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + bottom: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + bottom: auto; + left: 0; + right: 0; + height: var(--rz-timeline-line-width); +} +.rz-timeline-row .rz-timeline-item:first-child:before { + left: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + left: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:last-child:before { + right: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-right-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + right: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} + +.rz-timeline-content-start { + text-align: center; +} +.rz-timeline-column .rz-timeline-content-start { + flex: 1 1 auto; + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-content-end { + flex: 1 1 auto; + text-align: center; +} +.rz-timeline-column .rz-timeline-content-end { + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} +.rz-timeline-row .rz-timeline-content-end { + max-height: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-axis { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 var(--rz-timeline-axis-size); +} +.rz-timeline-column .rz-timeline-axis { + width: var(--rz-timeline-axis-size); +} +.rz-timeline-row .rz-timeline-axis { + height: var(--rz-timeline-axis-size); +} + +.rz-timeline-point { + position: relative; + display: flex; + flex: 0 1 var(--rz-timeline-point-size); + align-items: center; + justify-content: center; + height: var(--rz-timeline-point-size); + width: var(--rz-timeline-point-size); + border: var(--rz-timeline-point-border); + border-radius: var(--rz-timeline-point-border-radius); + background-color: var(--rz-timeline-point-background-color); + color: var(--rz-timeline-point-color); +} + +.rz-timeline-point-outlined { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border-color: var(--rz-timeline-point-background-color); +} + +.rz-timeline-point-flat { + border: 0; +} + +.rz-timeline-point-text { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border: 0; +} + +.rz-timeline-point-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} + +.rz-timeline-point-outlined.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); + border-color: var(--rz-primary); +} + +.rz-timeline-point-text.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); +} + +.rz-timeline-point-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} + +.rz-timeline-point-outlined.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); + border-color: var(--rz-secondary); +} + +.rz-timeline-point-text.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); +} + +.rz-timeline-point-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} + +.rz-timeline-point-outlined.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); + border-color: var(--rz-info); +} + +.rz-timeline-point-text.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); +} + +.rz-timeline-point-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} + +.rz-timeline-point-outlined.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); + border-color: var(--rz-warning); +} + +.rz-timeline-point-text.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); +} + +.rz-timeline-point-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} + +.rz-timeline-point-outlined.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); + border-color: var(--rz-success); +} + +.rz-timeline-point-text.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); +} + +.rz-timeline-point-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); + border-color: var(--rz-base-700); +} + +.rz-timeline-point-text.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); +} + +.rz-timeline-point-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); + border-color: var(--rz-base-700); +} + +.rz-timeline-point-text.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); +} + +.rz-timeline-point-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); + border-color: var(--rz-base-900); +} + +.rz-timeline-point-text.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); +} + +.rz-timeline-axis-lg { + --rz-timeline-point-size: 3rem; +} +.rz-timeline-axis-lg .rzi { + font-size: 2rem; +} + +.rz-timeline-axis-md { + --rz-timeline-point-size: 1.5rem; +} +.rz-timeline-axis-md .rzi { + font-size: 1rem; +} + +.rz-timeline-axis-sm { + --rz-timeline-point-size: 1rem; +} +.rz-timeline-axis-sm .rzi { + font-size: 0.625rem; +} + +.rz-timeline-axis-xs { + --rz-timeline-point-size: 0.75rem; +} +.rz-timeline-axis-xs .rzi { + font-size: 0.5rem; +} + +.rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { + width: 100%; + height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #466791; + --rz-base-50: #ffffff; + --rz-base-100: #f3f5f7; + --rz-base-200: #ebeef2; + --rz-base-300: #d9e1ea; + --rz-base-400: #87a4c4; + --rz-base-500: #7293b6; + --rz-base-600: #466791; + --rz-base-700: #395374; + --rz-base-800: #30445f; + --rz-base-900: #2b3a50; + --rz-base-light: #87a4c4; + --rz-base-lighter: #ffffff; + --rz-base-dark: #395374; + --rz-base-darker: #2b3a50; + --rz-primary: #d64d42; + --rz-primary-light: #db6259; + --rz-primary-lighter: rgba(214, 77, 66, 0.16); + --rz-primary-dark: #c5473d; + --rz-primary-darker: #a13a32; + --rz-secondary: #3ba5fc; + --rz-secondary-light: #53b0fc; + --rz-secondary-lighter: rgba(59, 165, 252, 0.2); + --rz-secondary-dark: #3698e8; + --rz-secondary-darker: #2c7cbd; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #ffffff; + --rz-on-base-light: #2b3a50; + --rz-on-base-lighter: #2b3a50; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #d64d42; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #3ba5fc; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-100); + --rz-text-secondary-color: var(--rz-base-300); + --rz-text-tertiary-color: var(--rz-base-400); + --rz-text-disabled-color: var(--rz-base-600); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); + /* Border Radius */ + --rz-border-radius: 0; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-700); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-600); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-700); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-700); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-datalist-item-border: none; + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-800); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-700); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-900); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-700); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-700); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-700); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-700); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-700); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-700); + --rz-form-field-filled-hover-background-color: var(--rz-base-700); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-900); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-secondary-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-800); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-900); + --rz-grid-filter-background-color: var(--rz-base-800); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-secondary-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-800); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-700); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-900); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-700); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-900); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-800); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-700); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-700); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-background-color); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-700); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-700); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-900); + --rz-pager-numeric-button-selected-color: var(--rz-text-contrast-color); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-900); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-700); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-700); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-700); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-900); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-700); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-700); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-900); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-700); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: none; + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-900); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-base-600); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-700); + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: var(--rz-base-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-900); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-dark); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-700); + --rz-slider-disabled-range-border: var(--rz-border-base-700); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-700); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-700); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 0.8; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-700); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: none; + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-700); + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-800); + --rz-tabs-tab-hover-color: var(--rz-text-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-600); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-600); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: 0; + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-700); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/humanistic-wcag.css b/_content/Radzen.Blazor/css/humanistic-wcag.css index d10abb2..af26daa 100755 --- a/_content/Radzen.Blazor/css/humanistic-wcag.css +++ b/_content/Radzen.Blazor/css/humanistic-wcag.css @@ -1,6 +1,8 @@ -:root { +:root, +.rz-humanistic { --rz-white: #ffffff; --rz-black: #000000; + --rz-base: #d9e1ea; --rz-base-50: #ffffff; --rz-base-100: #f3f5f7; --rz-base-200: #ebeef2; @@ -11,6 +13,10 @@ --rz-base-700: #395374; --rz-base-800: #30445f; --rz-base-900: #2b3a50; + --rz-base-light: #ebeef2; + --rz-base-lighter: #ffffff; + --rz-base-dark: #3f618d; + --rz-base-darker: #2b3a50; --rz-primary: #a9352d; --rz-primary-light: #b34d46; --rz-primary-lighter: rgba(169, 53, 45, 0.16); @@ -41,6 +47,11 @@ --rz-danger-lighter: rgba(178, 36, 46, 0.2); --rz-danger-dark: #961e27; --rz-danger-darker: #861b23; + --rz-on-base: #000000; + --rz-on-base-light: #000000; + --rz-on-base-lighter: #000000; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: #a9352d; diff --git a/_content/Radzen.Blazor/css/humanistic.css b/_content/Radzen.Blazor/css/humanistic.css index 889fd8d..bb2efe4 100755 --- a/_content/Radzen.Blazor/css/humanistic.css +++ b/_content/Radzen.Blazor/css/humanistic.css @@ -1,8755 +1,3265 @@ @charset "UTF-8"; -:root { - --blue: #007bff; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; - --red: #dc3545; - --orange: #fd7e14; - --yellow: #ffc107; - --green: #28a745; - --teal: #20c997; - --cyan: #17a2b8; - --white: #fff; - --gray: #6c757d; - --gray-dark: #343a40; - --primary: #d64d42; - --secondary: #3ba5fc; - --success: #5dbf74; - --info: #2cc8c8; - --warning: #fac152; - --danger: #f9777f; - --light: #ebeef2; - --dark: #343a40; - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; - } - a:not(.btn) { - text-decoration: underline; - } - abbr[title]::after { - content: " (" attr(title) ")"; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #adb5bd; - page-break-inside: avoid; - } - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } - @page { - size: a3; - } - body { - min-width: 992px !important; - } - .container { - min-width: 992px !important; - } - .navbar { - display: none; - } - .badge { - border: 1px solid #000; - } - .table { - border-collapse: collapse !important; - } - .table td, - .table th { - background-color: #fff !important; - } - .table-bordered th, - .table-bordered td { - border: 1px solid #dee2e6 !important; - } - .table-dark { - color: inherit; - } - .table-dark th, - .table-dark td, - .table-dark thead th, - .table-dark tbody + tbody { - border-color: #dee2e6; - } - .table .thead-dark th { - color: inherit; - border-color: #dee2e6; - } -} -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -} - -body { - margin: 0; - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #30445f; - text-align: left; - background-color: #f3f5f7; -} - -[tabindex="-1"]:focus { - outline: 0 !important; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title], -abbr[data-original-title] { - text-decoration: underline; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; - text-decoration-skip-ink: none; -} - -address { - margin-bottom: 1rem; +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: 0.5rem; - margin-left: 0; + font-weight: 100 700; } - -blockquote { - margin: 0 0 1rem; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; } - -b, -strong { - font-weight: bolder; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } - -small { - font-size: 80%; +*, +*::before, +*::after { + box-sizing: inherit; } -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; +.rz-text-title-color { + color: var(--rz-base-900) !important; } -sub { - bottom: -0.25em; +.rz-text-color { + color: var(--rz-base-800) !important; } -sup { - top: -0.5em; +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -a { - color: #3ba5fc; - text-decoration: none; - background-color: transparent; -} -a:hover { - color: #3ba5fc; - text-decoration: underline; +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):focus { - outline: 0; +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -pre, -code, -kbd, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 1em; +.rz-text-contrast-color { + color: var(--rz-white) !important; } -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -figure { - margin: 0 0 1rem; +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -img { - vertical-align: middle; - border-style: none; +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -svg { - overflow: hidden; - vertical-align: middle; +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -table { - border-collapse: collapse; +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #6c757d; - text-align: left; - caption-side: bottom; +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -th { - text-align: inherit; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -label { - display: inline-block; - margin-bottom: 0.5rem; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -button { - border-radius: 0; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -button, -input { - overflow: visible; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -button, -select { - text-transform: none; +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -select { - word-wrap: normal; +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -button:not(:disabled), -[type=button]:not(:disabled), -[type=reset]:not(:disabled), -[type=submit]:not(:disabled) { - cursor: pointer; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - padding: 0; - border-style: none; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -input[type=radio], -input[type=checkbox] { - box-sizing: border-box; - padding: 0; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -input[type=date], -input[type=time], -input[type=datetime-local], -input[type=month] { - -webkit-appearance: listbox; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -textarea { - overflow: auto; - resize: vertical; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -legend { - display: block; - width: 100%; - max-width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; - white-space: normal; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -progress { - vertical-align: baseline; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; +.rz-display-none { + display: none !important; } -[type=search] { - outline-offset: -2px; - -webkit-appearance: none; +.rz-display-block { + display: block !important; } -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; +.rz-display-inline { + display: inline !important; } -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; +.rz-display-inline-block { + display: inline-block !important; } -output { - display: inline-block; +.rz-display-flex { + display: flex !important; } -summary { - display: list-item; - cursor: pointer; +.rz-display-inline-flex { + display: inline-flex !important; } -template { - display: none; +.rz-display-grid { + display: grid !important; } -[hidden] { - display: none !important; +.rz-display-inline-grid { + display: inline-grid !important; } -.container { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} @media (min-width: 576px) { - .container { - max-width: 540px; + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; } } @media (min-width: 768px) { - .container { - max-width: 720px; + .rz-display-sm-none { + display: none !important; } -} -@media (min-width: 992px) { - .container { - max-width: 960px; + .rz-display-sm-block { + display: block !important; } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; } } +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} -.container-fluid { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} - -.row { - display: flex; - flex-wrap: wrap; - margin-right: -1rem; - margin-left: -1rem; +.rz-justify-content-stretch { + justify-content: stretch !important; } -.no-gutters { - margin-right: 0; - margin-left: 0; +.rz-justify-content-center { + justify-content: center !important; } -.no-gutters > .col, -.no-gutters > [class*=col-] { - padding-right: 0; - padding-left: 0; + +.rz-justify-content-start { + justify-content: start !important; } -.col-xl, -.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, -.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, -.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, -.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, -.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { - position: relative; - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.rz-justify-content-end { + justify-content: end !important; } -.col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.rz-justify-content-flex-start { + justify-content: flex-start !important; } -.col-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; +.rz-justify-content-flex-end { + justify-content: flex-end !important; } -.col-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; +.rz-justify-content-left { + justify-content: left !important; } -.col-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; +.rz-justify-content-right { + justify-content: right !important; } -.col-3 { - flex: 0 0 25%; - max-width: 25%; +.rz-justify-content-space-between { + justify-content: space-between !important; } -.col-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; +.rz-justify-content-space-around { + justify-content: space-around !important; } -.col-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; } -.col-6 { - flex: 0 0 50%; - max-width: 50%; +.rz-align-items-normal { + align-items: normal !important; } -.col-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; +.rz-align-items-stretch { + align-items: stretch !important; } -.col-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; +.rz-align-items-center { + align-items: center !important; } -.col-9 { - flex: 0 0 75%; - max-width: 75%; +.rz-align-items-start { + align-items: start !important; } -.col-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; +.rz-align-items-end { + align-items: end !important; } -.col-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; +.rz-align-items-flex-start { + align-items: flex-start !important; } -.col-12 { - flex: 0 0 100%; - max-width: 100%; +.rz-align-items-flex-end { + align-items: flex-end !important; } -.order-first { - order: -1; +.rz-color-white { + color: var(--rz-white) !important; } -.order-last { - order: 13; +.rz-color-black { + color: var(--rz-black) !important; } -.order-0 { - order: 0; +.rz-color-base { + color: var(--rz-base) !important; } -.order-1 { - order: 1; +.rz-color-base-50 { + color: var(--rz-base-50) !important; } -.order-2 { - order: 2; +.rz-color-base-100 { + color: var(--rz-base-100) !important; } -.order-3 { - order: 3; +.rz-color-base-200 { + color: var(--rz-base-200) !important; } -.order-4 { - order: 4; +.rz-color-base-300 { + color: var(--rz-base-300) !important; } -.order-5 { - order: 5; +.rz-color-base-400 { + color: var(--rz-base-400) !important; } -.order-6 { - order: 6; +.rz-color-base-500 { + color: var(--rz-base-500) !important; } -.order-7 { - order: 7; +.rz-color-base-600 { + color: var(--rz-base-600) !important; } -.order-8 { - order: 8; +.rz-color-base-700 { + color: var(--rz-base-700) !important; } -.order-9 { - order: 9; +.rz-color-base-800 { + color: var(--rz-base-800) !important; } -.order-10 { - order: 10; +.rz-color-base-900 { + color: var(--rz-base-900) !important; } -.order-11 { - order: 11; +.rz-color-base-light { + color: var(--rz-base-light) !important; } -.order-12 { - order: 12; +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; } -.offset-1 { - margin-left: 8.3333333333%; +.rz-color-base-dark { + color: var(--rz-base-dark) !important; } -.offset-2 { - margin-left: 16.6666666667%; +.rz-color-base-darker { + color: var(--rz-base-darker) !important; } -.offset-3 { - margin-left: 25%; +.rz-color-primary { + color: var(--rz-primary) !important; } -.offset-4 { - margin-left: 33.3333333333%; +.rz-color-primary-light { + color: var(--rz-primary-light) !important; } -.offset-5 { - margin-left: 41.6666666667%; +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; } -.offset-6 { - margin-left: 50%; +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; } -.offset-7 { - margin-left: 58.3333333333%; +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; } -.offset-8 { - margin-left: 66.6666666667%; +.rz-color-secondary { + color: var(--rz-secondary) !important; } -.offset-9 { - margin-left: 75%; +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; } -.offset-10 { - margin-left: 83.3333333333%; +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; } -.offset-11 { - margin-left: 91.6666666667%; +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; } -@media (min-width: 576px) { - .col-sm { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-sm-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-sm-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-sm-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-sm-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-sm-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-sm-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-sm-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-sm-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-sm-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-sm-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-sm-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-sm-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - order: -1; - } - .order-sm-last { - order: 13; - } - .order-sm-0 { - order: 0; - } - .order-sm-1 { - order: 1; - } - .order-sm-2 { - order: 2; - } - .order-sm-3 { - order: 3; - } - .order-sm-4 { - order: 4; - } - .order-sm-5 { - order: 5; - } - .order-sm-6 { - order: 6; - } - .order-sm-7 { - order: 7; - } - .order-sm-8 { - order: 8; - } - .order-sm-9 { - order: 9; - } - .order-sm-10 { - order: 10; - } - .order-sm-11 { - order: 11; - } - .order-sm-12 { - order: 12; - } - .offset-sm-0 { - margin-left: 0; - } - .offset-sm-1 { - margin-left: 8.3333333333%; - } - .offset-sm-2 { - margin-left: 16.6666666667%; - } - .offset-sm-3 { - margin-left: 25%; - } - .offset-sm-4 { - margin-left: 33.3333333333%; - } - .offset-sm-5 { - margin-left: 41.6666666667%; - } - .offset-sm-6 { - margin-left: 50%; - } - .offset-sm-7 { - margin-left: 58.3333333333%; - } - .offset-sm-8 { - margin-left: 66.6666666667%; - } - .offset-sm-9 { - margin-left: 75%; - } - .offset-sm-10 { - margin-left: 83.3333333333%; - } - .offset-sm-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 768px) { - .col-md { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-md-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-md-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-md-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-md-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-md-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-md-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-md-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-md-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-md-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-md-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-md-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-md-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - order: -1; - } - .order-md-last { - order: 13; - } - .order-md-0 { - order: 0; - } - .order-md-1 { - order: 1; - } - .order-md-2 { - order: 2; - } - .order-md-3 { - order: 3; - } - .order-md-4 { - order: 4; - } - .order-md-5 { - order: 5; - } - .order-md-6 { - order: 6; - } - .order-md-7 { - order: 7; - } - .order-md-8 { - order: 8; - } - .order-md-9 { - order: 9; - } - .order-md-10 { - order: 10; - } - .order-md-11 { - order: 11; - } - .order-md-12 { - order: 12; - } - .offset-md-0 { - margin-left: 0; - } - .offset-md-1 { - margin-left: 8.3333333333%; - } - .offset-md-2 { - margin-left: 16.6666666667%; - } - .offset-md-3 { - margin-left: 25%; - } - .offset-md-4 { - margin-left: 33.3333333333%; - } - .offset-md-5 { - margin-left: 41.6666666667%; - } - .offset-md-6 { - margin-left: 50%; - } - .offset-md-7 { - margin-left: 58.3333333333%; - } - .offset-md-8 { - margin-left: 66.6666666667%; - } - .offset-md-9 { - margin-left: 75%; - } - .offset-md-10 { - margin-left: 83.3333333333%; - } - .offset-md-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 992px) { - .col-lg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-lg-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-lg-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-lg-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-lg-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-lg-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-lg-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-lg-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-lg-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-lg-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-lg-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-lg-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-lg-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - order: -1; - } - .order-lg-last { - order: 13; - } - .order-lg-0 { - order: 0; - } - .order-lg-1 { - order: 1; - } - .order-lg-2 { - order: 2; - } - .order-lg-3 { - order: 3; - } - .order-lg-4 { - order: 4; - } - .order-lg-5 { - order: 5; - } - .order-lg-6 { - order: 6; - } - .order-lg-7 { - order: 7; - } - .order-lg-8 { - order: 8; - } - .order-lg-9 { - order: 9; - } - .order-lg-10 { - order: 10; - } - .order-lg-11 { - order: 11; - } - .order-lg-12 { - order: 12; - } - .offset-lg-0 { - margin-left: 0; - } - .offset-lg-1 { - margin-left: 8.3333333333%; - } - .offset-lg-2 { - margin-left: 16.6666666667%; - } - .offset-lg-3 { - margin-left: 25%; - } - .offset-lg-4 { - margin-left: 33.3333333333%; - } - .offset-lg-5 { - margin-left: 41.6666666667%; - } - .offset-lg-6 { - margin-left: 50%; - } - .offset-lg-7 { - margin-left: 58.3333333333%; - } - .offset-lg-8 { - margin-left: 66.6666666667%; - } - .offset-lg-9 { - margin-left: 75%; - } - .offset-lg-10 { - margin-left: 83.3333333333%; - } - .offset-lg-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 1200px) { - .col-xl { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-xl-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-xl-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-xl-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-xl-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-xl-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-xl-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-xl-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-xl-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-xl-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-xl-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-xl-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-xl-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - order: -1; - } - .order-xl-last { - order: 13; - } - .order-xl-0 { - order: 0; - } - .order-xl-1 { - order: 1; - } - .order-xl-2 { - order: 2; - } - .order-xl-3 { - order: 3; - } - .order-xl-4 { - order: 4; - } - .order-xl-5 { - order: 5; - } - .order-xl-6 { - order: 6; - } - .order-xl-7 { - order: 7; - } - .order-xl-8 { - order: 8; - } - .order-xl-9 { - order: 9; - } - .order-xl-10 { - order: 10; - } - .order-xl-11 { - order: 11; - } - .order-xl-12 { - order: 12; - } - .offset-xl-0 { - margin-left: 0; - } - .offset-xl-1 { - margin-left: 8.3333333333%; - } - .offset-xl-2 { - margin-left: 16.6666666667%; - } - .offset-xl-3 { - margin-left: 25%; - } - .offset-xl-4 { - margin-left: 33.3333333333%; - } - .offset-xl-5 { - margin-left: 41.6666666667%; - } - .offset-xl-6 { - margin-left: 50%; - } - .offset-xl-7 { - margin-left: 58.3333333333%; - } - .offset-xl-8 { - margin-left: 66.6666666667%; - } - .offset-xl-9 { - margin-left: 75%; - } - .offset-xl-10 { - margin-left: 83.3333333333%; - } - .offset-xl-11 { - margin-left: 91.6666666667%; - } -} -.form-control { - display: block; - width: 100%; - height: 2.25rem; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.429; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: var(--rz-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .form-control { - transition: none; - } -} -.form-control::-ms-expand { - background-color: transparent; - border: 0; -} -.form-control:focus { - color: #495057; - background-color: #fff; - border-color: #edb0ab; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(214, 77, 66, 0.25); -} -.form-control::placeholder { - color: var(--rz-text-tertiary-color); - opacity: 1; -} -.form-control:disabled, .form-control[readonly] { - background-color: #e9ecef; - opacity: 1; +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; } -select.form-control:focus::-ms-value { - color: #495057; - background-color: #fff; +.rz-color-info { + color: var(--rz-info) !important; } -.form-control-file, -.form-control-range { - display: block; - width: 100%; +.rz-color-info-light { + color: var(--rz-info-light) !important; } -.col-form-label { - padding-top: calc(0.375rem + 1px); - padding-bottom: calc(0.375rem + 1px); - margin-bottom: 0; - font-size: inherit; - line-height: 1.429; +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; } -.col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); - font-size: 1.09375rem; - line-height: 1.5; +.rz-color-info-dark { + color: var(--rz-info-dark) !important; } -.col-form-label-sm { - padding-top: calc(0.25rem + 1px); - padding-bottom: calc(0.25rem + 1px); - font-size: 0.765625rem; - line-height: 1.5; +.rz-color-info-darker { + color: var(--rz-info-darker) !important; } -.form-control-plaintext { - display: block; - width: 100%; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - margin-bottom: 0; - line-height: 1.429; - color: #30445f; - background-color: transparent; - border: solid transparent; - border-width: 1px 0; -} -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-right: 0; - padding-left: 0; +.rz-color-success { + color: var(--rz-success) !important; } -.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; - border-radius: 0.2rem; +.rz-color-success-light { + color: var(--rz-success-light) !important; } -.form-control-lg { - height: calc(1.5em + 1rem + 2px); - padding: 0.5rem 1rem; - font-size: 1.09375rem; - line-height: 1.5; - border-radius: 0.3rem; +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; } -select.form-control[size], select.form-control[multiple] { - height: auto; +.rz-color-success-dark { + color: var(--rz-success-dark) !important; } -textarea.form-control { - height: auto; +.rz-color-success-darker { + color: var(--rz-success-darker) !important; } -.form-group { - margin-bottom: 1rem; +.rz-color-warning { + color: var(--rz-warning) !important; } -.form-text { - display: block; - margin-top: 0.25rem; +.rz-color-warning-light { + color: var(--rz-warning-light) !important; } -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; -} -.form-row > .col, -.form-row > [class*=col-] { - padding-right: 5px; - padding-left: 5px; +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; } -.form-check { - position: relative; - display: block; - padding-left: 1.25rem; +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; } -.form-check-input { - position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; -} -.form-check-input:disabled ~ .form-check-label { - color: #6c757d; +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; } -.form-check-label { - margin-bottom: 0; +.rz-color-danger { + color: var(--rz-danger) !important; } -.form-check-inline { - display: inline-flex; - align-items: center; - padding-left: 0; - margin-right: 0.75rem; -} -.form-check-inline .form-check-input { - position: static; - margin-top: 0; - margin-right: 0.3125rem; - margin-left: 0; +.rz-color-danger-light { + color: var(--rz-danger-light) !important; } -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #5dbf74; +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; } -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #212529; - background-color: rgba(93, 191, 116, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; } -.was-validated .form-control:valid, .form-control.is-valid { - border-color: #5dbf74; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235dbf74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .form-control:valid ~ .valid-feedback, -.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, -.form-control.is-valid ~ .valid-tooltip { - display: block; +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-base { + color: var(--rz-on-base) !important; } -.was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #5dbf74; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235dbf74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .custom-select:valid ~ .valid-feedback, -.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, -.custom-select.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; } -.was-validated .form-control-file:valid ~ .valid-feedback, -.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, -.form-control-file.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #5dbf74; -} -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #5dbf74; -} -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #5dbf74; -} -.was-validated .custom-control-input:valid ~ .valid-feedback, -.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, -.custom-control-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #82cd93; - background-color: #82cd93; -} -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #5dbf74; +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; } -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #5dbf74; -} -.was-validated .custom-file-input:valid ~ .valid-feedback, -.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, -.custom-file-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); +.rz-color-on-primary { + color: var(--rz-on-primary) !important; } -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #f9777f; +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; } -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #212529; - background-color: rgba(249, 119, 127, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; } -.was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #f9777f; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9777f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f9777f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .form-control:invalid ~ .invalid-feedback, -.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, -.form-control.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; } -.was-validated .custom-select:invalid, .custom-select.is-invalid { - border-color: #f9777f; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9777f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f9777f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .custom-select:invalid ~ .invalid-feedback, -.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, -.custom-select.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; } -.was-validated .form-control-file:invalid ~ .invalid-feedback, -.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, -.form-control-file.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #f9777f; -} -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #f9777f; -} -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #f9777f; -} -.was-validated .custom-control-input:invalid ~ .invalid-feedback, -.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, -.custom-control-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #fba8ad; - background-color: #fba8ad; -} -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #f9777f; +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; } -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #f9777f; -} -.was-validated .custom-file-input:invalid ~ .invalid-feedback, -.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, -.custom-file-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; } -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -.form-inline .form-check { - width: 100%; -} -@media (min-width: 576px) { - .form-inline label { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0; - } - .form-inline .form-group { - display: flex; - flex: 0 0 auto; - flex-flow: row wrap; - align-items: center; - margin-bottom: 0; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - .form-inline .form-control-plaintext { - display: inline-block; - } - .form-inline .input-group, - .form-inline .custom-select { - width: auto; - } - .form-inline .form-check { - display: flex; - align-items: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-inline .form-check-input { - position: relative; - flex-shrink: 0; - margin-top: 0; - margin-right: 0.25rem; - margin-left: 0; - } - .form-inline .custom-control { - align-items: center; - justify-content: center; - } - .form-inline .custom-control-label { - margin-bottom: 0; - } +.rz-color-on-info { + color: var(--rz-on-info) !important; } -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 0.75rem; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: var(--rz-border-radius); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .badge { - transition: none; - } -} -a.badge:hover, a.badge:focus { - text-decoration: none; +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; } -.badge:empty { - display: none; +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; } -.btn .badge { - position: relative; - top: -1px; +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; } -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; } -.badge-primary { - color: #fff; - background-color: #d64d42; -} -a.badge-primary:hover, a.badge-primary:focus { - color: #fff; - background-color: #bc3429; -} -a.badge-primary:focus, a.badge-primary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(214, 77, 66, 0.5); +.rz-color-on-success { + color: var(--rz-on-success) !important; } -.badge-secondary { - color: #fff; - background-color: #3ba5fc; -} -a.badge-secondary:hover, a.badge-secondary:focus { - color: #fff; - background-color: #098efb; -} -a.badge-secondary:focus, a.badge-secondary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(59, 165, 252, 0.5); +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; } -.badge-success { - color: #212529; - background-color: #5dbf74; -} -a.badge-success:hover, a.badge-success:focus { - color: #212529; - background-color: #42a75a; -} -a.badge-success:focus, a.badge-success.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.5); +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; } -.badge-info { - color: #212529; - background-color: #2cc8c8; -} -a.badge-info:hover, a.badge-info:focus { - color: #212529; - background-color: #239e9e; -} -a.badge-info:focus, a.badge-info.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(44, 200, 200, 0.5); +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; } -.badge-warning { - color: #212529; - background-color: #fac152; -} -a.badge-warning:hover, a.badge-warning:focus { - color: #212529; - background-color: #f9af20; -} -a.badge-warning:focus, a.badge-warning.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(250, 193, 82, 0.5); +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; } -.badge-danger { - color: #212529; - background-color: #f9777f; -} -a.badge-danger:hover, a.badge-danger:focus { - color: #212529; - background-color: #f74651; -} -a.badge-danger:focus, a.badge-danger.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.5); +.rz-color-on-warning { + color: var(--rz-on-warning) !important; } -.badge-light { - color: #212529; - background-color: #ebeef2; -} -a.badge-light:hover, a.badge-light:focus { - color: #212529; - background-color: #ccd4de; -} -a.badge-light:focus, a.badge-light.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(235, 238, 242, 0.5); +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; } -.badge-dark { - color: #fff; - background-color: #343a40; -} -a.badge-dark:hover, a.badge-dark:focus { - color: #fff; - background-color: #1d2124; -} -a.badge-dark:focus, a.badge-dark.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; } -.alert { - position: relative; - padding: 0.75rem 1.25rem; - margin-bottom: 1rem; - border: 1px solid transparent; - border-radius: 0; +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; } -.alert-heading { - color: inherit; +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; } -.alert-link { - font-weight: 700; +.rz-color-on-danger { + color: var(--rz-on-danger) !important; } -.alert-dismissible { - padding-right: 3.8125rem; -} -.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; } -.alert-primary { - color: #6f2822; - background-color: #f7dbd9; - border-color: #f4cdca; -} -.alert-primary hr { - border-top-color: #f0b9b5; -} -.alert-primary .alert-link { - color: #481a16; +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; } -.alert-secondary { - color: #1f5683; - background-color: #d8edfe; - border-color: #c8e6fe; -} -.alert-secondary hr { - border-top-color: #afdbfe; -} -.alert-secondary .alert-link { - color: #153b5a; +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; } -.alert-success { - color: #30633c; - background-color: #dff2e3; - border-color: #d2edd8; -} -.alert-success hr { - border-top-color: #c0e6c8; -} -.alert-success .alert-link { - color: #1f4127; +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; } -.alert-info { - color: #176868; - background-color: #d5f4f4; - border-color: #c4f0f0; -} -.alert-info hr { - border-top-color: #b0ebeb; -} -.alert-info .alert-link { - color: #0e3e3e; +.rz-color-series-1 { + color: var(--rz-series-1) !important; } -.alert-warning { - color: #82642b; - background-color: #fef3dc; - border-color: #feeecf; -} -.alert-warning hr { - border-top-color: #fde5b6; -} -.alert-warning .alert-link { - color: #5c471e; +.rz-color-series-2 { + color: var(--rz-series-2) !important; } -.alert-danger { - color: #813e42; - background-color: #fee4e5; - border-color: #fdd9db; -} -.alert-danger hr { - border-top-color: #fcc1c4; -} -.alert-danger .alert-link { - color: #5f2d30; +.rz-color-series-3 { + color: var(--rz-series-3) !important; } -.alert-light { - color: #7a7c7e; - background-color: #fbfcfc; - border-color: #f9fafb; -} -.alert-light hr { - border-top-color: #eaedf1; -} -.alert-light .alert-link { - color: #616364; +.rz-color-series-4 { + color: var(--rz-series-4) !important; } -.alert-dark { - color: #1b1e21; - background-color: #d6d8d9; - border-color: #c6c8ca; -} -.alert-dark hr { - border-top-color: #b9bbbe; -} -.alert-dark .alert-link { - color: #040505; +.rz-color-series-5 { + color: var(--rz-series-5) !important; } -.media { - display: flex; - align-items: flex-start; +.rz-color-series-6 { + color: var(--rz-series-6) !important; } -.media-body { - flex: 1; +.rz-color-series-7 { + color: var(--rz-series-7) !important; } -.align-baseline { - vertical-align: baseline !important; +.rz-color-series-8 { + color: var(--rz-series-8) !important; } -.align-top { - vertical-align: top !important; +.rz-color-series-9 { + color: var(--rz-series-9) !important; } -.align-middle { - vertical-align: middle !important; +.rz-color-series-10 { + color: var(--rz-series-10) !important; } -.align-bottom { - vertical-align: bottom !important; +.rz-color-series-11 { + color: var(--rz-series-11) !important; } -.align-text-bottom { - vertical-align: text-bottom !important; +.rz-color-series-12 { + color: var(--rz-series-12) !important; } -.align-text-top { - vertical-align: text-top !important; +.rz-color-series-13 { + color: var(--rz-series-13) !important; } -.bg-primary { - background-color: #d64d42 !important; +.rz-color-series-14 { + color: var(--rz-series-14) !important; } -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #bc3429 !important; +.rz-color-series-15 { + color: var(--rz-series-15) !important; } -.bg-secondary { - background-color: #3ba5fc !important; +.rz-color-series-16 { + color: var(--rz-series-16) !important; } -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #098efb !important; +.rz-color-series-17 { + color: var(--rz-series-17) !important; } -.bg-success { - background-color: #5dbf74 !important; +.rz-color-series-18 { + color: var(--rz-series-18) !important; } -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #42a75a !important; +.rz-color-series-19 { + color: var(--rz-series-19) !important; } -.bg-info { - background-color: #2cc8c8 !important; +.rz-color-series-20 { + color: var(--rz-series-20) !important; } -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #239e9e !important; +.rz-color-series-21 { + color: var(--rz-series-21) !important; } -.bg-warning { - background-color: #fac152 !important; +.rz-color-series-22 { + color: var(--rz-series-22) !important; } -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #f9af20 !important; +.rz-color-series-23 { + color: var(--rz-series-23) !important; } -.bg-danger { - background-color: #f9777f !important; +.rz-color-series-24 { + color: var(--rz-series-24) !important; } -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #f74651 !important; +.rz-background-color-white { + background-color: var(--rz-white) !important; } -.bg-light { - background-color: #ebeef2 !important; +.rz-background-color-black { + background-color: var(--rz-black) !important; } -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #ccd4de !important; +.rz-background-color-base { + background-color: var(--rz-base) !important; } -.bg-dark { - background-color: #343a40 !important; +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; } -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #1d2124 !important; +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; } -.bg-white { - background-color: #fff !important; +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; } -.bg-transparent { - background-color: transparent !important; +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; } -.border { - border: 1px solid #dee2e6 !important; +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; } -.border-top { - border-top: 1px solid #dee2e6 !important; +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; } -.border-right { - border-right: 1px solid #dee2e6 !important; +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; } -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; } -.border-left { - border-left: 1px solid #dee2e6 !important; +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; } -.border-0 { - border: 0 !important; +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; } -.border-top-0 { - border-top: 0 !important; +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; } -.border-right-0 { - border-right: 0 !important; +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; } -.border-bottom-0 { - border-bottom: 0 !important; +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; } -.border-left-0 { - border-left: 0 !important; +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; } -.border-primary { - border-color: #d64d42 !important; +.rz-background-color-primary { + background-color: var(--rz-primary) !important; } -.border-secondary { - border-color: #3ba5fc !important; -} - -.border-success { - border-color: #5dbf74 !important; +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; } -.border-info { - border-color: #2cc8c8 !important; +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; } -.border-warning { - border-color: #fac152 !important; +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; } -.border-danger { - border-color: #f9777f !important; +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; } -.border-light { - border-color: #ebeef2 !important; +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; } -.border-dark { - border-color: #343a40 !important; +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; } -.border-white { - border-color: #fff !important; +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; } -.rounded-sm { - border-radius: 0.2rem !important; +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; } -.rounded { - border-radius: 0 !important; +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; } -.rounded-top { - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; +.rz-background-color-info { + background-color: var(--rz-info) !important; } -.rounded-right { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; } -.rounded-bottom { - border-bottom-right-radius: 0 !important; - border-bottom-left-radius: 0 !important; +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; } -.rounded-left { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; } -.rounded-lg { - border-radius: 0.3rem !important; +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; } -.rounded-circle { - border-radius: 50% !important; +.rz-background-color-success { + background-color: var(--rz-success) !important; } -.rounded-pill { - border-radius: 50rem !important; +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; } -.rounded-0 { - border-radius: 0 !important; +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; } -.clearfix::after { - display: block; - clear: both; - content: ""; +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; } -.d-none { - display: none !important; +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; } -.d-inline { - display: inline !important; +.rz-background-color-warning { + background-color: var(--rz-warning) !important; } -.d-inline-block { - display: inline-block !important; +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; } -.d-block { - display: block !important; +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; } -.d-table { - display: table !important; +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; } -.d-table-row { - display: table-row !important; +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; } -.d-table-cell { - display: table-cell !important; +.rz-background-color-danger { + background-color: var(--rz-danger) !important; } -.d-flex { - display: flex !important; +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; } -.d-inline-flex { - display: inline-flex !important; +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; } -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } - .d-sm-inline { - display: inline !important; - } - .d-sm-inline-block { - display: inline-block !important; - } - .d-sm-block { - display: block !important; - } - .d-sm-table { - display: table !important; - } - .d-sm-table-row { - display: table-row !important; - } - .d-sm-table-cell { - display: table-cell !important; - } - .d-sm-flex { - display: flex !important; - } - .d-sm-inline-flex { - display: inline-flex !important; - } +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; } -@media (min-width: 768px) { - .d-md-none { - display: none !important; - } - .d-md-inline { - display: inline !important; - } - .d-md-inline-block { - display: inline-block !important; - } - .d-md-block { - display: block !important; - } - .d-md-table { - display: table !important; - } - .d-md-table-row { - display: table-row !important; - } - .d-md-table-cell { - display: table-cell !important; - } - .d-md-flex { - display: flex !important; - } - .d-md-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; } -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-inline { - display: inline !important; - } - .d-lg-inline-block { - display: inline-block !important; - } - .d-lg-block { - display: block !important; - } - .d-lg-table { - display: table !important; - } - .d-lg-table-row { - display: table-row !important; - } - .d-lg-table-cell { - display: table-cell !important; - } - .d-lg-flex { - display: flex !important; - } - .d-lg-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; } -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; - } - .d-xl-inline { - display: inline !important; - } - .d-xl-inline-block { - display: inline-block !important; - } - .d-xl-block { - display: block !important; - } - .d-xl-table { - display: table !important; - } - .d-xl-table-row { - display: table-row !important; - } - .d-xl-table-cell { - display: table-cell !important; - } - .d-xl-flex { - display: flex !important; - } - .d-xl-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; } -@media print { - .d-print-none { - display: none !important; - } - .d-print-inline { - display: inline !important; - } - .d-print-inline-block { - display: inline-block !important; - } - .d-print-block { - display: block !important; - } - .d-print-table { - display: table !important; - } - .d-print-table-row { - display: table-row !important; - } - .d-print-table-cell { - display: table-cell !important; - } - .d-print-flex { - display: flex !important; - } - .d-print-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; } -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; } -.embed-responsive::before { - display: block; - content: ""; + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; } -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; } -.embed-responsive-21by9::before { - padding-top: 42.8571428571%; +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; } -.embed-responsive-16by9::before { - padding-top: 56.25%; +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; } -.embed-responsive-4by3::before { - padding-top: 75%; +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; } -.embed-responsive-1by1::before { - padding-top: 100%; +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; } -.flex-row { - flex-direction: row !important; +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; } -.flex-column { - flex-direction: column !important; +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; } -.flex-row-reverse { - flex-direction: row-reverse !important; +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; } -.flex-column-reverse { - flex-direction: column-reverse !important; +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; } -.flex-wrap { - flex-wrap: wrap !important; +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; } -.flex-nowrap { - flex-wrap: nowrap !important; +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; } -.flex-wrap-reverse { - flex-wrap: wrap-reverse !important; +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; } -.flex-fill { - flex: 1 1 auto !important; +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; } -.flex-grow-0 { - flex-grow: 0 !important; +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; } -.flex-grow-1 { - flex-grow: 1 !important; +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; } -.flex-shrink-0 { - flex-shrink: 0 !important; +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; } -.flex-shrink-1 { - flex-shrink: 1 !important; +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; } -.justify-content-start { - justify-content: flex-start !important; +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; } -.justify-content-end { - justify-content: flex-end !important; +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; } -.justify-content-center { - justify-content: center !important; +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; } -.justify-content-between { - justify-content: space-between !important; +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; } -.justify-content-around { - justify-content: space-around !important; +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; } -.align-items-start { - align-items: flex-start !important; +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; } -.align-items-end { - align-items: flex-end !important; +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; } -.align-items-center { - align-items: center !important; +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; } -.align-items-baseline { - align-items: baseline !important; +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; } -.align-items-stretch { - align-items: stretch !important; +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; } -.align-content-start { - align-content: flex-start !important; +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; } -.align-content-end { - align-content: flex-end !important; +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; } -.align-content-center { - align-content: center !important; +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; } -.align-content-between { - align-content: space-between !important; +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; } -.align-content-around { - align-content: space-around !important; +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; } -.align-content-stretch { - align-content: stretch !important; +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; } -.align-self-auto { - align-self: auto !important; +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; } -.align-self-start { - align-self: flex-start !important; +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; } -.align-self-end { - align-self: flex-end !important; +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; } -.align-self-center { - align-self: center !important; +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; } -.align-self-baseline { - align-self: baseline !important; +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; } -.align-self-stretch { - align-self: stretch !important; +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; } -@media (min-width: 576px) { - .flex-sm-row { - flex-direction: row !important; - } - .flex-sm-column { - flex-direction: column !important; - } - .flex-sm-row-reverse { - flex-direction: row-reverse !important; - } - .flex-sm-column-reverse { - flex-direction: column-reverse !important; - } - .flex-sm-wrap { - flex-wrap: wrap !important; - } - .flex-sm-nowrap { - flex-wrap: nowrap !important; - } - .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-sm-fill { - flex: 1 1 auto !important; - } - .flex-sm-grow-0 { - flex-grow: 0 !important; - } - .flex-sm-grow-1 { - flex-grow: 1 !important; - } - .flex-sm-shrink-0 { - flex-shrink: 0 !important; - } - .flex-sm-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-sm-start { - justify-content: flex-start !important; - } - .justify-content-sm-end { - justify-content: flex-end !important; - } - .justify-content-sm-center { - justify-content: center !important; - } - .justify-content-sm-between { - justify-content: space-between !important; - } - .justify-content-sm-around { - justify-content: space-around !important; - } - .align-items-sm-start { - align-items: flex-start !important; - } - .align-items-sm-end { - align-items: flex-end !important; - } - .align-items-sm-center { - align-items: center !important; - } - .align-items-sm-baseline { - align-items: baseline !important; - } - .align-items-sm-stretch { - align-items: stretch !important; - } - .align-content-sm-start { - align-content: flex-start !important; - } - .align-content-sm-end { - align-content: flex-end !important; - } - .align-content-sm-center { - align-content: center !important; - } - .align-content-sm-between { - align-content: space-between !important; - } - .align-content-sm-around { - align-content: space-around !important; - } - .align-content-sm-stretch { - align-content: stretch !important; - } - .align-self-sm-auto { - align-self: auto !important; - } - .align-self-sm-start { - align-self: flex-start !important; - } - .align-self-sm-end { - align-self: flex-end !important; - } - .align-self-sm-center { - align-self: center !important; - } - .align-self-sm-baseline { - align-self: baseline !important; - } - .align-self-sm-stretch { - align-self: stretch !important; - } -} -@media (min-width: 768px) { - .flex-md-row { - flex-direction: row !important; - } - .flex-md-column { - flex-direction: column !important; - } - .flex-md-row-reverse { - flex-direction: row-reverse !important; - } - .flex-md-column-reverse { - flex-direction: column-reverse !important; - } - .flex-md-wrap { - flex-wrap: wrap !important; - } - .flex-md-nowrap { - flex-wrap: nowrap !important; - } - .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-md-fill { - flex: 1 1 auto !important; - } - .flex-md-grow-0 { - flex-grow: 0 !important; - } - .flex-md-grow-1 { - flex-grow: 1 !important; - } - .flex-md-shrink-0 { - flex-shrink: 0 !important; - } - .flex-md-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-md-start { - justify-content: flex-start !important; - } - .justify-content-md-end { - justify-content: flex-end !important; - } - .justify-content-md-center { - justify-content: center !important; - } - .justify-content-md-between { - justify-content: space-between !important; - } - .justify-content-md-around { - justify-content: space-around !important; - } - .align-items-md-start { - align-items: flex-start !important; - } - .align-items-md-end { - align-items: flex-end !important; - } - .align-items-md-center { - align-items: center !important; - } - .align-items-md-baseline { - align-items: baseline !important; - } - .align-items-md-stretch { - align-items: stretch !important; - } - .align-content-md-start { - align-content: flex-start !important; - } - .align-content-md-end { - align-content: flex-end !important; - } - .align-content-md-center { - align-content: center !important; - } - .align-content-md-between { - align-content: space-between !important; - } - .align-content-md-around { - align-content: space-around !important; - } - .align-content-md-stretch { - align-content: stretch !important; - } - .align-self-md-auto { - align-self: auto !important; - } - .align-self-md-start { - align-self: flex-start !important; - } - .align-self-md-end { - align-self: flex-end !important; - } - .align-self-md-center { - align-self: center !important; - } - .align-self-md-baseline { - align-self: baseline !important; - } - .align-self-md-stretch { - align-self: stretch !important; - } +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; } -@media (min-width: 992px) { - .flex-lg-row { - flex-direction: row !important; - } - .flex-lg-column { - flex-direction: column !important; - } - .flex-lg-row-reverse { - flex-direction: row-reverse !important; - } - .flex-lg-column-reverse { - flex-direction: column-reverse !important; - } - .flex-lg-wrap { - flex-wrap: wrap !important; - } - .flex-lg-nowrap { - flex-wrap: nowrap !important; - } - .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-lg-fill { - flex: 1 1 auto !important; - } - .flex-lg-grow-0 { - flex-grow: 0 !important; - } - .flex-lg-grow-1 { - flex-grow: 1 !important; - } - .flex-lg-shrink-0 { - flex-shrink: 0 !important; - } - .flex-lg-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-lg-start { - justify-content: flex-start !important; - } - .justify-content-lg-end { - justify-content: flex-end !important; - } - .justify-content-lg-center { - justify-content: center !important; - } - .justify-content-lg-between { - justify-content: space-between !important; - } - .justify-content-lg-around { - justify-content: space-around !important; - } - .align-items-lg-start { - align-items: flex-start !important; - } - .align-items-lg-end { - align-items: flex-end !important; - } - .align-items-lg-center { - align-items: center !important; - } - .align-items-lg-baseline { - align-items: baseline !important; - } - .align-items-lg-stretch { - align-items: stretch !important; - } - .align-content-lg-start { - align-content: flex-start !important; - } - .align-content-lg-end { - align-content: flex-end !important; - } - .align-content-lg-center { - align-content: center !important; - } - .align-content-lg-between { - align-content: space-between !important; - } - .align-content-lg-around { - align-content: space-around !important; - } - .align-content-lg-stretch { - align-content: stretch !important; - } - .align-self-lg-auto { - align-self: auto !important; - } - .align-self-lg-start { - align-self: flex-start !important; - } - .align-self-lg-end { - align-self: flex-end !important; - } - .align-self-lg-center { - align-self: center !important; - } - .align-self-lg-baseline { - align-self: baseline !important; - } - .align-self-lg-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; } -@media (min-width: 1200px) { - .flex-xl-row { - flex-direction: row !important; - } - .flex-xl-column { - flex-direction: column !important; - } - .flex-xl-row-reverse { - flex-direction: row-reverse !important; - } - .flex-xl-column-reverse { - flex-direction: column-reverse !important; - } - .flex-xl-wrap { - flex-wrap: wrap !important; - } - .flex-xl-nowrap { - flex-wrap: nowrap !important; - } - .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-xl-fill { - flex: 1 1 auto !important; - } - .flex-xl-grow-0 { - flex-grow: 0 !important; - } - .flex-xl-grow-1 { - flex-grow: 1 !important; - } - .flex-xl-shrink-0 { - flex-shrink: 0 !important; - } - .flex-xl-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-xl-start { - justify-content: flex-start !important; - } - .justify-content-xl-end { - justify-content: flex-end !important; - } - .justify-content-xl-center { - justify-content: center !important; - } - .justify-content-xl-between { - justify-content: space-between !important; - } - .justify-content-xl-around { - justify-content: space-around !important; - } - .align-items-xl-start { - align-items: flex-start !important; - } - .align-items-xl-end { - align-items: flex-end !important; - } - .align-items-xl-center { - align-items: center !important; - } - .align-items-xl-baseline { - align-items: baseline !important; - } - .align-items-xl-stretch { - align-items: stretch !important; - } - .align-content-xl-start { - align-content: flex-start !important; - } - .align-content-xl-end { - align-content: flex-end !important; - } - .align-content-xl-center { - align-content: center !important; - } - .align-content-xl-between { - align-content: space-between !important; - } - .align-content-xl-around { - align-content: space-around !important; - } - .align-content-xl-stretch { - align-content: stretch !important; - } - .align-self-xl-auto { - align-self: auto !important; - } - .align-self-xl-start { - align-self: flex-start !important; - } - .align-self-xl-end { - align-self: flex-end !important; - } - .align-self-xl-center { - align-self: center !important; - } - .align-self-xl-baseline { - align-self: baseline !important; - } - .align-self-xl-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; } -.float-left { - float: left !important; + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; } -.float-right { - float: right !important; +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; } -.float-none { - float: none !important; +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; } -@media (min-width: 576px) { - .float-sm-left { - float: left !important; - } - .float-sm-right { - float: right !important; - } - .float-sm-none { - float: none !important; - } +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; } -@media (min-width: 768px) { - .float-md-left { - float: left !important; - } - .float-md-right { - float: right !important; - } - .float-md-none { - float: none !important; - } + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; } -@media (min-width: 992px) { - .float-lg-left { - float: left !important; - } - .float-lg-right { - float: right !important; - } - .float-lg-none { - float: none !important; - } + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; } -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; - } - .float-xl-right { - float: right !important; - } - .float-xl-none { - float: none !important; - } + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; } -.overflow-auto { - overflow: auto !important; + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; } -.overflow-hidden { - overflow: hidden !important; +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; } -.position-static { - position: static !important; +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; } -.position-relative { - position: relative !important; +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; } -.position-absolute { - position: absolute !important; +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; } -.position-fixed { - position: fixed !important; +.rz-border-color-white { + border-color: var(--rz-white) !important; } -.position-sticky { - position: sticky !important; +.rz-border-color-black { + border-color: var(--rz-black) !important; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.rz-border-color-base { + border-color: var(--rz-base) !important; } -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; } -@supports (position: sticky) { - .sticky-top { - position: sticky; - top: 0; - z-index: 1020; - } +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; } -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; } -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; } -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; } -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; } -.shadow-none { - box-shadow: none !important; +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; } -.w-25 { - width: 25% !important; +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; } -.w-50 { - width: 50% !important; +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; } -.w-75 { - width: 75% !important; +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; } -.w-100 { - width: 100% !important; +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; } -.w-auto { - width: auto !important; +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; } -.h-25 { - height: 25% !important; +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; } -.h-50 { - height: 50% !important; +.rz-border-color-primary { + border-color: var(--rz-primary) !important; } -.h-75 { - height: 75% !important; +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; } -.h-100 { - height: 100% !important; +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; } -.h-auto { - height: auto !important; +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; } -.mw-100 { - max-width: 100% !important; +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; } -.mh-100 { - max-height: 100% !important; +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; } -.min-vw-100 { - min-width: 100vw !important; +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; } -.min-vh-100 { - min-height: 100vh !important; +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; } -.vw-100 { - width: 100vw !important; +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; } -.vh-100 { - height: 100vh !important; +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); +.rz-border-color-info { + border-color: var(--rz-info) !important; } -.m-0 { - margin: 0 !important; +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; } -.mt-0, -.my-0 { - margin-top: 0 !important; +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; } -.mr-0, -.mx-0 { - margin-right: 0 !important; +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; } -.mb-0, -.my-0 { - margin-bottom: 0 !important; +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; } -.ml-0, -.mx-0 { - margin-left: 0 !important; +.rz-border-color-success { + border-color: var(--rz-success) !important; } -.m-1 { - margin: 0.25rem !important; +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; } -.mt-1, -.my-1 { - margin-top: 0.25rem !important; +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; } -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; } -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; } -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; +.rz-border-color-warning { + border-color: var(--rz-warning) !important; } -.m-2 { - margin: 0.5rem !important; +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; } -.mt-2, -.my-2 { - margin-top: 0.5rem !important; +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; } -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; } -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; } -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; +.rz-border-color-danger { + border-color: var(--rz-danger) !important; } -.m-3 { - margin: 1rem !important; +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; } -.mt-3, -.my-3 { - margin-top: 1rem !important; +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; } -.mr-3, -.mx-3 { - margin-right: 1rem !important; +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; } -.mb-3, -.my-3 { - margin-bottom: 1rem !important; +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; } -.ml-3, -.mx-3 { - margin-left: 1rem !important; +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; } -.m-4 { - margin: 1.5rem !important; +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; } -.mt-4, -.my-4 { - margin-top: 1.5rem !important; +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; } -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; } -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; } -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; } -.m-5 { - margin: 3rem !important; +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; } -.mt-5, -.my-5 { - margin-top: 3rem !important; +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; } -.mr-5, -.mx-5 { - margin-right: 3rem !important; +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; } -.mb-5, -.my-5 { - margin-bottom: 3rem !important; +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; } -.ml-5, -.mx-5 { - margin-left: 3rem !important; +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; } -.p-0 { - padding: 0 !important; +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; } -.pt-0, -.py-0 { - padding-top: 0 !important; +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; } -.pr-0, -.px-0 { - padding-right: 0 !important; +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; } -.pb-0, -.py-0 { - padding-bottom: 0 !important; +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; } -.pl-0, -.px-0 { - padding-left: 0 !important; +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; } -.p-1 { - padding: 0.25rem !important; +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; } -.pt-1, -.py-1 { - padding-top: 0.25rem !important; +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; } -.pr-1, -.px-1 { - padding-right: 0.25rem !important; +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; } -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; } -.pl-1, -.px-1 { - padding-left: 0.25rem !important; +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; } -.p-2 { - padding: 0.5rem !important; +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; } -.pt-2, -.py-2 { - padding-top: 0.5rem !important; +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; } -.pr-2, -.px-2 { - padding-right: 0.5rem !important; +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; } -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; } -.pl-2, -.px-2 { - padding-left: 0.5rem !important; +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; } -.p-3 { - padding: 1rem !important; +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; } -.pt-3, -.py-3 { - padding-top: 1rem !important; +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; } -.pr-3, -.px-3 { - padding-right: 1rem !important; +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; } -.pb-3, -.py-3 { - padding-bottom: 1rem !important; +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; } -.pl-3, -.px-3 { - padding-left: 1rem !important; +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; } -.p-4 { - padding: 1.5rem !important; +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; } -.pr-4, -.px-4 { - padding-right: 1.5rem !important; +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; } -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; } -.pl-4, -.px-4 { - padding-left: 1.5rem !important; +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; } -.p-5 { - padding: 3rem !important; +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; } -.pt-5, -.py-5 { - padding-top: 3rem !important; +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; } -.pr-5, -.px-5 { - padding-right: 3rem !important; +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; } -.pb-5, -.py-5 { - padding-bottom: 3rem !important; +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; } -.pl-5, -.px-5 { - padding-left: 3rem !important; +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; } -.m-n1 { - margin: -0.25rem !important; +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; } -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; } -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; } -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; } -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; } -.m-n2 { - margin: -0.5rem !important; +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; } -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; } -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; } -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; } -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; } -.m-n3 { - margin: -1rem !important; +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; } -.mt-n3, -.my-n3 { - margin-top: -1rem !important; +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; } -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; } -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; } -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; } -.m-n4 { - margin: -1.5rem !important; +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; } -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; } -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; } -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; } -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; } -.m-n5 { - margin: -3rem !important; +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; } -.mt-n5, -.my-n5 { - margin-top: -3rem !important; +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; } -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; } -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; } -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; } -.m-auto { - margin: auto !important; +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; } -.mt-auto, -.my-auto { - margin-top: auto !important; +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; } -.mr-auto, -.mx-auto { - margin-right: auto !important; +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; } -.mb-auto, -.my-auto { - margin-bottom: auto !important; +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; } -.ml-auto, -.mx-auto { - margin-left: auto !important; +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; } -@media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; - } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; - } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; - } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; - } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; - } - .m-sm-1 { - margin: 0.25rem !important; - } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; - } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; - } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; - } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; - } - .m-sm-2 { - margin: 0.5rem !important; - } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; - } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; - } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; - } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; - } - .m-sm-3 { - margin: 1rem !important; - } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; - } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; - } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; - } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; - } - .m-sm-4 { - margin: 1.5rem !important; - } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; - } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; - } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; - } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; - } - .m-sm-5 { - margin: 3rem !important; - } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; - } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; - } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; - } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; - } - .p-sm-0 { - padding: 0 !important; - } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; - } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; - } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; - } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; - } - .p-sm-1 { - padding: 0.25rem !important; - } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; - } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; - } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; - } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; - } - .p-sm-2 { - padding: 0.5rem !important; - } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; - } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; - } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; - } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; - } - .p-sm-3 { - padding: 1rem !important; - } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; - } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; - } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; - } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; - } - .p-sm-4 { - padding: 1.5rem !important; - } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; - } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; - } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; - } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; - } - .p-sm-5 { - padding: 3rem !important; - } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; - } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; - } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; - } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; - } - .m-sm-n1 { - margin: -0.25rem !important; - } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; - } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; - } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; - } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; - } - .m-sm-n2 { - margin: -0.5rem !important; - } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; - } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; - } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; - } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; - } - .m-sm-n3 { - margin: -1rem !important; - } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; - } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; - } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; - } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; - } - .m-sm-n4 { - margin: -1.5rem !important; - } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; - } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; - } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; - } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; - } - .m-sm-n5 { - margin: -3rem !important; - } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; - } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; - } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; - } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; - } - .m-sm-auto { - margin: auto !important; - } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; - } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; - } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; - } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; - } +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; } -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; - } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; - } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; - } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; - } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; - } - .m-md-1 { - margin: 0.25rem !important; - } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; - } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; - } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; - } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; - } - .m-md-2 { - margin: 0.5rem !important; - } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; - } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; - } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; - } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; - } - .m-md-3 { - margin: 1rem !important; - } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; - } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; - } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; - } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; - } - .m-md-4 { - margin: 1.5rem !important; - } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; - } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; - } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; - } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; - } - .m-md-5 { - margin: 3rem !important; - } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; - } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; - } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; - } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; - } - .p-md-0 { - padding: 0 !important; - } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; - } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; - } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; - } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; - } - .p-md-1 { - padding: 0.25rem !important; - } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; - } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; - } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; - } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; - } - .p-md-2 { - padding: 0.5rem !important; - } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; - } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; - } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; - } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; - } - .p-md-3 { - padding: 1rem !important; - } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; - } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; - } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; - } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; - } - .p-md-4 { - padding: 1.5rem !important; - } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; - } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; - } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; - } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; - } - .p-md-5 { - padding: 3rem !important; - } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; - } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; - } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; - } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; - } - .m-md-n1 { - margin: -0.25rem !important; - } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; - } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; - } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; - } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; - } - .m-md-n2 { - margin: -0.5rem !important; - } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; - } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; - } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; - } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; - } - .m-md-n3 { - margin: -1rem !important; - } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; - } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; - } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; - } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; - } - .m-md-n4 { - margin: -1.5rem !important; - } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; - } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; - } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; - } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; - } - .m-md-n5 { - margin: -3rem !important; - } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; - } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; - } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; - } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; - } - .m-md-auto { - margin: auto !important; - } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; - } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; - } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; - } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; - } + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; } -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; - } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; - } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; - } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; - } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; - } - .m-lg-1 { - margin: 0.25rem !important; - } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; - } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; - } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; - } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; - } - .m-lg-2 { - margin: 0.5rem !important; - } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; - } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; - } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; - } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; - } - .m-lg-3 { - margin: 1rem !important; - } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; - } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; - } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; - } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; - } - .m-lg-4 { - margin: 1.5rem !important; - } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; - } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; - } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; - } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; - } - .m-lg-5 { - margin: 3rem !important; - } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; - } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; - } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; - } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; - } - .p-lg-0 { - padding: 0 !important; - } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; - } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; - } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; - } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; - } - .p-lg-1 { - padding: 0.25rem !important; - } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; - } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; - } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; - } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; - } - .p-lg-2 { - padding: 0.5rem !important; - } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; - } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; - } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; - } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; - } - .p-lg-3 { - padding: 1rem !important; - } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; - } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; - } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; - } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; - } - .p-lg-4 { - padding: 1.5rem !important; - } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; - } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; - } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; - } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; - } - .p-lg-5 { - padding: 3rem !important; - } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; - } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; - } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; - } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; - } - .m-lg-n1 { - margin: -0.25rem !important; - } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; - } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; - } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; - } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; - } - .m-lg-n2 { - margin: -0.5rem !important; - } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; - } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; - } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; - } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; - } - .m-lg-n3 { - margin: -1rem !important; - } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; - } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; - } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; - } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; - } - .m-lg-n4 { - margin: -1.5rem !important; - } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; - } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; - } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; - } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; - } - .m-lg-n5 { - margin: -3rem !important; - } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; - } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; - } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; - } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; - } - .m-lg-auto { - margin: auto !important; - } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; - } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; - } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; - } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; - } -} -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; - } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; - } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; - } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; - } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; - } - .m-xl-1 { - margin: 0.25rem !important; - } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; - } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; - } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; - } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; - } - .m-xl-2 { - margin: 0.5rem !important; - } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; - } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; - } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; - } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; - } - .m-xl-3 { - margin: 1rem !important; - } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; - } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; - } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; - } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; - } - .m-xl-4 { - margin: 1.5rem !important; - } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; - } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; - } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; - } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; - } - .m-xl-5 { - margin: 3rem !important; - } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; - } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; - } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; - } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; - } - .p-xl-0 { - padding: 0 !important; - } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; - } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; - } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; - } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; - } - .p-xl-1 { - padding: 0.25rem !important; - } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; - } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; - } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; - } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; - } - .p-xl-2 { - padding: 0.5rem !important; - } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; - } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; - } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; - } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; - } - .p-xl-3 { - padding: 1rem !important; - } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; - } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; - } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; - } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; - } - .p-xl-4 { - padding: 1.5rem !important; - } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; - } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; - } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; - } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; - } - .p-xl-5 { - padding: 3rem !important; - } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; - } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; - } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; - } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; - } - .m-xl-n1 { - margin: -0.25rem !important; - } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; - } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; - } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; - } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; - } - .m-xl-n2 { - margin: -0.5rem !important; - } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; - } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; - } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; - } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; - } - .m-xl-n3 { - margin: -1rem !important; - } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; - } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; - } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; - } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; - } - .m-xl-n4 { - margin: -1.5rem !important; - } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; - } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; - } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; - } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; - } - .m-xl-n5 { - margin: -3rem !important; - } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; - } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; - } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; - } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; - } - .m-xl-auto { - margin: auto !important; - } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; - } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; - } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; - } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; - } -} -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; } -.text-justify { - text-align: justify !important; +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; } -.text-wrap { - white-space: normal !important; +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; } -.text-nowrap { - white-space: nowrap !important; +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; } -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; } -.text-left { - text-align: left !important; +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; } -.text-right { - text-align: right !important; +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; } -.text-center { - text-align: center !important; +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; } -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; - } - .text-sm-right { - text-align: right !important; - } - .text-sm-center { - text-align: center !important; - } -} -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; - } - .text-md-right { - text-align: right !important; - } - .text-md-center { - text-align: center !important; - } -} -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; - } - .text-lg-right { - text-align: right !important; - } - .text-lg-center { - text-align: center !important; - } -} -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; - } - .text-xl-right { - text-align: right !important; - } - .text-xl-center { - text-align: center !important; - } -} -.text-lowercase { - text-transform: lowercase !important; +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; } -.text-uppercase { - text-transform: uppercase !important; +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; } -.text-capitalize { - text-transform: capitalize !important; +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; } -.font-weight-light { - font-weight: 300 !important; +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; } -.font-weight-lighter { - font-weight: lighter !important; +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; } -.font-weight-normal { - font-weight: 400 !important; +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; } -.font-weight-bold { - font-weight: 700 !important; +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; } -.font-weight-bolder { - font-weight: bolder !important; +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; } -.font-italic { - font-style: italic !important; +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; } -.text-white { - color: #fff !important; +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; } -.text-primary { - color: #d64d42 !important; +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; } -a.text-primary:hover, a.text-primary:focus { - color: #a72e24 !important; +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; } -.text-secondary { - color: #3ba5fc !important; +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; } -a.text-secondary:hover, a.text-secondary:focus { - color: #0480e7 !important; +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; } -.text-success { - color: #5dbf74 !important; +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; } -a.text-success:hover, a.text-success:focus { - color: #3b9550 !important; +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; } -.text-info { - color: #2cc8c8 !important; -} +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} -a.text-info:hover, a.text-info:focus { - color: #1e8989 !important; +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; } -.text-warning { - color: #fac152 !important; +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; } -a.text-warning:hover, a.text-warning:focus { - color: #f8a608 !important; +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; } -.text-danger { - color: #f9777f !important; +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; } -a.text-danger:hover, a.text-danger:focus { - color: #f62e3a !important; +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; } -.text-light { - color: #ebeef2 !important; +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; } -a.text-light:hover, a.text-light:focus { - color: #bdc7d4 !important; +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; } -.text-dark { - color: #343a40 !important; +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; } -a.text-dark:hover, a.text-dark:focus { - color: #121416 !important; +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; } -.text-body { - color: #30445f !important; +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; } -.text-muted { - color: #6c757d !important; +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; } -.text-black-50 { - color: rgba(0, 0, 0, 0.5) !important; +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; } -.text-white-50 { - color: rgba(255, 255, 255, 0.5) !important; +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; } -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; } -.text-decoration-none { - text-decoration: none !important; +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; } -.text-break { - word-break: break-word !important; - overflow-wrap: break-word !important; +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; } -.text-reset { - color: inherit !important; +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; } -.visible { - visibility: visible !important; +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; } -.invisible { - visibility: hidden !important; +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; } -@font-face { - font-family: "Material Icons"; - font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f3f5f7; - --rz-base-200: #ebeef2; - --rz-base-300: #d9e1ea; - --rz-base-400: #87a4c4; - --rz-base-500: #7293b6; - --rz-base-600: #466791; - --rz-base-700: #395374; - --rz-base-800: #30445f; - --rz-base-900: #2b3a50; - --rz-primary: #d64d42; - --rz-primary-light: #db6259; - --rz-primary-lighter: rgba(214, 77, 66, 0.16); - --rz-primary-dark: #c5473d; - --rz-primary-darker: #a13a32; - --rz-secondary: #3ba5fc; - --rz-secondary-light: #53b0fc; - --rz-secondary-lighter: rgba(59, 165, 252, 0.2); - --rz-secondary-dark: #3698e8; - --rz-secondary-darker: #2c7cbd; - --rz-info: #2cc8c8; - --rz-info-light: #4ed1d1; - --rz-info-lighter: rgba(44, 200, 200, 0.2); - --rz-info-dark: #25a8a8; - --rz-info-darker: #219696; - --rz-success: #5dbf74; - --rz-success-light: #77c98a; - --rz-success-lighter: rgba(93, 191, 116, 0.16); - --rz-success-dark: #4ea061; - --rz-success-darker: #468f57; - --rz-warning: #fac152; - --rz-warning-light: #fbcb6e; - --rz-warning-lighter: rgba(250, 193, 82, 0.2); - --rz-warning-dark: #d2a245; - --rz-warning-darker: #bc913e; - --rz-danger: #f9777f; - --rz-danger-light: #fa8d93; - --rz-danger-lighter: rgba(249, 119, 127, 0.2); - --rz-danger-dark: #d1646b; - --rz-danger-darker: #bb595f; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #d64d42; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #3ba5fc; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2cc8c8; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #5dbf74; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #fac152; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f9777f; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #376df5; - --rz-series-2: #64dfdf; - --rz-series-3: #f68769; - --rz-series-4: #c161e2; - --rz-series-5: #fdd07a; - --rz-series-6: #f8629b; - --rz-series-7: #74d062; - --rz-series-8: #84a7ff; - --rz-series-9: #4d99f9; - --rz-series-10: #8cecec; - --rz-series-11: #fab793; - --rz-series-12: #da88ee; - --rz-series-13: #fee3ab; - --rz-series-14: #fb89c3; - --rz-series-15: #a2e389; - --rz-series-16: #b5caff; - --rz-series-17: #1750f3; - --rz-series-18: #46d7d7; - --rz-series-19: #f46e4c; - --rz-series-20: #b343db; - --rz-series-21: #fdc55f; - --rz-series-22: #f64485; - --rz-series-23: #58c544; - --rz-series-24: #6a93ff; + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-secondary); +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; } -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; } -:root { - --rz-border-radius: 0; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; } -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; } -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; } -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; } -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; } -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; } -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; } -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; +.rz-ripple { + position: relative; + overflow: hidden; } - -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; } - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; } -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; +body { + margin: 0; } -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; +.rz-m-0 { + margin: 0 !important; } -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; } -.rz-display-none { - display: none !important; +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; } -.rz-display-block { - display: block !important; +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; } -.rz-display-inline { - display: inline !important; +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; } -.rz-display-inline-block { - display: inline-block !important; +.rz-ms-0 { + margin-inline-start: 0 !important; } -.rz-display-flex { - display: flex !important; +.rz-me-0 { + margin-inline-end: 0 !important; } -.rz-display-inline-flex { - display: inline-flex !important; +.rz-m-05 { + margin: 0.125rem !important; } -.rz-display-grid { - display: grid !important; +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; } -.rz-display-inline-grid { - display: inline-grid !important; +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; } -@media (min-width: 576px) { - .rz-display-xs-none { - display: none !important; - } - .rz-display-xs-block { - display: block !important; - } - .rz-display-xs-inline { - display: inline !important; - } - .rz-display-xs-inline-block { - display: inline-block !important; - } - .rz-display-xs-flex { - display: flex !important; - } - .rz-display-xs-inline-flex { - display: inline-flex !important; - } - .rz-display-xs-grid { - display: grid !important; - } - .rz-display-xs-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 768px) { - .rz-display-sm-none { - display: none !important; - } - .rz-display-sm-block { - display: block !important; - } - .rz-display-sm-inline { - display: inline !important; - } - .rz-display-sm-inline-block { - display: inline-block !important; - } - .rz-display-sm-flex { - display: flex !important; - } - .rz-display-sm-inline-flex { - display: inline-flex !important; - } - .rz-display-sm-grid { - display: grid !important; - } - .rz-display-sm-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1024px) { - .rz-display-md-none { - display: none !important; - } - .rz-display-md-block { - display: block !important; - } - .rz-display-md-inline { - display: inline !important; - } - .rz-display-md-inline-block { - display: inline-block !important; - } - .rz-display-md-flex { - display: flex !important; - } - .rz-display-md-inline-flex { - display: inline-flex !important; - } - .rz-display-md-grid { - display: grid !important; - } - .rz-display-md-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1280px) { - .rz-display-lg-none { - display: none !important; - } - .rz-display-lg-block { - display: block !important; - } - .rz-display-lg-inline { - display: inline !important; - } - .rz-display-lg-inline-block { - display: inline-block !important; - } - .rz-display-lg-flex { - display: flex !important; - } - .rz-display-lg-inline-flex { - display: inline-flex !important; - } - .rz-display-lg-grid { - display: grid !important; - } - .rz-display-lg-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1920px) { - .rz-display-xl-none { - display: none !important; - } - .rz-display-xl-block { - display: block !important; - } - .rz-display-xl-inline { - display: inline !important; - } - .rz-display-xl-inline-block { - display: inline-block !important; - } - .rz-display-xl-flex { - display: flex !important; - } - .rz-display-xl-inline-flex { - display: inline-flex !important; - } - .rz-display-xl-grid { - display: grid !important; - } - .rz-display-xl-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 2560px) { - .rz-display-xx-none { - display: none !important; - } - .rz-display-xx-block { - display: block !important; - } - .rz-display-xx-inline { - display: inline !important; - } - .rz-display-xx-inline-block { - display: inline-block !important; - } - .rz-display-xx-flex { - display: flex !important; - } - .rz-display-xx-inline-flex { - display: inline-flex !important; - } - .rz-display-xx-grid { - display: grid !important; - } - .rz-display-xx-inline-grid { - display: inline-grid !important; - } -} -.rz-justify-content-normal { - justify-content: normal !important; +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; } -.rz-justify-content-stretch { - justify-content: stretch !important; +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; } -.rz-justify-content-center { - justify-content: center !important; +.rz-ms-05 { + margin-inline-start: 0.125rem !important; } -.rz-justify-content-start { - justify-content: start !important; +.rz-me-05 { + margin-inline-end: 0.125rem !important; } -.rz-justify-content-end { - justify-content: end !important; +.rz-m-1 { + margin: 0.25rem !important; } -.rz-justify-content-flex-start { - justify-content: flex-start !important; +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; } -.rz-justify-content-flex-end { - justify-content: flex-end !important; +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; } -.rz-justify-content-left { - justify-content: left !important; +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; } -.rz-justify-content-right { - justify-content: right !important; +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; } -.rz-justify-content-space-between { - justify-content: space-between !important; +.rz-ms-1 { + margin-inline-start: 0.25rem !important; } -.rz-justify-content-space-around { - justify-content: space-around !important; +.rz-me-1 { + margin-inline-end: 0.25rem !important; } -.rz-justify-content-space-evenly { - justify-content: space-evenly !important; +.rz-m-2 { + margin: 0.5rem !important; } -.rz-align-items-normal { - align-items: normal !important; +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; } -.rz-align-items-stretch { - align-items: stretch !important; +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; } -.rz-align-items-center { - align-items: center !important; +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; } -.rz-align-items-start { - align-items: start !important; +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; } -.rz-align-items-end { - align-items: end !important; +.rz-ms-2 { + margin-inline-start: 0.5rem !important; } -.rz-align-items-flex-start { - align-items: flex-start !important; +.rz-me-2 { + margin-inline-end: 0.5rem !important; } -.rz-align-items-flex-end { - align-items: flex-end !important; +.rz-m-3 { + margin: 0.75rem !important; } -.rz-color-white { - color: var(--rz-white) !important; +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; } -.rz-color-black { - color: var(--rz-black) !important; +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; } -.rz-color-base-50 { - color: var(--rz-base-50) !important; +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; } -.rz-color-base-100 { - color: var(--rz-base-100) !important; +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; } -.rz-color-base-200 { - color: var(--rz-base-200) !important; +.rz-ms-3 { + margin-inline-start: 0.75rem !important; } -.rz-color-base-300 { - color: var(--rz-base-300) !important; +.rz-me-3 { + margin-inline-end: 0.75rem !important; } -.rz-color-base-400 { - color: var(--rz-base-400) !important; +.rz-m-4 { + margin: 1rem !important; } -.rz-color-base-500 { - color: var(--rz-base-500) !important; +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; } -.rz-color-base-600 { - color: var(--rz-base-600) !important; +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; } -.rz-color-base-700 { - color: var(--rz-base-700) !important; +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; } -.rz-color-base-800 { - color: var(--rz-base-800) !important; +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; } -.rz-color-base-900 { - color: var(--rz-base-900) !important; +.rz-ms-4 { + margin-inline-start: 1rem !important; } -.rz-color-primary { - color: var(--rz-primary) !important; +.rz-me-4 { + margin-inline-end: 1rem !important; } -.rz-color-primary-light { - color: var(--rz-primary-light) !important; +.rz-m-5 { + margin: 1.25rem !important; } -.rz-color-primary-lighter { - color: var(--rz-primary-lighter) !important; +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; } -.rz-color-primary-dark { - color: var(--rz-primary-dark) !important; +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; } -.rz-color-primary-darker { - color: var(--rz-primary-darker) !important; +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; } -.rz-color-secondary { - color: var(--rz-secondary) !important; +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; } -.rz-color-secondary-light { - color: var(--rz-secondary-light) !important; +.rz-ms-5 { + margin-inline-start: 1.25rem !important; } -.rz-color-secondary-lighter { - color: var(--rz-secondary-lighter) !important; +.rz-me-5 { + margin-inline-end: 1.25rem !important; } -.rz-color-secondary-dark { - color: var(--rz-secondary-dark) !important; +.rz-m-6 { + margin: 1.5rem !important; } -.rz-color-secondary-darker { - color: var(--rz-secondary-darker) !important; +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; } -.rz-color-info { - color: var(--rz-info) !important; +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; } -.rz-color-info-light { - color: var(--rz-info-light) !important; +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; } -.rz-color-info-lighter { - color: var(--rz-info-lighter) !important; +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; } -.rz-color-info-dark { - color: var(--rz-info-dark) !important; +.rz-ms-6 { + margin-inline-start: 1.5rem !important; } -.rz-color-info-darker { - color: var(--rz-info-darker) !important; +.rz-me-6 { + margin-inline-end: 1.5rem !important; } -.rz-color-success { - color: var(--rz-success) !important; +.rz-m-7 { + margin: 1.75rem !important; } -.rz-color-success-light { - color: var(--rz-success-light) !important; +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; } -.rz-color-success-lighter { - color: var(--rz-success-lighter) !important; +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; } -.rz-color-success-dark { - color: var(--rz-success-dark) !important; +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; } -.rz-color-success-darker { - color: var(--rz-success-darker) !important; +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; } -.rz-color-warning { - color: var(--rz-warning) !important; +.rz-ms-7 { + margin-inline-start: 1.75rem !important; } -.rz-color-warning-light { - color: var(--rz-warning-light) !important; +.rz-me-7 { + margin-inline-end: 1.75rem !important; } -.rz-color-warning-lighter { - color: var(--rz-warning-lighter) !important; +.rz-m-8 { + margin: 2rem !important; } -.rz-color-warning-dark { - color: var(--rz-warning-dark) !important; +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; } -.rz-color-warning-darker { - color: var(--rz-warning-darker) !important; +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; } -.rz-color-danger { - color: var(--rz-danger) !important; +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; } -.rz-color-danger-light { - color: var(--rz-danger-light) !important; +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; } -.rz-color-danger-lighter { - color: var(--rz-danger-lighter) !important; +.rz-ms-8 { + margin-inline-start: 2rem !important; } -.rz-color-danger-dark { - color: var(--rz-danger-dark) !important; +.rz-me-8 { + margin-inline-end: 2rem !important; } -.rz-color-danger-darker { - color: var(--rz-danger-darker) !important; +.rz-m-9 { + margin: 2.25rem !important; } -.rz-color-on-primary { - color: var(--rz-on-primary) !important; +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; } -.rz-color-on-primary-light { - color: var(--rz-on-primary-light) !important; +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; } -.rz-color-on-primary-lighter { - color: var(--rz-on-primary-lighter) !important; +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; } -.rz-color-on-primary-dark { - color: var(--rz-on-primary-dark) !important; +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; } -.rz-color-on-primary-darker { - color: var(--rz-on-primary-darker) !important; +.rz-ms-9 { + margin-inline-start: 2.25rem !important; } -.rz-color-on-secondary { - color: var(--rz-on-secondary) !important; +.rz-me-9 { + margin-inline-end: 2.25rem !important; } -.rz-color-on-secondary-light { - color: var(--rz-on-secondary-light) !important; +.rz-m-10 { + margin: 2.5rem !important; } -.rz-color-on-secondary-lighter { - color: var(--rz-on-secondary-lighter) !important; +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; } -.rz-color-on-secondary-dark { - color: var(--rz-on-secondary-dark) !important; +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; } -.rz-color-on-secondary-darker { - color: var(--rz-on-secondary-darker) !important; +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; } -.rz-color-on-info { - color: var(--rz-on-info) !important; +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; } -.rz-color-on-info-light { - color: var(--rz-on-info-light) !important; +.rz-ms-10 { + margin-inline-start: 2.5rem !important; } -.rz-color-on-info-lighter { - color: var(--rz-on-info-lighter) !important; +.rz-me-10 { + margin-inline-end: 2.5rem !important; } -.rz-color-on-info-dark { - color: var(--rz-on-info-dark) !important; +.rz-m-11 { + margin: 2.75rem !important; } -.rz-color-on-info-darker { - color: var(--rz-on-info-darker) !important; +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; } -.rz-color-on-success { - color: var(--rz-on-success) !important; +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; } -.rz-color-on-success-light { - color: var(--rz-on-success-light) !important; +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; } -.rz-color-on-success-lighter { - color: var(--rz-on-success-lighter) !important; +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; } -.rz-color-on-success-dark { - color: var(--rz-on-success-dark) !important; +.rz-ms-11 { + margin-inline-start: 2.75rem !important; } -.rz-color-on-success-darker { - color: var(--rz-on-success-darker) !important; +.rz-me-11 { + margin-inline-end: 2.75rem !important; } -.rz-color-on-warning { - color: var(--rz-on-warning) !important; +.rz-m-12 { + margin: 3rem !important; } -.rz-color-on-warning-light { - color: var(--rz-on-warning-light) !important; +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; } -.rz-color-on-warning-lighter { - color: var(--rz-on-warning-lighter) !important; +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; } -.rz-color-on-warning-dark { - color: var(--rz-on-warning-dark) !important; +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; } -.rz-color-on-warning-darker { - color: var(--rz-on-warning-darker) !important; +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; } -.rz-color-on-danger { - color: var(--rz-on-danger) !important; +.rz-ms-12 { + margin-inline-start: 3rem !important; } -.rz-color-on-danger-light { - color: var(--rz-on-danger-light) !important; +.rz-me-12 { + margin-inline-end: 3rem !important; } -.rz-color-on-danger-lighter { - color: var(--rz-on-danger-lighter) !important; +.rz-p-0 { + padding: 0 !important; } -.rz-color-on-danger-dark { - color: var(--rz-on-danger-dark) !important; +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; } -.rz-color-on-danger-darker { - color: var(--rz-on-danger-darker) !important; +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; } -.rz-color-series-1 { - color: var(--rz-series-1) !important; +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; } -.rz-color-series-2 { - color: var(--rz-series-2) !important; +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; } -.rz-color-series-3 { - color: var(--rz-series-3) !important; +.rz-ps-0 { + padding-inline-start: 0 !important; } -.rz-color-series-4 { - color: var(--rz-series-4) !important; +.rz-pe-0 { + padding-inline-end: 0 !important; } -.rz-color-series-5 { - color: var(--rz-series-5) !important; +.rz-p-05 { + padding: 0.125rem !important; } -.rz-color-series-6 { - color: var(--rz-series-6) !important; +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; } -.rz-color-series-7 { - color: var(--rz-series-7) !important; +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; } -.rz-color-series-8 { - color: var(--rz-series-8) !important; +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; } -.rz-color-series-9 { - color: var(--rz-series-9) !important; +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; } -.rz-color-series-10 { - color: var(--rz-series-10) !important; +.rz-ps-05 { + padding-inline-start: 0.125rem !important; } -.rz-color-series-11 { - color: var(--rz-series-11) !important; +.rz-pe-05 { + padding-inline-end: 0.125rem !important; } -.rz-color-series-12 { - color: var(--rz-series-12) !important; +.rz-p-1 { + padding: 0.25rem !important; } -.rz-color-series-13 { - color: var(--rz-series-13) !important; +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; } -.rz-color-series-14 { - color: var(--rz-series-14) !important; +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; } -.rz-color-series-15 { - color: var(--rz-series-15) !important; +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; } -.rz-color-series-16 { - color: var(--rz-series-16) !important; +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; } -.rz-color-series-17 { - color: var(--rz-series-17) !important; +.rz-ps-1 { + padding-inline-start: 0.25rem !important; } -.rz-color-series-18 { - color: var(--rz-series-18) !important; +.rz-pe-1 { + padding-inline-end: 0.25rem !important; } -.rz-color-series-19 { - color: var(--rz-series-19) !important; +.rz-p-2 { + padding: 0.5rem !important; } -.rz-color-series-20 { - color: var(--rz-series-20) !important; +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; } -.rz-color-series-21 { - color: var(--rz-series-21) !important; +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; } -.rz-color-series-22 { - color: var(--rz-series-22) !important; +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; } -.rz-color-series-23 { - color: var(--rz-series-23) !important; +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; } -.rz-color-series-24 { - color: var(--rz-series-24) !important; +.rz-ps-2 { + padding-inline-start: 0.5rem !important; } -.rz-background-color-white { - background-color: var(--rz-white) !important; +.rz-pe-2 { + padding-inline-end: 0.5rem !important; } -.rz-background-color-black { - background-color: var(--rz-black) !important; +.rz-p-3 { + padding: 0.75rem !important; } -.rz-background-color-base-50 { - background-color: var(--rz-base-50) !important; +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; } -.rz-background-color-base-100 { - background-color: var(--rz-base-100) !important; +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; } -.rz-background-color-base-200 { - background-color: var(--rz-base-200) !important; +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; } -.rz-background-color-base-300 { - background-color: var(--rz-base-300) !important; +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; } -.rz-background-color-base-400 { - background-color: var(--rz-base-400) !important; +.rz-ps-3 { + padding-inline-start: 0.75rem !important; } -.rz-background-color-base-500 { - background-color: var(--rz-base-500) !important; +.rz-pe-3 { + padding-inline-end: 0.75rem !important; } -.rz-background-color-base-600 { - background-color: var(--rz-base-600) !important; +.rz-p-4 { + padding: 1rem !important; } -.rz-background-color-base-700 { - background-color: var(--rz-base-700) !important; +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; } -.rz-background-color-base-800 { - background-color: var(--rz-base-800) !important; +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; } -.rz-background-color-base-900 { - background-color: var(--rz-base-900) !important; +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; } -.rz-background-color-primary { - background-color: var(--rz-primary) !important; +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; } -.rz-background-color-primary-light { - background-color: var(--rz-primary-light) !important; +.rz-ps-4 { + padding-inline-start: 1rem !important; } -.rz-background-color-primary-lighter { - background-color: var(--rz-primary-lighter) !important; +.rz-pe-4 { + padding-inline-end: 1rem !important; } -.rz-background-color-primary-dark { - background-color: var(--rz-primary-dark) !important; +.rz-p-5 { + padding: 1.25rem !important; } -.rz-background-color-primary-darker { - background-color: var(--rz-primary-darker) !important; +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; } -.rz-background-color-secondary { - background-color: var(--rz-secondary) !important; +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; } -.rz-background-color-secondary-light { - background-color: var(--rz-secondary-light) !important; +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; } -.rz-background-color-secondary-lighter { - background-color: var(--rz-secondary-lighter) !important; +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; } -.rz-background-color-secondary-dark { - background-color: var(--rz-secondary-dark) !important; +.rz-ps-5 { + padding-inline-start: 1.25rem !important; } -.rz-background-color-secondary-darker { - background-color: var(--rz-secondary-darker) !important; +.rz-pe-5 { + padding-inline-end: 1.25rem !important; } -.rz-background-color-info { - background-color: var(--rz-info) !important; +.rz-p-6 { + padding: 1.5rem !important; } -.rz-background-color-info-light { - background-color: var(--rz-info-light) !important; +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; } -.rz-background-color-info-lighter { - background-color: var(--rz-info-lighter) !important; +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; } -.rz-background-color-info-dark { - background-color: var(--rz-info-dark) !important; +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; } -.rz-background-color-info-darker { - background-color: var(--rz-info-darker) !important; +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; } -.rz-background-color-success { - background-color: var(--rz-success) !important; +.rz-ps-6 { + padding-inline-start: 1.5rem !important; } -.rz-background-color-success-light { - background-color: var(--rz-success-light) !important; +.rz-pe-6 { + padding-inline-end: 1.5rem !important; } -.rz-background-color-success-lighter { - background-color: var(--rz-success-lighter) !important; +.rz-p-7 { + padding: 1.75rem !important; } -.rz-background-color-success-dark { - background-color: var(--rz-success-dark) !important; +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; } -.rz-background-color-success-darker { - background-color: var(--rz-success-darker) !important; +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; } -.rz-background-color-warning { - background-color: var(--rz-warning) !important; +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; } -.rz-background-color-warning-light { - background-color: var(--rz-warning-light) !important; +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; } -.rz-background-color-warning-lighter { - background-color: var(--rz-warning-lighter) !important; +.rz-ps-7 { + padding-inline-start: 1.75rem !important; } -.rz-background-color-warning-dark { - background-color: var(--rz-warning-dark) !important; +.rz-pe-7 { + padding-inline-end: 1.75rem !important; } -.rz-background-color-warning-darker { - background-color: var(--rz-warning-darker) !important; +.rz-p-8 { + padding: 2rem !important; } -.rz-background-color-danger { - background-color: var(--rz-danger) !important; +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; } -.rz-background-color-danger-light { - background-color: var(--rz-danger-light) !important; +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; } -.rz-background-color-danger-lighter { - background-color: var(--rz-danger-lighter) !important; +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; } -.rz-background-color-danger-dark { - background-color: var(--rz-danger-dark) !important; +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; } -.rz-background-color-danger-darker { - background-color: var(--rz-danger-darker) !important; +.rz-ps-8 { + padding-inline-start: 2rem !important; } -.rz-background-color-on-primary { - background-color: var(--rz-on-primary) !important; +.rz-pe-8 { + padding-inline-end: 2rem !important; } -.rz-background-color-on-primary-light { - background-color: var(--rz-on-primary-light) !important; +.rz-p-9 { + padding: 2.25rem !important; } -.rz-background-color-on-primary-lighter { - background-color: var(--rz-on-primary-lighter) !important; +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; } -.rz-background-color-on-primary-dark { - background-color: var(--rz-on-primary-dark) !important; +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; } -.rz-background-color-on-primary-darker { - background-color: var(--rz-on-primary-darker) !important; +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; } -.rz-background-color-on-secondary { - background-color: var(--rz-on-secondary) !important; +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; } -.rz-background-color-on-secondary-light { - background-color: var(--rz-on-secondary-light) !important; +.rz-ps-9 { + padding-inline-start: 2.25rem !important; } -.rz-background-color-on-secondary-lighter { - background-color: var(--rz-on-secondary-lighter) !important; +.rz-pe-9 { + padding-inline-end: 2.25rem !important; } -.rz-background-color-on-secondary-dark { - background-color: var(--rz-on-secondary-dark) !important; +.rz-p-10 { + padding: 2.5rem !important; } -.rz-background-color-on-secondary-darker { - background-color: var(--rz-on-secondary-darker) !important; +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; } -.rz-background-color-on-info { - background-color: var(--rz-on-info) !important; +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; } -.rz-background-color-on-info-light { - background-color: var(--rz-on-info-light) !important; +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; } -.rz-background-color-on-info-lighter { - background-color: var(--rz-on-info-lighter) !important; +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; } -.rz-background-color-on-info-dark { - background-color: var(--rz-on-info-dark) !important; +.rz-ps-10 { + padding-inline-start: 2.5rem !important; } -.rz-background-color-on-info-darker { - background-color: var(--rz-on-info-darker) !important; +.rz-pe-10 { + padding-inline-end: 2.5rem !important; } -.rz-background-color-on-success { - background-color: var(--rz-on-success) !important; +.rz-p-11 { + padding: 2.75rem !important; } -.rz-background-color-on-success-light { - background-color: var(--rz-on-success-light) !important; +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; } -.rz-background-color-on-success-lighter { - background-color: var(--rz-on-success-lighter) !important; +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; } -.rz-background-color-on-success-dark { - background-color: var(--rz-on-success-dark) !important; +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; } -.rz-background-color-on-success-darker { - background-color: var(--rz-on-success-darker) !important; +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; } -.rz-background-color-on-warning { - background-color: var(--rz-on-warning) !important; +.rz-ps-11 { + padding-inline-start: 2.75rem !important; } -.rz-background-color-on-warning-light { - background-color: var(--rz-on-warning-light) !important; +.rz-pe-11 { + padding-inline-end: 2.75rem !important; } -.rz-background-color-on-warning-lighter { - background-color: var(--rz-on-warning-lighter) !important; +.rz-p-12 { + padding: 3rem !important; } -.rz-background-color-on-warning-dark { - background-color: var(--rz-on-warning-dark) !important; +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; } -.rz-background-color-on-warning-darker { - background-color: var(--rz-on-warning-darker) !important; +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; } -.rz-background-color-on-danger { - background-color: var(--rz-on-danger) !important; +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; } -.rz-background-color-on-danger-light { - background-color: var(--rz-on-danger-light) !important; -} - -.rz-background-color-on-danger-lighter { - background-color: var(--rz-on-danger-lighter) !important; -} - -.rz-background-color-on-danger-dark { - background-color: var(--rz-on-danger-dark) !important; -} - -.rz-background-color-on-danger-darker { - background-color: var(--rz-on-danger-darker) !important; -} - -.rz-background-color-series-1 { - background-color: var(--rz-series-1) !important; -} - -.rz-background-color-series-2 { - background-color: var(--rz-series-2) !important; -} - -.rz-background-color-series-3 { - background-color: var(--rz-series-3) !important; -} - -.rz-background-color-series-4 { - background-color: var(--rz-series-4) !important; -} - -.rz-background-color-series-5 { - background-color: var(--rz-series-5) !important; -} - -.rz-background-color-series-6 { - background-color: var(--rz-series-6) !important; -} - -.rz-background-color-series-7 { - background-color: var(--rz-series-7) !important; -} - -.rz-background-color-series-8 { - background-color: var(--rz-series-8) !important; -} - -.rz-background-color-series-9 { - background-color: var(--rz-series-9) !important; -} - -.rz-background-color-series-10 { - background-color: var(--rz-series-10) !important; -} - -.rz-background-color-series-11 { - background-color: var(--rz-series-11) !important; -} - -.rz-background-color-series-12 { - background-color: var(--rz-series-12) !important; -} - -.rz-background-color-series-13 { - background-color: var(--rz-series-13) !important; -} - -.rz-background-color-series-14 { - background-color: var(--rz-series-14) !important; -} - -.rz-background-color-series-15 { - background-color: var(--rz-series-15) !important; -} - -.rz-background-color-series-16 { - background-color: var(--rz-series-16) !important; -} - -.rz-background-color-series-17 { - background-color: var(--rz-series-17) !important; -} - -.rz-background-color-series-18 { - background-color: var(--rz-series-18) !important; -} - -.rz-background-color-series-19 { - background-color: var(--rz-series-19) !important; -} - -.rz-background-color-series-20 { - background-color: var(--rz-series-20) !important; -} - -.rz-background-color-series-21 { - background-color: var(--rz-series-21) !important; -} - -.rz-background-color-series-22 { - background-color: var(--rz-series-22) !important; -} - -.rz-background-color-series-23 { - background-color: var(--rz-series-23) !important; -} - -.rz-background-color-series-24 { - background-color: var(--rz-series-24) !important; -} - -.rz-border-color-white { - border-color: var(--rz-white) !important; -} - -.rz-border-color-black { - border-color: var(--rz-black) !important; -} - -.rz-border-color-base-50 { - border-color: var(--rz-base-50) !important; -} - -.rz-border-color-base-100 { - border-color: var(--rz-base-100) !important; -} - -.rz-border-color-base-200 { - border-color: var(--rz-base-200) !important; -} - -.rz-border-color-base-300 { - border-color: var(--rz-base-300) !important; -} - -.rz-border-color-base-400 { - border-color: var(--rz-base-400) !important; -} - -.rz-border-color-base-500 { - border-color: var(--rz-base-500) !important; -} - -.rz-border-color-base-600 { - border-color: var(--rz-base-600) !important; -} - -.rz-border-color-base-700 { - border-color: var(--rz-base-700) !important; -} - -.rz-border-color-base-800 { - border-color: var(--rz-base-800) !important; -} - -.rz-border-color-base-900 { - border-color: var(--rz-base-900) !important; -} - -.rz-border-color-primary { - border-color: var(--rz-primary) !important; -} - -.rz-border-color-primary-light { - border-color: var(--rz-primary-light) !important; -} - -.rz-border-color-primary-lighter { - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-color-primary-dark { - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-color-primary-darker { - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-color-secondary { - border-color: var(--rz-secondary) !important; -} - -.rz-border-color-secondary-light { - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-color-secondary-lighter { - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-color-secondary-dark { - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-color-secondary-darker { - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-color-info { - border-color: var(--rz-info) !important; -} - -.rz-border-color-info-light { - border-color: var(--rz-info-light) !important; -} - -.rz-border-color-info-lighter { - border-color: var(--rz-info-lighter) !important; +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; } -.rz-border-color-info-dark { - border-color: var(--rz-info-dark) !important; +.rz-ps-12 { + padding-inline-start: 3rem !important; } -.rz-border-color-info-darker { - border-color: var(--rz-info-darker) !important; +.rz-pe-12 { + padding-inline-end: 3rem !important; } -.rz-border-color-success { - border-color: var(--rz-success) !important; +.rz-m-auto { + margin: auto !important; } -.rz-border-color-success-light { - border-color: var(--rz-success-light) !important; +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; } -.rz-border-color-success-lighter { - border-color: var(--rz-success-lighter) !important; +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; } -.rz-border-color-success-dark { - border-color: var(--rz-success-dark) !important; +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; } -.rz-border-color-success-darker { - border-color: var(--rz-success-darker) !important; +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; } -.rz-border-color-warning { - border-color: var(--rz-warning) !important; +.rz-ms-auto { + margin-inline-start: auto !important; } -.rz-border-color-warning-light { - border-color: var(--rz-warning-light) !important; -} - -.rz-border-color-warning-lighter { - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-color-warning-dark { - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-color-warning-darker { - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-color-danger { - border-color: var(--rz-danger) !important; -} - -.rz-border-color-danger-light { - border-color: var(--rz-danger-light) !important; -} - -.rz-border-color-danger-lighter { - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-color-danger-dark { - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-color-danger-darker { - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-color-on-primary { - border-color: var(--rz-on-primary) !important; -} - -.rz-border-color-on-primary-light { - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-color-on-primary-lighter { - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-color-on-primary-dark { - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-color-on-primary-darker { - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-color-on-secondary { - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-color-on-secondary-light { - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-color-on-secondary-lighter { - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-color-on-secondary-dark { - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-color-on-secondary-darker { - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-color-on-info { - border-color: var(--rz-on-info) !important; -} - -.rz-border-color-on-info-light { - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-color-on-info-lighter { - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-color-on-info-dark { - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-color-on-info-darker { - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-color-on-success { - border-color: var(--rz-on-success) !important; -} - -.rz-border-color-on-success-light { - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-color-on-success-lighter { - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-color-on-success-dark { - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-color-on-success-darker { - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-color-on-warning { - border-color: var(--rz-on-warning) !important; -} - -.rz-border-color-on-warning-light { - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-color-on-warning-lighter { - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-color-on-warning-dark { - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-color-on-warning-darker { - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-color-on-danger { - border-color: var(--rz-on-danger) !important; -} - -.rz-border-color-on-danger-light { - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-color-on-danger-lighter { - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-color-on-danger-dark { - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-color-on-danger-darker { - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-color-series-1 { - border-color: var(--rz-series-1) !important; -} - -.rz-border-color-series-2 { - border-color: var(--rz-series-2) !important; -} - -.rz-border-color-series-3 { - border-color: var(--rz-series-3) !important; -} - -.rz-border-color-series-4 { - border-color: var(--rz-series-4) !important; -} - -.rz-border-color-series-5 { - border-color: var(--rz-series-5) !important; -} - -.rz-border-color-series-6 { - border-color: var(--rz-series-6) !important; -} - -.rz-border-color-series-7 { - border-color: var(--rz-series-7) !important; -} - -.rz-border-color-series-8 { - border-color: var(--rz-series-8) !important; -} - -.rz-border-color-series-9 { - border-color: var(--rz-series-9) !important; -} - -.rz-border-color-series-10 { - border-color: var(--rz-series-10) !important; -} - -.rz-border-color-series-11 { - border-color: var(--rz-series-11) !important; -} - -.rz-border-color-series-12 { - border-color: var(--rz-series-12) !important; -} - -.rz-border-color-series-13 { - border-color: var(--rz-series-13) !important; -} - -.rz-border-color-series-14 { - border-color: var(--rz-series-14) !important; -} - -.rz-border-color-series-15 { - border-color: var(--rz-series-15) !important; -} - -.rz-border-color-series-16 { - border-color: var(--rz-series-16) !important; -} - -.rz-border-color-series-17 { - border-color: var(--rz-series-17) !important; -} - -.rz-border-color-series-18 { - border-color: var(--rz-series-18) !important; -} - -.rz-border-color-series-19 { - border-color: var(--rz-series-19) !important; -} - -.rz-border-color-series-20 { - border-color: var(--rz-series-20) !important; -} - -.rz-border-color-series-21 { - border-color: var(--rz-series-21) !important; -} - -.rz-border-color-series-22 { - border-color: var(--rz-series-22) !important; -} - -.rz-border-color-series-23 { - border-color: var(--rz-series-23) !important; -} - -.rz-border-color-series-24 { - border-color: var(--rz-series-24) !important; -} - -.rz-border-white { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-white) !important; -} - -.rz-border-black { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-black) !important; -} - -.rz-border-base-50 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-50) !important; -} - -.rz-border-base-100 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-100) !important; -} - -.rz-border-base-200 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-200) !important; -} - -.rz-border-base-300 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-300) !important; -} - -.rz-border-base-400 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-400) !important; -} - -.rz-border-base-500 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-500) !important; -} - -.rz-border-base-600 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-600) !important; -} - -.rz-border-base-700 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-700) !important; -} - -.rz-border-base-800 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-800) !important; -} - -.rz-border-base-900 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-900) !important; -} - -.rz-border-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary) !important; -} - -.rz-border-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-light) !important; -} - -.rz-border-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary) !important; -} - -.rz-border-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info) !important; -} - -.rz-border-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-light) !important; -} - -.rz-border-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-dark) !important; -} - -.rz-border-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-darker) !important; -} - -.rz-border-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success) !important; -} - -.rz-border-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-light) !important; -} - -.rz-border-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-lighter) !important; -} - -.rz-border-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-dark) !important; -} - -.rz-border-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-darker) !important; -} - -.rz-border-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning) !important; -} - -.rz-border-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-light) !important; -} - -.rz-border-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger) !important; -} - -.rz-border-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-light) !important; -} - -.rz-border-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-on-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary) !important; -} - -.rz-border-on-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-on-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-on-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-on-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-on-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-on-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-on-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-on-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-on-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-on-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info) !important; -} - -.rz-border-on-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-on-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-on-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-on-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-on-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success) !important; -} - -.rz-border-on-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-on-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-on-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-on-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-on-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning) !important; -} - -.rz-border-on-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-on-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-on-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-on-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-on-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger) !important; -} - -.rz-border-on-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-on-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-on-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-on-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-series-1 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-1) !important; -} - -.rz-border-series-2 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-2) !important; -} - -.rz-border-series-3 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-3) !important; -} - -.rz-border-series-4 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-4) !important; -} - -.rz-border-series-5 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-5) !important; -} - -.rz-border-series-6 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-6) !important; -} - -.rz-border-series-7 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-7) !important; -} - -.rz-border-series-8 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-8) !important; -} - -.rz-border-series-9 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-9) !important; -} - -.rz-border-series-10 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-10) !important; -} - -.rz-border-series-11 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-11) !important; -} - -.rz-border-series-12 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-12) !important; -} - -.rz-border-series-13 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-13) !important; -} - -.rz-border-series-14 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-14) !important; -} - -.rz-border-series-15 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-15) !important; -} - -.rz-border-series-16 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-16) !important; -} - -.rz-border-series-17 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-17) !important; -} - -.rz-border-series-18 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-18) !important; -} - -.rz-border-series-19 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-19) !important; -} - -.rz-border-series-20 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-20) !important; -} - -.rz-border-series-21 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-21) !important; -} - -.rz-border-series-22 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-22) !important; -} - -.rz-border-series-23 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-23) !important; -} - -.rz-border-series-24 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-24) !important; -} - -.rz-ripple { - position: relative; - overflow: hidden; -} -.rz-ripple:not(.rz-state-disabled):before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - background-position: center; - background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; - transition: background-size 0.8s, opacity 0.8s; -} -.rz-ripple:not(.rz-state-disabled):active:before { - transition: background-size 0s, opacity 0s; - opacity: 0.32; - background-size: 100%; -} - -.rz-m-0 { - margin: 0 !important; -} - -.rz-my-0, -.rz-mt-0 { - margin-top: 0 !important; -} - -.rz-mx-0, -.rz-mr-0 { - margin-right: 0 !important; -} - -.rz-my-0, -.rz-mb-0 { - margin-bottom: 0 !important; -} - -.rz-mx-0, -.rz-ml-0 { - margin-left: 0 !important; -} - -.rz-ms-0 { - margin-inline-start: 0 !important; -} - -.rz-me-0 { - margin-inline-end: 0 !important; -} - -.rz-m-05 { - margin: 0.125rem !important; -} - -.rz-my-05, -.rz-mt-05 { - margin-top: 0.125rem !important; -} - -.rz-mx-05, -.rz-mr-05 { - margin-right: 0.125rem !important; -} - -.rz-my-05, -.rz-mb-05 { - margin-bottom: 0.125rem !important; -} - -.rz-mx-05, -.rz-ml-05 { - margin-left: 0.125rem !important; -} - -.rz-ms-05 { - margin-inline-start: 0.125rem !important; -} - -.rz-me-05 { - margin-inline-end: 0.125rem !important; -} - -.rz-m-1 { - margin: 0.25rem !important; -} - -.rz-my-1, -.rz-mt-1 { - margin-top: 0.25rem !important; -} - -.rz-mx-1, -.rz-mr-1 { - margin-right: 0.25rem !important; -} - -.rz-my-1, -.rz-mb-1 { - margin-bottom: 0.25rem !important; -} - -.rz-mx-1, -.rz-ml-1 { - margin-left: 0.25rem !important; -} - -.rz-ms-1 { - margin-inline-start: 0.25rem !important; -} - -.rz-me-1 { - margin-inline-end: 0.25rem !important; -} - -.rz-m-2 { - margin: 0.5rem !important; -} - -.rz-my-2, -.rz-mt-2 { - margin-top: 0.5rem !important; -} - -.rz-mx-2, -.rz-mr-2 { - margin-right: 0.5rem !important; -} - -.rz-my-2, -.rz-mb-2 { - margin-bottom: 0.5rem !important; -} - -.rz-mx-2, -.rz-ml-2 { - margin-left: 0.5rem !important; -} - -.rz-ms-2 { - margin-inline-start: 0.5rem !important; -} - -.rz-me-2 { - margin-inline-end: 0.5rem !important; -} - -.rz-m-3 { - margin: 0.75rem !important; -} - -.rz-my-3, -.rz-mt-3 { - margin-top: 0.75rem !important; -} - -.rz-mx-3, -.rz-mr-3 { - margin-right: 0.75rem !important; -} - -.rz-my-3, -.rz-mb-3 { - margin-bottom: 0.75rem !important; -} - -.rz-mx-3, -.rz-ml-3 { - margin-left: 0.75rem !important; -} - -.rz-ms-3 { - margin-inline-start: 0.75rem !important; -} - -.rz-me-3 { - margin-inline-end: 0.75rem !important; -} - -.rz-m-4 { - margin: 1rem !important; -} - -.rz-my-4, -.rz-mt-4 { - margin-top: 1rem !important; -} - -.rz-mx-4, -.rz-mr-4 { - margin-right: 1rem !important; -} - -.rz-my-4, -.rz-mb-4 { - margin-bottom: 1rem !important; -} - -.rz-mx-4, -.rz-ml-4 { - margin-left: 1rem !important; -} - -.rz-ms-4 { - margin-inline-start: 1rem !important; -} - -.rz-me-4 { - margin-inline-end: 1rem !important; -} - -.rz-m-5 { - margin: 1.25rem !important; -} - -.rz-my-5, -.rz-mt-5 { - margin-top: 1.25rem !important; -} - -.rz-mx-5, -.rz-mr-5 { - margin-right: 1.25rem !important; -} - -.rz-my-5, -.rz-mb-5 { - margin-bottom: 1.25rem !important; -} - -.rz-mx-5, -.rz-ml-5 { - margin-left: 1.25rem !important; -} - -.rz-ms-5 { - margin-inline-start: 1.25rem !important; -} - -.rz-me-5 { - margin-inline-end: 1.25rem !important; -} - -.rz-m-6 { - margin: 1.5rem !important; -} - -.rz-my-6, -.rz-mt-6 { - margin-top: 1.5rem !important; -} - -.rz-mx-6, -.rz-mr-6 { - margin-right: 1.5rem !important; -} - -.rz-my-6, -.rz-mb-6 { - margin-bottom: 1.5rem !important; -} - -.rz-mx-6, -.rz-ml-6 { - margin-left: 1.5rem !important; -} - -.rz-ms-6 { - margin-inline-start: 1.5rem !important; -} - -.rz-me-6 { - margin-inline-end: 1.5rem !important; -} - -.rz-m-7 { - margin: 1.75rem !important; -} - -.rz-my-7, -.rz-mt-7 { - margin-top: 1.75rem !important; -} - -.rz-mx-7, -.rz-mr-7 { - margin-right: 1.75rem !important; -} - -.rz-my-7, -.rz-mb-7 { - margin-bottom: 1.75rem !important; -} - -.rz-mx-7, -.rz-ml-7 { - margin-left: 1.75rem !important; -} - -.rz-ms-7 { - margin-inline-start: 1.75rem !important; -} - -.rz-me-7 { - margin-inline-end: 1.75rem !important; -} - -.rz-m-8 { - margin: 2rem !important; -} - -.rz-my-8, -.rz-mt-8 { - margin-top: 2rem !important; -} - -.rz-mx-8, -.rz-mr-8 { - margin-right: 2rem !important; -} - -.rz-my-8, -.rz-mb-8 { - margin-bottom: 2rem !important; -} - -.rz-mx-8, -.rz-ml-8 { - margin-left: 2rem !important; -} - -.rz-ms-8 { - margin-inline-start: 2rem !important; -} - -.rz-me-8 { - margin-inline-end: 2rem !important; -} - -.rz-m-9 { - margin: 2.25rem !important; -} - -.rz-my-9, -.rz-mt-9 { - margin-top: 2.25rem !important; -} - -.rz-mx-9, -.rz-mr-9 { - margin-right: 2.25rem !important; -} - -.rz-my-9, -.rz-mb-9 { - margin-bottom: 2.25rem !important; -} - -.rz-mx-9, -.rz-ml-9 { - margin-left: 2.25rem !important; -} - -.rz-ms-9 { - margin-inline-start: 2.25rem !important; -} - -.rz-me-9 { - margin-inline-end: 2.25rem !important; -} - -.rz-m-10 { - margin: 2.5rem !important; -} - -.rz-my-10, -.rz-mt-10 { - margin-top: 2.5rem !important; -} - -.rz-mx-10, -.rz-mr-10 { - margin-right: 2.5rem !important; -} - -.rz-my-10, -.rz-mb-10 { - margin-bottom: 2.5rem !important; -} - -.rz-mx-10, -.rz-ml-10 { - margin-left: 2.5rem !important; -} - -.rz-ms-10 { - margin-inline-start: 2.5rem !important; -} - -.rz-me-10 { - margin-inline-end: 2.5rem !important; -} - -.rz-m-11 { - margin: 2.75rem !important; -} - -.rz-my-11, -.rz-mt-11 { - margin-top: 2.75rem !important; -} - -.rz-mx-11, -.rz-mr-11 { - margin-right: 2.75rem !important; -} - -.rz-my-11, -.rz-mb-11 { - margin-bottom: 2.75rem !important; -} - -.rz-mx-11, -.rz-ml-11 { - margin-left: 2.75rem !important; -} - -.rz-ms-11 { - margin-inline-start: 2.75rem !important; -} - -.rz-me-11 { - margin-inline-end: 2.75rem !important; -} - -.rz-m-12 { - margin: 3rem !important; -} - -.rz-my-12, -.rz-mt-12 { - margin-top: 3rem !important; -} - -.rz-mx-12, -.rz-mr-12 { - margin-right: 3rem !important; -} - -.rz-my-12, -.rz-mb-12 { - margin-bottom: 3rem !important; -} - -.rz-mx-12, -.rz-ml-12 { - margin-left: 3rem !important; -} - -.rz-ms-12 { - margin-inline-start: 3rem !important; -} - -.rz-me-12 { - margin-inline-end: 3rem !important; -} - -.rz-p-0 { - padding: 0 !important; -} - -.rz-py-0, -.rz-pt-0 { - padding-top: 0 !important; -} - -.rz-px-0, -.rz-pr-0 { - padding-right: 0 !important; -} - -.rz-py-0, -.rz-pb-0 { - padding-bottom: 0 !important; -} - -.rz-px-0, -.rz-pl-0 { - padding-left: 0 !important; -} - -.rz-ps-0 { - padding-inline-start: 0 !important; -} - -.rz-pe-0 { - padding-inline-end: 0 !important; -} - -.rz-p-05 { - padding: 0.125rem !important; -} - -.rz-py-05, -.rz-pt-05 { - padding-top: 0.125rem !important; -} - -.rz-px-05, -.rz-pr-05 { - padding-right: 0.125rem !important; -} - -.rz-py-05, -.rz-pb-05 { - padding-bottom: 0.125rem !important; -} - -.rz-px-05, -.rz-pl-05 { - padding-left: 0.125rem !important; -} - -.rz-ps-05 { - padding-inline-start: 0.125rem !important; -} - -.rz-pe-05 { - padding-inline-end: 0.125rem !important; -} - -.rz-p-1 { - padding: 0.25rem !important; -} - -.rz-py-1, -.rz-pt-1 { - padding-top: 0.25rem !important; -} - -.rz-px-1, -.rz-pr-1 { - padding-right: 0.25rem !important; -} - -.rz-py-1, -.rz-pb-1 { - padding-bottom: 0.25rem !important; -} - -.rz-px-1, -.rz-pl-1 { - padding-left: 0.25rem !important; -} - -.rz-ps-1 { - padding-inline-start: 0.25rem !important; -} - -.rz-pe-1 { - padding-inline-end: 0.25rem !important; -} - -.rz-p-2 { - padding: 0.5rem !important; -} - -.rz-py-2, -.rz-pt-2 { - padding-top: 0.5rem !important; -} - -.rz-px-2, -.rz-pr-2 { - padding-right: 0.5rem !important; -} - -.rz-py-2, -.rz-pb-2 { - padding-bottom: 0.5rem !important; -} - -.rz-px-2, -.rz-pl-2 { - padding-left: 0.5rem !important; -} - -.rz-ps-2 { - padding-inline-start: 0.5rem !important; -} - -.rz-pe-2 { - padding-inline-end: 0.5rem !important; -} - -.rz-p-3 { - padding: 0.75rem !important; -} - -.rz-py-3, -.rz-pt-3 { - padding-top: 0.75rem !important; -} - -.rz-px-3, -.rz-pr-3 { - padding-right: 0.75rem !important; -} - -.rz-py-3, -.rz-pb-3 { - padding-bottom: 0.75rem !important; -} - -.rz-px-3, -.rz-pl-3 { - padding-left: 0.75rem !important; -} - -.rz-ps-3 { - padding-inline-start: 0.75rem !important; -} - -.rz-pe-3 { - padding-inline-end: 0.75rem !important; -} - -.rz-p-4 { - padding: 1rem !important; -} - -.rz-py-4, -.rz-pt-4 { - padding-top: 1rem !important; -} - -.rz-px-4, -.rz-pr-4 { - padding-right: 1rem !important; -} - -.rz-py-4, -.rz-pb-4 { - padding-bottom: 1rem !important; -} - -.rz-px-4, -.rz-pl-4 { - padding-left: 1rem !important; -} - -.rz-ps-4 { - padding-inline-start: 1rem !important; -} - -.rz-pe-4 { - padding-inline-end: 1rem !important; -} - -.rz-p-5 { - padding: 1.25rem !important; -} - -.rz-py-5, -.rz-pt-5 { - padding-top: 1.25rem !important; -} - -.rz-px-5, -.rz-pr-5 { - padding-right: 1.25rem !important; -} - -.rz-py-5, -.rz-pb-5 { - padding-bottom: 1.25rem !important; -} - -.rz-px-5, -.rz-pl-5 { - padding-left: 1.25rem !important; -} - -.rz-ps-5 { - padding-inline-start: 1.25rem !important; -} - -.rz-pe-5 { - padding-inline-end: 1.25rem !important; -} - -.rz-p-6 { - padding: 1.5rem !important; -} - -.rz-py-6, -.rz-pt-6 { - padding-top: 1.5rem !important; -} - -.rz-px-6, -.rz-pr-6 { - padding-right: 1.5rem !important; -} - -.rz-py-6, -.rz-pb-6 { - padding-bottom: 1.5rem !important; -} - -.rz-px-6, -.rz-pl-6 { - padding-left: 1.5rem !important; -} - -.rz-ps-6 { - padding-inline-start: 1.5rem !important; -} - -.rz-pe-6 { - padding-inline-end: 1.5rem !important; -} - -.rz-p-7 { - padding: 1.75rem !important; -} - -.rz-py-7, -.rz-pt-7 { - padding-top: 1.75rem !important; -} - -.rz-px-7, -.rz-pr-7 { - padding-right: 1.75rem !important; -} - -.rz-py-7, -.rz-pb-7 { - padding-bottom: 1.75rem !important; -} - -.rz-px-7, -.rz-pl-7 { - padding-left: 1.75rem !important; -} - -.rz-ps-7 { - padding-inline-start: 1.75rem !important; -} - -.rz-pe-7 { - padding-inline-end: 1.75rem !important; -} - -.rz-p-8 { - padding: 2rem !important; -} - -.rz-py-8, -.rz-pt-8 { - padding-top: 2rem !important; -} - -.rz-px-8, -.rz-pr-8 { - padding-right: 2rem !important; -} - -.rz-py-8, -.rz-pb-8 { - padding-bottom: 2rem !important; -} - -.rz-px-8, -.rz-pl-8 { - padding-left: 2rem !important; -} - -.rz-ps-8 { - padding-inline-start: 2rem !important; -} - -.rz-pe-8 { - padding-inline-end: 2rem !important; -} - -.rz-p-9 { - padding: 2.25rem !important; -} - -.rz-py-9, -.rz-pt-9 { - padding-top: 2.25rem !important; -} - -.rz-px-9, -.rz-pr-9 { - padding-right: 2.25rem !important; -} - -.rz-py-9, -.rz-pb-9 { - padding-bottom: 2.25rem !important; -} - -.rz-px-9, -.rz-pl-9 { - padding-left: 2.25rem !important; -} - -.rz-ps-9 { - padding-inline-start: 2.25rem !important; -} - -.rz-pe-9 { - padding-inline-end: 2.25rem !important; -} - -.rz-p-10 { - padding: 2.5rem !important; -} - -.rz-py-10, -.rz-pt-10 { - padding-top: 2.5rem !important; -} - -.rz-px-10, -.rz-pr-10 { - padding-right: 2.5rem !important; -} - -.rz-py-10, -.rz-pb-10 { - padding-bottom: 2.5rem !important; -} - -.rz-px-10, -.rz-pl-10 { - padding-left: 2.5rem !important; -} - -.rz-ps-10 { - padding-inline-start: 2.5rem !important; -} - -.rz-pe-10 { - padding-inline-end: 2.5rem !important; -} - -.rz-p-11 { - padding: 2.75rem !important; -} - -.rz-py-11, -.rz-pt-11 { - padding-top: 2.75rem !important; -} - -.rz-px-11, -.rz-pr-11 { - padding-right: 2.75rem !important; -} - -.rz-py-11, -.rz-pb-11 { - padding-bottom: 2.75rem !important; -} - -.rz-px-11, -.rz-pl-11 { - padding-left: 2.75rem !important; -} - -.rz-ps-11 { - padding-inline-start: 2.75rem !important; -} - -.rz-pe-11 { - padding-inline-end: 2.75rem !important; -} - -.rz-p-12 { - padding: 3rem !important; -} - -.rz-py-12, -.rz-pt-12 { - padding-top: 3rem !important; -} - -.rz-px-12, -.rz-pr-12 { - padding-right: 3rem !important; -} - -.rz-py-12, -.rz-pb-12 { - padding-bottom: 3rem !important; -} - -.rz-px-12, -.rz-pl-12 { - padding-left: 3rem !important; -} - -.rz-ps-12 { - padding-inline-start: 3rem !important; -} - -.rz-pe-12 { - padding-inline-end: 3rem !important; -} - -.rz-m-auto { - margin: auto !important; -} - -.rz-my-auto, -.rz-mt-auto { - margin-top: auto !important; -} - -.rz-mx-auto, -.rz-mr-auto { - margin-right: auto !important; -} - -.rz-my-auto, -.rz-mb-auto { - margin-bottom: auto !important; -} - -.rz-mx-auto, -.rz-ml-auto { - margin-left: auto !important; -} - -.rz-ms-auto { - margin-inline-start: auto !important; -} - -.rz-me-auto { - margin-inline-end: auto !important; +.rz-me-auto { + margin-inline-end: auto !important; } @media (min-width: 576px) { @@ -13120,7 +7630,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -13129,7 +7640,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -13138,7 +7650,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -13147,7 +7660,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -13156,7 +7670,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -13165,7 +7680,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h1, @@ -13175,7 +7691,8 @@ h1, font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2, @@ -13185,7 +7702,8 @@ h2, font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3, @@ -13195,7 +7713,8 @@ h3, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4, @@ -13205,7 +7724,8 @@ h4, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5, @@ -13215,171 +7735,55 @@ h5, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h6, -.h6 { - font-size: 0.75rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h1.text-thin, -.h1.text-thin { - font-size: 3rem; - font-weight: 300; + margin-block-start: 0; + margin-block-end: 0.5rem; } - -h2.text-thin, -.h2.text-thin { - font-size: 2rem; - font-weight: 300; -} - -h3.text-thin, -.h3.text-thin { - font-size: 1.25rem; - font-weight: 300; -} - -h4.text-thin, -.h4.text-thin { - font-size: 1rem; - font-weight: 300; -} - -h5.text-thin, -.h5.text-thin { - font-size: 0.875rem; - font-weight: 300; -} - -h6.text-thin, -.h6.text-thin { - font-size: 0.75rem; - font-weight: 300; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; } .rz-text-display-h1 { @@ -13389,7 +7793,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -13399,7 +7804,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -13409,7 +7815,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -13419,7 +7826,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -13429,7 +7837,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -13439,7 +7848,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -13449,7 +7859,8 @@ h6.text-thin, font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -13459,7 +7870,8 @@ h6.text-thin, font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -13469,7 +7881,8 @@ h6.text-thin, font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -13479,7 +7892,8 @@ h6.text-thin, font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -13489,7 +7903,8 @@ h6.text-thin, font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -13499,7 +7914,8 @@ h6.text-thin, font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -13509,7 +7925,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -13519,7 +7936,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -13529,7 +7947,8 @@ h6.text-thin, font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -13539,7 +7958,8 @@ h6.text-thin, font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -13549,7 +7969,8 @@ h6.text-thin, font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -13559,7 +7980,8 @@ h6.text-thin, font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -13570,7 +7992,8 @@ h6.text-thin, letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -13804,26 +8227,24 @@ p { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } label { - margin-bottom: 0; -} - -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; + margin-block-start: 0; + margin-block-end: 0; } ::selection { @@ -13839,8 +8260,9 @@ label { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -13851,7 +8273,7 @@ label { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -13872,14 +8294,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -13904,6 +8318,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -13927,98 +8358,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -14026,18 +8431,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -14062,6 +8455,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -14093,59 +8498,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -14290,46 +8642,99 @@ p-button[type] { background-color: var(--rz-danger-dark); color: var(--rz-on-danger-dark); } -.rz-button.rz-danger.rz-shade-darker { - background-color: var(--rz-danger-darker); - color: var(--rz-on-danger-darker); +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); } -.rz-button.rz-danger.rz-variant-flat { +.rz-button.rz-base.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-danger.rz-variant-flat:focus-visible { - outline-color: var(--rz-danger); +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); } -.rz-button.rz-success { - background-color: var(--rz-success); - color: var(--rz-on-success); -} -.rz-button.rz-success.rz-shade-lighter { - background-color: var(--rz-success-lighter); - color: var(--rz-on-success-lighter); -} -.rz-button.rz-success.rz-shade-light { - background-color: var(--rz-success-light); - color: var(--rz-on-success-light); +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-button.rz-success.rz-shade-default { - background-color: var(--rz-success); - color: var(--rz-on-success); +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; } -.rz-button.rz-success.rz-shade-dark { - background-color: var(--rz-success-dark); - color: var(--rz-on-success-dark); +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); } -.rz-button.rz-success.rz-shade-darker { - background-color: var(--rz-success-darker); - color: var(--rz-on-success-darker); + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); } -.rz-button.rz-success.rz-variant-flat { +.rz-button.rz-dark.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-success.rz-variant-flat:focus-visible { - outline-color: var(--rz-success); +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); } .rz-button.rz-variant-outlined.rz-primary { @@ -14361,59 +8766,6 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - .rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } @@ -14588,76 +8940,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); -} -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -14818,15 +9175,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -14835,7 +9240,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -14845,51 +9250,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -14897,13 +9302,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -14912,7 +9317,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -14930,19 +9335,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: 10rem; - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 700; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -14984,15 +9378,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -15143,6 +9528,41 @@ p-button[type] { color: var(--rz-on-success-darker); } +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + .rz-variant-outlined.rz-badge-primary { background-color: transparent; } @@ -15167,22 +9587,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} - -.rz-variant-outlined.rz-badge-dark { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} - .rz-variant-outlined.rz-badge-secondary { background-color: transparent; } @@ -15327,6 +9731,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -15346,16 +9790,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -15470,20 +9904,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -15497,57 +9951,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: 0.875rem; - --rz-input-height: 2.25rem; - --rz-input-line-height: 1.429; - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-disabled-background-color: var(--rz-base-100); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -15558,26 +9987,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -15596,15 +10028,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-base-200); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: none; -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -15623,14 +10046,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: var(--rz-border-base-200); - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -15645,18 +10060,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-normal); - --rz-sidebar-background-color: var(--rz-base-800); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -15665,7 +10072,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -15684,17 +10091,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-100); - --rz-card-shadow: var(--rz-shadow-2); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -15724,13 +10122,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -15744,32 +10135,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-secondary); - --rz-accordion-hover-color: var(--rz-secondary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -15788,16 +10155,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -15805,20 +10172,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -15828,7 +10196,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -15837,10 +10205,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -15848,34 +10212,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: var(--rz-base-200); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-secondary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -15926,33 +10282,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-200); - --rz-sidebar-toggle-color: var(--rz-base-900); - --rz-sidebar-toggle-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-secondary); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -15986,37 +10328,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: var(--rz-border-normal); - --rz-menu-border-radius: 2px; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-hover-background-color: var(--rz-secondary-light); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-secondary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-secondary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-secondary); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -16041,7 +10355,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16063,6 +10378,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -16071,7 +10387,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -16084,7 +10401,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -16114,13 +10432,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -16129,7 +10447,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -16141,7 +10460,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16165,16 +10485,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -16191,7 +10511,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -16251,65 +10572,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: var(--rz-text-contrast-color); - --rz-panel-menu-background-color: var(--rz-base-800); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.3); - --rz-panel-menu-hover-color: var(--rz-text-contrast-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-900); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-base-900); - --rz-panel-menu-item-background-color: var(--rz-base-900); - --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: inherit; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -16319,10 +10595,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -16334,11 +10611,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -16349,8 +10626,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -16359,7 +10636,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -16372,7 +10650,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -16381,20 +10659,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -16418,67 +10698,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-200); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-secondary); - --rz-profile-menu-item-hover-background-color: var(--rz-secondary); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -16499,19 +10764,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -16531,17 +10799,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -16549,26 +10811,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-200); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -16622,14 +10866,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -16639,7 +10885,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -16662,54 +10909,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: inherit; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-secondary); - --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); - --rz-checkbox-checked-color: var(--rz-on-secondary); - --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -16721,10 +10956,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -16743,10 +10980,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -16803,17 +11037,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-secondary); - --rz-switch-box-shadow: none; - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -16833,10 +11058,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -16858,8 +11083,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -16868,7 +11093,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -16879,36 +11104,24 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-checked-circle-background-color); transform: translateX(1.2rem); } - -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-secondary); - --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-radio-checked-background-color: var(--rz-secondary); - --rz-radio-checked-hover-background-color: var(--rz-secondary-light); - --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-base-background-color); - --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); - --rz-radio-circle-hover-background-color: var(--rz-base-100); - --rz-radio-icon-width: 0.5rem; - --rz-radio-icon-height: 0.5rem; - --rz-radio-checked-border: var(--rz-input-border); + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -16920,7 +11133,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -16943,10 +11157,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -17006,26 +11217,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-normal); - --rz-fieldset-border-radius: 0; - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-tertiary-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-200); - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -17054,7 +11250,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -17072,8 +11269,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -17088,36 +11287,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); - --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); - --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); - --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); - --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); - --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-100); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -17144,15 +11313,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -17160,8 +11330,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -17196,7 +11366,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -17289,28 +11460,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -17327,10 +11502,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -17339,7 +11515,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -17361,24 +11538,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -17388,7 +11549,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -17431,7 +11593,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -17472,39 +11635,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -17514,9 +11667,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -17530,11 +11680,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -17543,36 +11693,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-background-color); - --rz-slider-border: var(--rz-border-normal); - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-secondary-lighter); - --rz-slider-range-border: var(--rz-border-secondary-light); - --rz-slider-handle-width: 0.75rem; - --rz-slider-handle-height: 1.5rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-secondary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-secondary-light); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-100); - --rz-slider-disabled-range-border: var(--rz-border-normal); - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-300); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -17599,11 +11721,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -17612,7 +11734,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -17637,19 +11759,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-secondary); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.3; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-secondary); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -17707,16 +11818,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -17737,17 +11840,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-secondary); - --rz-selectbar-selected-color: var(--rz-on-secondary); - --rz-selectbar-selected-border: var(--rz-border-secondary); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -17755,7 +11849,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -17763,13 +11857,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -17778,157 +11872,102 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; - display: inline-block; - background-color: var(--rz-selectbar-background-color); - color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -.rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; - display: inline-block; - background-color: var(--rz-selectbar-background-color); - color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-md.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -.rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-200); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); - --rz-datepicker-calendar-border: var(--rz-border-base-100); - --rz-datepicker-calendar-border-radius: 0; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-secondary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: none; - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-200); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-secondary); - --rz-timepicker-button-color: var(--rz-on-secondary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); } -.rz-calendar { +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -17936,9 +11975,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -17976,148 +12015,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -18148,47 +12214,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-secondary); - --rz-numeric-button-disabled-background-color: var(--rz-base-300); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-on-secondary); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -18196,9 +12249,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -18206,49 +12259,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); -} - -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -:root { - --rz-upload-button-bar-background-color: var(--rz-base-200); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-300); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary); - --rz-upload-choose-color: var(--rz-on-secondary); - --rz-upload-choose-hover-background-color: var(--rz-secondary); - --rz-upload-choose-hover-color: var(--rz-on-secondary); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -18335,101 +12369,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-secondary-lighter); - --rz-grid-hover-color: var(--rz-on-secondary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-secondary-dark); - --rz-grid-selected-color: var(--rz-on-secondary-dark); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: none; - --rz-grid-header-background-color: var(--rz-base-200); - --rz-grid-header-font-size: 0.75rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: uppercase; - --rz-grid-header-color: var(--rz-text-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-300); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-200); - --rz-grid-filter-background-color: var(--rz-base-100); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: var(--rz-border-normal); - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-base-200); - --rz-grid-clear-filter-button-background-color: var(--rz-secondary); - --rz-grid-clear-filter-button-color: var(--rz-on-secondary); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: var(--rz-border-normal); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-100); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-background-color); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-200); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-color); - --rz-column-drag-handle-hover-color: var(--rz-text-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -18453,10 +12392,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -18500,8 +12443,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -18509,8 +12452,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -18536,11 +12479,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -18560,13 +12504,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -18586,11 +12531,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -18598,11 +12543,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -18616,10 +12561,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -18635,7 +12580,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -18687,7 +12632,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -18697,11 +12642,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -18724,13 +12669,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -18751,21 +12700,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -18777,7 +12726,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -18823,7 +12772,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -18837,14 +12785,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -18946,10 +12894,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -18960,31 +12904,18 @@ a:focus-visible .rz-fieldset-toggler { line-height: calc(1.25rem - var(--rz-border-width) * 2); border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-start-end-radius: 0; - border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); - border-end-end-radius: 0; - } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { - text-indent: 2.25rem; - } -} -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } } - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -19014,31 +12945,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -19104,7 +13013,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -19114,18 +13023,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -19134,9 +13082,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -19178,16 +13128,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -19220,7 +13176,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -19271,26 +13227,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -19303,7 +13263,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -19323,7 +13283,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -19331,312 +13291,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: var(--rz-base-background-color); - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: var(--rz-border-normal); - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-base-background-color); - --rz-paginator-numeric-button-selected-color: var(--rz-primary); - --rz-paginator-numeric-button-selected-border: var(--rz-border-base-200); - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-200); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-200); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-200); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-200); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-secondary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-100); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -19646,24 +13566,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-secondary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-secondary-light); - --rz-tree-node-hover-color: var(--rz-on-secondary-light); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -19680,12 +13584,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -19694,13 +13598,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -19710,15 +13620,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -19730,7 +13642,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -19749,25 +13661,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-200); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-item-border: var(--rz-border-base-200); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -19786,13 +13684,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -19801,24 +13700,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -19840,7 +13732,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -19851,23 +13744,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -19877,17 +13770,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -19900,70 +13794,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-300); - --rz-scheduler-minor-border-color: var(--rz-base-200); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-200); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); - --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-secondary); - --rz-scheduler-view-selected-background-color: var(--rz-secondary); - --rz-scheduler-view-selected-border-color: var(--rz-secondary); - --rz-scheduler-header-background-color: var(--rz-base-200); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: var(--rz-border-normal); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -19979,7 +13811,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -19992,12 +13824,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -20007,27 +13839,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -20062,8 +13895,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -20123,16 +13956,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -20149,25 +13982,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -20181,7 +14027,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -20193,24 +14039,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -20220,11 +14066,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -20252,7 +14098,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -20268,7 +14114,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -20276,7 +14122,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -20325,7 +14171,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -20374,7 +14220,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -20420,8 +14266,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20430,15 +14276,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20471,8 +14317,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20481,15 +14327,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20519,35 +14365,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-tabs-border: var(--rz-border-base-200); - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-200); - --rz-tabs-tab-color: var(--rz-secondary); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); - --rz-tabs-tab-hover-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -20601,7 +14420,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -20644,7 +14464,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -20664,7 +14484,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -20699,6 +14519,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -20728,22 +14551,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-tabview-panel { padding: var(--rz-tabs-padding); } - -.rz-tabview-left-icon { - font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: 0.875rem; + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -20769,8 +14584,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20787,8 +14602,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20832,29 +14647,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-100); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 0.6875rem 1.25rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.875rem; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -20867,6 +14661,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -20881,37 +14676,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -20923,7 +14736,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -20937,7 +14750,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -20950,42 +14763,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -21018,161 +14804,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); -} - -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); -} - -.rz-dialog-side-titlebar-close { - float: right; -} -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); -} -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; -} -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); -} - -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } } - -.rz-growl { +.rz-notification { + box-sizing: border-box; position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-growl-item-container { +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-growl-item { +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); border-radius: var(--rz-notification-border-radius); box-shadow: var(--rz-notification-shadow); padding: var(--rz-notification-padding); } - -.rz-growl-message-success .rz-growl-item { +.rz-notification-success .rz-notification-item { color: var(--rz-notification-success-color); background-color: var(--rz-notification-success-background-color); } - -.rz-growl-message-warn .rz-growl-item { +.rz-notification-warn .rz-notification-item { color: var(--rz-notification-warning-color); background-color: var(--rz-notification-warning-background-color); } - -.rz-growl-message-error .rz-growl-item { +.rz-notification-error .rz-notification-item { color: var(--rz-notification-error-color); background-color: var(--rz-notification-error-background-color); } - -.rz-growl-message-info .rz-growl-item { +.rz-notification-info .rz-notification-item { color: var(--rz-notification-info-color); background-color: var(--rz-notification-info-background-color); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-icon-close { - float: right; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close:before { - content: "close"; + +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -21197,16 +14947,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: var(--rz-secondary); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } body:not(.rz-default-scrollbars)::-webkit-scrollbar, @@ -21255,14 +14997,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-100); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -21292,7 +15028,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -21304,12 +15040,15 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -21319,11 +15058,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -21333,24 +15067,11 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -21360,14 +15081,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -21379,18 +15094,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -21439,19 +15145,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-200); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-secondary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -21479,6 +15174,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -21539,6 +15235,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -21550,6 +15249,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -21570,6 +15272,26 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -21615,48 +15337,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -21720,6 +15400,27 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -21762,6 +15463,69 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-success); } +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + .rz-progressbar-circular-lg { width: 6rem; height: 6rem; @@ -21786,19 +15550,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { font-size: calc(var(--rz-progressbar-font-size) * 0.375); } -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); -} - .rz-chart { + box-sizing: border-box; position: relative; height: 300px; } @@ -22570,6 +16323,10 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -22693,6 +16450,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -22719,24 +16477,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary); - --rz-editor-button-selected-color: var(--rz-on-secondary); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -22921,30 +16663,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -23021,7 +16739,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -23093,7 +16811,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -23106,7 +16824,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -23121,6 +16839,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -23132,27 +16851,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -23168,15 +16884,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -23188,15 +16902,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-secondary); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-secondary); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -23218,7 +16925,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23233,7 +16940,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23320,11 +17027,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -23358,8 +17082,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -23367,8 +17101,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -23382,22 +17116,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: 0; - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -24226,30 +17946,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -24268,16 +17993,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -24653,279 +18375,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -25270,36 +18992,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-100); - --rz-form-field-filled-hover-background-color: var(--rz-base-200); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: none; - --rz-form-field-focus-shadow: none; - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -25309,11 +19001,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -25322,12 +19015,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -25355,20 +19048,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -25413,33 +19108,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -25456,16 +19154,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -25473,33 +19171,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -25516,27 +19214,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: 0; -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -26081,23 +19767,1579 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { width: 100%; height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #d9e1ea; + --rz-base-50: #ffffff; + --rz-base-100: #f3f5f7; + --rz-base-200: #ebeef2; + --rz-base-300: #d9e1ea; + --rz-base-400: #87a4c4; + --rz-base-500: #7293b6; + --rz-base-600: #466791; + --rz-base-700: #395374; + --rz-base-800: #30445f; + --rz-base-900: #2b3a50; + --rz-base-light: #ebeef2; + --rz-base-lighter: #ffffff; + --rz-base-dark: #466791; + --rz-base-darker: #2b3a50; + --rz-primary: #d64d42; + --rz-primary-light: #db6259; + --rz-primary-lighter: rgba(214, 77, 66, 0.16); + --rz-primary-dark: #c5473d; + --rz-primary-darker: #a13a32; + --rz-secondary: #3ba5fc; + --rz-secondary-light: #53b0fc; + --rz-secondary-lighter: rgba(59, 165, 252, 0.2); + --rz-secondary-dark: #3698e8; + --rz-secondary-darker: #2c7cbd; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #2b3a50; + --rz-on-base-light: #2b3a50; + --rz-on-base-lighter: #2b3a50; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #d64d42; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #3ba5fc; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); + /* Border Radius */ + --rz-border-radius: 0; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-100); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-200); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-item-border: var(--rz-border-base-200); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-200); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-100); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-200); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-100); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-100); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-normal); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-200); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-200); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-100); + --rz-form-field-filled-hover-background-color: var(--rz-base-200); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-200); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-300); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-200); + --rz-grid-filter-background-color: var(--rz-base-100); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-100); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-100); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-background-color); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-200); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-color); + --rz-column-drag-handle-hover-color: var(--rz-text-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-200); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-100); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-100); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-300); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-100); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-200); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-200); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-background-color); + --rz-pager-numeric-button-selected-color: var(--rz-primary); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-200); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-200); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-200); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-200); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-secondary); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-200); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-300); + --rz-scheduler-minor-border-color: var(--rz-base-200); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-200); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-200); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-secondary); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-200); + --rz-sidebar-toggle-color: var(--rz-base-900); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-normal); + --rz-sidebar-background-color: var(--rz-base-800); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-lighter); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-100); + --rz-slider-disabled-range-border: var(--rz-border-normal); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-300); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ --rz-gap: 1rem; -} - -.rz-picklist-source-wrapper, -.rz-picklist-target-wrapper { - flex: 1; - --rz-gap: 0.5rem; - overflow: hidden; -} -.rz-picklist-source-wrapper .rz-listbox, -.rz-picklist-target-wrapper .rz-listbox { - width: 100%; - height: 100%; -} - -.rz-picklist-buttons.rz-flex-row .rzi { - transform: rotate(90deg); + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-200); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: var(--rz-border-base-200); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-200); + --rz-tabs-tab-color: var(--rz-secondary); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); + --rz-tabs-tab-hover-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: 0; + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-200); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/material-base.css b/_content/Radzen.Blazor/css/material-base.css index a46c7b5..ede0f68 100755 --- a/_content/Radzen.Blazor/css/material-base.css +++ b/_content/Radzen.Blazor/css/material-base.css @@ -96,7 +96,7 @@ content: ""; flex: auto; height: 1px; - margin-right: 16px; + margin-inline-end: 16px; background-color: var(--rz-base-300); } @@ -177,67 +177,48 @@ background: var(--rz-base-200); } -.rz-datepicker-inline:not(.ng-trigger) table { +.rz-datepicker-inline table { width: 100%; } -.rz-datepicker.rz-popup { - width: 340px !important; -} -.rz-datepicker .rz-datepicker-calendar-container { - padding: 0 0.75rem 0.5rem; -} - -.rz-datepicker-title .rz-dropdown { - min-width: 100px !important; - margin-top: 0.75rem !important; -} -.rz-datepicker-title .rz-dropdown:first-child { - min-width: 140px !important; -} - -.rz-datepicker-calendar td, -.rz-datepicker-calendar th { +.rz-calendar-view td, +.rz-calendar-view th { text-align: center; } -.rz-datepicker-calendar td a.rz-state-default, -.rz-datepicker-calendar td span.rz-state-default, -.rz-datepicker-calendar th a.rz-state-default, -.rz-datepicker-calendar th span.rz-state-default { +.rz-calendar-view td a.rz-state-default, +.rz-calendar-view td span.rz-state-default, +.rz-calendar-view th a.rz-state-default, +.rz-calendar-view th span.rz-state-default { display: inline-block; width: 2.25rem; height: 2.25rem; line-height: 1rem; } -.rz-datepicker-calendar td a.rz-state-default:not(.rz-state-active):hover, -.rz-datepicker-calendar td span.rz-state-default:not(.rz-state-active):hover, -.rz-datepicker-calendar th a.rz-state-default:not(.rz-state-active):hover, -.rz-datepicker-calendar th span.rz-state-default:not(.rz-state-active):hover { +.rz-calendar-view td a.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view td span.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view th a.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view th span.rz-state-default:not(.rz-state-active):hover { border-radius: 50%; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar th .rz-state-active { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view th .rz-state-active { border-radius: 50%; } .rz-timepicker { flex-wrap: wrap; } -.rz-timepicker .rz-spinner { +.rz-timepicker .rz-numeric { flex: 1; } .rz-timepicker > .rz-button { flex-basis: 100%; } -.rz-calendar .rz-inputtext { - padding-right: 2.5rem !important; -} - -.rz-spinner .rz-spinner-button { +.rz-numeric .rz-numeric-button { box-shadow: none; } -.rz-spinner .rz-spinner-button:hover { +.rz-numeric .rz-numeric-button:hover { box-shadow: none !important; } @@ -256,7 +237,7 @@ } .rz-datatable .rz-col-icon { - border-right: var(--rz-border-base-300); + border-inline-end: var(--rz-border-base-300); } .rz-grid-table-composite { @@ -264,17 +245,17 @@ --rz-grid-header-cell-border: var(--rz-border-base-300); } -.rz-paginator-pages { +.rz-pager-pages { max-height: 3rem; } -.rz-paginator-element { +.rz-pager-element { box-shadow: var(--rz-shadow-0) !important; } -.rz-paginator-element:hover { +.rz-pager-element:hover { box-shadow: var(--rz-shadow-0) !important; } -.rz-paginator-element:active { +.rz-pager-element:active { box-shadow: var(--rz-shadow-0) !important; } @@ -417,155 +398,20 @@ } @font-face { - font-family: "Material Icons"; - font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); -} -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 300; - src: url("../fonts/roboto-v30-latin-300.woff") format("woff"); -} -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 400; - src: url("../fonts/roboto-v30-latin-regular.woff") format("woff"); -} -@font-face { - font-family: "Roboto"; + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - font-weight: 500; - src: url("../fonts/roboto-v30-latin-500.woff") format("woff"); + font-weight: 100 700; } @font-face { font-family: "Roboto"; - font-style: normal; - font-weight: 700; - src: url("../fonts/roboto-v30-latin-700.woff") format("woff"); -} -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #fafafa; - --rz-base-100: #f5f5f5; - --rz-base-200: #eeeeee; - --rz-base-300: #e0e0e0; - --rz-base-400: #bdbdbd; - --rz-base-500: #9e9e9e; - --rz-base-600: #757575; - --rz-base-700: #616161; - --rz-base-800: #424242; - --rz-base-900: #212121; - --rz-primary: #4340D2; - --rz-primary-light: #6966db; - --rz-primary-lighter: rgba(67, 64, 210, 0.12); - --rz-primary-dark: #3633a8; - --rz-primary-darker: #2e2c8f; - --rz-secondary: #e91e63; - --rz-secondary-light: #ed4b82; - --rz-secondary-lighter: rgba(233, 30, 99, 0.12); - --rz-secondary-dark: #ba184f; - --rz-secondary-darker: #9e1443; - --rz-info: #2196f3; - --rz-info-light: #4dabf5; - --rz-info-lighter: rgba(33, 150, 243, 0.2); - --rz-info-dark: #1a78c2; - --rz-info-darker: #1666a5; - --rz-success: #4caf50; - --rz-success-light: #70bf73; - --rz-success-lighter: rgba(76, 175, 80, 0.16); - --rz-success-dark: #3d8c40; - --rz-success-darker: #347736; - --rz-warning: #ff9800; - --rz-warning-light: #ffad33; - --rz-warning-lighter: rgba(255, 152, 0, 0.2); - --rz-warning-dark: #cc7a00; - --rz-warning-darker: #ad6700; - --rz-danger: #f44336; - --rz-danger-light: #f6695e; - --rz-danger-lighter: rgba(244, 67, 54, 0.2); - --rz-danger-dark: #c3362b; - --rz-danger-darker: #a62e25; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #4340D2; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #e91e63; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2196f3; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #4caf50; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #ff9800; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f44336; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #3700b3; - --rz-series-2: #ba68c8; - --rz-series-3: #f06292; - --rz-series-4: #ff8a65; - --rz-series-5: #ffee58; - --rz-series-6: #9ccc65; - --rz-series-7: #26a69a; - --rz-series-8: #4fc3f7; - --rz-series-9: #7f5cce; - --rz-series-10: #ce93d8; - --rz-series-11: #f48fb1; - --rz-series-12: #ffab91; - --rz-series-13: #fff176; - --rz-series-14: #aed581; - --rz-series-15: #4db6ac; - --rz-series-16: #81d4fa; - --rz-series-17: #a58cdd; - --rz-series-18: #e1bee7; - --rz-series-19: #f8bbd0; - --rz-series-20: #ffccbc; - --rz-series-21: #fff59d; - --rz-series-22: #c5e1a5; - --rz-series-23: #80cbc4; - --rz-series-24: #b3e5fc; -} - -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 1rem; - --rz-body-line-height: 1.5; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Roboto, sans-serif; - --rz-icon-size: 1.5rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-primary); + src: url("../fonts/RobotoFlex.woff2") format("woff2 supports variations"), url("../fonts/RobotoFlex.woff2") format("woff2-variations"); + font-weight: 100 1000; } - -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +*, +*::before, +*::after { + box-sizing: inherit; } .rz-text-title-color { @@ -592,146 +438,12 @@ color: var(--rz-white) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -:root { - --rz-base-background-color: var(--rz-white); -} - -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); -} - -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-focus: var(--rz-border-width) solid var(--rz-primary); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-300); -} - -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; -} - -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; -} - -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } .rz-border-radius-1 { @@ -774,135 +486,6 @@ border-radius: var(--rz-border-radius-10) !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); -} - -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); -} - -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.14); - --rz-shadow-2: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.14); - --rz-shadow-3: 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 3px 3px rgba(0, 0, 0, 0.12), 0px 1px 8px rgba(0, 0, 0, 0.14); - --rz-shadow-4: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); - --rz-shadow-5: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.14); - --rz-shadow-6: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.14); - --rz-shadow-7: 0px 9px 12px rgba(0, 0, 0, 0.14), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 5px 6px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0px 12px 17px rgba(0, 0, 0, 0.14), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 7px 8px rgba(0, 0, 0, 0.14); - --rz-shadow-9: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14); - --rz-shadow-10: 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 11px 15px rgba(0, 0, 0, 0.14); -} - .rz-shadow-0 { box-shadow: var(--rz-shadow-0) !important; } @@ -947,11 +530,6 @@ $rz-shadow-10: none !default; */ box-shadow: var(--rz-shadow-10) !important; } -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; -} - .rz-display-none { display: none !important; } @@ -1224,6 +802,10 @@ $rz-shadow-10: none !default; */ color: var(--rz-black) !important; } +.rz-color-base { + color: var(--rz-base) !important; +} + .rz-color-base-50 { color: var(--rz-base-50) !important; } @@ -1264,6 +846,22 @@ $rz-shadow-10: none !default; */ color: var(--rz-base-900) !important; } +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + .rz-color-primary { color: var(--rz-primary) !important; } @@ -1384,6 +982,26 @@ $rz-shadow-10: none !default; */ color: var(--rz-danger-darker) !important; } +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + .rz-color-on-primary { color: var(--rz-on-primary) !important; } @@ -1608,6 +1226,10 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-black) !important; } +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + .rz-background-color-base-50 { background-color: var(--rz-base-50) !important; } @@ -1648,6 +1270,22 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-base-900) !important; } +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + .rz-background-color-primary { background-color: var(--rz-primary) !important; } @@ -1768,6 +1406,26 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-danger-darker) !important; } +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + .rz-background-color-on-primary { background-color: var(--rz-on-primary) !important; } @@ -1992,6 +1650,10 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + .rz-border-color-base-50 { border-color: var(--rz-base-50) !important; } @@ -2032,6 +1694,22 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + .rz-border-color-primary { border-color: var(--rz-primary) !important; } @@ -2152,6 +1830,26 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-color-on-primary { border-color: var(--rz-on-primary) !important; } @@ -2380,6 +2078,12 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + .rz-border-base-50 { border-width: var(--rz-border-width); border-style: solid; @@ -2440,6 +2144,30 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + .rz-border-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2620,6 +2348,36 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-on-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2963,6 +2721,10 @@ $rz-shadow-10: none !default; */ background-size: 100%; } +body { + margin: 0; +} + .rz-m-0 { margin: 0 !important; } @@ -8259,7 +8021,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -8268,7 +8031,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -8277,7 +8041,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -8286,7 +8051,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -8295,7 +8061,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -8304,126 +8071,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: normal; - --rz-text-display-h1-font-weight: 100; - --rz-text-display-h1-letter-spacing: -1.5px; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); - --rz-text-display-h2-line-height: normal; - --rz-text-display-h2-font-weight: 100; - --rz-text-display-h2-letter-spacing: -0.5px; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h3-line-height: normal; - --rz-text-display-h3-font-weight: 400; - --rz-text-display-h3-letter-spacing: 0; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); - --rz-text-display-h4-line-height: normal; - --rz-text-display-h4-font-weight: 400; - --rz-text-display-h4-letter-spacing: 0.25px; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h5-line-height: normal; - --rz-text-display-h5-font-weight: 400; - --rz-text-display-h5-letter-spacing: 0; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); - --rz-text-display-h6-line-height: normal; - --rz-text-display-h6-font-weight: 500; - --rz-text-display-h6-letter-spacing: 0.15px; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-h1-line-height: normal; - --rz-text-h1-font-weight: 100; - --rz-text-h1-letter-spacing: -1.5px; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); - --rz-text-h2-line-height: normal; - --rz-text-h2-font-weight: 100; - --rz-text-h2-letter-spacing: -0.5px; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: normal; - --rz-text-h3-font-weight: 400; - --rz-text-h3-letter-spacing: 0; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); - --rz-text-h4-line-height: normal; - --rz-text-h4-font-weight: 400; - --rz-text-h4-letter-spacing: 0.25px; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: normal; - --rz-text-h5-font-weight: 400; - --rz-text-h5-letter-spacing: 0; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); - --rz-text-h6-line-height: normal; - --rz-text-h6-font-weight: 500; - --rz-text-h6-letter-spacing: 0.15px; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.5; - --rz-text-subtitle1-font-weight: 400; - --rz-text-subtitle1-letter-spacing: 0.15px; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.5; - --rz-text-subtitle2-font-weight: 500; - --rz-text-subtitle2-letter-spacing: 0.1px; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.5; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: 0.5px; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.5; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: 0.25px; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: normal; - --rz-text-button-font-weight: 500; - --rz-text-button-letter-spacing: 1.25px; - --rz-text-button-text-transform: uppercase; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } .rz-text-display-h1 { @@ -8433,7 +8082,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -8443,7 +8093,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -8453,7 +8104,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -8463,7 +8115,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -8473,7 +8126,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -8483,7 +8137,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -8493,7 +8148,8 @@ h6.rz-heading { font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -8503,7 +8159,8 @@ h6.rz-heading { font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -8513,7 +8170,8 @@ h6.rz-heading { font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -8523,7 +8181,8 @@ h6.rz-heading { font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -8533,7 +8192,8 @@ h6.rz-heading { font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -8543,7 +8203,8 @@ h6.rz-heading { font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -8553,7 +8214,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -8563,7 +8225,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -8573,7 +8236,8 @@ h6.rz-heading { font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -8583,7 +8247,8 @@ h6.rz-heading { font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -8594,7 +8259,8 @@ h6.rz-heading { letter-spacing: var(--rz-text-button-letter-spacing); text-transform: var(--rz-text-button-text-transform); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -8604,7 +8270,8 @@ h6.rz-heading { font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -8615,7 +8282,8 @@ h6.rz-heading { letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -8834,24 +8502,21 @@ h6.rz-heading { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; -} - .rz-layout ::selection { background-color: var(--rz-text-selection-background-color); color: var(--rz-text-selection-color); @@ -8860,8 +8525,9 @@ h6.rz-heading { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -8872,7 +8538,7 @@ h6.rz-heading { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -8893,14 +8559,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -8925,6 +8583,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -8948,98 +8623,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: var(--rz-shadow-1); - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: var(--rz-shadow-3); - --rz-button-hover-gradient: none; - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: var(--rz-shadow-3); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-normal); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: var(--rz-shadow-6); - --rz-button-active-gradient: none; - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -9047,18 +8696,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -9083,6 +8720,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -9114,59 +8763,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -9353,10 +8949,63 @@ p-button[type] { outline-color: var(--rz-success); } -.rz-button.rz-variant-outlined.rz-primary { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); color: var(--rz-primary-light); } @@ -9382,59 +9031,6 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - .rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } @@ -9609,76 +9205,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); -} -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); } -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -9839,84 +9440,132 @@ p-button[type] { box-shadow: none; } -.rz-paginator-element, .rz-button-lg { - font-size: 1rem; - font-weight: 500; - padding: 0.75rem 1.5rem; - height: auto; - line-height: 1.5rem; - min-height: 3rem; - min-width: 3rem; - letter-spacing: 1.25px; - text-transform: uppercase; -} -.rz-paginator-element .rz-button-box, .rz-button-lg .rz-button-box { - line-height: 1.5rem; - gap: 0.25rem; -} -.rz-button-icon-left.rz-paginator-element, .rz-button-lg.rz-button-icon-left { - padding: 0 1.375rem; +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; } -.rz-paginator-element, .rz-button-lg.rz-button-icon-only { - padding: 0.75rem; +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); } -.rz-paginator-element .rzi, .rz-button-lg .rzi { - font-size: 1.5rem; - height: 1.5rem; - line-height: 1.5rem; - width: 1.5rem; +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); } - -.rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: 0.875rem; - font-weight: 500; - padding: 0.5rem 1rem; - height: auto; - line-height: 1.25rem; - min-height: 2.25rem; - min-width: 2.25rem; - letter-spacing: 1.25px; - text-transform: uppercase; +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; } -.rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { - line-height: 1.25rem; - gap: 0.25rem; +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); } -.rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { - padding: 0 1.375rem; +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); } -.rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only, .rz-button-md.rz-paginator-element { - padding: 0.5rem; +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; } -.rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-pager-element, .rz-button-lg { + padding: 0.75rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3rem; + min-width: 3rem; + font-size: 1rem; + font-weight: 500; + letter-spacing: 1.25px; + text-transform: uppercase; +} +.rz-pager-element .rz-button-box, .rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-pager-element, .rz-button-lg.rz-button-icon-only { + padding: 0.75rem; +} +.rz-pager-element .rzi, .rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 1.25px; + text-transform: uppercase; +} +.rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-md.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-md.rz-button-icon-only, .rz-button-md.rz-pager-element { + padding: 0.5rem; +} +.rz-button-md .rzi { font-size: 1.25rem; height: 1.25rem; line-height: 1.25rem; width: 1.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: 0.75rem; - font-weight: 500; +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.375rem 0.75rem; height: auto; line-height: 1rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: 0.75rem; + font-weight: 500; letter-spacing: 0.75px; text-transform: uppercase; } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0 1.375rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.375rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: 1rem; height: 1rem; line-height: 1rem; @@ -9924,13 +9573,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 500; padding: 0.25rem 0.5rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 500; letter-spacing: 0; text-transform: uppercase; } @@ -9941,7 +9590,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0 1rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.25rem; } .rz-button-xs .rzi { @@ -9959,19 +9608,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 500; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -10013,15 +9651,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -10172,6 +9801,41 @@ p-button[type] { color: var(--rz-on-success-darker); } +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + .rz-variant-outlined.rz-badge-primary { background-color: transparent; } @@ -10196,22 +9860,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} - -.rz-variant-outlined.rz-badge-dark { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} - .rz-variant-outlined.rz-badge-secondary { background-color: transparent; } @@ -10356,6 +10004,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -10375,16 +10063,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -10499,20 +10177,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0.125rem 0.125rem 0.125rem 0.75rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: calc(4 * var(--rz-border-radius)); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -10526,57 +10224,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: var(--rz-body-font-size); - --rz-input-height: 2.5rem; - --rz-input-line-height: var(--rz-body-line-height); - --rz-input-padding: 0.4375rem 0.9375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: none; - --rz-input-hover-shadow: none; - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-primary); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: none; - --rz-input-disabled-background-color: var(--rz-base-background-color); - --rz-input-disabled-color: var(--rz-text-disabled-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: var(--rz-transition-all), width 0, height 0; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -10587,26 +10260,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -10625,15 +10301,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-primary); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: none; - --rz-header-color: var(--rz-on-primary); - --rz-header-shadow: var(--rz-shadow-4); -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -10652,14 +10319,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: none; - --rz-footer-color: var(--rz-text-secondary-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -10674,18 +10333,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 300px; - --rz-sidebar-border-right: var(--rz-border-base-200); - --rz-sidebar-background-color: var(--rz-base-background-color); - --rz-sidebar-color: var(--rz-text-color); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -10694,7 +10345,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -10713,17 +10364,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-background-color); - --rz-card-shadow: var(--rz-shadow-1); - --rz-card-border: var(--rz-border-base-300); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -10753,13 +10395,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -10773,32 +10408,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 1rem; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: var(--rz-border-base-200); - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-secondary-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.5rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: 500; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.75rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0 0 0.75rem; - --rz-accordion-toggle-icon-order: 1; - --rz-accordion-selected-color: var(--rz-text-title-color); - --rz-accordion-hover-color: var(--rz-text-title-color); - --rz-accordion-content-padding: 1rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: var(--rz-shadow-1); -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -10817,16 +10428,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -10834,20 +10445,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -10857,7 +10469,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "keyboard_arrow_down"; @@ -10866,10 +10478,6 @@ input::placeholder { content: "keyboard_arrow_up"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -10877,34 +10485,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 1rem; - --rz-panel-title-line-height: 1.5rem; - --rz-panel-title-font-weight: 500; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: transparent; - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-text-title-color); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: var(--rz-shadow-1); +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "keyboard_arrow_down"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "keyboard_arrow_up"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -10955,33 +10555,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: none; - --rz-sidebar-toggle-color: var(--rz-on-primary); - --rz-sidebar-toggle-background-color: transparent; - --rz-sidebar-toggle-hover-color: var(--rz-on-primary-light); - --rz-sidebar-toggle-hover-background-color: var(--rz-primary-light); - --rz-sidebar-toggle-hover-border-radius: 50%; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -11015,37 +10601,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: none; - --rz-menu-border-radius: var(--rz-border-radius); - --rz-menu-item-padding: 0.5rem 1rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-text-title-color); - --rz-menu-item-hover-background-color: var(--rz-base-100); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-title-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-text-title-color); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-on-primary); - --rz-menu-top-item-background-color: var(--rz-primary); - --rz-menu-top-item-hover-color: var(--rz-on-primary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-on-primary); - --rz-menu-top-item-icon-color: var(--rz-on-primary); - --rz-menu-top-item-icon-hover-color: var(--rz-on-primary); - --rz-context-menu-padding: 0.5rem 0; - --rz-context-menu-box-shadow: var(--rz-shadow-6); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -11070,7 +10628,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -11092,6 +10651,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -11100,7 +10660,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -11113,7 +10674,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -11143,13 +10705,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -11158,7 +10720,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -11170,7 +10733,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -11194,16 +10758,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -11220,7 +10784,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -11280,65 +10845,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: calc(var(--rz-body-font-size) * 0.875); - --rz-panel-menu-font-weight: 500; - --rz-panel-menu-color: var(--rz-text-title-color); - --rz-panel-menu-background-color: var(--rz-base-background-color); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.04); - --rz-panel-menu-hover-color: var(--rz-text-title-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.5rem; - --rz-panel-menu-item-padding: 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-200); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter); - --rz-panel-menu-item-background-color: var(--rz-base-background-color); - --rz-panel-menu-item-active-color: var(--rz-on-primary-lighter); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0.5rem; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 0.5rem 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0 0.5rem; - --rz-panel-menu-item-2nd-level-border-radius: var(--rz-border-radius); - --rz-panel-menu-item-2nd-level-offset: 3rem; - --rz-panel-menu-item-2nd-level-font-size: calc(var(--rz-body-font-size) * 0.875); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: var(--rz-text-tertiary-color); - --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-100); - --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-background-color); - --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color); - --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter); - --rz-panel-menu-item-2nd-level-active-color: var(--rz-on-primary-lighter); - --rz-panel-menu-item-2nd-level-active-font-weight: 500; - --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-100); - --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color); - --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter); - --rz-panel-menu-item-3rd-level-active-color: var(--rz-on-primary-lighter); - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: var(--rz-text-tertiary-color); - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 1rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 1rem 0 -2.25rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -11348,10 +10868,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -11363,11 +10884,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -11378,8 +10899,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -11388,7 +10909,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -11401,7 +10923,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -11410,20 +10932,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -11447,67 +10971,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-primary); - --rz-profile-menu-border: none; - --rz-profile-menu-padding: 0.5rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-text-contrast-color); - --rz-profile-menu-item-hover-background-color: var(--rz-base-100); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -11528,19 +11037,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -11560,17 +11072,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2.5rem; - --rz-gravatar-height: 2.5rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -11578,26 +11084,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-tertiary-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.25rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-contrast-color); - --rz-steps-number-background-color: var(--rz-base-500); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -11651,14 +11139,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -11668,7 +11158,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -11691,54 +11182,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); -} -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -.rz-textarea { - padding: var(--rz-text-area-padding); - height: auto; +.rz-steps-next .rzi:before { + content: "navigate_next"; } -:root { - --rz-checkbox-width: 1.125rem; - --rz-checkbox-height: 1.125rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: 2px; - --rz-checkbox-label-margin: 0 1rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-primary); - --rz-checkbox-checked-hover-background-color: var(--rz-primary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-base-500); - --rz-checkbox-checked-color: var(--rz-on-primary); - --rz-checkbox-checked-shadow: none; - --rz-checkbox-checked-border: var(--rz-border-primary); - --rz-checkbox-checked-hover-border: var(--rz-border-primary); - --rz-checkbox-checked-disabled-border: var(--rz-border-base-500); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; } +.rz-checkbox-list-vertical { + box-sizing: border-box; +} .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -11750,10 +11229,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -11772,10 +11253,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11832,17 +11310,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-primary-lighter); - --rz-switch-box-shadow: var(--rz-shadow-1); - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-primary-lighter); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -11862,10 +11331,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -11887,8 +11356,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.25rem; height: 1.25rem; - left: 0; - margin-top: -0.625rem; + inset-inline-start: 0; + margin-block-start: -0.625rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -11897,7 +11366,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -11909,35 +11378,23 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { transform: translateX(1rem); } -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: 2px; - --rz-radio-label-margin: 0 1rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-base-background-color); - --rz-radio-active-shadow: none; - --rz-radio-checked-background-color: var(--rz-base-background-color); - --rz-radio-checked-hover-background-color: var(--rz-base-background-color); - --rz-radio-checked-hover-shadow: none; - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-primary); - --rz-radio-circle-shadow: none; - --rz-radio-circle-hover-background-color: var(--rz-primary-light); - --rz-radio-icon-width: 0.625rem; - --rz-radio-icon-height: 0.625rem; - --rz-radio-checked-border: var(--rz-border-primary); +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -11949,7 +11406,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -11972,10 +11430,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -12035,26 +11490,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-base-300); - --rz-fieldset-border-radius: var(--rz-border-radius); - --rz-fieldset-padding: 0 1rem 1rem; - --rz-fieldset-legend-color: var(--rz-text-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 1rem 0.5rem; - --rz-fieldset-legend-padding: 0 0.5rem; - --rz-fieldset-toggle-width: 1.5rem; - --rz-fieldset-toggle-margin: 0; - --rz-fieldset-toggle-height: 1.5rem; - --rz-fieldset-toggle-background-color: transparent; - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1.5rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -12083,7 +11523,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -12101,8 +11542,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -12117,36 +11560,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 1rem; - --rz-dropdown-panel-padding: 0 1rem; - --rz-dropdown-items-margin: 0 -1rem; - --rz-dropdown-items-padding: 0.5rem 0; - --rz-dropdown-item-padding: 0.75rem 1rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-base-100); - --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-shadow: none; - --rz-dropdown-item-hover-color: var(--rz-text-title-color); - --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-200); - --rz-dropdown-filter-padding: 1rem 0 0.5rem; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: 2px solid var(--rz-primary); - --rz-dropdown-panel-border: none; - --rz-dropdown-panel-shadow: var(--rz-shadow-4); - --rz-dropdown-chips-padding: 0.4375rem 0.9375rem 0.4375rem 0.4375rem; - --rz-multiselect-checkbox-margin: 0 1rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -12173,15 +11586,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -12189,8 +11603,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -12225,7 +11639,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -12318,28 +11733,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -12356,10 +11775,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -12368,7 +11788,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -12390,24 +11811,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-200); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 1rem 0 0; - --rz-listbox-header-padding: 0.75rem 1rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -12417,7 +11822,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -12460,7 +11866,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -12501,39 +11908,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -12543,9 +11940,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -12559,11 +11953,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -12572,36 +11966,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-primary-lighter); - --rz-slider-border: none; - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 4px; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-primary); - --rz-slider-range-border: none; - --rz-slider-handle-width: 20px; - --rz-slider-handle-height: 20px; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-primary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: 50%; - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-primary); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: 0px 0px 0px 10px var(--rz-primary-lighter); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-300); - --rz-slider-disabled-border: none; - --rz-slider-disabled-range-background-color: var(--rz-base-500); - --rz-slider-disabled-range-border: none; - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-500); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -12628,11 +11994,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -12641,7 +12007,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -12666,19 +12032,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-text-secondary-color); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.5; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-text-disabled-color); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -12736,16 +12091,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -12766,17 +12113,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-base-300); - --rz-selectbar-selected-background-color: var(--rz-primary-lighter); - --rz-selectbar-selected-color: var(--rz-on-primary-lighter); - --rz-selectbar-selected-border: var(--rz-border-base-300); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -12784,7 +12122,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12792,13 +12130,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12807,7 +12145,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12815,13 +12153,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12830,7 +12168,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12838,13 +12176,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12853,7 +12191,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12861,13 +12199,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12875,89 +12213,34 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-selectbar-selected-border); } -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.5rem; - --rz-datepicker-trigger-icon-color: var(--rz-text-secondary-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); - --rz-datepicker-panel-border: none; - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: var(--rz-shadow-4); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-background-color); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 3.625rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 0.75rem; - --rz-datepicker-footer-line-height: 3rem; - --rz-datepicker-calendar-padding: 0.625rem 0; - --rz-datepicker-calendar-header-font-size: 0.75rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: 0.875rem; - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-text-title-color); - --rz-datepicker-calendar-hover-background-color: var(--rz-base-100); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-border: none; - --rz-datepicker-calendar-border-radius: 50%; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-text-color); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-text-color); - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 3.5rem; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-background-color); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-base-300); - --rz-timepicker-button-color: var(--rz-text-color); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: var(--rz-border-base-300); -} - -.rz-calendar { +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -12965,9 +12248,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -13005,148 +12288,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; } -.rz-datepicker-next .rzi-chevron-right:before { + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -13177,47 +12487,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: var(--rz-body-line-height); - --rz-numeric-input-padding: 0.4375rem 1.25rem 0.4375rem 0.9375rem; - --rz-numeric-button-width: 1rem; - --rz-numeric-button-height: 1rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: transparent; - --rz-numeric-button-disabled-background-color: transparent; - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-text-color); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -13225,9 +12522,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -13235,49 +12532,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); -} - -:root { - --rz-upload-button-bar-background-color: var(--rz-base-100); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-200); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-base-200); - --rz-upload-choose-color: var(--rz-text-color); - --rz-upload-choose-hover-background-color: var(--rz-base-200); - --rz-upload-choose-hover-color: var(--rz-text-title-color); - --rz-upload-choose-active-background-color: var(--rz-base-200); - --rz-upload-choose-active-color: var(--rz-text-title-color); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -13364,101 +12642,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-base-300); - --rz-grid-right-cell-border: none; - --rz-grid-bottom-cell-border: var(--rz-border-base-300); - --rz-grid-cell-padding: 0.625rem 1rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: 0.875rem; - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-base-100); - --rz-grid-hover-color: var(--rz-text-title-color); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-primary-lighter); - --rz-grid-selected-color: var(--rz-on-primary-lighter); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: none; - --rz-grid-header-cell-border-bottom: var(--rz-border-base-300); - --rz-grid-header-background-color: var(--rz-base-background-color); - --rz-grid-header-font-size: 0.875rem; - --rz-grid-header-line-height: 1.5rem; - --rz-grid-header-font-weight: 500; - --rz-grid-header-text-transform: none; - --rz-grid-header-color: var(--rz-text-title-color); - --rz-grid-header-cell-padding: 0.75rem 0; - --rz-grid-header-title-padding: 0 0 0 1rem; - --rz-grid-header-sorted-background-color: var(--rz-base-200); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-100); - --rz-grid-filter-background-color: var(--rz-base-background-color); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: none; - --rz-grid-filter-font-size: 0.875rem; - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: 0.875rem; - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: none; - --rz-grid-filter-buttons-background-color: var(--rz-base-background-color); - --rz-grid-clear-filter-button-background-color: var(--rz-base-background-color); - --rz-grid-clear-filter-button-color: var(--rz-text-color); - --rz-grid-clear-filter-button-shadow: none; - --rz-grid-apply-filter-button-background-color: var(--rz-base-background-color); - --rz-grid-apply-filter-button-color: var(--rz-primary); - --rz-grid-apply-filter-button-shadow: none; - --rz-grid-header-filter-icon-margin: 0 1rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1.25rem; - --rz-grid-border: var(--rz-border-base-300); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1.25rem; - --rz-grid-sort-icon-height: 1.25rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: none; - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-50); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.25rem; - --rz-grid-column-resizer-helper-width: 0.125rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-100); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-base-300); - --rz-grid-frozen-cell-background-color: var(--rz-base-background-color); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 1rem; - --rz-grid-group-header-item-background-color: var(--rz-base-200); - --rz-grid-group-header-item-padding: 0.25rem 0.5rem 0.25rem 0.75rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-base-200); - --rz-grid-group-header-item-border-radius: calc(4 * var(--rz-border-radius)); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-disabled-color); - --rz-column-drag-handle-hover-color: var(--rz-text-title-color); - --rz-column-drag-handle-margin: 0; - --rz-column-draggable-shadow: var(--rz-shadow-4); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -13482,10 +12665,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -13529,8 +12716,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -13538,8 +12725,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -13565,11 +12752,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -13589,13 +12777,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -13615,11 +12804,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -13627,11 +12816,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -13645,10 +12834,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -13664,7 +12853,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -13716,7 +12905,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -13726,11 +12915,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -13753,13 +12942,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -13780,21 +12973,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -13806,7 +12999,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -13852,7 +13045,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -13866,14 +13058,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -13975,10 +13167,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -13989,28 +13177,15 @@ a:focus-visible .rz-fieldset-toggler { line-height: calc(1.25rem - var(--rz-border-width) * 2 - 2px); border-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width) - 1px); } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { text-indent: 2.25rem; } } -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); -} - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -14040,33 +13215,11 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - -.rz-datatable-loading { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--rz-grid-loading-indicator-background-color); - z-index: 2; +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; } .rz-datatable-loading-content { @@ -14130,7 +13283,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -14140,18 +13293,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -14160,9 +13352,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -14204,16 +13398,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -14246,7 +13446,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -14297,26 +13497,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -14329,7 +13533,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -14349,7 +13553,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -14357,312 +13561,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: transparent; - --rz-paginator-padding: 0.5rem 1rem; - --rz-paginator-border: none; - --rz-paginator-button-border-radius: 2rem; - --rz-paginator-numeric-button-background-color: transparent; - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: none; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-100); - --rz-paginator-numeric-button-hover-color: var(--rz-text-title-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.75rem 1rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-primary-lighter); - --rz-paginator-numeric-button-selected-color: var(--rz-on-primary-lighter); - --rz-paginator-numeric-button-selected-border: none; - --rz-paginator-numeric-button-selected-padding: 0.75rem 1rem; - --rz-paginator-numeric-button-min-width: 3rem; - --rz-paginator-back-button-background-color: transparent; - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-100); - --rz-paginator-back-button-hover-color: var(--rz-text-title-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: transparent; - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-100); - --rz-paginator-next-button-hover-color: var(--rz-text-title-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: 0.875rem; - --rz-paginator-summary-color: var(--rz-text-tertiary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: var(--rz-shadow-4); - --rz-overlay-border: none; - --rz-overlay-background-color: var(--rz-base-background-color); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -14672,24 +13836,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: transparent; - --rz-tree-node-padding: 0.25rem 0.5rem; - --rz-tree-node-selected-background-color: var(--rz-primary-lighter); - --rz-tree-node-selected-color: var(--rz-on-primary-lighter); - --rz-tree-node-selected-border-radius: var(--rz-border-radius); - --rz-tree-node-margin: 0; - --rz-tree-node-hover-background-color: var(--rz-base-100); - --rz-tree-node-hover-color: var(--rz-text-title-color); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 2rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -14706,12 +13854,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -14720,13 +13868,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "chevron_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "expand_more"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -14736,15 +13890,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -14756,7 +13912,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -14775,25 +13931,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: var(--rz-shadow-1); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-300); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: var(--rz-shadow-0); - --rz-datalist-item-border: var(--rz-border-base-300); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -14812,13 +13954,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -14827,24 +13970,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -14866,7 +14002,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -14877,23 +14014,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -14903,17 +14040,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -14926,70 +14064,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-base-300); - --rz-scheduler-border-color: var(--rz-base-300); - --rz-scheduler-minor-border-color: var(--rz-base-200); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: var(--rz-shadow-0); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-background-color); - --rz-scheduler-toolbar-title-font-size: 1.5rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-base-background-color); - --rz-scheduler-prev-next-button-color: var(--rz-text-color); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: 2rem; - --rz-scheduler-next-button-border-radius: 2rem; - --rz-scheduler-today-button-margin-left: 1rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.875rem; - --rz-scheduler-today-button-text-transform: capitalize; - --rz-scheduler-view-button-border: var(--rz-border-base-300); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); - --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); - --rz-scheduler-view-selected-border-color: var(--rz-base-300); - --rz-scheduler-header-background-color: var(--rz-base-background-color); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: var(--rz-border-base-300); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 0.25rem; - --rz-scheduler-year-slot-title-width: fit-content; - --rz-scheduler-year-slot-title-border-radius: 50%; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -15005,7 +14081,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -15018,12 +14094,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -15033,27 +14109,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -15088,8 +14165,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -15149,16 +14226,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -15175,25 +14252,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -15207,7 +14297,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -15219,24 +14309,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -15246,11 +14336,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -15278,7 +14368,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -15294,7 +14384,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -15302,7 +14392,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -15351,7 +14441,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -15400,7 +14490,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -15446,8 +14536,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15456,15 +14546,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15497,8 +14587,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15507,15 +14597,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15545,35 +14635,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1rem; - --rz-tabs-shadow: none; - --rz-tabs-border: none; - --rz-tabs-border-radius: 0; - --rz-tabs-background-color: transparent; - --rz-tabs-tab-font-size: 0.875rem; - --rz-tabs-tab-line-height: 1.5rem; - --rz-tabs-tab-font-weight: 500; - --rz-tabs-tab-text-transform: uppercase; - --rz-tabs-tab-letter-spacing: 1.25px; - --rz-tabs-tab-padding: 0.75rem 1rem; - --rz-tabs-tab-background-color: transparent; - --rz-tabs-tab-color: var(--rz-text-secondary-color); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-primary); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-200); - --rz-tabs-tab-hover-color: var(--rz-text-title-color); - --rz-tabs-tab-focus-background-color: var(--rz-base-200); - --rz-tabs-tab-focus-color: var(--rz-text-title-color); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -15627,7 +14690,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -15670,7 +14734,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -15690,7 +14754,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -15725,6 +14789,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -15755,21 +14822,13 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-tabs-padding); } -.rz-tabview-left-icon { +.rz-tabview-icon { font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: var(--rz-body-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -15795,8 +14854,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15813,8 +14872,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15858,29 +14917,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: var(--rz-shadow-9); - --rz-dialog-title-background-color: var(--rz-base-background-color); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 1.5rem 1.5rem 0 1.5rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.5rem; - --rz-dialog-title-font-weight: 500; - --rz-dialog-title-letter-spacing: 0.0125em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-title-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.5rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -15893,6 +14931,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -15907,37 +14946,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -15949,7 +15006,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -15963,7 +15020,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -15976,42 +15033,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -16044,161 +15074,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); -} - -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); -} - -.rz-dialog-side-titlebar-close { - float: right; -} -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); -} -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; -} -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); -} - -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: var(--rz-white); - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-success); - --rz-notification-success-background-color: var(--rz-success-lighter); - --rz-notification-success-icon-color: var(--rz-success); - --rz-notification-warning-color: var(--rz-warning); - --rz-notification-warning-background-color: var(--rz-warning-lighter); - --rz-notification-warning-icon-color: var(--rz-warning); - --rz-notification-error-color: var(--rz-danger); - --rz-notification-error-background-color: var(--rz-danger-lighter); - --rz-notification-error-icon-color: var(--rz-danger); - --rz-notification-info-color: var(--rz-info); - --rz-notification-info-background-color: var(--rz-info-lighter); - --rz-notification-info-icon-color: var(--rz-info); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } } - -.rz-growl { +.rz-notification { + box-sizing: border-box; position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-growl-item-container { +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-growl-item { +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); border-radius: var(--rz-notification-border-radius); box-shadow: var(--rz-notification-shadow); padding: var(--rz-notification-padding); } - -.rz-growl-message-success .rz-growl-item { +.rz-notification-success .rz-notification-item { color: var(--rz-notification-success-color); background-color: var(--rz-notification-success-background-color); } - -.rz-growl-message-warn .rz-growl-item { +.rz-notification-warn .rz-notification-item { color: var(--rz-notification-warning-color); background-color: var(--rz-notification-warning-background-color); } - -.rz-growl-message-error .rz-growl-item { +.rz-notification-error .rz-notification-item { color: var(--rz-notification-error-color); background-color: var(--rz-notification-error-background-color); } - -.rz-growl-message-info .rz-growl-item { +.rz-notification-info .rz-notification-item { color: var(--rz-notification-info-color); background-color: var(--rz-notification-info-background-color); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-icon-close { - float: right; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close:before { - content: "close"; + +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1.5rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(244, 67, 54, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -16223,16 +15217,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: rgba(0, 0, 0, 0.12); - --rz-scrollbar-border-radius: 0; - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } .rz-layout::-webkit-scrollbar, @@ -16261,14 +15247,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: rgba(0, 0, 0, 0.04); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -16298,7 +15278,7 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -16310,12 +15290,15 @@ a:focus-visible .rz-fieldset-toggler { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -16325,11 +15308,6 @@ a:focus-visible .rz-fieldset-toggler { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: rgba(0, 0, 0, 0.04); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -16339,24 +15317,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -16366,14 +15331,8 @@ a:focus-visible .rz-fieldset-toggler { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -16385,18 +15344,9 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -16445,19 +15395,8 @@ a:focus-visible .rz-fieldset-toggler { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-primary-lighter); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 0.25rem; - --rz-progressbar-border-radius: 0; - --rz-progressbar-value-background-color: var(--rz-primary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 0; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: square; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -16485,6 +15424,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -16545,6 +15485,9 @@ a:focus-visible .rz-fieldset-toggler { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -16556,6 +15499,9 @@ a:focus-visible .rz-fieldset-toggler { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -16576,6 +15522,26 @@ a:focus-visible .rz-fieldset-toggler { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -16621,54 +15587,12 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); } -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar.rz-progressbar-secondary { - color: var(--rz-on-secondary); -} - -.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { - background-color: var(--rz-secondary); +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); } .rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { stroke: var(--rz-secondary); @@ -16726,6 +15650,27 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -16768,6 +15713,69 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-success); } +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + .rz-progressbar-circular-lg { width: 6rem; height: 6rem; @@ -16792,19 +15800,8 @@ a:focus-visible .rz-fieldset-toggler { font-size: calc(var(--rz-progressbar-font-size) * 0.375); } -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-base-500); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); -} - .rz-chart { + box-sizing: border-box; position: relative; height: 300px; } @@ -17576,6 +16573,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -17699,6 +16700,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -17725,24 +16727,8 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-border-base-300); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary-lighter); - --rz-editor-button-selected-color: var(--rz-on-secondary-lighter); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -17927,30 +16913,6 @@ a:focus-visible .rz-fieldset-toggler { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -18027,7 +16989,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -18099,7 +17061,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -18112,7 +17074,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -18127,6 +17089,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -18138,27 +17101,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -18174,15 +17134,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -18194,15 +17152,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-primary); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-primary); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -18224,7 +17175,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -18239,7 +17190,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -18326,11 +17277,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -18364,8 +17332,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -18373,8 +17351,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -18388,22 +17366,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: var(--rz-border-radius); - --rz-alert-message-margin: 0.125rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.125rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -19232,30 +18196,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -19274,16 +18243,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -19659,279 +18625,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -20276,36 +19242,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.5rem 0 0; - --rz-form-field-start-end-padding: 0 0.75rem; - --rz-form-field-filled-height: 3.375rem; - --rz-form-field-filled-padding: 1.4375rem 0.9375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.4375rem 1.25rem 0.4375rem 0.9375rem; - --rz-form-field-filled-background-color: var(--rz-base-200); - --rz-form-field-filled-hover-background-color: var(--rz-base-300); - --rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-200); - --rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-300); - --rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-200); - --rz-form-field-filled-border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0; - --rz-form-field-filled-label-floating-top: 0.5rem; - --rz-form-field-filled-hover-shadow: none; - --rz-form-field-filled-focus-shadow: none; - --rz-form-field-filled-underline-display: block; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0 0.25rem; - --rz-form-field-text-label-padding: 0; - --rz-form-field-label-left: 0.6875rem; - --rz-form-field-label-textarea-top: 0.5rem; - --rz-form-field-label-floating-top: -0.5625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 1rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -20315,11 +19251,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -20328,12 +19265,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -20361,20 +19298,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -20419,33 +19358,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -20462,16 +19404,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -20479,33 +19421,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -20522,27 +19464,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 1rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -21087,6 +20017,7 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; width: 100%; height: 100%; --rz-gap: 1rem; @@ -21106,4 +20037,1560 @@ button.rz-colorpicker-trigger .rzi:before { .rz-picklist-buttons.rz-flex-row .rzi { transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #eeeeee; + --rz-base-50: #fafafa; + --rz-base-100: #f5f5f5; + --rz-base-200: #eeeeee; + --rz-base-300: #e0e0e0; + --rz-base-400: #bdbdbd; + --rz-base-500: #9e9e9e; + --rz-base-600: #757575; + --rz-base-700: #616161; + --rz-base-800: #424242; + --rz-base-900: #212121; + --rz-base-light: #f5f5f5; + --rz-base-lighter: #ffffff; + --rz-base-dark: #757575; + --rz-base-darker: #212121; + --rz-primary: #4340D2; + --rz-primary-light: #6966db; + --rz-primary-lighter: rgba(67, 64, 210, 0.12); + --rz-primary-dark: #3633a8; + --rz-primary-darker: #2e2c8f; + --rz-secondary: #e91e63; + --rz-secondary-light: #ed4b82; + --rz-secondary-lighter: rgba(233, 30, 99, 0.12); + --rz-secondary-dark: #ba184f; + --rz-secondary-darker: #9e1443; + --rz-info: #2196f3; + --rz-info-light: #4dabf5; + --rz-info-lighter: rgba(33, 150, 243, 0.2); + --rz-info-dark: #1a78c2; + --rz-info-darker: #1666a5; + --rz-success: #4caf50; + --rz-success-light: #70bf73; + --rz-success-lighter: rgba(76, 175, 80, 0.16); + --rz-success-dark: #3d8c40; + --rz-success-darker: #347736; + --rz-warning: #ff9800; + --rz-warning-light: #ffad33; + --rz-warning-lighter: rgba(255, 152, 0, 0.2); + --rz-warning-dark: #cc7a00; + --rz-warning-darker: #ad6700; + --rz-danger: #f44336; + --rz-danger-light: #f6695e; + --rz-danger-lighter: rgba(244, 67, 54, 0.2); + --rz-danger-dark: #c3362b; + --rz-danger-darker: #a62e25; + --rz-on-base: #212121; + --rz-on-base-light: #212121; + --rz-on-base-lighter: #212121; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #4340D2; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #e91e63; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2196f3; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #4caf50; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #ff9800; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f44336; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #3700b3; + --rz-series-2: #ba68c8; + --rz-series-3: #f06292; + --rz-series-4: #ff8a65; + --rz-series-5: #ffee58; + --rz-series-6: #9ccc65; + --rz-series-7: #26a69a; + --rz-series-8: #4fc3f7; + --rz-series-9: #7f5cce; + --rz-series-10: #ce93d8; + --rz-series-11: #f48fb1; + --rz-series-12: #ffab91; + --rz-series-13: #fff176; + --rz-series-14: #aed581; + --rz-series-15: #4db6ac; + --rz-series-16: #81d4fa; + --rz-series-17: #a58cdd; + --rz-series-18: #e1bee7; + --rz-series-19: #f8bbd0; + --rz-series-20: #ffccbc; + --rz-series-21: #fff59d; + --rz-series-22: #c5e1a5; + --rz-series-23: #80cbc4; + --rz-series-24: #b3e5fc; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 1rem; + --rz-body-line-height: 1.5; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Roboto, sans-serif; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: normal; + --rz-text-display-h1-font-weight: 400; + --rz-text-display-h1-letter-spacing: -1.5px; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); + --rz-text-display-h2-line-height: normal; + --rz-text-display-h2-font-weight: 400; + --rz-text-display-h2-letter-spacing: -0.5px; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h3-line-height: normal; + --rz-text-display-h3-font-weight: 400; + --rz-text-display-h3-letter-spacing: 0; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); + --rz-text-display-h4-line-height: normal; + --rz-text-display-h4-font-weight: 400; + --rz-text-display-h4-letter-spacing: 0.25px; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h5-line-height: normal; + --rz-text-display-h5-font-weight: 400; + --rz-text-display-h5-letter-spacing: 0; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); + --rz-text-display-h6-line-height: normal; + --rz-text-display-h6-font-weight: 500; + --rz-text-display-h6-letter-spacing: 0.15px; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-h1-line-height: normal; + --rz-text-h1-font-weight: 400; + --rz-text-h1-letter-spacing: -1.5px; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); + --rz-text-h2-line-height: normal; + --rz-text-h2-font-weight: 400; + --rz-text-h2-letter-spacing: -0.5px; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: normal; + --rz-text-h3-font-weight: 400; + --rz-text-h3-letter-spacing: 0; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); + --rz-text-h4-line-height: normal; + --rz-text-h4-font-weight: 400; + --rz-text-h4-letter-spacing: 0.25px; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: normal; + --rz-text-h5-font-weight: 400; + --rz-text-h5-letter-spacing: 0; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); + --rz-text-h6-line-height: normal; + --rz-text-h6-font-weight: 500; + --rz-text-h6-letter-spacing: 0.15px; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.5; + --rz-text-subtitle1-font-weight: 400; + --rz-text-subtitle1-letter-spacing: 0.15px; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.5; + --rz-text-subtitle2-font-weight: 500; + --rz-text-subtitle2-letter-spacing: 0.1px; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.5; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: 0.5px; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.5; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: 0.25px; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: normal; + --rz-text-button-font-weight: 500; + --rz-text-button-letter-spacing: 1.25px; + --rz-text-button-text-transform: uppercase; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-focus: var(--rz-border-width) solid var(--rz-primary); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-300); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.14); + --rz-shadow-2: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-3: 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 3px 3px rgba(0, 0, 0, 0.12), 0px 1px 8px rgba(0, 0, 0, 0.14); + --rz-shadow-4: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); + --rz-shadow-5: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-6: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-7: 0px 9px 12px rgba(0, 0, 0, 0.14), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 5px 6px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0px 12px 17px rgba(0, 0, 0, 0.14), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 7px 8px rgba(0, 0, 0, 0.14); + --rz-shadow-9: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14); + --rz-shadow-10: 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 11px 15px rgba(0, 0, 0, 0.14); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 1rem; + --rz-accordion-item-padding-inline: 1rem; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: var(--rz-border-base-200); + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-secondary-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.5rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: 500; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.75rem; + --rz-accordion-toggle-icon-margin-inline: 0.75rem 0; + --rz-accordion-toggle-icon-order: 1; + --rz-accordion-selected-color: var(--rz-text-title-color); + --rz-accordion-hover-color: var(--rz-text-title-color); + --rz-accordion-content-padding-inline: 1rem; + --rz-accordion-content-padding-block: 1rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: var(--rz-shadow-1); + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.125rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.125rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 500; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: var(--rz-shadow-1); + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: var(--rz-shadow-3); + --rz-button-hover-gradient: none; + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: var(--rz-shadow-3); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-normal); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: var(--rz-shadow-6); + --rz-button-active-gradient: none; + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-background-color); + --rz-card-shadow: var(--rz-shadow-1); + --rz-card-border: var(--rz-border-base-300); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-base-500); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.125rem; + --rz-checkbox-height: 1.125rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: 2px; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-primary); + --rz-checkbox-checked-hover-background-color: var(--rz-primary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-base-500); + --rz-checkbox-checked-color: var(--rz-on-primary); + --rz-checkbox-checked-shadow: none; + --rz-checkbox-checked-border: var(--rz-border-primary); + --rz-checkbox-checked-hover-border: var(--rz-border-primary); + --rz-checkbox-checked-disabled-border: var(--rz-border-base-500); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0.125rem; + --rz-chip-padding-inline: 0.75rem 0.125rem; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: calc(4 * var(--rz-border-radius)); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: var(--rz-shadow-1); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-300); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: var(--rz-shadow-0); + --rz-datalist-item-border: var(--rz-border-base-300); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.5rem; + --rz-datepicker-trigger-icon-color: var(--rz-text-secondary-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); + --rz-datepicker-popup-width: 22rem; + --rz-datepicker-panel-border: none; + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: var(--rz-shadow-4); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-background-color); + --rz-datepicker-header-padding-block: 0.75rem; + --rz-datepicker-header-padding-inline: 0.75rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 0.75rem; + --rz-datepicker-footer-line-height: 3rem; + --rz-datepicker-prev-next-icon-size: 2rem; + --rz-datepicker-prev-next-button-border-radius: 50%; + --rz-datepicker-calendar-padding-block: 0 0.75rem; + --rz-datepicker-calendar-padding-inline: 0.75rem; + --rz-datepicker-calendar-item-padding: 0.625rem 0; + --rz-datepicker-calendar-header-font-size: 0.75rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: 0.875rem; + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-text-title-color); + --rz-datepicker-calendar-hover-background-color: var(--rz-base-100); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-border: none; + --rz-datepicker-calendar-border-radius: 50%; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-text-color); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-text-color); + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8.75rem; + --rz-datepicker-year-dropdown-width: 6rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-background-color); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.75rem; + --rz-timepicker-padding-inline: 0.75rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-text-color); + --rz-timepicker-button-background-color: var(--rz-base-300); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: var(--rz-border-base-300); + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: var(--rz-shadow-9); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 1.5rem 0; + --rz-dialog-title-padding-inline: 1.5rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.5rem; + --rz-dialog-title-font-weight: 500; + --rz-dialog-title-letter-spacing: 0.0125em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-title-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.5rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 1rem; + --rz-dropdown-panel-padding: 0 1rem; + --rz-dropdown-items-margin: 0 -1rem; + --rz-dropdown-items-padding: 0.5rem 0; + --rz-dropdown-item-padding: 0.75rem 1rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-base-100); + --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-shadow: none; + --rz-dropdown-item-hover-color: var(--rz-text-title-color); + --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-200); + --rz-dropdown-filter-padding: 1rem 0 0.5rem; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: 2px solid var(--rz-primary); + --rz-dropdown-panel-border: none; + --rz-dropdown-panel-shadow: var(--rz-shadow-4); + --rz-dropdown-chips-padding-block: 0.4375rem; + --rz-dropdown-chips-padding-inline: 0.4375rem 0.9375rem; + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 1rem; + /* Editor */ + --rz-editor-border: var(--rz-border-base-300); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary-lighter); + --rz-editor-button-selected-color: var(--rz-on-secondary-lighter); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-300); + --rz-fieldset-border-radius: var(--rz-border-radius); + --rz-fieldset-padding: 0 1rem 1rem; + --rz-fieldset-legend-color: var(--rz-text-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0 1rem; + --rz-fieldset-legend-margin-inline: 0.5rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 0.5rem; + --rz-fieldset-toggle-width: 1.5rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0; + --rz-fieldset-toggle-height: 1.5rem; + --rz-fieldset-toggle-background-color: transparent; + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1.5rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: none; + --rz-footer-color: var(--rz-text-secondary-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.5rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: 0.75rem; + --rz-form-field-filled-height: 3.375rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.9375rem; + --rz-form-field-filled-numeric-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-numeric-padding-inline: 0.9375rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-200); + --rz-form-field-filled-hover-background-color: var(--rz-base-300); + --rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-200); + --rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-300); + --rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-200); + --rz-form-field-filled-border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0; + --rz-form-field-filled-label-floating-top: 0.5rem; + --rz-form-field-filled-hover-shadow: none; + --rz-form-field-filled-focus-shadow: none; + --rz-form-field-filled-underline-display: block; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0 0.25rem; + --rz-form-field-text-label-padding: 0; + --rz-form-field-label-inset-inline-start: 0.6875rem; + --rz-form-field-label-textarea-top: 0.5rem; + --rz-form-field-label-floating-top: -0.5625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 1rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(244, 67, 54, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2.5rem; + --rz-gravatar-height: 2.5rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-base-300); + --rz-grid-right-cell-border: none; + --rz-grid-bottom-cell-border: var(--rz-border-base-300); + --rz-grid-cell-padding: 0.625rem 1rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: 0.875rem; + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-base-100); + --rz-grid-hover-color: var(--rz-text-title-color); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-primary-lighter); + --rz-grid-selected-color: var(--rz-on-primary-lighter); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: none; + --rz-grid-header-cell-border-bottom: var(--rz-border-base-300); + --rz-grid-header-background-color: var(--rz-base-background-color); + --rz-grid-header-font-size: 0.875rem; + --rz-grid-header-line-height: 1.5rem; + --rz-grid-header-font-weight: 500; + --rz-grid-header-text-transform: none; + --rz-grid-header-color: var(--rz-text-title-color); + --rz-grid-header-cell-padding: 0.75rem 0; + --rz-grid-header-title-padding-inline: 1rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-200); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-100); + --rz-grid-filter-background-color: var(--rz-base-background-color); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: none; + --rz-grid-filter-font-size: 0.875rem; + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: 0.875rem; + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-background-color); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base-background-color); + --rz-grid-clear-filter-button-color: var(--rz-text-color); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-base-background-color); + --rz-grid-apply-filter-button-color: var(--rz-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 1rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1.25rem; + --rz-grid-border: var(--rz-border-base-300); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1.25rem; + --rz-grid-sort-icon-height: 1.25rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: none; + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-50); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.25rem; + --rz-grid-column-resizer-helper-width: 0.125rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-100); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-base-300); + --rz-grid-frozen-cell-background-color: var(--rz-base-background-color); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 1rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-200); + --rz-grid-group-header-item-padding-block: 0.25rem; + --rz-grid-group-header-item-padding-inline: 0.75rem 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-base-200); + --rz-grid-group-header-item-border-radius: calc(4 * var(--rz-border-radius)); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-disabled-color); + --rz-column-drag-handle-hover-color: var(--rz-text-title-color); + --rz-column-drag-handle-margin-inline: 0; + --rz-column-draggable-shadow: var(--rz-shadow-4); + /* Header */ + --rz-header-background-color: var(--rz-primary); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: none; + --rz-header-color: var(--rz-on-primary); + --rz-header-shadow: var(--rz-shadow-4); + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.5rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 40; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.5rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.9375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: none; + --rz-input-hover-shadow: none; + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-primary); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: none; + --rz-input-disabled-background-color: var(--rz-base-background-color); + --rz-input-disabled-color: var(--rz-text-disabled-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-200); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 1rem; + --rz-listbox-header-padding-block: 0.75rem; + --rz-listbox-header-padding-inline: 1rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: rgba(0, 0, 0, 0.04); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: rgba(0, 0, 0, 0.04); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: none; + --rz-menu-border-radius: var(--rz-border-radius); + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-text-title-color); + --rz-menu-item-hover-background-color: var(--rz-base-100); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-title-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-text-title-color); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-on-primary); + --rz-menu-top-item-background-color: var(--rz-primary); + --rz-menu-top-item-hover-color: var(--rz-on-primary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-on-primary); + --rz-menu-top-item-icon-color: var(--rz-on-primary); + --rz-menu-top-item-icon-hover-color: var(--rz-on-primary); + --rz-context-menu-padding-block: 0.5rem; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: var(--rz-shadow-6); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: var(--rz-white); + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-success); + --rz-notification-success-background-color: var(--rz-success-lighter); + --rz-notification-success-icon-color: var(--rz-success); + --rz-notification-warning-color: var(--rz-warning); + --rz-notification-warning-background-color: var(--rz-warning-lighter); + --rz-notification-warning-icon-color: var(--rz-warning); + --rz-notification-error-color: var(--rz-danger); + --rz-notification-error-background-color: var(--rz-danger-lighter); + --rz-notification-error-icon-color: var(--rz-danger); + --rz-notification-info-color: var(--rz-info); + --rz-notification-info-background-color: var(--rz-info-lighter); + --rz-notification-info-icon-color: var(--rz-info); + /* Numeric */ + --rz-numeric-line-height: var(--rz-body-line-height); + --rz-numeric-input-padding-block: 0.4375rem; + --rz-numeric-input-padding-inline: 0.9375rem 1.25rem; + --rz-numeric-button-width: 1rem; + --rz-numeric-button-height: 1rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: transparent; + --rz-numeric-button-disabled-background-color: transparent; + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-text-color); + /* Overlay */ + --rz-overlay-shadow: var(--rz-shadow-4); + --rz-overlay-border: none; + --rz-overlay-background-color: var(--rz-base-background-color); + /* Pager */ + --rz-pager-background-color: transparent; + --rz-pager-padding: 0.5rem 1rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: none; + --rz-pager-button-border-radius: 2rem; + --rz-pager-numeric-button-background-color: transparent; + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: none; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-100); + --rz-pager-numeric-button-hover-color: var(--rz-text-title-color); + --rz-pager-numeric-button-padding: 0.75rem 1rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-primary-lighter); + --rz-pager-numeric-button-selected-color: var(--rz-on-primary-lighter); + --rz-pager-numeric-button-selected-border: none; + --rz-pager-numeric-button-selected-padding: 0.75rem 1rem; + --rz-pager-numeric-button-min-width: 3rem; + --rz-pager-back-button-background-color: transparent; + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: transparent; + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: 0.875rem; + --rz-pager-summary-color: var(--rz-text-tertiary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: calc(var(--rz-body-font-size) * 0.875); + --rz-panel-menu-font-weight: 500; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.5rem; + --rz-panel-menu-item-padding-block: 1rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-200); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-title-color); + --rz-panel-menu-item-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.04); + --rz-panel-menu-item-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem 0.5rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0.5rem; + --rz-panel-menu-item-2nd-level-border-radius: var(--rz-border-radius); + --rz-panel-menu-item-2nd-level-offset: 3rem; + --rz-panel-menu-item-2nd-level-font-size: calc(var(--rz-body-font-size) * 0.875); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: var(--rz-text-tertiary-color); + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-100); + --rz-panel-menu-item-2nd-level-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-item-2nd-level-active-font-weight: 500; + --rz-panel-menu-item-3rd-level-color: var(--rz-text-tertiary-color); + --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-100); + --rz-panel-menu-item-3rd-level-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: var(--rz-text-tertiary-color); + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 1rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -2.25rem 1rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 1rem; + --rz-panel-title-line-height: 1.5rem; + --rz-panel-title-font-weight: 500; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: transparent; + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-text-title-color); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: var(--rz-shadow-1); + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-primary); + --rz-profile-menu-border: none; + --rz-profile-menu-padding-block: 0.5rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-contrast-color); + --rz-profile-menu-item-hover-background-color: var(--rz-base-100); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-primary-lighter); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 0.25rem; + --rz-progressbar-border-radius: 0; + --rz-progressbar-value-background-color: var(--rz-primary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 0; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: square; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: 2px; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-base-background-color); + --rz-radio-active-shadow: none; + --rz-radio-checked-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-shadow: none; + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-primary); + --rz-radio-circle-shadow: none; + --rz-radio-circle-hover-background-color: var(--rz-primary-light); + --rz-radio-icon-width: 0.625rem; + --rz-radio-icon-height: 0.625rem; + --rz-radio-checked-border: var(--rz-border-primary); + /* Rating */ + --rz-rating-color: var(--rz-text-secondary-color); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.5; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-text-disabled-color); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-base-300); + --rz-scheduler-border-color: var(--rz-base-300); + --rz-scheduler-minor-border-color: var(--rz-base-200); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: var(--rz-shadow-0); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-background-color); + --rz-scheduler-toolbar-title-font-size: 1.5rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-base-background-color); + --rz-scheduler-prev-next-button-color: var(--rz-text-color); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: 2rem; + --rz-scheduler-prev-button-border-start-end-radius: 2rem; + --rz-scheduler-prev-button-border-end-start-radius: 2rem; + --rz-scheduler-prev-button-border-end-end-radius: 2rem; + --rz-scheduler-next-button-border-start-start-radius: 2rem; + --rz-scheduler-next-button-border-start-end-radius: 2rem; + --rz-scheduler-next-button-border-end-start-radius: 2rem; + --rz-scheduler-next-button-border-end-end-radius: 2rem; + --rz-scheduler-today-button-margin-inline-start: 1rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.875rem; + --rz-scheduler-today-button-text-transform: capitalize; + --rz-scheduler-view-button-border: var(--rz-border-base-300); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); + --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); + --rz-scheduler-view-selected-border-color: var(--rz-base-300); + --rz-scheduler-header-background-color: var(--rz-base-background-color); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-base-300); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 0.25rem; + --rz-scheduler-year-slot-title-width: fit-content; + --rz-scheduler-year-slot-title-border-radius: 50%; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: rgba(0, 0, 0, 0.12); + --rz-scrollbar-border-radius: 0; + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-base-300); + --rz-selectbar-selected-background-color: var(--rz-primary-lighter); + --rz-selectbar-selected-color: var(--rz-on-primary-lighter); + --rz-selectbar-selected-border: var(--rz-border-base-300); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: none; + --rz-sidebar-toggle-color: var(--rz-on-primary); + --rz-sidebar-toggle-background-color: transparent; + --rz-sidebar-toggle-hover-color: var(--rz-on-primary-light); + --rz-sidebar-toggle-hover-background-color: var(--rz-primary-light); + --rz-sidebar-toggle-hover-border-radius: 50%; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 300px; + --rz-sidebar-border-inline-end: var(--rz-border-base-200); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-text-color); + /* Slider */ + --rz-slider-background-color: var(--rz-primary-lighter); + --rz-slider-border: none; + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 4px; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-primary); + --rz-slider-range-border: none; + --rz-slider-handle-width: 20px; + --rz-slider-handle-height: 20px; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-primary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: 50%; + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-primary); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: 0px 0px 0px 10px var(--rz-primary-lighter); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-300); + --rz-slider-disabled-border: none; + --rz-slider-disabled-range-background-color: var(--rz-base-500); + --rz-slider-disabled-range-border: none; + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-500); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-primary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-primary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-tertiary-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.25rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-contrast-color); + --rz-steps-number-background-color: var(--rz-base-500); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-primary-lighter); + --rz-switch-box-shadow: var(--rz-shadow-1); + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-primary-lighter); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1rem; + --rz-tabs-shadow: none; + --rz-tabs-border: none; + --rz-tabs-border-radius: 0; + --rz-tabs-background-color: transparent; + --rz-tabs-tab-font-size: 0.875rem; + --rz-tabs-tab-line-height: 1.5rem; + --rz-tabs-tab-font-weight: 500; + --rz-tabs-tab-text-transform: uppercase; + --rz-tabs-tab-letter-spacing: 1.25px; + --rz-tabs-tab-padding-block: 0.75rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: transparent; + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-primary); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-200); + --rz-tabs-tab-hover-color: var(--rz-text-title-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-200); + --rz-tabs-tab-focus-color: var(--rz-text-title-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 1rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: transparent; + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.5rem; + --rz-tree-node-selected-background-color: var(--rz-primary-lighter); + --rz-tree-node-selected-color: var(--rz-on-primary-lighter); + --rz-tree-node-selected-border-radius: var(--rz-border-radius); + --rz-tree-node-margin-block: 0; + --rz-tree-node-margin-inline: 0; + --rz-tree-node-hover-background-color: var(--rz-base-100); + --rz-tree-node-hover-color: var(--rz-text-title-color); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 2rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-100); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-200); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-base-200); + --rz-upload-choose-color: var(--rz-text-color); + --rz-upload-choose-hover-background-color: var(--rz-base-200); + --rz-upload-choose-hover-color: var(--rz-text-title-color); + --rz-upload-choose-active-background-color: var(--rz-base-200); + --rz-upload-choose-active-color: var(--rz-text-title-color); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/material-dark-base.css b/_content/Radzen.Blazor/css/material-dark-base.css new file mode 100755 index 0000000..cb47522 --- /dev/null +++ b/_content/Radzen.Blazor/css/material-dark-base.css @@ -0,0 +1,21596 @@ +@charset "UTF-8"; +.rz-button { + position: relative; + overflow: hidden; +} +.rz-button:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-button:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +.rz-header a, +.rz-header a:hover, +.rz-header a:focus { + color: var(--rz-primary); +} + +.rz-sidebar-toggle { + position: relative; + overflow: hidden; +} +.rz-sidebar-toggle:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-sidebar-toggle:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +.rz-navigation-item-link, +.rz-menu-toggle { + position: relative; + overflow: hidden; +} +.rz-navigation-item-link:not(.rz-state-disabled):before, +.rz-menu-toggle:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-navigation-item-link:not(.rz-state-disabled):active:before, +.rz-menu-toggle:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +.panel-menu .navigation-item-wrapper-active:before { + display: none; +} + +.rz-panel-menu .rz-navigation-item-link { + background-position: center; + transition: background-size 0.8s; + background: radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.08) 1%) center/15000%; +} +.rz-panel-menu .rz-navigation-item-link:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.08); + transition: background-size 0s; + background-size: 100%; +} +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-steps [role=tablist] { + display: flex; +} +.rz-steps .rz-steps-item:not(:last-child) { + flex: auto; + display: flex; + align-items: center; +} +.rz-steps .rz-steps-item:not(:last-child):after { + display: "block"; + content: ""; + flex: auto; + height: 1px; + margin-inline-end: 16px; + background-color: var(--rz-base-600); +} + +.rz-chkbox-box:after { + content: ""; + position: absolute; + width: 1rem; + height: 1rem; + border-radius: 50%; + opacity: 0; + transition: background-color var(--rz-transition), width var(--rz-transition), height var(--rz-transition); +} +.rz-chkbox-box:hover:not(.rz-state-disabled):after { + width: 2.5rem; + height: 2.5rem; + background-color: var(--rz-base-300); + opacity: 0.3; +} +.rz-chkbox-box:active:not(.rz-state-disabled):after { + background-color: var(--rz-base-200); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled):after { + background-color: var(--rz-primary); + opacity: 0.08; +} +.rz-chkbox-box.rz-state-active:active:hover:not(.rz-state-disabled):after { + opacity: 0.16; +} + +.rz-switch .rz-switch-circle:hover:not(.rz-disabled):before { + transition: background var(--rz-transition), transform var(--rz-transition), outlin-color var(--rz-transition); + box-shadow: var(--rz-switch-box-shadow), 0 0 0 10px rgba(255, 255, 255, 0.08); +} + +.rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled):before { + box-shadow: var(--rz-switch-box-shadow), 0 0 0 10px var(--rz-primary-lighter); +} + +.rz-radiobutton-box:after { + content: ""; + position: absolute; + width: 1rem; + height: 1rem; + border-radius: 50%; + opacity: 0; + transition: background-color var(--rz-transition), width var(--rz-transition), height var(--rz-transition); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled):after { + width: 2.5rem; + height: 2.5rem; + background-color: var(--rz-base-300); + opacity: 0.3; +} +.rz-radiobutton-box:active:not(.rz-state-disabled):after { + background-color: var(--rz-base-200); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled):after { + background-color: var(--rz-primary); + opacity: 0.08; +} +.rz-radiobutton-box.rz-state-active:active:hover:not(.rz-state-disabled):after { + opacity: 0.16; +} + +.rz-slider .rz-slider-range { + top: 0; + bottom: 0; +} +.rz-slider .rz-slider-handle:before { + display: none; +} + +.rz-selectbutton .rz-button { + box-shadow: none; +} +.rz-selectbutton .rz-button:hover { + box-shadow: none !important; + background: var(--rz-base-600); +} + +.rz-datepicker-inline table { + width: 100%; +} + +.rz-calendar-view td, +.rz-calendar-view th { + text-align: center; +} +.rz-calendar-view td a.rz-state-default, +.rz-calendar-view td span.rz-state-default, +.rz-calendar-view th a.rz-state-default, +.rz-calendar-view th span.rz-state-default { + display: inline-block; + width: 2.25rem; + height: 2.25rem; + line-height: 1rem; +} +.rz-calendar-view td a.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view td span.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view th a.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view th span.rz-state-default:not(.rz-state-active):hover { + border-radius: 50%; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view th .rz-state-active { + border-radius: 50%; +} + +.rz-timepicker { + flex-wrap: wrap; +} +.rz-timepicker .rz-numeric { + flex: 1; +} +.rz-timepicker > .rz-button { + flex-basis: 100%; +} + +.rz-numeric .rz-numeric-button { + box-shadow: none; +} +.rz-numeric .rz-numeric-button:hover { + box-shadow: none !important; +} + +.rz-fileupload-choose.rz-button { + background-position: center; + transition: background-size 0.8s; + background: radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.08) 1%) center/15000%; +} +.rz-fileupload-choose.rz-button:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.08); + transition: background-size 0s; + background-size: 100%; +} +.rz-fileupload-choose.rz-button input { + z-index: 1; +} + +.rz-datatable .rz-col-icon { + border-inline-end: var(--rz-border-base-600); +} + +.rz-grid-table-composite { + --rz-grid-right-cell-border: var(--rz-border-base-600); + --rz-grid-header-cell-border: var(--rz-border-base-600); +} + +.rz-pager-pages { + max-height: 3rem; +} + +.rz-pager-element { + box-shadow: var(--rz-shadow-0) !important; +} +.rz-pager-element:hover { + box-shadow: var(--rz-shadow-0) !important; +} +.rz-pager-element:active { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-tree-toggler { + position: relative; +} + +.rz-tree-toggler.rzi-caret-right:before { + margin-left: 0 !important; +} +.rz-tree-toggler.rzi-caret-down:before { + margin-left: 0 !important; +} +.rz-tree-toggler:after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 1rem; + height: 1rem; + border-radius: 50%; + opacity: 0; + transition: background-color var(--rz-transition), width var(--rz-transition), height var(--rz-transition), left var(--rz-transition), top var(--rz-transition); +} +.rz-tree-toggler:active:after { + left: 0; + top: -0.25rem; + width: 2rem; + height: 2rem; + background-color: var(--rz-base-200); + opacity: 0.3; +} + +.rz-scheduler-nav .rz-button { + box-shadow: var(--rz-shadow-0) !important; +} +.rz-scheduler-nav .rz-button:hover { + box-shadow: var(--rz-shadow-0) !important; + background: var(--rz-base-600); +} +.rz-scheduler-nav .rz-button:active { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-view-header { + border-top: none !important; +} +.rz-year-view .rz-view-header { + border-bottom: none !important; +} + +.rz-tabview-nav > li > a { + position: relative; + overflow: hidden; +} +.rz-tabview-nav > li > a:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-tabview-nav > li > a:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +.rz-tabview.rz-tabview-top > .rz-tabview-nav li { + border-bottom: 2px solid transparent; +} +.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-top-width: 0; + border-bottom: 2px solid var(--rz-primary); +} +.rz-tabview.rz-tabview-bottom > .rz-tabview-nav li { + border-top: 2px solid transparent; +} +.rz-tabview.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-bottom-width: 0; + border-top: 2px solid var(--rz-primary); +} +.rz-tabview.rz-tabview-left > .rz-tabview-nav li { + border-right: 2px solid transparent; +} +.rz-tabview.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-left-width: 0; + border-right: 2px solid var(--rz-primary); +} +.rz-tabview.rz-tabview-right > .rz-tabview-nav li { + border-left: 2px solid transparent; +} +.rz-tabview.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-right-width: 0; + border-left: 2px solid var(--rz-primary); +} +.rz-tabview.rz-tabview-top > .rz-tabview-panels { + border-top: var(--rz-border-base-600); +} +.rz-tabview.rz-tabview-bottom > .rz-tabview-panels { + border-bottom: var(--rz-border-base-600); +} +.rz-tabview.rz-tabview-left > .rz-tabview-panels { + border-left: var(--rz-border-base-600); +} +.rz-tabview.rz-tabview-right > .rz-tabview-panels { + border-right: var(--rz-border-base-600); +} + +.rz-login .rz-textbox.invalid { + --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-danger); +} + +.rz-progressbar:has(.rz-progressbar-label) { + --rz-progressbar-height: 1.25rem; +} + +.rz-html-editor-toolbar { + font-size: 0.825rem; +} +.rz-html-editor-toolbar .rz-html-editor-button { + position: relative; + overflow: hidden; +} +.rz-html-editor-toolbar .rz-html-editor-button:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-html-editor-toolbar .rz-html-editor-button:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Roboto"; + src: url("../fonts/RobotoFlex.woff2") format("woff2 supports variations"), url("../fonts/RobotoFlex.woff2") format("woff2-variations"); + font-weight: 100 1000; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +.rz-text-title-color { + color: var(--rz-base-50) !important; +} + +.rz-text-color { + color: var(--rz-base-50) !important; +} + +.rz-text-secondary-color { + color: var(--rz-base-100) !important; +} + +.rz-text-tertiary-color { + color: var(--rz-base-200) !important; +} + +.rz-text-disabled-color { + color: var(--rz-base-300) !important; +} + +.rz-text-contrast-color { + color: var(--rz-white) !important; +} + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; +} + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; +} + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; +} + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; +} + +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; +} + +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; +} + +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; +} + +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; +} + +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; +} + +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; +} + +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; +} + +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; +} + +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; +} + +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; +} + +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; +} + +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; +} + +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; +} + +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; +} + +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; +} + +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; +} + +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; +} + +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; +} + +.rz-display-none { + display: none !important; +} + +.rz-display-block { + display: block !important; +} + +.rz-display-inline { + display: inline !important; +} + +.rz-display-inline-block { + display: inline-block !important; +} + +.rz-display-flex { + display: flex !important; +} + +.rz-display-inline-flex { + display: inline-flex !important; +} + +.rz-display-grid { + display: grid !important; +} + +.rz-display-inline-grid { + display: inline-grid !important; +} + +@media (min-width: 576px) { + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 768px) { + .rz-display-sm-none { + display: none !important; + } + .rz-display-sm-block { + display: block !important; + } + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} + +.rz-justify-content-stretch { + justify-content: stretch !important; +} + +.rz-justify-content-center { + justify-content: center !important; +} + +.rz-justify-content-start { + justify-content: start !important; +} + +.rz-justify-content-end { + justify-content: end !important; +} + +.rz-justify-content-flex-start { + justify-content: flex-start !important; +} + +.rz-justify-content-flex-end { + justify-content: flex-end !important; +} + +.rz-justify-content-left { + justify-content: left !important; +} + +.rz-justify-content-right { + justify-content: right !important; +} + +.rz-justify-content-space-between { + justify-content: space-between !important; +} + +.rz-justify-content-space-around { + justify-content: space-around !important; +} + +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.rz-align-items-normal { + align-items: normal !important; +} + +.rz-align-items-stretch { + align-items: stretch !important; +} + +.rz-align-items-center { + align-items: center !important; +} + +.rz-align-items-start { + align-items: start !important; +} + +.rz-align-items-end { + align-items: end !important; +} + +.rz-align-items-flex-start { + align-items: flex-start !important; +} + +.rz-align-items-flex-end { + align-items: flex-end !important; +} + +.rz-color-white { + color: var(--rz-white) !important; +} + +.rz-color-black { + color: var(--rz-black) !important; +} + +.rz-color-base { + color: var(--rz-base) !important; +} + +.rz-color-base-50 { + color: var(--rz-base-50) !important; +} + +.rz-color-base-100 { + color: var(--rz-base-100) !important; +} + +.rz-color-base-200 { + color: var(--rz-base-200) !important; +} + +.rz-color-base-300 { + color: var(--rz-base-300) !important; +} + +.rz-color-base-400 { + color: var(--rz-base-400) !important; +} + +.rz-color-base-500 { + color: var(--rz-base-500) !important; +} + +.rz-color-base-600 { + color: var(--rz-base-600) !important; +} + +.rz-color-base-700 { + color: var(--rz-base-700) !important; +} + +.rz-color-base-800 { + color: var(--rz-base-800) !important; +} + +.rz-color-base-900 { + color: var(--rz-base-900) !important; +} + +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + +.rz-color-primary { + color: var(--rz-primary) !important; +} + +.rz-color-primary-light { + color: var(--rz-primary-light) !important; +} + +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; +} + +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; +} + +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; +} + +.rz-color-secondary { + color: var(--rz-secondary) !important; +} + +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; +} + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; +} + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; +} + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; +} + +.rz-color-info { + color: var(--rz-info) !important; +} + +.rz-color-info-light { + color: var(--rz-info-light) !important; +} + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; +} + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; +} + +.rz-color-info-darker { + color: var(--rz-info-darker) !important; +} + +.rz-color-success { + color: var(--rz-success) !important; +} + +.rz-color-success-light { + color: var(--rz-success-light) !important; +} + +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; +} + +.rz-color-success-dark { + color: var(--rz-success-dark) !important; +} + +.rz-color-success-darker { + color: var(--rz-success-darker) !important; +} + +.rz-color-warning { + color: var(--rz-warning) !important; +} + +.rz-color-warning-light { + color: var(--rz-warning-light) !important; +} + +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; +} + +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; +} + +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; +} + +.rz-color-danger { + color: var(--rz-danger) !important; +} + +.rz-color-danger-light { + color: var(--rz-danger-light) !important; +} + +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; +} + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; +} + +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; +} + +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + +.rz-color-on-primary { + color: var(--rz-on-primary) !important; +} + +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; +} + +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; +} + +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; +} + +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; +} + +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; +} + +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; +} + +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; +} + +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; +} + +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; +} + +.rz-color-on-info { + color: var(--rz-on-info) !important; +} + +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; +} + +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; +} + +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; +} + +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; +} + +.rz-color-on-success { + color: var(--rz-on-success) !important; +} + +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; +} + +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; +} + +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; +} + +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; +} + +.rz-color-on-warning { + color: var(--rz-on-warning) !important; +} + +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; +} + +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; +} + +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; +} + +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; +} + +.rz-color-on-danger { + color: var(--rz-on-danger) !important; +} + +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; +} + +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; +} + +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; +} + +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; +} + +.rz-color-series-1 { + color: var(--rz-series-1) !important; +} + +.rz-color-series-2 { + color: var(--rz-series-2) !important; +} + +.rz-color-series-3 { + color: var(--rz-series-3) !important; +} + +.rz-color-series-4 { + color: var(--rz-series-4) !important; +} + +.rz-color-series-5 { + color: var(--rz-series-5) !important; +} + +.rz-color-series-6 { + color: var(--rz-series-6) !important; +} + +.rz-color-series-7 { + color: var(--rz-series-7) !important; +} + +.rz-color-series-8 { + color: var(--rz-series-8) !important; +} + +.rz-color-series-9 { + color: var(--rz-series-9) !important; +} + +.rz-color-series-10 { + color: var(--rz-series-10) !important; +} + +.rz-color-series-11 { + color: var(--rz-series-11) !important; +} + +.rz-color-series-12 { + color: var(--rz-series-12) !important; +} + +.rz-color-series-13 { + color: var(--rz-series-13) !important; +} + +.rz-color-series-14 { + color: var(--rz-series-14) !important; +} + +.rz-color-series-15 { + color: var(--rz-series-15) !important; +} + +.rz-color-series-16 { + color: var(--rz-series-16) !important; +} + +.rz-color-series-17 { + color: var(--rz-series-17) !important; +} + +.rz-color-series-18 { + color: var(--rz-series-18) !important; +} + +.rz-color-series-19 { + color: var(--rz-series-19) !important; +} + +.rz-color-series-20 { + color: var(--rz-series-20) !important; +} + +.rz-color-series-21 { + color: var(--rz-series-21) !important; +} + +.rz-color-series-22 { + color: var(--rz-series-22) !important; +} + +.rz-color-series-23 { + color: var(--rz-series-23) !important; +} + +.rz-color-series-24 { + color: var(--rz-series-24) !important; +} + +.rz-background-color-white { + background-color: var(--rz-white) !important; +} + +.rz-background-color-black { + background-color: var(--rz-black) !important; +} + +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; +} + +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; +} + +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; +} + +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; +} + +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; +} + +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; +} + +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; +} + +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; +} + +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; +} + +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; +} + +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + +.rz-background-color-primary { + background-color: var(--rz-primary) !important; +} + +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; +} + +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; +} + +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; +} + +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; +} + +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; +} + +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; +} + +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; +} + +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; +} + +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; +} + +.rz-background-color-info { + background-color: var(--rz-info) !important; +} + +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; +} + +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; +} + +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; +} + +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; +} + +.rz-background-color-success { + background-color: var(--rz-success) !important; +} + +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; +} + +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; +} + +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; +} + +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; +} + +.rz-background-color-warning { + background-color: var(--rz-warning) !important; +} + +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; +} + +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; +} + +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; +} + +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; +} + +.rz-background-color-danger { + background-color: var(--rz-danger) !important; +} + +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; +} + +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; +} + +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; +} + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; +} + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; +} + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; +} + +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; +} + +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; +} + +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; +} + +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; +} + +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; +} + +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; +} + +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; +} + +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; +} + +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; +} + +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; +} + +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; +} + +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; +} + +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; +} + +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; +} + +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; +} + +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; +} + +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; +} + +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; +} + +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; +} + +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; +} + +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; +} + +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; +} + +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; +} + +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; +} + +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; +} + +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; +} + +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; +} + +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; +} + +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; +} + +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; +} + +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; +} + +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; +} + +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; +} + +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; +} + +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; +} + +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; +} + +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; +} + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; +} + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; +} + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; +} + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; +} + +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; +} + +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; +} + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; +} + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; +} + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; +} + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; +} + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; +} + +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; +} + +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; +} + +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; +} + +.rz-border-color-white { + border-color: var(--rz-white) !important; +} + +.rz-border-color-black { + border-color: var(--rz-black) !important; +} + +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; +} + +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; +} + +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; +} + +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; +} + +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; +} + +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; +} + +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; +} + +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; +} + +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; +} + +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; +} + +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + +.rz-border-color-primary { + border-color: var(--rz-primary) !important; +} + +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; +} + +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; +} + +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-color-info { + border-color: var(--rz-info) !important; +} + +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; +} + +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; +} + +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; +} + +.rz-border-color-success { + border-color: var(--rz-success) !important; +} + +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; +} + +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; +} + +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; +} + +.rz-border-color-warning { + border-color: var(--rz-warning) !important; +} + +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; +} + +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-color-danger { + border-color: var(--rz-danger) !important; +} + +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; +} + +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; +} + +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; +} + +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; +} + +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; +} + +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; +} + +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; +} + +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; +} + +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; +} + +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; +} + +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; +} + +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; +} + +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; +} + +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; +} + +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; +} + +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; +} + +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; +} + +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; +} + +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; +} + +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; +} + +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; +} + +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; +} + +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; +} + +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; +} + +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; +} + +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; +} + +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; +} + +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; +} + +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; +} + +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; +} + +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; +} + +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; +} + +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; +} + +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; +} + +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; +} + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; +} + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; +} + +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; +} + +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; +} + +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; +} + +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; +} + +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; +} + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; +} + +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; +} + +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; +} + +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; +} + +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; +} + +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; +} + +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; +} + +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; +} + +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; +} + +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; +} + +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; +} + +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; +} + +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} + +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; +} + +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; +} + +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; +} + +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; +} + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; +} + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; +} + +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; +} + +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; +} + +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; +} + +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; +} + +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; +} + +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; +} + +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; +} + +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; +} + +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; +} + +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; +} + +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; +} + +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; +} + +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; +} + +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; +} + +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; +} + +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; +} + +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; +} + +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; +} + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; +} + +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; +} + +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; +} + +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; +} + +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; +} + +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; +} + +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; +} + +.rz-ripple { + position: relative; + overflow: hidden; +} +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +body { + margin: 0; +} + +.rz-m-0 { + margin: 0 !important; +} + +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; +} + +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; +} + +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; +} + +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; +} + +.rz-ms-0 { + margin-inline-start: 0 !important; +} + +.rz-me-0 { + margin-inline-end: 0 !important; +} + +.rz-m-05 { + margin: 0.125rem !important; +} + +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; +} + +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; +} + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; +} + +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; +} + +.rz-ms-05 { + margin-inline-start: 0.125rem !important; +} + +.rz-me-05 { + margin-inline-end: 0.125rem !important; +} + +.rz-m-1 { + margin: 0.25rem !important; +} + +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; +} + +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; +} + +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; +} + +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; +} + +.rz-ms-1 { + margin-inline-start: 0.25rem !important; +} + +.rz-me-1 { + margin-inline-end: 0.25rem !important; +} + +.rz-m-2 { + margin: 0.5rem !important; +} + +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; +} + +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; +} + +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; +} + +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; +} + +.rz-ms-2 { + margin-inline-start: 0.5rem !important; +} + +.rz-me-2 { + margin-inline-end: 0.5rem !important; +} + +.rz-m-3 { + margin: 0.75rem !important; +} + +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; +} + +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; +} + +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; +} + +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; +} + +.rz-ms-3 { + margin-inline-start: 0.75rem !important; +} + +.rz-me-3 { + margin-inline-end: 0.75rem !important; +} + +.rz-m-4 { + margin: 1rem !important; +} + +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; +} + +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; +} + +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; +} + +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; +} + +.rz-ms-4 { + margin-inline-start: 1rem !important; +} + +.rz-me-4 { + margin-inline-end: 1rem !important; +} + +.rz-m-5 { + margin: 1.25rem !important; +} + +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; +} + +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; +} + +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; +} + +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; +} + +.rz-ms-5 { + margin-inline-start: 1.25rem !important; +} + +.rz-me-5 { + margin-inline-end: 1.25rem !important; +} + +.rz-m-6 { + margin: 1.5rem !important; +} + +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; +} + +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; +} + +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; +} + +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; +} + +.rz-ms-6 { + margin-inline-start: 1.5rem !important; +} + +.rz-me-6 { + margin-inline-end: 1.5rem !important; +} + +.rz-m-7 { + margin: 1.75rem !important; +} + +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; +} + +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; +} + +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; +} + +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; +} + +.rz-ms-7 { + margin-inline-start: 1.75rem !important; +} + +.rz-me-7 { + margin-inline-end: 1.75rem !important; +} + +.rz-m-8 { + margin: 2rem !important; +} + +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; +} + +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; +} + +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; +} + +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; +} + +.rz-ms-8 { + margin-inline-start: 2rem !important; +} + +.rz-me-8 { + margin-inline-end: 2rem !important; +} + +.rz-m-9 { + margin: 2.25rem !important; +} + +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; +} + +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; +} + +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; +} + +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; +} + +.rz-ms-9 { + margin-inline-start: 2.25rem !important; +} + +.rz-me-9 { + margin-inline-end: 2.25rem !important; +} + +.rz-m-10 { + margin: 2.5rem !important; +} + +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; +} + +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; +} + +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; +} + +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; +} + +.rz-ms-10 { + margin-inline-start: 2.5rem !important; +} + +.rz-me-10 { + margin-inline-end: 2.5rem !important; +} + +.rz-m-11 { + margin: 2.75rem !important; +} + +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; +} + +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; +} + +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; +} + +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; +} + +.rz-ms-11 { + margin-inline-start: 2.75rem !important; +} + +.rz-me-11 { + margin-inline-end: 2.75rem !important; +} + +.rz-m-12 { + margin: 3rem !important; +} + +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; +} + +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; +} + +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; +} + +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; +} + +.rz-ms-12 { + margin-inline-start: 3rem !important; +} + +.rz-me-12 { + margin-inline-end: 3rem !important; +} + +.rz-p-0 { + padding: 0 !important; +} + +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; +} + +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; +} + +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; +} + +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; +} + +.rz-ps-0 { + padding-inline-start: 0 !important; +} + +.rz-pe-0 { + padding-inline-end: 0 !important; +} + +.rz-p-05 { + padding: 0.125rem !important; +} + +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; +} + +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; +} + +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; +} + +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; +} + +.rz-ps-05 { + padding-inline-start: 0.125rem !important; +} + +.rz-pe-05 { + padding-inline-end: 0.125rem !important; +} + +.rz-p-1 { + padding: 0.25rem !important; +} + +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; +} + +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; +} + +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; +} + +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; +} + +.rz-ps-1 { + padding-inline-start: 0.25rem !important; +} + +.rz-pe-1 { + padding-inline-end: 0.25rem !important; +} + +.rz-p-2 { + padding: 0.5rem !important; +} + +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; +} + +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; +} + +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; +} + +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; +} + +.rz-ps-2 { + padding-inline-start: 0.5rem !important; +} + +.rz-pe-2 { + padding-inline-end: 0.5rem !important; +} + +.rz-p-3 { + padding: 0.75rem !important; +} + +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; +} + +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; +} + +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; +} + +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; +} + +.rz-ps-3 { + padding-inline-start: 0.75rem !important; +} + +.rz-pe-3 { + padding-inline-end: 0.75rem !important; +} + +.rz-p-4 { + padding: 1rem !important; +} + +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; +} + +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; +} + +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; +} + +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; +} + +.rz-ps-4 { + padding-inline-start: 1rem !important; +} + +.rz-pe-4 { + padding-inline-end: 1rem !important; +} + +.rz-p-5 { + padding: 1.25rem !important; +} + +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; +} + +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; +} + +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; +} + +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; +} + +.rz-ps-5 { + padding-inline-start: 1.25rem !important; +} + +.rz-pe-5 { + padding-inline-end: 1.25rem !important; +} + +.rz-p-6 { + padding: 1.5rem !important; +} + +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; +} + +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; +} + +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; +} + +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; +} + +.rz-ps-6 { + padding-inline-start: 1.5rem !important; +} + +.rz-pe-6 { + padding-inline-end: 1.5rem !important; +} + +.rz-p-7 { + padding: 1.75rem !important; +} + +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; +} + +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; +} + +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; +} + +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; +} + +.rz-ps-7 { + padding-inline-start: 1.75rem !important; +} + +.rz-pe-7 { + padding-inline-end: 1.75rem !important; +} + +.rz-p-8 { + padding: 2rem !important; +} + +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; +} + +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; +} + +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; +} + +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; +} + +.rz-ps-8 { + padding-inline-start: 2rem !important; +} + +.rz-pe-8 { + padding-inline-end: 2rem !important; +} + +.rz-p-9 { + padding: 2.25rem !important; +} + +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; +} + +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; +} + +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; +} + +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; +} + +.rz-ps-9 { + padding-inline-start: 2.25rem !important; +} + +.rz-pe-9 { + padding-inline-end: 2.25rem !important; +} + +.rz-p-10 { + padding: 2.5rem !important; +} + +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; +} + +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; +} + +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; +} + +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; +} + +.rz-ps-10 { + padding-inline-start: 2.5rem !important; +} + +.rz-pe-10 { + padding-inline-end: 2.5rem !important; +} + +.rz-p-11 { + padding: 2.75rem !important; +} + +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; +} + +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; +} + +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; +} + +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; +} + +.rz-ps-11 { + padding-inline-start: 2.75rem !important; +} + +.rz-pe-11 { + padding-inline-end: 2.75rem !important; +} + +.rz-p-12 { + padding: 3rem !important; +} + +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; +} + +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; +} + +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; +} + +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; +} + +.rz-ps-12 { + padding-inline-start: 3rem !important; +} + +.rz-pe-12 { + padding-inline-end: 3rem !important; +} + +.rz-m-auto { + margin: auto !important; +} + +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; +} + +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; +} + +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; +} + +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; +} + +.rz-ms-auto { + margin-inline-start: auto !important; +} + +.rz-me-auto { + margin-inline-end: auto !important; +} + +@media (min-width: 576px) { + .rz-m-xs-0 { + margin: 0 !important; + } + .rz-my-xs-0, + .rz-mt-xs-0 { + margin-top: 0 !important; + } + .rz-mx-xs-0, + .rz-mr-xs-0 { + margin-right: 0 !important; + } + .rz-my-xs-0, + .rz-mb-xs-0 { + margin-bottom: 0 !important; + } + .rz-mx-xs-0, + .rz-ml-xs-0 { + margin-left: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-end: 0 !important; + } + .rz-m-xs-05 { + margin: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mt-xs-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-mr-xs-05 { + margin-right: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mb-xs-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-ml-xs-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xs-1 { + margin: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mt-xs-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-mr-xs-1 { + margin-right: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mb-xs-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-ml-xs-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xs-2 { + margin: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mt-xs-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-mr-xs-2 { + margin-right: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mb-xs-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-ml-xs-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xs-3 { + margin: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mt-xs-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-mr-xs-3 { + margin-right: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mb-xs-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-ml-xs-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xs-4 { + margin: 1rem !important; + } + .rz-my-xs-4, + .rz-mt-xs-4 { + margin-top: 1rem !important; + } + .rz-mx-xs-4, + .rz-mr-xs-4 { + margin-right: 1rem !important; + } + .rz-my-xs-4, + .rz-mb-xs-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xs-4, + .rz-ml-xs-4 { + margin-left: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xs-5 { + margin: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mt-xs-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-mr-xs-5 { + margin-right: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mb-xs-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-ml-xs-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xs-6 { + margin: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mt-xs-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-mr-xs-6 { + margin-right: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mb-xs-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-ml-xs-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xs-7 { + margin: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mt-xs-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-mr-xs-7 { + margin-right: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mb-xs-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-ml-xs-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xs-8 { + margin: 2rem !important; + } + .rz-my-xs-8, + .rz-mt-xs-8 { + margin-top: 2rem !important; + } + .rz-mx-xs-8, + .rz-mr-xs-8 { + margin-right: 2rem !important; + } + .rz-my-xs-8, + .rz-mb-xs-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xs-8, + .rz-ml-xs-8 { + margin-left: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xs-9 { + margin: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mt-xs-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-mr-xs-9 { + margin-right: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mb-xs-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-ml-xs-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xs-10 { + margin: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mt-xs-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-mr-xs-10 { + margin-right: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mb-xs-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-ml-xs-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xs-11 { + margin: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mt-xs-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-mr-xs-11 { + margin-right: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mb-xs-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-ml-xs-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xs-12 { + margin: 3rem !important; + } + .rz-my-xs-12, + .rz-mt-xs-12 { + margin-top: 3rem !important; + } + .rz-mx-xs-12, + .rz-mr-xs-12 { + margin-right: 3rem !important; + } + .rz-my-xs-12, + .rz-mb-xs-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xs-12, + .rz-ml-xs-12 { + margin-left: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xs-0 { + padding: 0 !important; + } + .rz-py-xs-0, + .rz-pt-xs-0 { + padding-top: 0 !important; + } + .rz-px-xs-0, + .rz-pr-xs-0 { + padding-right: 0 !important; + } + .rz-py-xs-0, + .rz-pb-xs-0 { + padding-bottom: 0 !important; + } + .rz-px-xs-0, + .rz-pl-xs-0 { + padding-left: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-end: 0 !important; + } + .rz-p-xs-05 { + padding: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pt-xs-05 { + padding-top: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pr-xs-05 { + padding-right: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pb-xs-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pl-xs-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xs-1 { + padding: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pt-xs-1 { + padding-top: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pr-xs-1 { + padding-right: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pb-xs-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pl-xs-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xs-2 { + padding: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pt-xs-2 { + padding-top: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pr-xs-2 { + padding-right: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pb-xs-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pl-xs-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xs-3 { + padding: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pt-xs-3 { + padding-top: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pr-xs-3 { + padding-right: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pb-xs-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pl-xs-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xs-4 { + padding: 1rem !important; + } + .rz-py-xs-4, + .rz-pt-xs-4 { + padding-top: 1rem !important; + } + .rz-px-xs-4, + .rz-pr-xs-4 { + padding-right: 1rem !important; + } + .rz-py-xs-4, + .rz-pb-xs-4 { + padding-bottom: 1rem !important; + } + .rz-px-xs-4, + .rz-pl-xs-4 { + padding-left: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xs-5 { + padding: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pt-xs-5 { + padding-top: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pr-xs-5 { + padding-right: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pb-xs-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pl-xs-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xs-6 { + padding: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pt-xs-6 { + padding-top: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pr-xs-6 { + padding-right: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pb-xs-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pl-xs-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xs-7 { + padding: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pt-xs-7 { + padding-top: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pr-xs-7 { + padding-right: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pb-xs-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pl-xs-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xs-8 { + padding: 2rem !important; + } + .rz-py-xs-8, + .rz-pt-xs-8 { + padding-top: 2rem !important; + } + .rz-px-xs-8, + .rz-pr-xs-8 { + padding-right: 2rem !important; + } + .rz-py-xs-8, + .rz-pb-xs-8 { + padding-bottom: 2rem !important; + } + .rz-px-xs-8, + .rz-pl-xs-8 { + padding-left: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xs-9 { + padding: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pt-xs-9 { + padding-top: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pr-xs-9 { + padding-right: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pb-xs-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pl-xs-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xs-10 { + padding: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pt-xs-10 { + padding-top: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pr-xs-10 { + padding-right: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pb-xs-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pl-xs-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xs-11 { + padding: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pt-xs-11 { + padding-top: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pr-xs-11 { + padding-right: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pb-xs-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pl-xs-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xs-12 { + padding: 3rem !important; + } + .rz-py-xs-12, + .rz-pt-xs-12 { + padding-top: 3rem !important; + } + .rz-px-xs-12, + .rz-pr-xs-12 { + padding-right: 3rem !important; + } + .rz-py-xs-12, + .rz-pb-xs-12 { + padding-bottom: 3rem !important; + } + .rz-px-xs-12, + .rz-pl-xs-12 { + padding-left: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xs-auto { + margin: auto !important; + } + .rz-my-xs-auto, + .rz-mt-xs-auto { + margin-top: auto !important; + } + .rz-mx-xs-auto, + .rz-mr-xs-auto { + margin-right: auto !important; + } + .rz-my-xs-auto, + .rz-mb-xs-auto { + margin-bottom: auto !important; + } + .rz-mx-xs-auto, + .rz-ml-xs-auto { + margin-left: auto !important; + } + .rz-ms-xs-auto { + margin-inline-start: auto !important; + } + .rz-me-xs-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 768px) { + .rz-m-sm-0 { + margin: 0 !important; + } + .rz-my-sm-0, + .rz-mt-sm-0 { + margin-top: 0 !important; + } + .rz-mx-sm-0, + .rz-mr-sm-0 { + margin-right: 0 !important; + } + .rz-my-sm-0, + .rz-mb-sm-0 { + margin-bottom: 0 !important; + } + .rz-mx-sm-0, + .rz-ml-sm-0 { + margin-left: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-start: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-end: 0 !important; + } + .rz-m-sm-05 { + margin: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mt-sm-05 { + margin-top: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-mr-sm-05 { + margin-right: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mb-sm-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-ml-sm-05 { + margin-left: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-sm-1 { + margin: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mt-sm-1 { + margin-top: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-mr-sm-1 { + margin-right: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-ml-sm-1 { + margin-left: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-sm-2 { + margin: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mt-sm-2 { + margin-top: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-mr-sm-2 { + margin-right: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-ml-sm-2 { + margin-left: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-sm-3 { + margin: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mt-sm-3 { + margin-top: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-mr-sm-3 { + margin-right: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mb-sm-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-ml-sm-3 { + margin-left: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-sm-4 { + margin: 1rem !important; + } + .rz-my-sm-4, + .rz-mt-sm-4 { + margin-top: 1rem !important; + } + .rz-mx-sm-4, + .rz-mr-sm-4 { + margin-right: 1rem !important; + } + .rz-my-sm-4, + .rz-mb-sm-4 { + margin-bottom: 1rem !important; + } + .rz-mx-sm-4, + .rz-ml-sm-4 { + margin-left: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-end: 1rem !important; + } + .rz-m-sm-5 { + margin: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mt-sm-5 { + margin-top: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-mr-sm-5 { + margin-right: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mb-sm-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-ml-sm-5 { + margin-left: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-sm-6 { + margin: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mt-sm-6 { + margin-top: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-mr-sm-6 { + margin-right: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mb-sm-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-ml-sm-6 { + margin-left: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-sm-7 { + margin: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mt-sm-7 { + margin-top: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-mr-sm-7 { + margin-right: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mb-sm-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-ml-sm-7 { + margin-left: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-sm-8 { + margin: 2rem !important; + } + .rz-my-sm-8, + .rz-mt-sm-8 { + margin-top: 2rem !important; + } + .rz-mx-sm-8, + .rz-mr-sm-8 { + margin-right: 2rem !important; + } + .rz-my-sm-8, + .rz-mb-sm-8 { + margin-bottom: 2rem !important; + } + .rz-mx-sm-8, + .rz-ml-sm-8 { + margin-left: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-end: 2rem !important; + } + .rz-m-sm-9 { + margin: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mt-sm-9 { + margin-top: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-mr-sm-9 { + margin-right: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mb-sm-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-ml-sm-9 { + margin-left: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-sm-10 { + margin: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mt-sm-10 { + margin-top: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-mr-sm-10 { + margin-right: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mb-sm-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-ml-sm-10 { + margin-left: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-sm-11 { + margin: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mt-sm-11 { + margin-top: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-mr-sm-11 { + margin-right: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mb-sm-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-ml-sm-11 { + margin-left: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-sm-12 { + margin: 3rem !important; + } + .rz-my-sm-12, + .rz-mt-sm-12 { + margin-top: 3rem !important; + } + .rz-mx-sm-12, + .rz-mr-sm-12 { + margin-right: 3rem !important; + } + .rz-my-sm-12, + .rz-mb-sm-12 { + margin-bottom: 3rem !important; + } + .rz-mx-sm-12, + .rz-ml-sm-12 { + margin-left: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-end: 3rem !important; + } + .rz-p-sm-0 { + padding: 0 !important; + } + .rz-py-sm-0, + .rz-pt-sm-0 { + padding-top: 0 !important; + } + .rz-px-sm-0, + .rz-pr-sm-0 { + padding-right: 0 !important; + } + .rz-py-sm-0, + .rz-pb-sm-0 { + padding-bottom: 0 !important; + } + .rz-px-sm-0, + .rz-pl-sm-0 { + padding-left: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-start: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-end: 0 !important; + } + .rz-p-sm-05 { + padding: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pt-sm-05 { + padding-top: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pr-sm-05 { + padding-right: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pb-sm-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pl-sm-05 { + padding-left: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-sm-1 { + padding: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pt-sm-1 { + padding-top: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pr-sm-1 { + padding-right: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pl-sm-1 { + padding-left: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-sm-2 { + padding: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pt-sm-2 { + padding-top: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pr-sm-2 { + padding-right: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pl-sm-2 { + padding-left: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-sm-3 { + padding: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pt-sm-3 { + padding-top: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pr-sm-3 { + padding-right: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pb-sm-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pl-sm-3 { + padding-left: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-sm-4 { + padding: 1rem !important; + } + .rz-py-sm-4, + .rz-pt-sm-4 { + padding-top: 1rem !important; + } + .rz-px-sm-4, + .rz-pr-sm-4 { + padding-right: 1rem !important; + } + .rz-py-sm-4, + .rz-pb-sm-4 { + padding-bottom: 1rem !important; + } + .rz-px-sm-4, + .rz-pl-sm-4 { + padding-left: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-end: 1rem !important; + } + .rz-p-sm-5 { + padding: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pt-sm-5 { + padding-top: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pr-sm-5 { + padding-right: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pb-sm-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pl-sm-5 { + padding-left: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-sm-6 { + padding: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pt-sm-6 { + padding-top: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pr-sm-6 { + padding-right: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pb-sm-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pl-sm-6 { + padding-left: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-sm-7 { + padding: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pt-sm-7 { + padding-top: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pr-sm-7 { + padding-right: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pb-sm-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pl-sm-7 { + padding-left: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-sm-8 { + padding: 2rem !important; + } + .rz-py-sm-8, + .rz-pt-sm-8 { + padding-top: 2rem !important; + } + .rz-px-sm-8, + .rz-pr-sm-8 { + padding-right: 2rem !important; + } + .rz-py-sm-8, + .rz-pb-sm-8 { + padding-bottom: 2rem !important; + } + .rz-px-sm-8, + .rz-pl-sm-8 { + padding-left: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-end: 2rem !important; + } + .rz-p-sm-9 { + padding: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pt-sm-9 { + padding-top: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pr-sm-9 { + padding-right: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pb-sm-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pl-sm-9 { + padding-left: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-sm-10 { + padding: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pt-sm-10 { + padding-top: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pr-sm-10 { + padding-right: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pb-sm-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pl-sm-10 { + padding-left: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-sm-11 { + padding: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pt-sm-11 { + padding-top: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pr-sm-11 { + padding-right: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pb-sm-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pl-sm-11 { + padding-left: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-sm-12 { + padding: 3rem !important; + } + .rz-py-sm-12, + .rz-pt-sm-12 { + padding-top: 3rem !important; + } + .rz-px-sm-12, + .rz-pr-sm-12 { + padding-right: 3rem !important; + } + .rz-py-sm-12, + .rz-pb-sm-12 { + padding-bottom: 3rem !important; + } + .rz-px-sm-12, + .rz-pl-sm-12 { + padding-left: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-end: 3rem !important; + } + .rz-m-sm-auto { + margin: auto !important; + } + .rz-my-sm-auto, + .rz-mt-sm-auto { + margin-top: auto !important; + } + .rz-mx-sm-auto, + .rz-mr-sm-auto { + margin-right: auto !important; + } + .rz-my-sm-auto, + .rz-mb-sm-auto { + margin-bottom: auto !important; + } + .rz-mx-sm-auto, + .rz-ml-sm-auto { + margin-left: auto !important; + } + .rz-ms-sm-auto { + margin-inline-start: auto !important; + } + .rz-me-sm-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1024px) { + .rz-m-md-0 { + margin: 0 !important; + } + .rz-my-md-0, + .rz-mt-md-0 { + margin-top: 0 !important; + } + .rz-mx-md-0, + .rz-mr-md-0 { + margin-right: 0 !important; + } + .rz-my-md-0, + .rz-mb-md-0 { + margin-bottom: 0 !important; + } + .rz-mx-md-0, + .rz-ml-md-0 { + margin-left: 0 !important; + } + .rz-ms-md-0 { + margin-inline-start: 0 !important; + } + .rz-ms-md-0 { + margin-inline-end: 0 !important; + } + .rz-m-md-05 { + margin: 0.125rem !important; + } + .rz-my-md-05, + .rz-mt-md-05 { + margin-top: 0.125rem !important; + } + .rz-mx-md-05, + .rz-mr-md-05 { + margin-right: 0.125rem !important; + } + .rz-my-md-05, + .rz-mb-md-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-md-05, + .rz-ml-md-05 { + margin-left: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-md-1 { + margin: 0.25rem !important; + } + .rz-my-md-1, + .rz-mt-md-1 { + margin-top: 0.25rem !important; + } + .rz-mx-md-1, + .rz-mr-md-1 { + margin-right: 0.25rem !important; + } + .rz-my-md-1, + .rz-mb-md-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-md-1, + .rz-ml-md-1 { + margin-left: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-md-2 { + margin: 0.5rem !important; + } + .rz-my-md-2, + .rz-mt-md-2 { + margin-top: 0.5rem !important; + } + .rz-mx-md-2, + .rz-mr-md-2 { + margin-right: 0.5rem !important; + } + .rz-my-md-2, + .rz-mb-md-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-md-2, + .rz-ml-md-2 { + margin-left: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-md-3 { + margin: 0.75rem !important; + } + .rz-my-md-3, + .rz-mt-md-3 { + margin-top: 0.75rem !important; + } + .rz-mx-md-3, + .rz-mr-md-3 { + margin-right: 0.75rem !important; + } + .rz-my-md-3, + .rz-mb-md-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-md-3, + .rz-ml-md-3 { + margin-left: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-md-4 { + margin: 1rem !important; + } + .rz-my-md-4, + .rz-mt-md-4 { + margin-top: 1rem !important; + } + .rz-mx-md-4, + .rz-mr-md-4 { + margin-right: 1rem !important; + } + .rz-my-md-4, + .rz-mb-md-4 { + margin-bottom: 1rem !important; + } + .rz-mx-md-4, + .rz-ml-md-4 { + margin-left: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-end: 1rem !important; + } + .rz-m-md-5 { + margin: 1.25rem !important; + } + .rz-my-md-5, + .rz-mt-md-5 { + margin-top: 1.25rem !important; + } + .rz-mx-md-5, + .rz-mr-md-5 { + margin-right: 1.25rem !important; + } + .rz-my-md-5, + .rz-mb-md-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-md-5, + .rz-ml-md-5 { + margin-left: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-md-6 { + margin: 1.5rem !important; + } + .rz-my-md-6, + .rz-mt-md-6 { + margin-top: 1.5rem !important; + } + .rz-mx-md-6, + .rz-mr-md-6 { + margin-right: 1.5rem !important; + } + .rz-my-md-6, + .rz-mb-md-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-md-6, + .rz-ml-md-6 { + margin-left: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-md-7 { + margin: 1.75rem !important; + } + .rz-my-md-7, + .rz-mt-md-7 { + margin-top: 1.75rem !important; + } + .rz-mx-md-7, + .rz-mr-md-7 { + margin-right: 1.75rem !important; + } + .rz-my-md-7, + .rz-mb-md-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-md-7, + .rz-ml-md-7 { + margin-left: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-md-8 { + margin: 2rem !important; + } + .rz-my-md-8, + .rz-mt-md-8 { + margin-top: 2rem !important; + } + .rz-mx-md-8, + .rz-mr-md-8 { + margin-right: 2rem !important; + } + .rz-my-md-8, + .rz-mb-md-8 { + margin-bottom: 2rem !important; + } + .rz-mx-md-8, + .rz-ml-md-8 { + margin-left: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-end: 2rem !important; + } + .rz-m-md-9 { + margin: 2.25rem !important; + } + .rz-my-md-9, + .rz-mt-md-9 { + margin-top: 2.25rem !important; + } + .rz-mx-md-9, + .rz-mr-md-9 { + margin-right: 2.25rem !important; + } + .rz-my-md-9, + .rz-mb-md-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-md-9, + .rz-ml-md-9 { + margin-left: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-md-10 { + margin: 2.5rem !important; + } + .rz-my-md-10, + .rz-mt-md-10 { + margin-top: 2.5rem !important; + } + .rz-mx-md-10, + .rz-mr-md-10 { + margin-right: 2.5rem !important; + } + .rz-my-md-10, + .rz-mb-md-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-md-10, + .rz-ml-md-10 { + margin-left: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-md-11 { + margin: 2.75rem !important; + } + .rz-my-md-11, + .rz-mt-md-11 { + margin-top: 2.75rem !important; + } + .rz-mx-md-11, + .rz-mr-md-11 { + margin-right: 2.75rem !important; + } + .rz-my-md-11, + .rz-mb-md-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-md-11, + .rz-ml-md-11 { + margin-left: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-md-12 { + margin: 3rem !important; + } + .rz-my-md-12, + .rz-mt-md-12 { + margin-top: 3rem !important; + } + .rz-mx-md-12, + .rz-mr-md-12 { + margin-right: 3rem !important; + } + .rz-my-md-12, + .rz-mb-md-12 { + margin-bottom: 3rem !important; + } + .rz-mx-md-12, + .rz-ml-md-12 { + margin-left: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-end: 3rem !important; + } + .rz-p-md-0 { + padding: 0 !important; + } + .rz-py-md-0, + .rz-pt-md-0 { + padding-top: 0 !important; + } + .rz-px-md-0, + .rz-pr-md-0 { + padding-right: 0 !important; + } + .rz-py-md-0, + .rz-pb-md-0 { + padding-bottom: 0 !important; + } + .rz-px-md-0, + .rz-pl-md-0 { + padding-left: 0 !important; + } + .rz-ps-md-0 { + padding-inline-start: 0 !important; + } + .rz-ps-md-0 { + padding-inline-end: 0 !important; + } + .rz-p-md-05 { + padding: 0.125rem !important; + } + .rz-py-md-05, + .rz-pt-md-05 { + padding-top: 0.125rem !important; + } + .rz-px-md-05, + .rz-pr-md-05 { + padding-right: 0.125rem !important; + } + .rz-py-md-05, + .rz-pb-md-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-md-05, + .rz-pl-md-05 { + padding-left: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-md-1 { + padding: 0.25rem !important; + } + .rz-py-md-1, + .rz-pt-md-1 { + padding-top: 0.25rem !important; + } + .rz-px-md-1, + .rz-pr-md-1 { + padding-right: 0.25rem !important; + } + .rz-py-md-1, + .rz-pb-md-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-md-1, + .rz-pl-md-1 { + padding-left: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-md-2 { + padding: 0.5rem !important; + } + .rz-py-md-2, + .rz-pt-md-2 { + padding-top: 0.5rem !important; + } + .rz-px-md-2, + .rz-pr-md-2 { + padding-right: 0.5rem !important; + } + .rz-py-md-2, + .rz-pb-md-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-md-2, + .rz-pl-md-2 { + padding-left: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-md-3 { + padding: 0.75rem !important; + } + .rz-py-md-3, + .rz-pt-md-3 { + padding-top: 0.75rem !important; + } + .rz-px-md-3, + .rz-pr-md-3 { + padding-right: 0.75rem !important; + } + .rz-py-md-3, + .rz-pb-md-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-md-3, + .rz-pl-md-3 { + padding-left: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-md-4 { + padding: 1rem !important; + } + .rz-py-md-4, + .rz-pt-md-4 { + padding-top: 1rem !important; + } + .rz-px-md-4, + .rz-pr-md-4 { + padding-right: 1rem !important; + } + .rz-py-md-4, + .rz-pb-md-4 { + padding-bottom: 1rem !important; + } + .rz-px-md-4, + .rz-pl-md-4 { + padding-left: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-end: 1rem !important; + } + .rz-p-md-5 { + padding: 1.25rem !important; + } + .rz-py-md-5, + .rz-pt-md-5 { + padding-top: 1.25rem !important; + } + .rz-px-md-5, + .rz-pr-md-5 { + padding-right: 1.25rem !important; + } + .rz-py-md-5, + .rz-pb-md-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-md-5, + .rz-pl-md-5 { + padding-left: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-md-6 { + padding: 1.5rem !important; + } + .rz-py-md-6, + .rz-pt-md-6 { + padding-top: 1.5rem !important; + } + .rz-px-md-6, + .rz-pr-md-6 { + padding-right: 1.5rem !important; + } + .rz-py-md-6, + .rz-pb-md-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-md-6, + .rz-pl-md-6 { + padding-left: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-md-7 { + padding: 1.75rem !important; + } + .rz-py-md-7, + .rz-pt-md-7 { + padding-top: 1.75rem !important; + } + .rz-px-md-7, + .rz-pr-md-7 { + padding-right: 1.75rem !important; + } + .rz-py-md-7, + .rz-pb-md-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-md-7, + .rz-pl-md-7 { + padding-left: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-md-8 { + padding: 2rem !important; + } + .rz-py-md-8, + .rz-pt-md-8 { + padding-top: 2rem !important; + } + .rz-px-md-8, + .rz-pr-md-8 { + padding-right: 2rem !important; + } + .rz-py-md-8, + .rz-pb-md-8 { + padding-bottom: 2rem !important; + } + .rz-px-md-8, + .rz-pl-md-8 { + padding-left: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-end: 2rem !important; + } + .rz-p-md-9 { + padding: 2.25rem !important; + } + .rz-py-md-9, + .rz-pt-md-9 { + padding-top: 2.25rem !important; + } + .rz-px-md-9, + .rz-pr-md-9 { + padding-right: 2.25rem !important; + } + .rz-py-md-9, + .rz-pb-md-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-md-9, + .rz-pl-md-9 { + padding-left: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-md-10 { + padding: 2.5rem !important; + } + .rz-py-md-10, + .rz-pt-md-10 { + padding-top: 2.5rem !important; + } + .rz-px-md-10, + .rz-pr-md-10 { + padding-right: 2.5rem !important; + } + .rz-py-md-10, + .rz-pb-md-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-md-10, + .rz-pl-md-10 { + padding-left: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-md-11 { + padding: 2.75rem !important; + } + .rz-py-md-11, + .rz-pt-md-11 { + padding-top: 2.75rem !important; + } + .rz-px-md-11, + .rz-pr-md-11 { + padding-right: 2.75rem !important; + } + .rz-py-md-11, + .rz-pb-md-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-md-11, + .rz-pl-md-11 { + padding-left: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-md-12 { + padding: 3rem !important; + } + .rz-py-md-12, + .rz-pt-md-12 { + padding-top: 3rem !important; + } + .rz-px-md-12, + .rz-pr-md-12 { + padding-right: 3rem !important; + } + .rz-py-md-12, + .rz-pb-md-12 { + padding-bottom: 3rem !important; + } + .rz-px-md-12, + .rz-pl-md-12 { + padding-left: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-end: 3rem !important; + } + .rz-m-md-auto { + margin: auto !important; + } + .rz-my-md-auto, + .rz-mt-md-auto { + margin-top: auto !important; + } + .rz-mx-md-auto, + .rz-mr-md-auto { + margin-right: auto !important; + } + .rz-my-md-auto, + .rz-mb-md-auto { + margin-bottom: auto !important; + } + .rz-mx-md-auto, + .rz-ml-md-auto { + margin-left: auto !important; + } + .rz-ms-md-auto { + margin-inline-start: auto !important; + } + .rz-me-md-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1280px) { + .rz-m-lg-0 { + margin: 0 !important; + } + .rz-my-lg-0, + .rz-mt-lg-0 { + margin-top: 0 !important; + } + .rz-mx-lg-0, + .rz-mr-lg-0 { + margin-right: 0 !important; + } + .rz-my-lg-0, + .rz-mb-lg-0 { + margin-bottom: 0 !important; + } + .rz-mx-lg-0, + .rz-ml-lg-0 { + margin-left: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-start: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-end: 0 !important; + } + .rz-m-lg-05 { + margin: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mt-lg-05 { + margin-top: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-mr-lg-05 { + margin-right: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mb-lg-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-ml-lg-05 { + margin-left: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-lg-1 { + margin: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mt-lg-1 { + margin-top: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-mr-lg-1 { + margin-right: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-ml-lg-1 { + margin-left: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-lg-2 { + margin: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mt-lg-2 { + margin-top: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-mr-lg-2 { + margin-right: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-ml-lg-2 { + margin-left: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-lg-3 { + margin: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mt-lg-3 { + margin-top: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-mr-lg-3 { + margin-right: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mb-lg-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-ml-lg-3 { + margin-left: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-lg-4 { + margin: 1rem !important; + } + .rz-my-lg-4, + .rz-mt-lg-4 { + margin-top: 1rem !important; + } + .rz-mx-lg-4, + .rz-mr-lg-4 { + margin-right: 1rem !important; + } + .rz-my-lg-4, + .rz-mb-lg-4 { + margin-bottom: 1rem !important; + } + .rz-mx-lg-4, + .rz-ml-lg-4 { + margin-left: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-end: 1rem !important; + } + .rz-m-lg-5 { + margin: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mt-lg-5 { + margin-top: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-mr-lg-5 { + margin-right: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mb-lg-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-ml-lg-5 { + margin-left: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-lg-6 { + margin: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mt-lg-6 { + margin-top: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-mr-lg-6 { + margin-right: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mb-lg-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-ml-lg-6 { + margin-left: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-lg-7 { + margin: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mt-lg-7 { + margin-top: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-mr-lg-7 { + margin-right: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mb-lg-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-ml-lg-7 { + margin-left: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-lg-8 { + margin: 2rem !important; + } + .rz-my-lg-8, + .rz-mt-lg-8 { + margin-top: 2rem !important; + } + .rz-mx-lg-8, + .rz-mr-lg-8 { + margin-right: 2rem !important; + } + .rz-my-lg-8, + .rz-mb-lg-8 { + margin-bottom: 2rem !important; + } + .rz-mx-lg-8, + .rz-ml-lg-8 { + margin-left: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-end: 2rem !important; + } + .rz-m-lg-9 { + margin: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mt-lg-9 { + margin-top: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-mr-lg-9 { + margin-right: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mb-lg-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-ml-lg-9 { + margin-left: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-lg-10 { + margin: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mt-lg-10 { + margin-top: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-mr-lg-10 { + margin-right: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mb-lg-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-ml-lg-10 { + margin-left: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-lg-11 { + margin: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mt-lg-11 { + margin-top: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-mr-lg-11 { + margin-right: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mb-lg-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-ml-lg-11 { + margin-left: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-lg-12 { + margin: 3rem !important; + } + .rz-my-lg-12, + .rz-mt-lg-12 { + margin-top: 3rem !important; + } + .rz-mx-lg-12, + .rz-mr-lg-12 { + margin-right: 3rem !important; + } + .rz-my-lg-12, + .rz-mb-lg-12 { + margin-bottom: 3rem !important; + } + .rz-mx-lg-12, + .rz-ml-lg-12 { + margin-left: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-end: 3rem !important; + } + .rz-p-lg-0 { + padding: 0 !important; + } + .rz-py-lg-0, + .rz-pt-lg-0 { + padding-top: 0 !important; + } + .rz-px-lg-0, + .rz-pr-lg-0 { + padding-right: 0 !important; + } + .rz-py-lg-0, + .rz-pb-lg-0 { + padding-bottom: 0 !important; + } + .rz-px-lg-0, + .rz-pl-lg-0 { + padding-left: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-start: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-end: 0 !important; + } + .rz-p-lg-05 { + padding: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pt-lg-05 { + padding-top: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pr-lg-05 { + padding-right: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pb-lg-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pl-lg-05 { + padding-left: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-lg-1 { + padding: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pt-lg-1 { + padding-top: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pr-lg-1 { + padding-right: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pl-lg-1 { + padding-left: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-lg-2 { + padding: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pt-lg-2 { + padding-top: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pr-lg-2 { + padding-right: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pl-lg-2 { + padding-left: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-lg-3 { + padding: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pt-lg-3 { + padding-top: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pr-lg-3 { + padding-right: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pb-lg-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pl-lg-3 { + padding-left: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-lg-4 { + padding: 1rem !important; + } + .rz-py-lg-4, + .rz-pt-lg-4 { + padding-top: 1rem !important; + } + .rz-px-lg-4, + .rz-pr-lg-4 { + padding-right: 1rem !important; + } + .rz-py-lg-4, + .rz-pb-lg-4 { + padding-bottom: 1rem !important; + } + .rz-px-lg-4, + .rz-pl-lg-4 { + padding-left: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-end: 1rem !important; + } + .rz-p-lg-5 { + padding: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pt-lg-5 { + padding-top: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pr-lg-5 { + padding-right: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pb-lg-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pl-lg-5 { + padding-left: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-lg-6 { + padding: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pt-lg-6 { + padding-top: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pr-lg-6 { + padding-right: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pb-lg-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pl-lg-6 { + padding-left: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-lg-7 { + padding: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pt-lg-7 { + padding-top: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pr-lg-7 { + padding-right: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pb-lg-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pl-lg-7 { + padding-left: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-lg-8 { + padding: 2rem !important; + } + .rz-py-lg-8, + .rz-pt-lg-8 { + padding-top: 2rem !important; + } + .rz-px-lg-8, + .rz-pr-lg-8 { + padding-right: 2rem !important; + } + .rz-py-lg-8, + .rz-pb-lg-8 { + padding-bottom: 2rem !important; + } + .rz-px-lg-8, + .rz-pl-lg-8 { + padding-left: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-end: 2rem !important; + } + .rz-p-lg-9 { + padding: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pt-lg-9 { + padding-top: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pr-lg-9 { + padding-right: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pb-lg-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pl-lg-9 { + padding-left: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-lg-10 { + padding: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pt-lg-10 { + padding-top: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pr-lg-10 { + padding-right: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pb-lg-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pl-lg-10 { + padding-left: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-lg-11 { + padding: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pt-lg-11 { + padding-top: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pr-lg-11 { + padding-right: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pb-lg-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pl-lg-11 { + padding-left: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-lg-12 { + padding: 3rem !important; + } + .rz-py-lg-12, + .rz-pt-lg-12 { + padding-top: 3rem !important; + } + .rz-px-lg-12, + .rz-pr-lg-12 { + padding-right: 3rem !important; + } + .rz-py-lg-12, + .rz-pb-lg-12 { + padding-bottom: 3rem !important; + } + .rz-px-lg-12, + .rz-pl-lg-12 { + padding-left: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-end: 3rem !important; + } + .rz-m-lg-auto { + margin: auto !important; + } + .rz-my-lg-auto, + .rz-mt-lg-auto { + margin-top: auto !important; + } + .rz-mx-lg-auto, + .rz-mr-lg-auto { + margin-right: auto !important; + } + .rz-my-lg-auto, + .rz-mb-lg-auto { + margin-bottom: auto !important; + } + .rz-mx-lg-auto, + .rz-ml-lg-auto { + margin-left: auto !important; + } + .rz-ms-lg-auto { + margin-inline-start: auto !important; + } + .rz-me-lg-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1920px) { + .rz-m-xl-0 { + margin: 0 !important; + } + .rz-my-xl-0, + .rz-mt-xl-0 { + margin-top: 0 !important; + } + .rz-mx-xl-0, + .rz-mr-xl-0 { + margin-right: 0 !important; + } + .rz-my-xl-0, + .rz-mb-xl-0 { + margin-bottom: 0 !important; + } + .rz-mx-xl-0, + .rz-ml-xl-0 { + margin-left: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-end: 0 !important; + } + .rz-m-xl-05 { + margin: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mt-xl-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-mr-xl-05 { + margin-right: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mb-xl-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-ml-xl-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xl-1 { + margin: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mt-xl-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-mr-xl-1 { + margin-right: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-ml-xl-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xl-2 { + margin: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mt-xl-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-mr-xl-2 { + margin-right: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-ml-xl-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xl-3 { + margin: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mt-xl-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-mr-xl-3 { + margin-right: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mb-xl-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-ml-xl-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xl-4 { + margin: 1rem !important; + } + .rz-my-xl-4, + .rz-mt-xl-4 { + margin-top: 1rem !important; + } + .rz-mx-xl-4, + .rz-mr-xl-4 { + margin-right: 1rem !important; + } + .rz-my-xl-4, + .rz-mb-xl-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xl-4, + .rz-ml-xl-4 { + margin-left: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xl-5 { + margin: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mt-xl-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-mr-xl-5 { + margin-right: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mb-xl-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-ml-xl-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xl-6 { + margin: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mt-xl-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-mr-xl-6 { + margin-right: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mb-xl-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-ml-xl-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xl-7 { + margin: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mt-xl-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-mr-xl-7 { + margin-right: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mb-xl-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-ml-xl-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xl-8 { + margin: 2rem !important; + } + .rz-my-xl-8, + .rz-mt-xl-8 { + margin-top: 2rem !important; + } + .rz-mx-xl-8, + .rz-mr-xl-8 { + margin-right: 2rem !important; + } + .rz-my-xl-8, + .rz-mb-xl-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xl-8, + .rz-ml-xl-8 { + margin-left: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xl-9 { + margin: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mt-xl-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-mr-xl-9 { + margin-right: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mb-xl-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-ml-xl-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xl-10 { + margin: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mt-xl-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-mr-xl-10 { + margin-right: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mb-xl-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-ml-xl-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xl-11 { + margin: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mt-xl-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-mr-xl-11 { + margin-right: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mb-xl-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-ml-xl-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xl-12 { + margin: 3rem !important; + } + .rz-my-xl-12, + .rz-mt-xl-12 { + margin-top: 3rem !important; + } + .rz-mx-xl-12, + .rz-mr-xl-12 { + margin-right: 3rem !important; + } + .rz-my-xl-12, + .rz-mb-xl-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xl-12, + .rz-ml-xl-12 { + margin-left: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xl-0 { + padding: 0 !important; + } + .rz-py-xl-0, + .rz-pt-xl-0 { + padding-top: 0 !important; + } + .rz-px-xl-0, + .rz-pr-xl-0 { + padding-right: 0 !important; + } + .rz-py-xl-0, + .rz-pb-xl-0 { + padding-bottom: 0 !important; + } + .rz-px-xl-0, + .rz-pl-xl-0 { + padding-left: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-end: 0 !important; + } + .rz-p-xl-05 { + padding: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pt-xl-05 { + padding-top: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pr-xl-05 { + padding-right: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pb-xl-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pl-xl-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xl-1 { + padding: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pt-xl-1 { + padding-top: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pr-xl-1 { + padding-right: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pl-xl-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xl-2 { + padding: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pt-xl-2 { + padding-top: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pr-xl-2 { + padding-right: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pl-xl-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xl-3 { + padding: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pt-xl-3 { + padding-top: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pr-xl-3 { + padding-right: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pb-xl-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pl-xl-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xl-4 { + padding: 1rem !important; + } + .rz-py-xl-4, + .rz-pt-xl-4 { + padding-top: 1rem !important; + } + .rz-px-xl-4, + .rz-pr-xl-4 { + padding-right: 1rem !important; + } + .rz-py-xl-4, + .rz-pb-xl-4 { + padding-bottom: 1rem !important; + } + .rz-px-xl-4, + .rz-pl-xl-4 { + padding-left: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xl-5 { + padding: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pt-xl-5 { + padding-top: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pr-xl-5 { + padding-right: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pb-xl-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pl-xl-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xl-6 { + padding: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pt-xl-6 { + padding-top: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pr-xl-6 { + padding-right: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pb-xl-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pl-xl-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xl-7 { + padding: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pt-xl-7 { + padding-top: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pr-xl-7 { + padding-right: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pb-xl-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pl-xl-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xl-8 { + padding: 2rem !important; + } + .rz-py-xl-8, + .rz-pt-xl-8 { + padding-top: 2rem !important; + } + .rz-px-xl-8, + .rz-pr-xl-8 { + padding-right: 2rem !important; + } + .rz-py-xl-8, + .rz-pb-xl-8 { + padding-bottom: 2rem !important; + } + .rz-px-xl-8, + .rz-pl-xl-8 { + padding-left: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xl-9 { + padding: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pt-xl-9 { + padding-top: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pr-xl-9 { + padding-right: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pb-xl-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pl-xl-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xl-10 { + padding: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pt-xl-10 { + padding-top: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pr-xl-10 { + padding-right: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pb-xl-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pl-xl-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xl-11 { + padding: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pt-xl-11 { + padding-top: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pr-xl-11 { + padding-right: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pb-xl-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pl-xl-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xl-12 { + padding: 3rem !important; + } + .rz-py-xl-12, + .rz-pt-xl-12 { + padding-top: 3rem !important; + } + .rz-px-xl-12, + .rz-pr-xl-12 { + padding-right: 3rem !important; + } + .rz-py-xl-12, + .rz-pb-xl-12 { + padding-bottom: 3rem !important; + } + .rz-px-xl-12, + .rz-pl-xl-12 { + padding-left: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xl-auto { + margin: auto !important; + } + .rz-my-xl-auto, + .rz-mt-xl-auto { + margin-top: auto !important; + } + .rz-mx-xl-auto, + .rz-mr-xl-auto { + margin-right: auto !important; + } + .rz-my-xl-auto, + .rz-mb-xl-auto { + margin-bottom: auto !important; + } + .rz-mx-xl-auto, + .rz-ml-xl-auto { + margin-left: auto !important; + } + .rz-ms-xl-auto { + margin-inline-start: auto !important; + } + .rz-me-xl-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 2560px) { + .rz-m-xx-0 { + margin: 0 !important; + } + .rz-my-xx-0, + .rz-mt-xx-0 { + margin-top: 0 !important; + } + .rz-mx-xx-0, + .rz-mr-xx-0 { + margin-right: 0 !important; + } + .rz-my-xx-0, + .rz-mb-xx-0 { + margin-bottom: 0 !important; + } + .rz-mx-xx-0, + .rz-ml-xx-0 { + margin-left: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-end: 0 !important; + } + .rz-m-xx-05 { + margin: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mt-xx-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-mr-xx-05 { + margin-right: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mb-xx-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-ml-xx-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xx-1 { + margin: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mt-xx-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-mr-xx-1 { + margin-right: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mb-xx-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-ml-xx-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xx-2 { + margin: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mt-xx-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-mr-xx-2 { + margin-right: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mb-xx-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-ml-xx-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xx-3 { + margin: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mt-xx-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-mr-xx-3 { + margin-right: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mb-xx-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-ml-xx-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xx-4 { + margin: 1rem !important; + } + .rz-my-xx-4, + .rz-mt-xx-4 { + margin-top: 1rem !important; + } + .rz-mx-xx-4, + .rz-mr-xx-4 { + margin-right: 1rem !important; + } + .rz-my-xx-4, + .rz-mb-xx-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xx-4, + .rz-ml-xx-4 { + margin-left: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xx-5 { + margin: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mt-xx-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-mr-xx-5 { + margin-right: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mb-xx-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-ml-xx-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xx-6 { + margin: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mt-xx-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-mr-xx-6 { + margin-right: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mb-xx-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-ml-xx-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xx-7 { + margin: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mt-xx-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-mr-xx-7 { + margin-right: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mb-xx-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-ml-xx-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xx-8 { + margin: 2rem !important; + } + .rz-my-xx-8, + .rz-mt-xx-8 { + margin-top: 2rem !important; + } + .rz-mx-xx-8, + .rz-mr-xx-8 { + margin-right: 2rem !important; + } + .rz-my-xx-8, + .rz-mb-xx-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xx-8, + .rz-ml-xx-8 { + margin-left: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xx-9 { + margin: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mt-xx-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-mr-xx-9 { + margin-right: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mb-xx-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-ml-xx-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xx-10 { + margin: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mt-xx-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-mr-xx-10 { + margin-right: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mb-xx-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-ml-xx-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xx-11 { + margin: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mt-xx-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-mr-xx-11 { + margin-right: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mb-xx-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-ml-xx-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xx-12 { + margin: 3rem !important; + } + .rz-my-xx-12, + .rz-mt-xx-12 { + margin-top: 3rem !important; + } + .rz-mx-xx-12, + .rz-mr-xx-12 { + margin-right: 3rem !important; + } + .rz-my-xx-12, + .rz-mb-xx-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xx-12, + .rz-ml-xx-12 { + margin-left: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xx-0 { + padding: 0 !important; + } + .rz-py-xx-0, + .rz-pt-xx-0 { + padding-top: 0 !important; + } + .rz-px-xx-0, + .rz-pr-xx-0 { + padding-right: 0 !important; + } + .rz-py-xx-0, + .rz-pb-xx-0 { + padding-bottom: 0 !important; + } + .rz-px-xx-0, + .rz-pl-xx-0 { + padding-left: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-end: 0 !important; + } + .rz-p-xx-05 { + padding: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pt-xx-05 { + padding-top: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pr-xx-05 { + padding-right: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pb-xx-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pl-xx-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xx-1 { + padding: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pt-xx-1 { + padding-top: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pr-xx-1 { + padding-right: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pb-xx-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pl-xx-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xx-2 { + padding: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pt-xx-2 { + padding-top: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pr-xx-2 { + padding-right: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pb-xx-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pl-xx-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xx-3 { + padding: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pt-xx-3 { + padding-top: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pr-xx-3 { + padding-right: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pb-xx-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pl-xx-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xx-4 { + padding: 1rem !important; + } + .rz-py-xx-4, + .rz-pt-xx-4 { + padding-top: 1rem !important; + } + .rz-px-xx-4, + .rz-pr-xx-4 { + padding-right: 1rem !important; + } + .rz-py-xx-4, + .rz-pb-xx-4 { + padding-bottom: 1rem !important; + } + .rz-px-xx-4, + .rz-pl-xx-4 { + padding-left: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xx-5 { + padding: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pt-xx-5 { + padding-top: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pr-xx-5 { + padding-right: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pb-xx-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pl-xx-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xx-6 { + padding: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pt-xx-6 { + padding-top: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pr-xx-6 { + padding-right: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pb-xx-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pl-xx-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xx-7 { + padding: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pt-xx-7 { + padding-top: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pr-xx-7 { + padding-right: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pb-xx-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pl-xx-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xx-8 { + padding: 2rem !important; + } + .rz-py-xx-8, + .rz-pt-xx-8 { + padding-top: 2rem !important; + } + .rz-px-xx-8, + .rz-pr-xx-8 { + padding-right: 2rem !important; + } + .rz-py-xx-8, + .rz-pb-xx-8 { + padding-bottom: 2rem !important; + } + .rz-px-xx-8, + .rz-pl-xx-8 { + padding-left: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xx-9 { + padding: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pt-xx-9 { + padding-top: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pr-xx-9 { + padding-right: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pb-xx-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pl-xx-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xx-10 { + padding: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pt-xx-10 { + padding-top: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pr-xx-10 { + padding-right: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pb-xx-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pl-xx-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xx-11 { + padding: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pt-xx-11 { + padding-top: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pr-xx-11 { + padding-right: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pb-xx-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pl-xx-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xx-12 { + padding: 3rem !important; + } + .rz-py-xx-12, + .rz-pt-xx-12 { + padding-top: 3rem !important; + } + .rz-px-xx-12, + .rz-pr-xx-12 { + padding-right: 3rem !important; + } + .rz-py-xx-12, + .rz-pb-xx-12 { + padding-bottom: 3rem !important; + } + .rz-px-xx-12, + .rz-pl-xx-12 { + padding-left: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xx-auto { + margin: auto !important; + } + .rz-my-xx-auto, + .rz-mt-xx-auto { + margin-top: auto !important; + } + .rz-mx-xx-auto, + .rz-mr-xx-auto { + margin-right: auto !important; + } + .rz-my-xx-auto, + .rz-mb-xx-auto { + margin-bottom: auto !important; + } + .rz-mx-xx-auto, + .rz-ml-xx-auto { + margin-left: auto !important; + } + .rz-ms-xx-auto { + margin-inline-start: auto !important; + } + .rz-me-xx-auto { + margin-inline-end: auto !important; + } +} +h1.rz-heading { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2.rz-heading { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3.rz-heading { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4.rz-heading { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5.rz-heading { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +.rz-text-display-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h1-font-size); + line-height: var(--rz-text-display-h1-line-height); + font-weight: var(--rz-text-display-h1-font-weight); + letter-spacing: var(--rz-text-display-h1-letter-spacing); + color: var(--rz-text-display-h1-color); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); +} + +.rz-text-display-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h2-font-size); + line-height: var(--rz-text-display-h2-line-height); + font-weight: var(--rz-text-display-h2-font-weight); + letter-spacing: var(--rz-text-display-h2-letter-spacing); + color: var(--rz-text-display-h2-color); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); +} + +.rz-text-display-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h3-font-size); + line-height: var(--rz-text-display-h3-line-height); + font-weight: var(--rz-text-display-h3-font-weight); + letter-spacing: var(--rz-text-display-h3-letter-spacing); + color: var(--rz-text-display-h3-color); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); +} + +.rz-text-display-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h4-font-size); + line-height: var(--rz-text-display-h4-line-height); + font-weight: var(--rz-text-display-h4-font-weight); + letter-spacing: var(--rz-text-display-h4-letter-spacing); + color: var(--rz-text-display-h4-color); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); +} + +.rz-text-display-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h5-font-size); + line-height: var(--rz-text-display-h5-line-height); + font-weight: var(--rz-text-display-h5-font-weight); + letter-spacing: var(--rz-text-display-h5-letter-spacing); + color: var(--rz-text-display-h5-color); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); +} + +.rz-text-display-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h6-font-size); + line-height: var(--rz-text-display-h6-line-height); + font-weight: var(--rz-text-display-h6-font-weight); + letter-spacing: var(--rz-text-display-h6-letter-spacing); + color: var(--rz-text-display-h6-color); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); +} + +.rz-text-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h1-font-size); + line-height: var(--rz-text-h1-line-height); + font-weight: var(--rz-text-h1-font-weight); + letter-spacing: var(--rz-text-h1-letter-spacing); + color: var(--rz-text-h1-color); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); +} + +.rz-text-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h2-font-size); + line-height: var(--rz-text-h2-line-height); + font-weight: var(--rz-text-h2-font-weight); + letter-spacing: var(--rz-text-h2-letter-spacing); + color: var(--rz-text-h2-color); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); +} + +.rz-text-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h3-font-size); + line-height: var(--rz-text-h3-line-height); + font-weight: var(--rz-text-h3-font-weight); + letter-spacing: var(--rz-text-h3-letter-spacing); + color: var(--rz-text-h3-color); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); +} + +.rz-text-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h4-font-size); + line-height: var(--rz-text-h4-line-height); + font-weight: var(--rz-text-h4-font-weight); + letter-spacing: var(--rz-text-h4-letter-spacing); + color: var(--rz-text-h4-color); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); +} + +.rz-text-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h5-font-size); + line-height: var(--rz-text-h5-line-height); + font-weight: var(--rz-text-h5-font-weight); + letter-spacing: var(--rz-text-h5-letter-spacing); + color: var(--rz-text-h5-color); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); +} + +.rz-text-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-text-h6-color); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); +} + +.rz-text-subtitle1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle1-font-size); + line-height: var(--rz-text-subtitle1-line-height); + font-weight: var(--rz-text-subtitle1-font-weight); + letter-spacing: var(--rz-text-subtitle1-letter-spacing); + color: var(--rz-text-subtitle1-color); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); +} + +.rz-text-subtitle2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle2-font-size); + line-height: var(--rz-text-subtitle2-line-height); + font-weight: var(--rz-text-subtitle2-font-weight); + letter-spacing: var(--rz-text-subtitle2-letter-spacing); + color: var(--rz-text-subtitle2-color); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); +} + +.rz-text-body1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body1-font-size); + line-height: var(--rz-text-body1-line-height); + font-weight: var(--rz-text-body1-font-weight); + letter-spacing: var(--rz-text-body1-letter-spacing); + color: var(--rz-text-body1-color); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); +} + +.rz-text-body2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body2-font-size); + line-height: var(--rz-text-body2-line-height); + font-weight: var(--rz-text-body2-font-weight); + letter-spacing: var(--rz-text-body2-letter-spacing); + color: var(--rz-text-body2-color); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); +} + +.rz-text-button { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-button-font-size); + line-height: var(--rz-text-button-line-height); + font-weight: var(--rz-text-button-font-weight); + letter-spacing: var(--rz-text-button-letter-spacing); + text-transform: var(--rz-text-button-text-transform); + color: var(--rz-text-button-color); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); +} + +.rz-text-caption { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-caption-font-size); + line-height: var(--rz-text-caption-line-height); + font-weight: var(--rz-text-caption-font-weight); + letter-spacing: var(--rz-text-caption-letter-spacing); + color: var(--rz-text-caption-color); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); +} + +.rz-text-overline { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-overline-font-size); + line-height: var(--rz-text-overline-line-height); + font-weight: var(--rz-text-overline-font-weight); + letter-spacing: var(--rz-text-overline-letter-spacing); + text-transform: var(--rz-text-overline-text-transform); + color: var(--rz-text-overline-color); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); +} + +.rz-text-align-start { + text-align: start; +} + +.rz-text-align-end { + text-align: end; +} + +.rz-text-align-left { + text-align: left; +} + +.rz-text-align-right { + text-align: right; +} + +.rz-text-align-center { + text-align: center; +} + +.rz-text-align-justify { + text-align: justify; +} + +.rz-text-align-justify-all { + text-align: justify-all; +} + +.rz-text-align-match-parent { + text-align: match-parent; +} + +@media (min-width: 576px) { + .rz-text-align-xs-start { + text-align: start !important; + } + .rz-text-align-xs-end { + text-align: end !important; + } + .rz-text-align-xs-left { + text-align: left !important; + } + .rz-text-align-xs-right { + text-align: right !important; + } + .rz-text-align-xs-center { + text-align: center !important; + } + .rz-text-align-xs-justify { + text-align: justify !important; + } + .rz-text-align-xs-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xs-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 768px) { + .rz-text-align-sm-start { + text-align: start !important; + } + .rz-text-align-sm-end { + text-align: end !important; + } + .rz-text-align-sm-left { + text-align: left !important; + } + .rz-text-align-sm-right { + text-align: right !important; + } + .rz-text-align-sm-center { + text-align: center !important; + } + .rz-text-align-sm-justify { + text-align: justify !important; + } + .rz-text-align-sm-justify-all { + text-align: justify-all !important; + } + .rz-text-align-sm-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1024px) { + .rz-text-align-md-start { + text-align: start !important; + } + .rz-text-align-md-end { + text-align: end !important; + } + .rz-text-align-md-left { + text-align: left !important; + } + .rz-text-align-md-right { + text-align: right !important; + } + .rz-text-align-md-center { + text-align: center !important; + } + .rz-text-align-md-justify { + text-align: justify !important; + } + .rz-text-align-md-justify-all { + text-align: justify-all !important; + } + .rz-text-align-md-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1280px) { + .rz-text-align-lg-start { + text-align: start !important; + } + .rz-text-align-lg-end { + text-align: end !important; + } + .rz-text-align-lg-left { + text-align: left !important; + } + .rz-text-align-lg-right { + text-align: right !important; + } + .rz-text-align-lg-center { + text-align: center !important; + } + .rz-text-align-lg-justify { + text-align: justify !important; + } + .rz-text-align-lg-justify-all { + text-align: justify-all !important; + } + .rz-text-align-lg-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1920px) { + .rz-text-align-xl-start { + text-align: start !important; + } + .rz-text-align-xl-end { + text-align: end !important; + } + .rz-text-align-xl-left { + text-align: left !important; + } + .rz-text-align-xl-right { + text-align: right !important; + } + .rz-text-align-xl-center { + text-align: center !important; + } + .rz-text-align-xl-justify { + text-align: justify !important; + } + .rz-text-align-xl-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xl-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 2560px) { + .rz-text-align-xx-start { + text-align: start !important; + } + .rz-text-align-xx-end { + text-align: end !important; + } + .rz-text-align-xx-left { + text-align: left !important; + } + .rz-text-align-xx-right { + text-align: right !important; + } + .rz-text-align-xx-center { + text-align: center !important; + } + .rz-text-align-xx-justify { + text-align: justify !important; + } + .rz-text-align-xx-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xx-match-parent { + text-align: match-parent !important; + } +} +.rz-text-wrap { + white-space: normal !important; +} + +.rz-text-nowrap { + white-space: nowrap !important; +} + +.rz-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rz-text-capitalize { + text-transform: capitalize; +} + +.rz-text-uppercase { + text-transform: uppercase; +} + +.rz-text-lowercase { + text-transform: lowercase; +} + +.rz-label { + vertical-align: middle; + margin-block-start: 0; + margin-block-end: 0; +} + +.rz-form .row .rz-label { + min-height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; + border-top: var(--rz-input-border); + border-bottom: var(--rz-input-border); + border-color: transparent; +} + +.rz-layout ::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; + font-family: var(--rz-icon-font-family); + font-weight: var(--rz-icon-weight, inherit); + font-style: normal; + font-size: var(--rz-icon-size); + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: "liga"; +} + +i.rzi { + display: inline-flex; + justify-content: center; + align-items: center; +} + +.rzi-primary { + color: var(--rz-primary); +} + +.rzi-secondary { + color: var(--rz-secondary); +} + +.rzi-info { + color: var(--rz-info); +} + +.rzi-warning { + color: var(--rz-warning); +} + +.rzi-error { + color: var(--rz-danger); +} + +.rzi-danger { + color: var(--rz-danger); +} + +.rzi-success { + color: var(--rz-success); +} + +.rzi-base { + color: var(--rz-base-600); +} + +.rzi-light { + color: var(--rz-base-600); +} + +.rzi-dark { + color: var(--rz-black); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + +.rz-helper-hidden-accessible { + opacity: 0; + height: 0; +} +.rz-helper-hidden-accessible input { + height: 0; + padding: 0; + margin: 0; + border: 0; +} + +.rz-helper-hidden { + display: none; +} + +.rz-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; +} + +.rz-pager-element, .rz-button { + box-sizing: border-box; + display: inline-block; + margin: 0; + color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; + border: none; + border-radius: var(--rz-button-border-radius); + outline: none; + box-shadow: var(--rz-button-shadow); + font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); + text-decoration: none; + transition: var(--rz-button-transition); + -webkit-appearance: none; +} +.rz-pager-element:focus, .rz-button:focus { + outline: var(--rz-outline-normal); +} +.rz-pager-element:focus-visible, .rz-button:focus-visible { + outline: var(--rz-button-focus-outline); + outline-offset: var(--rz-button-focus-outline-offset); +} +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { + cursor: pointer; +} +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { + text-decoration: none; + background-image: var(--rz-button-hover-gradient); + background-size: var(--rz-button-hover-background-size); + box-shadow: var(--rz-button-hover-shadow); +} +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { + text-decoration: none; + background-image: var(--rz-button-focus-gradient); + background-size: var(--rz-button-focus-background-size); + box-shadow: var(--rz-button-focus-shadow); +} +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { + text-decoration: none; + background-image: var(--rz-button-active-gradient); + background-size: var(--rz-button-active-background-size); + box-shadow: var(--rz-button-active-shadow); +} +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { + opacity: var(--rz-button-disabled-opacity); + cursor: initial; +} +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { + opacity: var(--rz-button-empty-opacity); + cursor: initial; +} +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: var(--rz-button-vertical-align); + line-height: var(--rz-button-line-height); +} +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { + vertical-align: var(--rz-button-vertical-align); +} +.rz-pager-element .rzi, .rz-button .rzi { + vertical-align: var(--rz-button-vertical-align); +} + +.rz-button.rz-primary:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-button.rz-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-button.rz-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-button.rz-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} +.rz-button.rz-primary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-button.rz-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-button.rz-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-button.rz-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} +.rz-button.rz-secondary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-secondary.rz-variant-flat:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-button.rz-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-button.rz-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-button.rz-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} +.rz-button.rz-info.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-info.rz-variant-flat:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-button.rz-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-button.rz-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-button.rz-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} +.rz-button.rz-warning.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-warning.rz-variant-flat:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-button.rz-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-button.rz-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-button.rz-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-button.rz-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} +.rz-button.rz-error.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-error.rz-variant-flat:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-button.rz-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-button.rz-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-black); + color: var(--rz-text-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-secondary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-info { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} +.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-warning { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-error { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} +.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-danger { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-success { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} +.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-base { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-light { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-dark { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-black); + color: var(--rz-black); +} +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; +} + +.rz-button.rz-variant-text.rz-primary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-secondary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-info { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-button.rz-variant-text.rz-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-button.rz-variant-text.rz-info.rz-shade-default { + color: var(--rz-info); +} +.rz-button.rz-variant-text.rz-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-button.rz-variant-text.rz-info.rz-shade-darker { + color: var(--rz-info-darker); +} +.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-warning { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-error { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-button.rz-variant-text.rz-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-button.rz-variant-text.rz-error.rz-shade-default { + color: var(--rz-error); +} +.rz-button.rz-variant-text.rz-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-button.rz-variant-text.rz-error.rz-shade-darker { + color: var(--rz-error-darker); +} +.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-danger { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-success { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-button.rz-variant-text.rz-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-button.rz-variant-text.rz-success.rz-shade-default { + color: var(--rz-success); +} +.rz-button.rz-variant-text.rz-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-button.rz-variant-text.rz-success.rz-shade-darker { + color: var(--rz-success-darker); +} +.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-text-color); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-black); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-pager-element, .rz-button-lg { + padding: 0.75rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3rem; + min-width: 3rem; + font-size: 1rem; + font-weight: 500; + letter-spacing: 1.25px; + text-transform: uppercase; +} +.rz-pager-element .rz-button-box, .rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-pager-element, .rz-button-lg.rz-button-icon-only { + padding: 0.75rem; +} +.rz-pager-element .rzi, .rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 1.25px; + text-transform: uppercase; +} +.rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-md.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-md.rz-button-icon-only, .rz-button-md.rz-pager-element { + padding: 0.5rem; +} +.rz-button-md .rzi { + font-size: 1.25rem; + height: 1.25rem; + line-height: 1.25rem; + width: 1.25rem; +} + +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { + padding: 0.375rem 0.75rem; + height: auto; + line-height: 1rem; + min-height: 1.75rem; + min-width: 1.75rem; + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.75px; + text-transform: uppercase; +} +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { + line-height: 1rem; + gap: 0.25rem; +} +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { + padding: 0.375rem; +} +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { + font-size: 1rem; + height: 1rem; + line-height: 1rem; + width: 1rem; +} + +.rz-button-xs { + padding: 0.25rem 0.5rem; + height: auto; + line-height: 1rem; + min-height: 1.25rem; + min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0; + text-transform: uppercase; +} +.rz-button-xs .rz-button-box { + line-height: 1rem; + gap: 0.125rem; +} +.rz-button-xs.rz-button-icon-left { + padding: 0 1rem; +} +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { + padding: 0.25rem; +} +.rz-button-xs .rzi { + font-size: 1rem; + height: 1rem; + line-height: 1rem; + width: 1rem; +} + +@keyframes button-icon-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.rz-badge { + box-sizing: border-box; + color: var(--rz-text-contrast-color); + display: inline-block; + padding: var(--rz-badge-padding); + font-size: var(--rz-badge-font-size); + font-weight: var(--rz-badge-font-weight); + line-height: var(--rz-badge-line-height); + text-align: center; + text-transform: var(--rz-badge-text-transform); + white-space: nowrap; + border-radius: var(--rz-badge-border-radius); + letter-spacing: var(--rz-badge-letter-spacing); +} +.rz-button .rz-badge { + vertical-align: top; +} + +.rz-badge-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-badge-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-badge-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-badge-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} + +.rz-badge-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-badge-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-badge-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-badge-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} + +.rz-badge-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-badge-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-badge-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-badge-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} + +.rz-badge-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-badge-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-badge-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-badge-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} + +.rz-badge-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-badge-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-badge-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-badge-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-badge-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} + +.rz-badge-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-badge-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-badge-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-badge-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} + +.rz-badge-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-badge-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-badge-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-badge-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} + +.rz-badge-base { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-black); + color: var(--rz-text-color); +} + +.rz-variant-outlined.rz-badge-primary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} + +.rz-variant-outlined.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-lighter); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} + +.rz-variant-outlined.rz-badge-info { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-lighter); +} +.rz-variant-outlined.rz-badge-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-variant-outlined.rz-badge-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-variant-outlined.rz-badge-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-variant-outlined.rz-badge-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} + +.rz-variant-outlined.rz-badge-warning { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-lighter); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} + +.rz-variant-outlined.rz-badge-error { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-lighter); +} +.rz-variant-outlined.rz-badge-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-variant-outlined.rz-badge-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-variant-outlined.rz-badge-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-variant-outlined.rz-badge-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} + +.rz-variant-outlined.rz-badge-danger { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-lighter); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} + +.rz-variant-outlined.rz-badge-success { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-lighter); +} +.rz-variant-outlined.rz-badge-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-variant-outlined.rz-badge-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-variant-outlined.rz-badge-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-variant-outlined.rz-badge-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} + +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-600); + color: var(--rz-base-600); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-black); + color: var(--rz-black); +} + +.rz-variant-text.rz-badge-primary { + background-color: transparent; +} +.rz-variant-text.rz-badge-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-variant-text.rz-badge-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-variant-text.rz-badge-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-variant-text.rz-badge-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-variant-text.rz-badge-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} + +.rz-variant-text.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-text.rz-badge-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-variant-text.rz-badge-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-variant-text.rz-badge-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-variant-text.rz-badge-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-variant-text.rz-badge-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} + +.rz-variant-text.rz-badge-info { + background-color: transparent; +} +.rz-variant-text.rz-badge-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-variant-text.rz-badge-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-variant-text.rz-badge-info.rz-shade-default { + color: var(--rz-info); +} +.rz-variant-text.rz-badge-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-variant-text.rz-badge-info.rz-shade-darker { + color: var(--rz-info-darker); +} + +.rz-variant-text.rz-badge-warning { + background-color: transparent; +} +.rz-variant-text.rz-badge-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-variant-text.rz-badge-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-variant-text.rz-badge-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-variant-text.rz-badge-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-variant-text.rz-badge-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} + +.rz-variant-text.rz-badge-error { + background-color: transparent; +} +.rz-variant-text.rz-badge-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-variant-text.rz-badge-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-variant-text.rz-badge-error.rz-shade-default { + color: var(--rz-error); +} +.rz-variant-text.rz-badge-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-variant-text.rz-badge-error.rz-shade-darker { + color: var(--rz-error-darker); +} + +.rz-variant-text.rz-badge-danger { + background-color: transparent; +} +.rz-variant-text.rz-badge-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-variant-text.rz-badge-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-variant-text.rz-badge-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-variant-text.rz-badge-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-variant-text.rz-badge-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} + +.rz-variant-text.rz-badge-success { + background-color: transparent; +} +.rz-variant-text.rz-badge-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-variant-text.rz-badge-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-variant-text.rz-badge-success.rz-shade-default { + color: var(--rz-success); +} +.rz-variant-text.rz-badge-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-variant-text.rz-badge-success.rz-shade-darker { + color: var(--rz-success-darker); +} + +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-600); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-black); + background-color: transparent; +} + +.rz-badge-pill { + border-radius: var(--rz-badge-pill-border-radius); + padding: var(--rz-badge-pill-padding); +} + +.rz-dropzone { + user-select: none; +} + +.rz-dropzone-item { + user-select: none; + cursor: grab; +} + +.rz-dragging { + cursor: grabbing; +} + +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { + box-shadow: var(--rz-input-hover-shadow); + border: var(--rz-input-hover-border); +} + +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { + box-shadow: var(--rz-input-focus-shadow); + border: var(--rz-input-focus-border); + outline: var(--rz-input-focus-outline); + outline-offset: var(--rz-input-focus-outline-offset); +} + +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { + background-color: var(--rz-input-disabled-background-color); + color: var(--rz-input-disabled-color); + border: none; +} + +input { + color: var(--rz-input-value-color); + font-size: var(--rz-input-font-size); +} +input::placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); +} + +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + color: var(--rz-input-value-color); + font-family: inherit; + font-size: var(--rz-input-font-size); + transition: var(--rz-input-transition); + outline: none; +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + box-shadow: none; + background-color: transparent; + outline: none; + border: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus-within { + border: none; + box-shadow: none; +} + +.rz-header { + background-color: var(--rz-header-background-color); + min-height: var(--rz-header-min-height); + border-bottom: var(--rz-header-border); + color: var(--rz-header-color); + box-shadow: var(--rz-header-shadow); +} +.rz-header.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--rz-header-z); +} +.rz-header a { + text-decoration: none; +} + +.rz-footer { + padding: var(--rz-footer-padding); + border-top: var(--rz-footer-border); + background-color: var(--rz-footer-background-color); + color: var(--rz-footer-color); +} +.rz-footer.fixed { + position: fixed; + z-index: var(--rz-footer-z); + bottom: 0; + left: 0; + right: 0; +} + +.rz-sidebar { + background-color: var(--rz-sidebar-background-color); + color: var(--rz-sidebar-color); + border-inline-end: var(--rz-sidebar-border-inline-end); + position: fixed; + overflow: auto; + left: 0; + top: 0; + bottom: 0; + z-index: var(--rz-sidebar-z); + width: var(--rz-sidebar-width); + opacity: 1; + transition: width var(--rz-transition), opacity var(--rz-transition); +} + +@media (max-width: 768px) { + .rz-sidebar-responsive { + width: 0; + opacity: 0; + } +} +.rz-sidebar-expanded { + width: var(--rz-sidebar-width); + opacity: 1; +} + +.rz-sidebar-collapsed { + width: 0 !important; + opacity: 0; +} + +.rz-card { + box-sizing: border-box; + padding: var(--rz-card-padding); + border-radius: var(--rz-card-border-radius); + background-color: var(--rz-card-background-color); +} +.rz-card.rz-variant-filled { + box-shadow: var(--rz-card-shadow); +} +.rz-card.rz-variant-flat { + background-color: var(--rz-card-flat-background-color); +} +.rz-card.rz-variant-outlined { + background: transparent; + border: var(--rz-card-border); +} +.rz-card.rz-variant-text { + background: transparent; +} +.rz-card h1, +.rz-card h2, +.rz-card h3, +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + +.rz-accordion { + box-sizing: border-box; + border-radius: var(--rz-accordion-border-radius); + box-shadow: var(--rz-accordion-shadow); +} +.rz-accordion > div:first-child { + border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; +} +.rz-accordion > div:last-child, .rz-accordion > div:last-child > div { + border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); +} +.rz-accordion > div:only-child { + border-radius: var(--rz-accordion-border-radius); +} +.rz-accordion:focus { + outline: var(--rz-outline-normal); +} +.rz-accordion:focus-visible { + outline: var(--rz-accordion-item-focus-outline); +} +.rz-accordion .rz-accordion-header { + background-color: var(--rz-accordion-item-background-color); + margin: var(--rz-accordion-item-margin); +} +.rz-accordion .rz-accordion-header:not(:first-child) { + border-top: var(--rz-accordion-item-border); +} +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); + color: var(--rz-accordion-item-color); + line-height: var(--rz-accordion-item-line-height); + text-decoration: none; + display: flex; + align-items: center; + font-size: var(--rz-accordion-item-font-size); + font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; +} +.rz-accordion .rz-accordion-header > a:hover { + color: var(--rz-accordion-hover-color); +} +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { + flex-grow: 1; +} +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { + outline: var(--rz-accordion-item-focus-outline); + outline-offset: var(--rz-accordion-item-focus-outline-offset); +} +.rz-accordion .rz-accordion-header .rzi { + font-size: var(--rz-accordion-icon-font-size); + margin-inline: var(--rz-accordion-icon-margin-inline); +} + +.rz-accordion-toggle-icon { + width: var(--rz-accordion-icon-width); + height: var(--rz-accordion-icon-height); + font-size: var(--rz-accordion-icon-font-size); + order: var(--rz-accordion-toggle-icon-order); +} +.rz-accordion-toggle-icon.rzi { + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); +} +.rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "keyboard_arrow_down"; +} +.rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "keyboard_arrow_up"; +} + +.rz-accordion-content-wrapper-overflown { + overflow: hidden; +} + +.rz-accordion-content { + font-size: var(--rz-accordion-content-font-size); + background-color: var(--rz-accordion-item-background-color); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); +} + +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "keyboard_arrow_down"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "keyboard_arrow_up"; +} + +.rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); + background: var(--rz-panel-background-color); + border-radius: var(--rz-panel-border-radius); + box-shadow: var(--rz-panel-shadow); +} + +.rz-panel-titlebar { + display: flex; + justify-content: space-between; +} + +.rz-panel-content { + margin: var(--rz-panel-content-margin); +} + +.rz-panel-content-wrapper[aria-hidden=true] { + display: none; +} + +.rz-panel-title { + line-height: var(--rz-panel-title-line-height); + font-weight: var(--rz-panel-title-font-weight); +} + +.rz-panel-titlebar-toggler { + width: var(--rz-panel-toggle-icon-width); + height: var(--rz-panel-toggle-icon-height); + font-size: var(--rz-panel-toggle-icon-font-size); + border-radius: var(--rz-panel-toggle-icon-border-radius); + background-color: var(--rz-panel-toggle-icon-background-color); + color: inherit; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} +.rz-panel-titlebar-toggler:hover { + text-decoration: none; + color: var(--rz-panel-hover-color); +} +.rz-panel-titlebar-toggler:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-titlebar-toggler:focus-visible { + outline: var(--rz-panel-toggle-icon-focus-outline); + outline-offset: var(--rz-panel-toggle-icon-focus-outline-offset); +} +.rz-panel-titlebar-toggler .rzi-minus:before { + content: "remove"; +} +.rz-panel-titlebar-toggler .rzi-plus:before { + content: "add"; +} + +.rz-sidebar-toggle { + appearance: none; + cursor: pointer; + border: none; + padding: var(--rz-sidebar-toggle-padding); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); + background-color: var(--rz-sidebar-toggle-background-color); + color: var(--rz-sidebar-toggle-color); +} +.rz-justify-content-flex-end .rz-sidebar-toggle { + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; +} +.rz-sidebar-toggle:focus { + outline: none; +} +.rz-sidebar-toggle:focus-visible { + outline: var(--rz-sidebar-toggle-focus-outline); + outline-offset: var(--rz-sidebar-toggle-focus-outline-offset); +} +.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover { + color: var(--rz-sidebar-toggle-hover-color); + background: var(--rz-sidebar-toggle-hover-background-color); + border-radius: var(--rz-sidebar-toggle-hover-border-radius); +} +.rz-sidebar-toggle .rzi { + width: var(--rz-sidebar-toggle-icon-width); + height: var(--rz-sidebar-toggle-icon-height); + font-size: var(--rz-sidebar-toggle-icon-width); +} + +.rz-navigation-item-link { + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.rz-navigation-item-link:hover { + text-decoration: none; +} + +.rz-navigation-item-text { + flex: auto; +} + +.rz-context-menu { + box-sizing: border-box; +} +.rz-context-menu .rz-menu { + flex-direction: column; +} + +.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { + box-shadow: var(--rz-context-menu-box-shadow); + border: var(--rz-menu-border); + border-radius: var(--rz-menu-border-radius); +} + +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + align-items: stretch; + background-color: var(--rz-menu-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + background-color: var(--rz-menu-top-item-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-top-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-top-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-top-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu):focus { + outline: var(--rz-outline-normal); +} +.rz-menu:not(.rz-profile-menu):focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-menu-item-focus-outline); + outline-offset: var(--rz-menu-item-focus-outline-offset); +} +.rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-end: -2px; + height: 1px; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: var(--rz-menu-top-item-selected-color); + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item { + position: relative; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + margin: 0; + min-width: 100%; + box-shadow: var(--rz-context-menu-box-shadow); + z-index: 3; + border-radius: var(--rz-menu-border-radius); + background-color: var(--rz-menu-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu { + position: static; + box-shadow: none; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + margin-inline-start: var(--rz-menu-item-offset); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); +} +.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { + margin-inline: var(--rz-menu-item-icon-margin-inline); +} + +.rz-navigation-item-wrapper, +.rz-navigation-item-link, +.rz-navigation-item-text { + transition: var(--rz-menu-item-transition); +} + +li.rz-navigation-item.rz-state-disabled { + opacity: var(--rz-menu-item-disabled-opacity); + cursor: initial; + pointer-events: none; +} + +.rz-menu-toggle-item { + display: none; + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); + justify-content: end; + align-items: center; + width: 100%; + height: 100%; +} + +.rz-menu-toggle { + appearance: none; + background-color: transparent; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: var(--rz-menu-top-item-color); +} +.rz-menu-toggle:hover { + background-color: transparent; + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu-toggle:active { + background-color: transparent; + color: var(--rz-menu-top-item-color); +} +.rz-context-menu .rz-menu-toggle { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu-toggle:hover { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu-toggle:active { + color: var(--rz-menu-item-color); +} + +@media (max-width: 768px) { + .rz-menu:not(.rz-profile-menu).rz-menu-closed .rz-navigation-item { + display: none; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle .rzi { + margin: 0; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open { + display: block; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-item { + background-color: inherit; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-menu { + position: static; + box-shadow: none; + border-radius: 0; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item { + display: flex; + } + .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active:before { + display: none !important; + } +} +.rz-panel-menu { + box-sizing: border-box; + list-style: none; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; + overflow: auto; + font-size: var(--rz-panel-menu-font-size); + font-weight: var(--rz-panel-menu-font-weight); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ +} +.rz-panel-menu:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-panel-menu-focus-outline); + outline-offset: var(--rz-panel-menu-focus-outline-offset); +} +.rz-panel-menu > .rz-navigation-item { + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); +} +.rz-panel-menu .rz-navigation-item { + border-block-end: var(--rz-panel-menu-item-border); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper { + position: relative; + line-height: var(--rz-panel-menu-item-line-height); + transition: var(--rz-panel-menu-item-transition); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-active-background-color); + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-active:before, +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-start: 0; + inset-block-end: 0; + width: 4px; + background-color: var(--rz-panel-menu-item-active-indicator); +} +.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); + color: inherit; + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu a.rz-navigation-item-link { + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu .rz-navigation-item-text { + flex: auto; +} +.rz-panel-menu .rz-navigation-item-icon-children { + margin-inline-start: auto; + font-size: var(--rz-panel-menu-toggle-icon-font-size); + opacity: var(--rz-panel-menu-toggle-icon-opacity); + z-index: 1; +} +.rz-panel-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-height); + width: var(--rz-panel-menu-icon-width); + color: var(--rz-panel-menu-icon-color); + margin-inline: var(--rz-panel-menu-icon-margin-inline); + font-size: var(--rz-panel-menu-icon-font-size); + transition: var(--rz-panel-menu-item-transition); +} +.rz-panel-menu .rz-navigation-menu { + list-style: none; + padding: 0; + margin-block-end: 0; + overflow: hidden; + /* Third level items */ +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); + border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color); + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-2nd-level-active-background-color); + color: var(--rz-panel-menu-item-2nd-level-active-color); + font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-active-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-2nd-level-icon-size); + width: var(--rz-panel-menu-icon-2nd-level-icon-size); + font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu { + margin: 0; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); + color: var(--rz-panel-menu-item-3rd-level-active-color); +} + +ul.rz-profile-menu { + box-sizing: border-box; + list-style: none; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); + display: inline-block; + background-color: var(--rz-profile-menu-top-item-background-color); + border-inline-start: var(--rz-profile-menu-border); + position: relative; + z-index: 3; +} +ul.rz-profile-menu:focus { + outline: var(--rz-outline-normal); +} +ul.rz-profile-menu:focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +ul.rz-profile-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-profile-menu-item-focus-outline); + outline-offset: var(--rz-profile-menu-item-focus-outline-offset); +} +ul.rz-profile-menu .rz-navigation-item-icon-children { + color: var(--rz-profile-menu-toggle-button-color); +} +ul.rz-profile-menu .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + border-radius: var(--rz-profile-menu-border-radius); + background-color: var(--rz-profile-menu-background-color); + box-shadow: var(--rz-context-menu-box-shadow); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; + min-width: 100%; + white-space: nowrap; +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-profile-menu-item-hover-background-color); + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link, +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text { + color: var(--rz-menu-item-color); +} +ul.rz-profile-menu .rz-navigation-menu .rzi { + width: var(--rz-profile-menu-item-icon-width); + height: var(--rz-profile-menu-item-icon-height); + font-size: var(--rz-profile-menu-item-icon-font-size); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); +} + +.rz-gravatar { + box-sizing: border-box; + width: var(--rz-gravatar-width); + height: var(--rz-gravatar-height); + display: inline-block; + border-radius: var(--rz-gravatar-border-radius); + box-shadow: var(--rz-gravatar-box-shadow); +} + +.rz-steps { + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.rz-steps .rz-widget-content { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.rz-steps ul { + list-style: none; + padding: 0; +} +.rz-steps .rz-menuitem-link { + display: inline-flex; + align-items: center; + color: var(--rz-steps-color); + cursor: pointer; + text-decoration: none; +} +.rz-steps .rz-menuitem-link:hover { + text-decoration: none; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps .rz-state-disabled .rz-menuitem-link { + color: var(--rz-text-disabled-color); + cursor: default; +} +.rz-steps .rz-state-disabled .rz-menuitem-link:hover { + color: var(--rz-text-disabled-color) !important; +} +.rz-steps .rz-state-highlight .rz-steps-title { + color: var(--rz-steps-title-selected-color); +} +.rz-steps .rz-state-highlight .rz-steps-number { + background: var(--rz-steps-number-selected-background); + color: var(--rz-steps-number-selected-color); +} + +.rz-steps-item { + display: inline-block; +} +.rz-steps-item:focus { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible .rz-steps-number { + outline: var(--rz-steps-number-focus-outline); + outline-offset: var(--rz-steps-number-focus-outline-offset); +} + +.rz-steps-title { + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); +} + +.rz-steps-number { + text-align: center; + line-height: var(--rz-steps-number-line-height); + color: var(--rz-steps-number-color); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); + width: var(--rz-steps-number-width); + height: var(--rz-steps-number-height); + background-color: var(--rz-steps-number-background-color); + border-radius: var(--rz-steps-number-border-radius); +} + +.rz-steps-buttons { + display: flex; + justify-content: space-between; + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); +} + +.rz-steps-next, +.rz-steps-prev { + display: inline-flex; + align-items: center; + color: var(--rz-steps-button-color) !important; + text-decoration: none; +} +.rz-steps-next:not(.rz-state-disabled):hover, +.rz-steps-prev:not(.rz-state-disabled):hover { + cursor: pointer; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps-next:hover, +.rz-steps-prev:hover { + text-decoration: none; +} +.rz-steps-next.rz-state-disabled, +.rz-steps-prev.rz-state-disabled { + opacity: 0.5 !important; +} + +.rz-steps-prev .rzi:before { + content: "navigate_before"; +} + +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; +} + +.rz-checkbox-list-vertical { + box-sizing: border-box; +} +.rz-checkbox-list-vertical .rz-checkbox { + display: flex; + align-items: center; + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); + cursor: pointer; +} + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} +.rz-checkbox-list-horizontal .rz-checkbox { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-checkbox { + cursor: initial; +} + +.rz-chkbox-label, +.rz-chkbox-template { + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); +} + +.rz-chkbox { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + width: var(--rz-checkbox-width); + min-width: var(--rz-checkbox-width); + height: var(--rz-checkbox-height); +} +.rz-chkbox:focus { + outline: var(--rz-outline-normal); +} +.rz-chkbox:focus-visible .rz-chkbox-box { + outline: var(--rz-checkbox-focus-outline); + outline-offset: var(--rz-checkbox-focus-outline-offset); +} + +.rz-chkbox-box { + position: absolute; + cursor: pointer; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: var(--rz-input-border); + border-width: var(--rz-checkbox-border-width); + border-radius: var(--rz-checkbox-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-chkbox-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-checkbox-border-width); +} +.rz-chkbox-box.rz-state-disabled { + cursor: initial; + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-checkbox-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-chkbox-box .rzi { + width: var(--rz-checkbox-icon-width); + height: var(--rz-checkbox-icon-height); + font-size: var(--rz-checkbox-icon-font-size); + color: var(--rz-checkbox-checked-color); + vertical-align: middle; + background-color: var(--rz-checkbox-checked-icon-background-color); + border-radius: var(--rz-checkbox-checked-icon-border-radius); +} +.rz-chkbox-box .rzi-check:before { + content: "check"; +} +.rz-chkbox-box .rzi-times { + width: var(--rz-checkbox-tri-icon-width); + height: var(--rz-checkbox-tri-icon-height); + font-size: var(--rz-checkbox-tri-icon-font-size); +} +.rz-chkbox-box .rzi-times:before { + content: "remove"; +} +.rz-chkbox-box.rz-state-active { + background-color: var(--rz-checkbox-checked-background-color); + border: var(--rz-checkbox-checked-border); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-checkbox-checked-hover-background-color); + border: var(--rz-checkbox-checked-hover-border); +} +.rz-chkbox-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-checkbox-checked-disabled-background-color); + border: var(--rz-checkbox-checked-disabled-border); + opacity: 0.5; +} + +.rz-switch { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + width: 2.25rem; + min-width: 2.25rem; + height: 0.875rem; + border-radius: calc(5 * var(--rz-border-radius)); +} +.rz-switch:focus { + outline: var(--rz-outline-normal); +} +.rz-switch:focus-visible { + outline: var(--rz-switch-focus-outline); + outline-offset: var(--rz-switch-focus-outline-offset); +} + +.rz-switch-circle { + position: absolute; + cursor: pointer; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; +} + +.rz-switch-circle.rz-disabled { + opacity: 0.5; + cursor: initial; +} + +.rz-switch .rz-switch-circle { + background: var(--rz-switch-background-color); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: calc(5 * var(--rz-border-radius)); +} + +.rz-switch.rz-switch-checked .rz-switch-circle { + background: var(--rz-switch-checked-background-color); +} + +.rz-switch .rz-switch-circle:before { + background: var(--rz-switch-circle-background-color); + width: 1.25rem; + height: 1.25rem; + inset-inline-start: 0; + margin-block-start: -0.625rem; + border-radius: calc(5 * var(--rz-border-radius) - 3px); + transition: transform 0.2s linear; + box-shadow: var(--rz-switch-box-shadow); +} + +.rz-switch-circle:before { + position: absolute; + content: ""; + inset-block-start: 50%; +} + +.rz-switch-circle.rz-disabled:before { + box-shadow: none; +} + +.rz-switch.rz-switch-checked .rz-switch-circle:before { + background: var(--rz-switch-checked-circle-background-color); + transform: translateX(1rem); +} + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1rem); +} + +.rz-radio-button-list-vertical { + box-sizing: border-box; +} +.rz-radio-button-list-vertical .rz-radio-btn { + display: flex; + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); + align-items: center; +} + +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} +.rz-radio-button-list-horizontal .rz-radio-btn { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-radiobutton { + cursor: initial; +} + +.rz-radiobutton-label, +.rz-radiobutton-template { + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); +} + +.rz-radiobutton { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + width: var(--rz-radio-width); + height: var(--rz-radio-height); + border-radius: var(--rz-radio-border-radius); +} +.rz-radiobutton:focus { + outline: var(--rz-outline-normal); +} +.rz-radiobutton:focus-visible { + outline: var(--rz-radio-focus-outline); + outline-offset: var(--rz-radio-focus-outline-offset); +} + +.rz-radiobutton-box { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + width: inherit; + border: var(--rz-input-border); + border-width: var(--rz-radio-border-width); + border-radius: var(--rz-radio-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box:active:not(.rz-state-disabled) { + background-color: var(--rz-radio-active-background-color); + box-shadow: var(--rz-radio-active-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-disabled { + cursor: initial; + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-radio-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-radiobutton-box .rzi { + width: var(--rz-radio-icon-width); + height: var(--rz-radio-icon-height); + color: var(--rz-radio-checked-color); +} +.rz-radiobutton-box .rzi-circle-on { + border-radius: var(--rz-radio-border-radius); + vertical-align: middle; + background-color: var(--rz-radio-circle-background-color); + box-shadow: var(--rz-radio-circle-shadow); +} +.rz-radiobutton-box .rzi-circle-on:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-circle-hover-background-color); +} +.rz-radiobutton-box.rz-state-active { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-checked-hover-background-color); + border: var(--rz-radio-checked-border); + box-shadow: var(--rz-radio-checked-hover-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); + opacity: 0.5; +} + +.rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; + border: var(--rz-fieldset-border); + border-radius: var(--rz-fieldset-border-radius); +} + +.rz-fieldset-content { + padding: var(--rz-fieldset-padding); +} + +.rz-fieldset-content-wrapper { + overflow: hidden; +} + +.rz-fieldset-legend-text { + vertical-align: middle; +} + +.rz-fieldset-toggler { + vertical-align: middle; + width: var(--rz-fieldset-toggle-width); + height: var(--rz-fieldset-toggle-height); + background-color: var(--rz-fieldset-toggle-background-color); + color: var(--rz-fieldset-toggle-color); + border: var(--rz-fieldset-toggle-border); +} +.rz-fieldset-toggler.rzi { + text-align: center; + font-size: var(--rz-fieldset-toggle-font-size); + line-height: var(--rz-fieldset-toggle-height); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); +} +.rz-fieldset-toggler.rzi-minus:before { + content: "remove"; +} +.rz-fieldset-toggler.rzi-plus:before { + content: "add"; +} +a:focus .rz-fieldset-toggler { + outline: var(--rz-outline-normal); +} +a:focus-visible .rz-fieldset-toggler { + outline: var(--rz-fieldset-toggle-focus-outline); + outline-offset: var(--rz-fieldset-toggle-focus-outline-offset); +} + +.rz-fieldset-legend { + float: none; + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); + width: auto; + color: var(--rz-fieldset-legend-color); + font-size: var(--rz-fieldset-legend-font-size); +} +.rz-fieldset-legend a { + display: inline-flex; + align-items: center; + color: inherit; + text-decoration: none; +} +.rz-fieldset-legend a:focus { + outline: var(--rz-outline-normal); +} + +.rz-multiselect, .rz-dropdown { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + position: relative; + overflow: hidden; + text-align: start; +} +.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-dropdown.rz-dropdown-open { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect.rz-state-focus { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect-trigger, .rz-dropdown-trigger { + position: absolute; + display: flex; + align-items: center; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; +} +.rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { + width: var(--rz-dropdown-trigger-icon-width); + height: var(--rz-dropdown-trigger-icon-height); + font-size: var(--rz-dropdown-trigger-icon-height); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); +} +.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-dropdown-clear-icon { + position: absolute; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; + height: 100%; + display: flex; + align-items: center; + font-size: var(--rz-dropdown-trigger-icon-height); + opacity: 0.4; +} +.rz-dropdown-clear-icon:before { + content: "close"; +} +.rz-dropdown-clear-icon:hover { + opacity: 1; +} +.rz-state-disabled > .rz-dropdown-clear-icon { + display: none; +} + +.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel { + position: absolute; + background-color: var(--rz-dropdown-open-background-color); + border-radius: var(--rz-input-border-radius); + border: var(--rz-dropdown-panel-border); + box-shadow: var(--rz-dropdown-panel-shadow); +} + +.rz-dropdown-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} + +.rz-multiselect-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} +.rz-multiselect-panel .rz-chkbox { + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); +} + +.rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { + list-style: none; + padding: var(--rz-dropdown-items-padding); + margin: 0; +} +.rz-autocomplete-items li, .rz-multiselect-items li, .rz-dropdown-items li { + /* The 'No results found' item has no CSS class */ +} + +.rz-dropdown-items-wrapper, +.rz-multiselect-items-wrapper { + overflow: auto; + margin: var(--rz-dropdown-items-margin); + border-radius: var(--rz-input-border-radius); +} + +.rz-multiselect-items-wrapper { + overflow: auto; +} + +.rz-dropdown-filter-container { + padding: var(--rz-dropdown-filter-padding); + border-bottom: var(--rz-dropdown-filter-border); +} + +.rz-multiselect-filter-container .rz-inputtext, .rz-dropdown-filter { + background-color: transparent; + color: var(--rz-text-color); +} + +.rz-multiselect-header { + display: flex; + align-items: center; + padding: var(--rz-dropdown-item-padding); + margin: var(--rz-dropdown-items-margin); +} + +.rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-autocomplete-items li, .rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item { + padding: var(--rz-dropdown-item-padding); + transition: var(--rz-dropdown-item-transition); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover, .rz-dropdown-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-state-disabled.rz-menuitem, .rz-state-disabled.rz-autocomplete-list-item, .rz-state-disabled.rz-multiselect-item, .rz-autocomplete-items li.rz-state-disabled, .rz-dropdown-items li.rz-state-disabled, .rz-multiselect-items li.rz-state-disabled, .rz-dropdown-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} +.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} + +.rz-multiselect-close { + display: none; +} + +.rz-multiselect-filter-container { + flex: auto; + border-bottom: var(--rz-dropdown-filter-border); +} +.rz-multiselect-filter-container .rz-inputtext { + padding: 0; +} + +.rz-multiselect-item { + display: flex; + align-items: center; +} + +.rz-multiselect-item-content { + flex: 1; +} + +.rz-multiselect-label-container, +.rz-dropdown-label { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); + margin: 0; +} + +.rz-dropdown-chips { + height: inherit; + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); +} +.rz-dropdown-chips .rz-dropdown-chips-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-inline-end: 3rem; +} +.rz-dropdown-chips .rz-chip { + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: var(--rz-chip-gap); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); + color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); + border-radius: var(--rz-chip-border-radius); +} +.rz-dropdown-chips .rz-chip .rz-chip-text { + font-size: var(--rz-chip-font-size); +} +.rz-dropdown-chips .rz-chip .rz-button { + border-radius: var(--rz-chip-border-radius); + box-shadow: none; + align-self: stretch; +} +.rz-dropdown-chips .rz-chip .rzi { + vertical-align: middle; + font-size: 1rem; +} + +.rz-clear .rz-multiselect-label-container, +.rz-clear .rz-dropdown-label { + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); +} + +.rz-autocomplete { + box-sizing: border-box; + display: inline-block; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + background-color: var(--rz-input-background-color); + transition: var(--rz-input-transition); + overflow: hidden; +} +.rz-autocomplete-input { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + background-color: transparent; + color: var(--rz-input-value-color); + box-shadow: var(--rz-input-shadow); + border: none; + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + width: 100%; + transition: var(--rz-input-transition); +} +.rz-autocomplete-input:focus { + outline: none; +} +.rz-autocomplete-input:disabled { + border: none; +} + +.rz-autocomplete-panel { + overflow: auto; + box-sizing: content-box; +} + +.rz-listbox { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + overflow: hidden; + background-color: var(--rz-listbox-background-color); + border: var(--rz-listbox-border); + border-radius: var(--rz-listbox-border-radius); + text-align: start; +} +.rz-listbox .rz-chkbox { + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); +} +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-listbox:focus, .rz-listbox:focus-within { + outline: var(--rz-outline-normal); + border: var(--rz-listbox-focus-border); + box-shadow: var(--rz-listbox-focus-shadow); +} + +.rz-listbox-list { + margin: 0; + padding: 0; +} + +.rz-listbox-item { + cursor: default; + padding: var(--rz-listbox-item-padding); + margin: var(--rz-listbox-item-margin); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-listbox-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-listbox-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-listbox-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} + +.rz-listbox-header { + display: flex; + align-items: center; + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); + border-bottom: var(--rz-listbox-filter-border); +} + +.rz-listbox-list-wrapper { + flex: auto; + overflow: auto; + padding: var(--rz-listbox-padding); +} + +.rz-listbox-filter-container, .rz-dropdown-filter-container, .rz-multiselect-filter-container { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.rz-listbox-filter-container .rz-inputtext, .rz-dropdown-filter-container .rz-inputtext, .rz-multiselect-filter-container .rz-inputtext { + flex: auto; + width: 0; + border: none; + line-height: var(--rz-input-line-height); +} +.rz-listbox-filter-container .rz-inputtext:focus, .rz-dropdown-filter-container .rz-inputtext:focus, .rz-multiselect-filter-container .rz-inputtext:focus { + outline: none; +} +.rz-listbox-filter-container .rzi-search, .rz-dropdown-filter-container .rzi-search, .rz-multiselect-filter-container .rzi-search { + width: var(--rz-listbox-header-icon-width); + height: var(--rz-listbox-header-icon-height); + line-height: var(--rz-listbox-header-icon-height); + font-size: var(--rz-listbox-header-icon-height); +} +.rz-listbox-filter-container .rzi-search:before, .rz-dropdown-filter-container .rzi-search:before, .rz-multiselect-filter-container .rzi-search:before { + content: "search"; +} + +.rz-listbox-filter-container { + flex: auto; +} +.rz-listbox-filter-container .rz-inputtext { + background-color: transparent; +} + +.rz-splitbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { + display: none; +} +.rz-splitbutton .rz-button.rz-splitbutton-menubutton { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { + flex: auto; + overflow: hidden; + text-overflow: ellipsis; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.rz-splitbutton-menu { + display: none; + position: absolute; + min-width: var(--rz-splitbutton-menu-min-width); + box-shadow: var(--rz-splitbutton-menu-shadow); +} + +.rz-menu-list { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-menuitem .rz-menuitem-link { + color: inherit; + display: block; + text-decoration: none; +} +.rz-menuitem .rz-menuitem-link:hover { + text-decoration: none; +} +.rz-menuitem .rz-menuitem-icon { + vertical-align: top; +} + +.rz-splitbutton-menubutton { + margin-inline-start: 1px; +} +.rz-splitbutton-menubutton.rz-variant-outlined { + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); +} +.rz-splitbutton-menubutton .rz-button-text { + display: none; +} +.rz-splitbutton-menubutton .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-slider { + box-sizing: border-box; + position: relative; + display: inline-block; + border: var(--rz-slider-border); + border-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-background-color); +} +.rz-slider.rz-state-disabled { + background-color: var(--rz-slider-disabled-background-color); + border: var(--rz-slider-disabled-border); +} +.rz-slider.rz-state-disabled .rz-slider-range { + background-color: var(--rz-slider-disabled-range-background-color); + border: var(--rz-slider-disabled-range-border); +} +.rz-slider.rz-state-disabled .rz-slider-handle { + background-color: var(--rz-slider-disabled-handle-background-color); + border: var(--rz-slider-disabled-handle-border); +} + +.rz-slider-horizontal { + height: var(--rz-slider-horizontal-height); + width: var(--rz-slider-horizontal-width); +} + +.rz-slider-range { + position: absolute; + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-range-background-color); + border: var(--rz-slider-range-border); +} + +.rz-slider-handle { + position: absolute; + transform: translateY(-50%); + top: 50%; + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); + background-color: var(--rz-slider-handle-background-color); + border: var(--rz-slider-handle-border); + border-radius: var(--rz-slider-handle-border-radius); + box-shadow: var(--rz-slider-handle-shadow); + width: var(--rz-slider-handle-width); + height: var(--rz-slider-handle-height); + transition: var(--rz-slider-handle-transition); +} + +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active { + background-color: var(--rz-slider-handle-hover-background-color); + box-shadow: var(--rz-slider-handle-hover-shadow); + border: var(--rz-slider-handle-hover-border); + cursor: pointer; + outline: none; +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus { + outline: var(--rz-outline-normal); +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus-visible { + outline: var(--rz-slider-handle-focus-outline); + outline-offset: var(--rz-slider-handle-focus-outline-offset); +} + +.rz-rating { + box-sizing: border-box; + display: inline-flex; + font-size: var(--rz-rating-font-size); + height: 1em; +} +.rz-rating.rz-state-disabled .rzi { + opacity: var(--rz-rating-disabled-opacity); + color: var(--rz-rating-disabled-color); +} +.rz-rating a { + width: 1em; + height: 1em; + text-decoration: none; + cursor: default; + outline: none; +} +.rz-rating .rzi { + color: var(--rz-rating-color); + font-size: 1em; +} +.rz-rating .rzi-ban { + color: var(--rz-rating-ban-icon-color); +} +.rz-rating .rzi-ban:before { + content: "highlight_off"; +} +.rz-rating .rzi-star-o { + opacity: var(--rz-rating-opacity); +} +.rz-rating .rzi-star-o:before { + content: "star_border"; +} +.rz-rating .rzi-star { + color: var(--rz-rating-selected-color); +} +.rz-rating .rzi-star:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover { + cursor: pointer; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-ban { + color: var(--rz-rating-selected-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-ban { + color: var(--rz-rating-focus-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o:before { + content: "star"; +} + +.rz-security-code { + box-sizing: border-box; + display: inline-flex; +} + +.rz-security-code-wrapper { + flex: 1; + --rz-gap: 0.5rem; +} + +.rz-security-code-input { + text-align: center; + min-width: var(--rz-security-code-input-min-width); + min-height: var(--rz-security-code-input-min-height); + width: 100%; + height: 100%; + padding: var(--rz-security-code-input-padding); + font-size: var(--rz-security-code-input-font-size); + font-weight: var(--rz-security-code-input-font-weight); + line-height: var(--rz-security-code-input-line-height); +} + +.rz-selectbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-selectbutton .rz-button:focus-visible { + z-index: 1; +} + +.rz-selectbutton .rz-button.rz-button-xs { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-xs:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-sm { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { + display: inline-block; + position: relative; +} +.rz-datepicker .rz-readonly { + cursor: pointer; +} +.rz-datepicker > .rz-inputtext { + width: 100%; + line-height: var(--rz-datepicker-line-height); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); +} +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { + box-shadow: none; + color: var(--rz-datepicker-trigger-icon-hover-color); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} + +.rz-datepicker-inline { + background-color: var(--rz-datepicker-panel-background-color); + border: var(--rz-input-border); +} + +.rz-datepicker-trigger { + box-shadow: none; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 0.625rem; + transform: translateY(-50%); + background-color: transparent; + padding: 0; + vertical-align: text-top; + color: var(--rz-datepicker-trigger-icon-color); + width: var(--rz-datepicker-trigger-icon-width); + height: var(--rz-datepicker-trigger-icon-height); + font-size: var(--rz-datepicker-trigger-icon-height); +} +.rz-datepicker-trigger.rz-state-disabled { + border: none; + box-shadow: none; + cursor: initial; + opacity: 1; + color: var(--rz-input-disabled-color); +} +.rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active), .rz-datepicker-trigger:not(.rz-state-disabled):hover:active { + background-color: transparent; +} +.rz-datepicker-trigger:not(.rz-state-disabled):active { + box-shadow: none !important; + background-image: none !important; +} +.rz-datepicker-trigger .rzi-calendar, +.rz-datepicker-trigger .rzi-time { + font-size: inherit; + vertical-align: top; +} +.rz-datepicker-trigger .rzi-calendar:before { + content: "calendar_today"; +} +.rz-datepicker-trigger .rzi-time:before { + content: "schedule"; +} +.rz-datepicker-trigger .rz-button-text { + display: none; +} + +.rz-datepicker-popup-container { + box-sizing: content-box; + position: absolute; + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); + box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); +} + +.rz-datepicker-inline-container { + position: static; + white-space: nowrap; +} +.rz-datepicker-inline-container .rz-calendar { + display: inline-block; +} + +.rz-datepicker-footer { + position: relative; + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--rz-datepicker-header-background-color); + border-bottom: var(--rz-datepicker-header-border); + color: var(--rz-datepicker-header-color); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); +} + +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); +} +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { + color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); +} +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); +} + +.rz-calendar-prev { + order: 1; +} +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { + content: "chevron_right"; +} + +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { + outline: var(--rz-outline-normal); +} +.rz-calendar-view-container:focus-visible { + outline: var(--rz-datepicker-focus-outline); + outline-offset: var(--rz-datepicker-focus-outline-offset); +} + +.rz-calendar-view { + table-layout: fixed; + border-collapse: collapse; +} +.rz-calendar-view th { + font-weight: normal; + font-size: var(--rz-datepicker-calendar-header-font-size); + text-transform: var(--rz-datepicker-calendar-header-text-transform); + color: var(--rz-datepicker-calendar-header-color); + padding: var(--rz-datepicker-calendar-item-padding); + text-align: center; +} +.rz-calendar-view td { + text-align: center; + border-top: var(--rz-datepicker-calendar-border); + padding: 0; +} +.rz-calendar-view td .rz-state-default { + display: block; + padding: var(--rz-datepicker-calendar-item-padding); + color: var(--rz-datepicker-calendar-color); + font-size: var(--rz-datepicker-calendar-font-size); + border-radius: var(--rz-datepicker-calendar-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-calendar-view td .rz-state-default.rz-calendar-today { + color: var(--rz-datepicker-calendar-today-color); + background-color: var(--rz-datepicker-calendar-today-background-color); + box-shadow: var(--rz-datepicker-calendar-today-box-shadow); + border-radius: var(--rz-datepicker-calendar-today-border-radius); +} +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { + text-decoration: none; + color: var(--rz-datepicker-calendar-hover-color); + background-color: var(--rz-datepicker-calendar-hover-background-color); + cursor: pointer; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { + color: var(--rz-datepicker-calendar-selected-color); + background-color: var(--rz-datepicker-calendar-selected-background-color); + padding: var(--rz-datepicker-calendar-item-padding); + box-shadow: none; +} +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { + color: var(--rz-datepicker-calendar-selected-hover-color); + background-color: var(--rz-datepicker-calendar-selected-hover-background-color); +} +.rz-calendar-view .rz-state-disabled { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-other-month { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-week-number { + opacity: 0.5; +} + +/* Time Picker Styles */ +.rz-timepicker { + display: flex; + align-items: center; + justify-content: center; + gap: var(--rz-timepicker-gap); + border-top: var(--rz-datepicker-calendar-border); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); + color: var(--rz-timepicker-color); +} +.rz-timepicker .rzi-chevron-up:before { + content: "expand_less"; +} +.rz-timepicker .rzi-chevron-down:before { + content: "expand_more"; +} +.rz-timepicker .rz-separator { + color: var(--rz-timepicker-separator-color); +} +.rz-timepicker .rz-separator a { + display: none; +} +.rz-timepicker .rz-button-md { + padding: var(--rz-timepicker-button-padding); + text-transform: uppercase; +} + +.rz-hour-picker, +.rz-minute-picker, +.rz-second-picker { + background-color: var(--rz-timepicker-background-color); + width: 4rem; +} + +.rz-ampm-picker a { + text-decoration: none; +} + +.rz-numeric { + display: inline-block; + position: relative; + padding: 0px; +} +.rz-numeric input[type=number], +.rz-numeric input[type=text] { + -moz-appearance: textfield; + width: 100%; + height: 100%; + border: none; + background-color: transparent; + line-height: var(--rz-numeric-line-height); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); + outline: none; +} +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.rz-numeric.rz-state-disabled .rz-numeric-button { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); +} +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); + background-image: none; + box-shadow: none; + cursor: initial; +} + +.rz-numeric-button { + position: absolute; + inset-inline-end: var(--rz-numeric-button-offset); + padding: 0; + width: var(--rz-numeric-button-width); + height: var(--rz-numeric-button-height); + border-radius: var(--rz-numeric-button-border-radius); + background-color: var(--rz-numeric-button-background-color); + color: var(--rz-numeric-button-color); +} +.rz-numeric-button:hover { + background-color: var(--rz-numeric-button-background-color); +} +.rz-numeric-button .rzi { + font-size: var(--rz-numeric-button-height); + vertical-align: top; +} +.rz-numeric-button .rzi-caret-up:before { + content: "expand_less"; +} +.rz-numeric-button .rzi-caret-down:before { + content: "expand_more"; +} + +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); +} + +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); +} + +.rz-fileupload { + box-sizing: border-box; + display: inline-block; +} +.rz-fileupload .rz-button { + vertical-align: middle; + -webkit-appearance: none !important; +} + +.rz-fileupload-choose { + position: relative; + display: inline-block; + overflow: hidden; + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose input[type=file] { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + min-height: 100%; + cursor: pointer; +} +.rz-fileupload-choose.rz-state-disabled input[type=file] { + cursor: default; +} +.rz-fileupload-choose:not(.rz-state-disabled) { + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):active { + background-color: var(--rz-upload-choose-active-background-color); + color: var(--rz-upload-choose-active-color); +} + +.rz-fileupload-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.rz-fileupload-row > div { + margin: var(--rz-upload-files-margin); +} +.rz-fileupload-row .rz-button-text { + display: none; +} +.rz-fileupload-row .rz-button { + background-color: var(--rz-upload-files-remove-background-color); + color: var(--rz-upload-files-remove-color); +} +.rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash { + display: block; +} +.rz-fileupload-row .rz-button .rzi-close:before, +.rz-fileupload-row .rz-button .rzi-times:before, +.rz-fileupload-row .rz-button .rz-icon-trash:before { + content: "close"; +} + +.rz-fileupload-buttonbar { + position: relative; + background-color: var(--rz-upload-button-bar-background-color); + padding: var(--rz-upload-button-bar-padding); + border-radius: var(--rz-upload-button-bar-border-radius); +} +.rz-fileupload-buttonbar .rz-button:nth-child(3) { + float: right; + background-color: var(--rz-upload-cancel-background-color); + color: var(--rz-upload-cancel-color); +} + +.rz-fileupload-files { + background-color: var(--rz-upload-files-background-color); + padding: var(--rz-upload-files-padding); +} + +.rz-datatable { + position: relative; + box-shadow: var(--rz-grid-shadow); + border: var(--rz-grid-cell-border); + border-radius: var(--rz-grid-border-radius); + background-color: var(--rz-grid-background-color); + overflow: hidden; +} +.rz-datatable:focus { + outline: var(--rz-outline-normal); +} +.rz-datatable:focus-visible { + outline: var(--rz-grid-focus-outline); + outline-offset: var(--rz-grid-focus-outline-offset); +} +.rz-datatable .rz-col-icon { + text-align: center; + vertical-align: middle; + width: var(--rz-grid-column-icon-width); + padding: var(--rz-grid-column-icon-padding); +} +.rz-datatable .rzi-chevron-circle-right { + vertical-align: top; + /* Right-to-left arrow icons */ +} +.rz-datatable .rzi-chevron-circle-right:before { + content: "arrow_right"; +} +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} +.rz-datatable .rzi-chevron-circle-down { + vertical-align: top; +} +.rz-datatable .rzi-chevron-circle-down:before { + content: "arrow_drop_down"; +} +.rz-datatable.rz-has-template > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view > .rz-datatable-scrollable-body > .rz-datatable-scrollable-table-wrapper > table > .rz-datatable-scrollable-colgroup col:first-child { + width: var(--rz-grid-column-icon-width); +} + +.rz-unselectable-text { + user-select: none; +} + +.rz-datatable-tablewrapper > table, +.rz-datatable-scrollable-header-box > table, +.rz-datatable-scrollable-table-wrapper > table, +.rz-datatable-scrollable-footer-box > table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +.rz-resizable-column { + position: relative; +} + +.rz-datatable-reorder-indicator-up { + position: absolute; +} +.rz-datatable-reorder-indicator-up:before { + content: "arrow_drop_down"; +} + +.rz-datatable-reorder-indicator-down { + position: absolute; +} +.rz-datatable-reorder-indicator-down:before { + content: "arrow_drop_up"; +} + +.rz-column-resizer { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + cursor: col-resize; + width: var(--rz-grid-column-resizer-width); +} +.rz-column-resizer:after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + width: var(--rz-grid-column-resizer-helper-width); + background-color: transparent; +} +.rz-column-resizer:hover:after, .rz-column-resizer:active:after { + background-color: var(--rz-grid-column-resizer-helper-background-color); +} + +.rz-rowgroup-header .fa, +.rz-row-toggler { + color: var(--rz-grid-cell-color); +} + +.rz-datatable-scrollable-footer { + background-color: var(--rz-grid-header-background-color); + border-top: var(--rz-grid-cell-border); +} + +.rz-datatable-thead th, +.rz-grid-table thead th { + background-color: var(--rz-grid-header-background-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: inherit; + border-bottom: var(--rz-grid-header-cell-border-bottom); +} +.rz-datatable-thead th:not(:last-child), +.rz-grid-table thead th:not(:last-child) { + border-inline-end: var(--rz-grid-header-cell-border); +} +.rz-datatable-thead th > div:not(.rz-cell-filter), +.rz-grid-table thead th > div:not(.rz-cell-filter) { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + outline: none; + padding: var(--rz-grid-header-cell-padding); +} +.rz-datatable-thead th.rz-state-focused, +.rz-grid-table thead th.rz-state-focused { + outline: var(--rz-grid-cell-focus-outline); + outline-offset: var(--rz-grid-cell-focus-outline-offset); +} +.rz-datatable-thead th .rz-column-title, +.rz-grid-table thead th .rz-column-title { + display: inline-flex; + flex: auto; + align-items: center; + gap: 0.25rem; + width: 100%; + font-size: var(--rz-grid-header-font-size); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding-inline: var(--rz-grid-header-title-padding-inline); + font-weight: var(--rz-grid-header-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content, +.rz-grid-table thead th .rz-column-title-content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content:has(.rz-chkbox), +.rz-grid-table thead th .rz-column-title-content:has(.rz-chkbox) { + overflow: visible; +} +.rz-datatable-thead th.rz-text-align-center .rz-column-title, +.rz-grid-table thead th.rz-text-align-center .rz-column-title { + justify-content: center; + padding-inline-start: 0; +} +.rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th.rz-text-align-right .rz-column-title, +.rz-grid-table thead th.rz-text-align-right .rz-column-title { + justify-content: right; +} +.rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th .rz-column-drag + .rz-column-title, +.rz-grid-table thead th .rz-column-drag + .rz-column-title { + padding-inline-start: 0; +} + +.rz-datatable-tfoot td, .rz-grid-table tfoot td { + background-color: var(--rz-grid-foot-background-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + color: var(--rz-grid-foot-cell-color); + padding: var(--rz-grid-cell-padding); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} + +.rz-datatable-scrollable-header { + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-datatable-scrollable-body { + overflow: auto; + border-top: none; + flex: auto; + border-bottom-right-radius: var(--rz-border-radius); + border-bottom-left-radius: var(--rz-border-radius); +} + +.rz-has-pager .rz-datatable-scrollable-body { + border-radius: 0; +} + +.rz-sortable-column { + cursor: pointer; +} +.rz-sortable-column:focus { + outline: none; +} +.rz-sortable-column.rz-state-active { + background-color: var(--rz-grid-header-sorted-background-color); +} +.rz-sortable-column > div:hover .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { + color: var(--rz-grid-sort-icon-color); +} +.rz-sortable-column .rzi-grid-sort { + width: var(--rz-grid-sort-icon-width); + height: var(--rz-grid-sort-icon-height); + font-size: var(--rz-grid-sort-icon-height); + text-align: left; +} +.rz-sortable-column .rzi-sort { + color: transparent; +} +.rz-sortable-column .rzi-sort:before { + content: "sort"; +} +.rz-sortable-column .rzi-sort-asc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-asc:before { + content: "arrow_drop_up"; +} +.rz-sortable-column .rzi-sort-desc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-desc:before { + content: "arrow_drop_down"; +} + +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td { + background-color: var(--rz-grid-stripe-background-color); +} +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td { + background-color: var(--rz-grid-stripe-odd-background-color); +} + +.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th { + border-bottom: var(--rz-grid-header-cell-border); +} +.rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { + border-inline-end: var(--rz-grid-header-cell-border); +} + +.rz-datatable-data td, +.rz-grid-table td { + padding: var(--rz-grid-cell-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-data td:not(:last-child), +.rz-grid-table td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td.rz-composite-cell, +.rz-grid-table td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td .rz-cell-data, +.rz-grid-table td .rz-cell-data { + color: var(--rz-grid-cell-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rz-datatable-data td .rz-cell-data:has(.rz-chkbox), .rz-datatable-data td .rz-cell-data:has(.rz-button), +.rz-grid-table td .rz-cell-data:has(.rz-chkbox), +.rz-grid-table td .rz-cell-data:has(.rz-button) { + overflow: visible; +} +.rz-datatable-data td .rz-cell-toggle, +.rz-grid-table td .rz-cell-toggle { + display: flex; + align-items: center; + gap: 0.25rem; +} +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} +.rz-datatable-data tr td:first-child, +.rz-grid-table tr td:first-child { + border-inline-start: none; +} +.rz-datatable-data tr td:last-child:not(.rz-composite-cell), +.rz-grid-table tr td:last-child:not(.rz-composite-cell) { + border-inline-end: none; +} +.rz-datatable-data tr:first-child > td, +.rz-grid-table tr:first-child > td { + border-top: none; +} +.rz-datatable-data tr:last-child > td, +.rz-grid-table tr:last-child > td { + border-bottom: none; +} + +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { + border-bottom: none; + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td { + border-bottom: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} + +.rz-datatable-reflow tbody td > .rz-column-title { + display: none; +} + +.rz-datatable-scrollable { + display: flex; + flex-direction: column; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper { + height: 0; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view { + height: 0; +} + +.rz-datatable-scrollable-wrapper { + display: flex; + flex-direction: column; + flex: auto; +} + +.rz-datatable-scrollable-view { + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; +} + +.rz-datatable-header { + background-color: var(--rz-grid-toolbar-background-color); + padding: var(--rz-grid-header-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-header .rzi-plus { + font-size: var(--rz-grid-cell-font-size); +} +.rz-datatable-header .rzi-plus:before { + content: "add"; +} + +.rz-cell-filter { + padding: var(--rz-grid-filter-padding); + margin: var(--rz-grid-filter-margin); + border-top: var(--rz-grid-filter-border); + font-size: var(--rz-grid-filter-font-size); + font-weight: normal; +} +.rz-cell-filter .rz-cell-filter-label { + display: flex; + flex: auto; + align-items: center; +} +.rz-cell-filter .rz-cell-filter-label > .rzi { + width: var(--rz-grid-filter-icon-width); + height: var(--rz-grid-filter-icon-height); + font-size: var(--rz-grid-filter-icon-font-size); + margin-inline: var(--rz-grid-filter-icon-margin-inline); + color: var(--rz-grid-filter-color); +} +.rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { + margin-inline-start: auto; +} +.rz-cell-filter .rz-cell-filter-label .rz-current-filter { + margin-inline-start: 0.5rem; +} + +.rz-selectable tbody tr.rz-data-row td, +.rz-selectable tbody tr.rz-data-row .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:after { + content: ""; + position: absolute; + inset: 0; + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:before { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:after { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > .rzi { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > th.rz-state-focused { + color: var(--rz-grid-cell-focus-color) !important; +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > .rzi { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-disabled { + opacity: 0.5; + pointer-events: none; +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { + color: var(--rz-grid-hover-color); +} + +.rz-cell-filter-content { + display: flex; + flex: auto; + align-items: center; + color: var(--rz-grid-filter-color); + min-height: 1.375rem; + container-type: inline-size; + container-name: rz-cell-filter-content; +} + +@container rz-cell-filter-content (max-width: 200px) { + .rz-cell-filter-content .rz-filter-button .rzi { + display: none; + } + .rz-cell-filter-content .rz-filter-button { + position: absolute; + z-index: 1; + min-height: 0; + inset-inline-start: calc(var(--rz-border-width) + 1px); + height: calc(var(--rz-input-height) - var(--rz-border-width) * 2 - 2px); + max-height: calc(var(--rz-input-height) - var(--rz-border-width) * 2 - 2px); + line-height: calc(1.25rem - var(--rz-border-width) * 2 - 2px); + border-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width) - 1px); + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } +} +.rz-expanded-row > td { + border-bottom: none; + background-color: var(--rz-grid-hover-background-color); +} +.rz-expanded-row > td .rz-cell-data, +.rz-expanded-row > td .rz-row-toggler { + color: var(--rz-grid-hover-color); +} + +.rz-expanded-row-template { + background-color: var(--rz-grid-detail-template-background-color); + padding: var(--rz-grid-detail-template-padding); + border: var(--rz-grid-detail-template-border); + border-radius: var(--rz-grid-detail-template-border-radius); +} + +.rz-expanded-row-content > td { + padding-top: 0; + background-color: var(--rz-grid-detail-template-background-color); +} + +.rz-rowgroup-header a:hover { + text-decoration: none; +} +.rz-rowgroup-header td { + border-top: var(--rz-grid-border); + border-bottom: var(--rz-grid-border); +} + +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; +} + +.rz-datatable-loading-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--rz-grid-loading-indicator-color); + z-index: 2; +} +.rz-datatable-loading-content .rzi-circle-o-notch { + animation: rotation 0.5s linear infinite; + font-size: 2rem; +} +.rz-datatable-loading-content .rzi-circle-o-notch:before { + content: "refresh"; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@media (max-width: 768px) { + .rz-datatable-reflow .rz-data-grid-data > table, + .rz-datatable-reflow .rz-datatable-tablewrapper > table, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table { + table-layout: auto; + display: block; + } + .rz-datatable-reflow .rz-data-grid-data > table > tbody, + .rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody { + display: block; + } + .rz-datatable-reflow thead th { + display: none; + } + .rz-datatable-reflow .rz-data-row { + display: block; + } + .rz-datatable-reflow .rz-data-row > td { + display: block; + width: 100% !important; + text-align: left !important; + border: none; + } + .rz-datatable-reflow .rz-data-row > td .rz-column-title { + display: block; + } +} +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + +.rz-grid-filter-buttons { + display: flex; + justify-content: space-between; + padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} + +.rz-grid-filter-icon { + justify-self: flex-end; + color: var(--rz-grid-filter-color); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); + font-size: var(--rz-grid-header-filter-icon-font-size); + transition: var(--rz-grid-state-transition); + font-weight: 400; +} +.rz-grid-filter-icon:hover { + cursor: pointer; + color: var(--rz-grid-header-filter-icon-hover-color); +} + +.rz-grid-filter-active { + color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; +} + +.rz-data-grid { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.rz-data-grid-data { + overflow: auto; + flex: 1; + box-shadow: var(--rz-grid-data-border-shadow); +} + +.rz-grid-table td, .rz-grid-table th { + padding: var(--rz-grid-cell-padding); +} + +.rz-grid-table thead { + position: sticky; + top: 0; + z-index: 2; +} +.rz-grid-table thead th { + position: sticky; + top: 0; + z-index: 1; +} + +.rz-grid-table-fixed { + table-layout: fixed; +} +.rz-grid-table-fixed .rz-frozen-cell { + position: -webkit-sticky; + position: sticky; +} +.rz-grid-table-fixed .rz-frozen-cell-left, +.rz-grid-table-fixed .rz-frozen-cell-right, +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + background: var(--rz-grid-frozen-cell-background-color); + z-index: 1; +} +.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} + +.rz-grid-table tfoot, .rz-grid-table tfoot td { + position: sticky; + bottom: 0; + z-index: 1; +} + +.rz-grid-table { + width: 100%; + position: relative; + border-collapse: separate; + border-spacing: 0; +} +.rz-grid-table th { + white-space: nowrap; + overflow: hidden; +} +.rz-grid-table td { + white-space: nowrap; + overflow: hidden; +} + +.rz-grid-table tbody > div { + display: table-row; +} + +.rz-column-drag { + cursor: grab; + font-size: inherit; + color: var(--rz-column-drag-handle-color); + transition: var(--rz-grid-state-transition); + margin-inline: var(--rz-column-drag-handle-margin-inline); +} +.rz-column-drag:after { + content: "more_vert"; +} +.rz-column-drag:hover { + color: var(--rz-column-drag-handle-hover-color); +} +.rz-column-drag:active { + color: var(--rz-column-drag-handle-hover-color); + cursor: grabbing; +} + +.rz-column-draggable { + background-color: var(--rz-grid-header-background-color); + border-radius: var(--rz-border-radius); + box-shadow: var(--rz-column-draggable-shadow); + padding: 0; + display: flex; + align-items: center; +} +.rz-column-draggable > div { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + outline: none; + padding: 0; +} +.rz-column-draggable .rz-column-drag { + max-width: 1rem; +} +.rz-column-draggable .rz-column-title { + display: inline-flex; + flex: auto; + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-column-draggable .rz-grid-filter-icon { + display: none; +} + +.rz-group-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-group-header-items { + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); +} + +.rz-group-header-item { + display: flex; + align-items: center; + color: var(--rz-grid-group-header-item-color); + background-color: var(--rz-grid-group-header-item-background-color); + border: var(--rz-grid-group-header-item-border); + border-radius: var(--rz-grid-group-header-item-border-radius); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); + width: fit-content; + float: left; +} +.rz-group-header-item .rz-dialog-titlebar-close { + display: flex; + align-items: center; + text-decoration: none; +} + +.rz-group-header-item-title { + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); +} + +.rz-group-header-drop { + font-size: var(--rz-body-font-size); + color: var(--rz-text-tertiary-color); + height: fit-content; +} + +.rz-column-picker { + display: flex; +} + +.rz-filter-menu-symbol { + width: 1.75rem; + display: inline-block; +} + +.rz-filter-button { + flex: none; + margin-inline-end: 0.5rem; +} + +.rz-data-grid.rz-density-compact { + --rz-grid-cell-line-height: 1rem; + --rz-grid-cell-padding: 0.25rem 0.5rem; + --rz-grid-header-cell-padding: 0.25rem 0; + --rz-grid-header-padding: 0.25rem 1rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-filter-padding: 0.25rem 0.5rem; + --rz-grid-group-header-padding: 0.25rem; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; + --rz-dialog-close-font-size: 1rem; +} + +.rz-pager { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--rz-pager-gap); + flex-wrap: wrap; + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ +} +.rz-pager:focus { + outline: var(--rz-outline-normal); +} +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-pager.rz-align-right { + justify-content: right; +} +.rz-pager.rz-align-left { + justify-content: left; +} +.rz-pager.rz-align-center { + justify-content: center; +} +.rz-pager .rzi-step-backward:before { + content: "first_page"; +} +.rz-pager .rzi-caret-left:before { + content: "navigate_before"; +} +.rz-pager .rzi-caret-right:before { + content: "navigate_next"; +} +.rz-pager .rzi-step-forward:before { + content: "last_page"; +} +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { + order: 2; + width: var(--rz-pager-dropdown-width); + overflow: visible; +} +.rz-pager .rz-pagesize-text { + order: 2; + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); +} + +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); +} + +.rz-pager-bottom { + border-top: var(--rz-pager-border); +} + +.rz-pager-pages { + display: inline-flex; + gap: var(--rz-pager-gap); + margin: 0 0.5rem; +} + +.rz-pager-element { + letter-spacing: 0; +} + +.rz-align-center .rz-pager-first { + margin-inline-start: auto; +} + +.rz-pager-prev { + margin-inline-end: auto; +} +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; +} + +.rz-pager-next { + margin-inline-start: auto; +} +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; +} + +.rz-align-center .rz-pager-last { + margin-inline-end: auto; +} + +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-element:hover { + text-decoration: none; +} + +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-page { + display: inline-block; + min-width: var(--rz-pager-numeric-button-min-width); + text-align: center; + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { + margin-right: auto; +} +.rz-align-left .rz-pager-summary { + order: 2; + margin-left: auto; + padding: 0; +} +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} + +@media (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +@container rz-lookup-panel (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; +} +.rz-overlaypanel { + position: absolute; + overflow: hidden; + box-shadow: var(--rz-overlay-shadow); + border: var(--rz-overlay-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-overlay-background-color); +} + +.rz-tree { + box-sizing: border-box; + display: inline-block; + overflow: auto; +} +.rz-tree:focus { + outline: var(--rz-outline-normal); +} +.rz-tree:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} + +.rz-tree .rz-treenode.rz-treenode-leaf > .rz-treenode-content > .rz-tree-toggler { + visibility: hidden; +} + +.rz-treenode { + padding-inline-start: var(--rz-tree-node-toggle-width); +} + +.rz-tree-toggler { + cursor: pointer; + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); + width: var(--rz-tree-node-toggle-width); + height: 1.5rem; + font-size: var(--rz-icon-size); + line-height: 1.5rem; + text-align: center; + color: var(--rz-tree-node-toggle-color); + transition: var(--rz-tree-transition); +} +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} +.rz-tree-toggler.rzi-caret-right:before { + content: "chevron_right"; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); +} +.rz-tree-toggler.rzi-caret-down:before { + content: "expand_more"; + margin-inline-start: -0.125rem; +} +.rz-tree-toggler:hover { + color: var(--rz-tree-node-toggle-hover-color); +} + +.rz-treenode-content { + display: flex; + align-items: center; + cursor: pointer; + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); +} +.rz-treenode-content .rz-treenode-label { + display: flex; + align-items: center; + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); +} +.rz-treenode-content .rz-treenode-label .rzi:first-child { + margin-inline-end: 0.25rem; +} +.rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { + outline: var(--rz-tree-node-focus-outline); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} +.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { + background-color: var(--rz-tree-node-hover-background-color); + color: var(--rz-tree-node-hover-color); + border-radius: var(--rz-tree-node-selected-border-radius); +} +.rz-treenode-content .rz-chkbox { + margin-inline-end: 0.25rem; +} + +.rz-tree-container, +.rz-treenode-children { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-treenode-label { + transition: var(--rz-tree-transition); +} +.rz-treenode-content-selected .rz-treenode-label { + border-radius: var(--rz-tree-node-selected-border-radius); + color: var(--rz-tree-node-selected-color); + background-color: var(--rz-tree-node-selected-background-color); +} + +.rz-datalist, +.rz-datagrid { + background-color: var(--rz-datalist-background-color); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); + box-shadow: var(--rz-datalist-shadow); + border: var(--rz-datalist-border); +} + +.rz-g > div, .rz-datalist-data > li { + border-radius: var(--rz-datalist-border-radius); + border: var(--rz-datalist-item-border); + box-shadow: var(--rz-datalist-item-shadow); + padding: var(--rz-datalist-item-padding); + background-color: var(--rz-datalist-item-background-color); +} + +.rz-datalist-data { + list-style: none; + padding: var(--rz-datalist-padding); + margin: 0; +} +.rz-datalist-data > li { + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} +.rz-datalist-data > li:first-child { + margin-block-start: 0; +} +.rz-datalist-data > li:last-child { + margin-block-end: 0; +} + +.rz-g { + display: flex; + flex-wrap: wrap; +} +.rz-g > div { + flex: auto; + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} + +.rz-datalist-content { + box-sizing: border-box; + position: relative; +} + +.rz-datafilter { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + column-gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-selectbutton { + display: inline-flex; +} +.rz-datafilter .rz-datafilter-group { + position: relative; + margin: 0.25rem 0 0; + padding: 0; + flex-basis: 100%; +} +.rz-datafilter .rz-datafilter-group .rz-datafilter-group { + margin: 0; +} +.rz-datafilter .rz-datafilter-item { + position: relative; + list-style: none; + margin: 0; + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-datafilter-item:before { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item:after { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item .rz-multiselect, +.rz-datafilter .rz-datafilter-item .rz-dropdown { + flex: 10rem 1; +} +.rz-datafilter .rz-datafilter-group-item:after { + height: calc(var(--rz-input-height) / 2); +} +.rz-datafilter .rz-datafilter-bar { + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; +} +.rz-datafilter .rz-datafilter-bar:before { + display: none; +} +.rz-datafilter .rz-datafilter-bar:after { + height: calc(var(--rz-input-height) / 2); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); +} +.rz-datafilter .rz-datafilter-bar .rz-splitbutton { + margin-block-start: 0.3125rem; +} +.rz-datafilter .rz-datafilter-editor { + flex: 10rem 4; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear { + color: var(--rz-text-secondary-color); + opacity: 0.5; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear:hover { + opacity: 1; +} + +.rz-scheduler { + box-sizing: border-box; + container-name: scheduler; + container-type: inline-size; + display: flex; + height: 400px; + flex-direction: column; + border-radius: var(--rz-scheduler-border-radius); + border: 1px solid var(--rz-scheduler-border-color); + box-shadow: var(--rz-scheduler-shadow); + color: var(--rz-scheduler-color); + background: var(--rz-scheduler-background-color); + overflow: hidden; + background-clip: border-box; +} +.rz-scheduler a.rz-event-list-btn { + position: absolute; + padding-inline-start: 0.25rem; + color: var(--rz-scheduler-event-list-button-color); + font-size: var(--rz-scheduler-event-list-button-font-size); +} +.rz-scheduler a.rz-event-list-btn:hover { + cursor: pointer; + color: var(--rz-scheduler-event-list-button-color); + text-decoration: underline; +} + +.rz-slot { + display: flex; + height: 1.5em; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} + +.rz-slot-title { + text-align: end; + font-size: var(--rz-scheduler-slot-title-font-size); + padding: var(--rz-scheduler-slot-title-padding); +} + +.rz-slot-hours { + flex: 0 0 5rem; +} +.rz-slot-hours .rz-slot-header { + height: 1.5rem; + text-align: end; + font-size: var(--rz-scheduler-header-font-size); + padding: 0 0.25rem; + border-inline-end: 1px solid var(--rz-scheduler-border-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.rz-slot-minor { + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); +} + +.rz-day-view .rz-slot, +.rz-slots:first-child .rz-slot { + border-inline-start: none; +} + +.rz-event { + position: absolute; + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); + cursor: pointer; +} + +.rz-event-content { + background: var(--rz-scheduler-event-background-color); + border-radius: var(--rz-scheduler-border-radius); + color: var(--rz-scheduler-event-color); + height: 100%; + padding: var(--rz-scheduler-event-content-padding); + font-size: var(--rz-scheduler-event-font-size); + line-height: var(--rz-scheduler-event-line-height); + overflow: hidden; +} + +.rz-events { + position: relative; +} + +.rz-scheduler-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--rz-scheduler-toolbar-padding); + background: var(--rz-scheduler-toolbar-background-color); +} +.rz-scheduler-nav .rz-scheduler-nav-title { + display: flex; + align-self: center; + font-size: var(--rz-scheduler-toolbar-title-font-size); + font-weight: var(--rz-scheduler-toolbar-title-font-weight); + color: var(--rz-scheduler-toolbar-title-color); +} + +.rz-view-header { + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); + background-color: var(--rz-scheduler-header-background-color); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); + display: flex; +} +.rz-view-header .rz-slot-header { + flex: 1; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rz-view-header .rz-slot-hour-header { + flex: 0 0 5rem; +} + +.rz-view { + display: flex; + flex-direction: column; + flex: 1; +} + +.rz-view-content { + flex: auto; + display: flex; + overflow: auto; + height: 0; +} +.rz-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-slot:has(.rz-state-focused) { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-slots { + flex: 1; + font-size: 1rem; +} + +.rz-scheduler-nav-views { + display: flex; +} +.rz-scheduler-nav-views .rz-button.rz-primary { + background: var(--rz-scheduler-view-button-background-color); + color: var(--rz-scheduler-view-button-color); + border: var(--rz-scheduler-view-button-border); + border-radius: 0; + border-inline-end: none; +} +.rz-scheduler-nav-views .rz-button.rz-primary:first-child { + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); +} +.rz-scheduler-nav-views .rz-button.rz-primary:last-child { + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); +} +.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { + background-color: var(--rz-scheduler-view-selected-background-color); + border-color: var(--rz-scheduler-view-selected-border-color); + color: var(--rz-scheduler-view-selected-color); +} +.rz-scheduler-nav-views .rz-button.rz-primary:focus-visible { + z-index: 1; +} + +.rz-scheduler-nav-prev-next { + display: flex; +} +.rz-scheduler-nav-prev-next .rz-button { + background-color: var(--rz-scheduler-prev-next-button-background-color); + color: var(--rz-scheduler-prev-next-button-color); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); + font-size: var(--rz-scheduler-prev-next-button-font-size); +} +.rz-scheduler-nav-prev-next .rz-button.rz-today { + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); + padding: var(--rz-scheduler-today-button-padding); + font-size: var(--rz-scheduler-today-button-font-size); + text-transform: var(--rz-scheduler-today-button-text-transform); +} +.rz-scheduler-nav-prev-next .rz-button.rz-prev { + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button.rz-next { + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button:focus-visible { + z-index: 1; +} + +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + +.rz-event-list .rz-event { + position: static; +} + +.rz-week { + flex: 1; + font-size: 1rem; +} +.rz-week .rz-slots { + display: flex; + height: 100%; +} +.rz-week:first-child .rz-slot { + border-block-start: none; +} + +.rz-month { + flex: 1; + font-size: 1rem; +} +.rz-month .rz-slots { + display: flex; + height: 100%; +} +.rz-month:nth-child(2) .rz-slot { + border-block-start: none; +} +.rz-month .rz-slot { + flex: 1; + height: 100%; + display: flex; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child { + position: sticky; + z-index: 9998; + inset-inline-start: 0; + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child .rz-slot-header { + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-month .rz-slot:nth-child(2) { + border-inline-start: none; +} + +.rz-day-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-day-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-week-view-content { + flex: 1; + display: flex; +} +.rz-week-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-week-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-slots.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-week-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-week-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-month-view .rz-view-content { + flex: 1; + flex-direction: column; +} +.rz-month-view .rz-slot { + flex: 1; + height: 100%; +} +.rz-month-view .rz-slot:first-child { + border-inline-start: none; +} + +.rz-planner-view { + overflow: auto; +} +.rz-planner-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 2.25rem; + z-index: 9999; +} +.rz-planner-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-planner-view .rz-month .rz-slot:first-child .rz-slot-header { + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +.rz-planner-view .rz-month .rz-slot:last-child { + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); +} +.rz-planner-view .rz-month .rz-slot:last-child .rz-slot-header { + writing-mode: vertical-rl; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-planner-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-planner-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-timeline-view { + flex: auto; + overflow: auto; + flex-wrap: wrap; + flex-direction: unset; +} +.rz-timeline-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 36px; + z-index: 9999; +} +.rz-timeline-view .rz-view-header .rz-slot-header { + min-width: var(--rz-scheduler-timeline-slot-width); + flex: 0 0 auto; +} +.rz-timeline-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-timeline-view .rz-month { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slots { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slot { + width: var(--rz-scheduler-timeline-slot-width); + height: var(--rz-scheduler-timeline-slot-height); +} +.rz-timeline-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-timeline-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-year-view { + overflow: auto; + padding: var(--rz-scheduler-year-padding); + --rz-gap: var(--rz-scheduler-year-padding); +} +.rz-year-view .rz-flex-column, +.rz-year-view .rz-week { + min-width: fit-content; +} +.rz-year-view .rz-slot { + flex: 1; + border-block-start: none; + justify-content: center; + height: initial; + padding: var(--rz-scheduler-year-slot-padding); + cursor: pointer; +} +.rz-year-view .rz-slot .rz-slot-title { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-align: center; + width: var(--rz-scheduler-year-slot-title-width); + min-width: 2rem; + min-height: 2rem; + border-radius: var(--rz-scheduler-year-slot-title-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-year-view .rz-slot .rz-slot-title.rz-other-month { + opacity: 0.5; +} +.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments { + color: var(--rz-scheduler-event-color); + background-color: var(--rz-scheduler-event-background-color); +} +.rz-year-view .rz-slot .rz-slot-title.rz-state-focused { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} +.rz-year-view .rz-slot:hover .rz-slot-title:not(.rz-has-appointments) { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} + +.rz-year-month:focus { + outline: var(--rz-outline-normal); +} +.rz-year-month:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); + border-radius: var(--rz-border-radius); +} + +@container scheduler (width < 640px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@container scheduler (width < 1400px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +@media (max-width: 576px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@media (max-width: 1399px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +.rz-tabview { + box-sizing: border-box; + display: flex; +} +.rz-tabview:focus { + outline: var(--rz-outline-normal); +} +.rz-tabview:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-tabview:focus-visible .rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + outline: var(--rz-tabs-tab-focus-outline); + outline-offset: var(--rz-tabs-tab-focus-outline-offset); +} +.rz-tabview.rz-tabview-top { + flex-direction: column; +} +.rz-tabview.rz-tabview-top-right { + flex-direction: column; +} +.rz-tabview.rz-tabview-bottom { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-bottom-right { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-left { + flex-direction: row; +} +.rz-tabview.rz-tabview-right { + flex-direction: row-reverse; +} + +.rz-tabview-nav { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} +.rz-tabview-nav li { + border: var(--rz-tabs-border); + background-color: var(--rz-tabs-tab-background-color); + color: var(--rz-tabs-tab-color); + transition: var(--rz-tabs-transition); +} +.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-hover-background-color); + color: var(--rz-tabs-tab-hover-color); +} +.rz-tabview-nav li a, +.rz-tabview-nav li a:not([href]):not([class]) { + display: flex; + align-items: center; + color: inherit; + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); + font-size: var(--rz-tabs-tab-font-size); + line-height: var(--rz-tabs-tab-line-height); + font-weight: var(--rz-tabs-tab-font-weight); + text-transform: var(--rz-tabs-tab-text-transform); + letter-spacing: var(--rz-tabs-tab-letter-spacing); + text-decoration: none; + cursor: pointer; +} +.rz-tabview-nav li a:hover, +.rz-tabview-nav li a:not([href]):not([class]):hover { + text-decoration: none; +} +.rz-tabview-nav li.rz-state-disabled { + opacity: 0.5; +} +.rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-focus-background-color); + border-color: var(--rz-tabs-tab-focus-background-color); + color: var(--rz-tabs-tab-focus-color); +} +.rz-tabview-nav .rz-tabview-selected { + background-color: var(--rz-tabs-tab-selected-background-color); + color: var(--rz-tabs-tab-selected-color); + position: relative; +} +.rz-tabview-top > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-top > .rz-tabview-nav li { + border-top-width: 2px; + border-bottom-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-bottom-color: var(--rz-tabs-background-color); + margin-bottom: -1px; + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-bottom > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-bottom > .rz-tabview-nav li { + border-bottom-width: 2px; + border-top-color: var(--rz-tabs-tab-background-color); + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-top-color: var(--rz-tabs-background-color); + margin-top: -1px; + padding-top: 1px; + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-left > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-left > .rz-tabview-nav li { + border-left-width: 2px; + border-right-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} +.rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-right-color: var(--rz-tabs-background-color); + margin-right: -1px; + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-right > .rz-tabview-nav li { + border-right-width: 2px; + border-left-color: var(--rz-tabs-tab-background-color); + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-left-color: var(--rz-tabs-background-color); + margin-left: -1px; + padding-left: 1px; + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} + +.rz-tabview-panels { + background-color: var(--rz-tabs-background-color); + border: var(--rz-tabs-border); + box-shadow: var(--rz-tabs-shadow); + flex: 1; + overflow: auto; +} +.rz-tabview-top > .rz-tabview-panels { + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-left > .rz-tabview-panels { + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .rz-tabview-panels { + flex: auto; + } +} +.rz-tabview-panel { + padding: var(--rz-tabs-padding); +} + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); +} + +.rz-tooltip { + box-sizing: border-box; + position: absolute; + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-tooltip-content { + background: var(--rz-tooltip-background-color); + color: var(--rz-tooltip-color); + box-shadow: var(--rz-tooltip-shadow); + padding: var(--rz-tooltip-padding); + border-radius: var(--rz-tooltip-border-radius); + font-size: var(--rz-tooltip-font-size); + white-space: nowrap; +} + +.rz-tooltip .rz-top-tooltip-content { + margin-bottom: 16px; +} + +.rz-tooltip .rz-top-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-end: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-bottom-tooltip-content { + margin-top: -8px; +} + +.rz-tooltip .rz-bottom-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-start: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-left-tooltip-content { + margin-right: 8px; +} + +.rz-tooltip .rz-left-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + right: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-right-tooltip-content { + margin-left: 0; +} + +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-dialog-wrapper { + box-sizing: border-box; + display: flex; + position: fixed; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + z-index: var(--rz-dialog-zindex); + align-items: center; + justify-content: center; +} + +.rz-dialog { + box-sizing: border-box; + position: absolute; + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 150px; + max-height: 100%; + min-height: 150px; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); +} + +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); + font-size: var(--rz-dialog-title-font-size); + line-height: var(--rz-dialog-title-line-height); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); +} + +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; + font-weight: var(--rz-dialog-title-font-weight); + letter-spacing: var(--rz-dialog-title-letter-spacing); + color: var(--rz-dialog-title-color); + user-select: none; +} + +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { + font-size: var(--rz-dialog-close-font-size); + color: var(--rz-dialog-close-color); + vertical-align: var(--rz-dialog-close-vertical-align); +} +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { + content: "close"; +} +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { + color: var(--rz-dialog-close-hover-color); +} + +.rz-dialog-content, +.rz-dialog-side-content { + flex: 0 1 auto; + padding: var(--rz-dialog-content-padding); + overflow: auto; +} + +.rz-dialog-confirm, .rz-dialog-alert { + max-width: 400px; + margin: 0.75rem; +} + +.rz-dialog-confirm-message, .rz-dialog-alert-message { + margin-block-end: 1.5rem; +} + +.rz-dialog-confirm-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.rz-dialog-confirm-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-alert-buttons { + text-align: end; + gap: 0.5rem; +} +.rz-dialog-alert-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-mask { + position: fixed; + z-index: var(--rz-dialog-mask-zindex); + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--rz-dialog-mask-background-color); + opacity: 0.5; +} + +.no-scroll { + overflow: hidden; + padding-inline-end: 15px; +} + +.rz-dialog-side-position-right { + right: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-left { + left: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-top { + top: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +.rz-dialog-side-position-bottom { + bottom: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; +} + +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; +} + +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); +} +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); +} +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); +} +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); +} + +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); +} + +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.rz-notification-title { + font-weight: bold; +} + +.rz-notification-icon { + margin: var(--rz-notification-icon-margin); +} +.rz-notification-icon.rzi-check { + color: var(--rz-notification-success-icon-color); +} +.rz-notification-icon.rzi-check:before { + content: "check"; +} +.rz-notification-icon.rzi-exclamation-triangle { + color: var(--rz-notification-warning-icon-color); +} +.rz-notification-icon.rzi-exclamation-triangle:before { + content: "warning"; +} +.rz-notification-icon.rzi-info-circle { + color: var(--rz-notification-info-icon-color); +} +.rz-notification-icon.rzi-info-circle:before { + content: "info"; +} +.rz-notification-icon.rzi-times { + color: var(--rz-notification-error-icon-color); +} +.rz-notification-icon.rzi-times:before { + content: "error"; +} + +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; +} + +.rz-form { + box-sizing: border-box; +} + +.rz-message { + box-sizing: border-box; +} + +.rz-messages-error { + display: inline-block; + color: var(--rz-form-error-color); + font-size: var(--rz-form-error-font-size); + padding: var(--rz-validator-text-padding); +} + +.rz-message-popup { + position: absolute; + background-color: var(--rz-validator-background-color); + transform: var(--rz-validator-transform); + box-shadow: var(--rz-validator-shadow); + padding: var(--rz-validator-padding); + border-radius: var(--rz-border-radius); + color: var(--rz-validator-color); + pointer-events: none; +} +.rz-message-popup:before { + content: ""; + border: var(--rz-validator-pointer-size) solid transparent; + border-bottom-color: var(--rz-validator-background-color); + position: absolute; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); +} + +.rz-layout::-webkit-scrollbar, +.rz-layout ::-webkit-scrollbar, +.rz-scrollbars::-webkit-scrollbar, +.rz-scrollbars ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-thumb, +.rz-layout ::-webkit-scrollbar-thumb, +.rz-scrollbars::-webkit-scrollbar-thumb, +.rz-scrollbars ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-corner, +.rz-layout ::-webkit-scrollbar-corner, +.rz-scrollbars::-webkit-scrollbar-corner, +.rz-scrollbars ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-login { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rz-login .rz-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.rz-login .rz-form .rz-form-row { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} +.rz-login .rz-form .rz-form-row .rz-label { + flex: 1 8rem; +} +.rz-login .rz-form .rz-form-row .rz-form-input-wrapper { + flex: 3 14rem; +} +.rz-login .rz-form .rz-form-row .rz-textbox { + display: block; + width: 100%; +} +.rz-login .rz-form .rz-form-row .rz-textbox.invalid { + border: var(--rz-border-danger); +} +.rz-login .rz-form .rz-form-row .rz-switch { + margin-inline-end: 0.5rem; +} +.rz-login .rz-form .rz-messages-error { + position: absolute; +} +.rz-login .rz-register { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: var(--rz-login-register-background-color); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); + border-radius: var(--rz-border-radius); +} +.rz-login .rz-register .rz-button { + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); +} +.rz-login .rz-login-buttons { + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.rz-lookup-panel { + background-color: var(--rz-lookup-panel-background-color); + padding: var(--rz-lookup-panel-padding); + container-type: inline-size; + container-name: rz-lookup-panel; +} + +.rz-lookup-search { + display: flex; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); +} +.rz-lookup-search input { + flex: auto; +} + +.ssrsviewer { + display: flex; +} +.ssrsviewer iframe { + flex: auto; +} + +.rz-map { + box-sizing: border-box; + height: var(--rz-map-height); + padding: var(--rz-map-padding); + background-color: var(--rz-map-background-color); + box-shadow: var(--rz-map-shadow); + border-radius: var(--rz-border-radius); +} + +.rz-map-container { + height: 100%; +} + +.rz-gauge, +.rz-arc-gauge { + box-sizing: border-box; + position: relative; + display: inline-block; + width: 300px; + height: 300px; +} + +.rz-gauge .rz-line, +.rz-gauge .rz-tick { + stroke: var(--rz-gauge-scale-color); +} +.rz-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-scale-label-color); +} + +.rz-arc-gauge .rz-line, +.rz-arc-gauge .rz-tick { + stroke: var(--rz-gauge-arc-scale-color); +} +.rz-arc-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-arc-scale-label-color); +} + +.rz-gauge-value { + position: absolute; + transform: translateX(-50%); + padding: 0.5rem; +} + +.rz-arc-gauge-value { + position: absolute; + transform: translate(-50%, -50%); + padding: 0.5rem; +} + +.rz-gauge-pointer { + fill: var(--rz-gauge-pointer-color); +} + +.rz-arc-gauge-scale-value { + fill: var(--rz-gauge-arc-value-color); +} + +.rz-arc-gauge-scale { + fill: var(--rz-gauge-arc-scale-color); +} + +.rz-progressbar { + box-sizing: border-box; + border-radius: var(--rz-progressbar-border-radius); + height: var(--rz-progressbar-height); + position: relative; + background-color: var(--rz-progressbar-background-color); + text-align: center; + display: flex; + align-items: center; +} + +.rz-progressbar-value { + border-radius: var(--rz-progressbar-border-radius); + position: absolute; + background-color: var(--rz-progressbar-value-background-color); + height: 100%; + width: 100%; + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-label { + position: relative; + width: 100%; + text-align: center; + font-size: var(--rz-progressbar-font-size); + line-height: var(--rz-progressbar-font-size); +} + +.rz-progressbar-circular { + box-sizing: border-box; + position: relative; +} + +.rz-progressbar-circular-viewbox { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.rz-progressbar-circular-label { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +.rz-progressbar-circular-background { + stroke: var(--rz-progressbar-background-color); + stroke-width: var(--rz-progressbar-circular-stroke-width); +} + +.rz-progressbar-circular-value { + stroke-linecap: var(--rz-progressbar-circular-value-endpoint); + stroke-width: var(--rz-progressbar-circular-value-stroke-width); + stroke: var(--rz-progressbar-value-background-color); + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-determinate .rz-progressbar-circular-value { + stroke-dasharray: 100; + transform: rotate(-0.25turn); +} + +.rz-progressbar-indeterminate { + overflow: hidden; +} +.rz-progressbar-indeterminate .rz-progressbar-value { + background-color: transparent; +} +.rz-progressbar-indeterminate .rz-progressbar-value:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} +.rz-progressbar-indeterminate .rz-progressbar-value:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; + animation-delay: 1.15s; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} +@keyframes rz-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 100%, 60% { + left: 100%; + right: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} +.rz-progressbar-indeterminate .rz-progressbar-circular-value { + animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + transform-origin: 0 0; +} +@keyframes rz-progressbar-circular-indeterminate-anim-rotate { + 100% { + transform: rotate(1turn); + } +} +@keyframes rz-progressbar-circular-indeterminate-anim-dash { + 0% { + stroke-dasharray: 1, 100; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -28; + } + 100% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -99; + } +} + +.rz-progressbar.rz-progressbar-primary { + color: var(--rz-on-primary); +} + +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value { + background-color: var(--rz-primary); +} +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:before { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:after { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); +} + +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); +} +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:before { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:after { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar.rz-progressbar-info { + color: var(--rz-on-info); +} + +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-value { + background-color: var(--rz-info); +} +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:before { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:after { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar.rz-progressbar-warning { + color: var(--rz-on-warning); +} + +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-value { + background-color: var(--rz-warning); +} +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:before { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:after { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-danger { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-success { + color: var(--rz-on-success); +} + +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value { + background-color: var(--rz-success); +} +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:before { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:after { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} + +.rz-scheme-pastel .rz-series-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} + +.rz-scheme-pastel .rz-series-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} + +.rz-scheme-pastel .rz-series-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} + +.rz-scheme-pastel .rz-series-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} + +.rz-scheme-pastel .rz-series-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} + +.rz-scheme-pastel .rz-series-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} + +.rz-scheme-pastel .rz-series-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} + +.rz-scheme-pastel .rz-series-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} + +.rz-scheme-pastel .rz-series-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-9-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} + +.rz-scheme-pastel .rz-series-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-10-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} + +.rz-scheme-pastel .rz-series-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-11-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} + +.rz-scheme-pastel .rz-series-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-12-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} + +.rz-scheme-pastel .rz-series-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-13-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} + +.rz-scheme-pastel .rz-series-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-14-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} + +.rz-scheme-pastel .rz-series-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-15-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} + +.rz-scheme-pastel .rz-series-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-16-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} + +.rz-scheme-pastel .rz-series-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-17-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} + +.rz-scheme-pastel .rz-series-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-18-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} + +.rz-scheme-pastel .rz-series-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-19-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} + +.rz-scheme-pastel .rz-series-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-20-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} + +.rz-scheme-pastel .rz-series-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-21-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} + +.rz-scheme-pastel .rz-series-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-22-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} + +.rz-scheme-pastel .rz-series-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-23-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} + +.rz-scheme-palette .rz-series-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} +.rz-scheme-palette .rz-series-item-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} + +.rz-scheme-palette .rz-series-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} + +.rz-scheme-palette .rz-series-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #665191; +} +.rz-scheme-palette .rz-series-item-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #665191; +} + +.rz-scheme-palette .rz-series-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #a05195; +} +.rz-scheme-palette .rz-series-item-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #a05195; +} + +.rz-scheme-palette .rz-series-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #d45087; +} +.rz-scheme-palette .rz-series-item-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #d45087; +} + +.rz-scheme-palette .rz-series-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} + +.rz-scheme-palette .rz-series-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} + +.rz-scheme-palette .rz-series-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} +.rz-scheme-palette .rz-series-item-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} + +.rz-scheme-monochrome .rz-series-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} + +.rz-scheme-monochrome .rz-series-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #296080; +} +.rz-scheme-monochrome .rz-series-item-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #296080; +} + +.rz-scheme-monochrome .rz-series-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #437594; +} +.rz-scheme-monochrome .rz-series-item-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #437594; +} + +.rz-scheme-monochrome .rz-series-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} + +.rz-scheme-monochrome .rz-series-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} + +.rz-scheme-monochrome .rz-series-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} + +.rz-scheme-monochrome .rz-series-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} + +.rz-scheme-monochrome .rz-series-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} + +.rz-scheme-divergent .rz-series-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #00876c; +} +.rz-scheme-divergent .rz-series-item-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #00876c; +} + +.rz-scheme-divergent .rz-series-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} + +.rz-scheme-divergent .rz-series-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} + +.rz-scheme-divergent .rz-series-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} + +.rz-scheme-divergent .rz-series-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} + +.rz-scheme-divergent .rz-series-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} + +.rz-scheme-divergent .rz-series-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} + +.rz-scheme-divergent .rz-series-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #e27076; +} +.rz-scheme-divergent .rz-series-item-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #e27076; +} + +.rz-scheme-divergent .rz-series-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} + +.rz-marker { + stroke: var(--rz-chart-marker-stroke); +} + +.rz-area-series .rz-marker { + fill-opacity: 1; +} + +.rz-axis { + stroke: var(--rz-chart-axis-color); + font-size: var(--rz-chart-axis-font-size); +} + +.rz-axis .rz-grid-line { + stroke: var(--rz-chart-axis-color); +} + +.rz-tick-text { + stroke: none; + fill: var(--rz-chart-axis-label-color); +} + +.rz-series-data-label { + fill: var(--rz-chart-axis-label-color); +} + +.rz-value-axis .rz-tick-text { + text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; +} + +.rz-category-axis .rz-tick-text { + text-anchor: middle; +} + +.rz-axis .rz-axis-title { + stroke: none; + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-title { + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-content { + height: 100%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rz-legend { + position: absolute; + display: flex; + font-size: var(--rz-chart-legend-font-size); +} + +.rz-legend-right { + right: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-left { + left: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-top { + top: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-bottom { + bottom: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-items { + padding: 0; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; +} + +.rz-legend-item { + display: flex; + align-items: center; + gap: 4px; + margin: 4px; + cursor: pointer; +} +.rz-legend-item:focus { + outline: var(--rz-outline-normal); +} +.rz-legend-item:focus-visible { + outline: var(--rz-chart-legend-focus-outline); + outline-offset: var(--rz-chart-legend-focus-outline-offset); + border-radius: var(--rz-border-radius); +} + +.rz-legend-top .rz-legend-item, +.rz-legend-bottom .rz-legend-item { + display: inline-flex; +} + +.rz-chart-tooltip { + position: absolute; + transform: translate(-50%, -100%); + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-chart-tooltip-content { + background: var(--rz-chart-tooltip-background); + color: var(--rz-chart-tooltip-color); + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + padding: 0.25rem 0.5rem; + border-radius: var(--rz-border-radius); + white-space: nowrap; +} + +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content { + margin-bottom: 15px; +} +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + left: 50%; + bottom: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -11px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-link { + box-sizing: border-box; + color: var(--rz-link-color); + text-decoration: none; + cursor: pointer; +} +.rz-link .rz-link-text { + text-decoration: var(--rz-link-text-decoration); +} +.rz-link .rzi { + font-size: inherit; + vertical-align: middle; +} +.rz-link:hover, .rz-link:focus { + color: var(--rz-link-hover-color); + text-decoration: none; +} +.rz-link:hover .rz-link-text, .rz-link:focus .rz-link-text { + text-decoration: var(--rz-link-hover-text-decoration); +} +.rz-link:focus-visible { + outline: var(--rz-link-focus-outline); +} + +.rz-state-highlight .link { + color: var(--rz-text-contrast-color); +} + +.rz-html-editor { + box-sizing: border-box; + display: flex; + flex-direction: column; + border-radius: var(--rz-editor-border-radius); + border: var(--rz-editor-border); + overflow: hidden; +} +.rz-html-editor:focus-within { + outline: var(--rz-editor-focus-outline); + outline-offset: var(--rz-editor-focus-outline-offset); +} + +.rz-html-editor-content { + flex: 1; + overflow: auto; + padding: 0.5rem; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-source.rz-textarea { + --rz-input-hover-shadow: none; + --rz-input-border: none; + --rz-input-hover-border: none; + --rz-input-focus-shadow: none; + --rz-input-focus-border: none; + flex: 1; + padding: 0.5rem; + overflow: auto; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-toolbar { + border-bottom: var(--rz-editor-border); + display: flex; + line-height: 1rem; + flex-wrap: wrap; + background-color: var(--rz-editor-toolbar-background-color); +} +.rz-html-editor-toolbar .rzi { + font-size: 1rem; +} +.rz-html-editor-toolbar > * { + margin: var(--rz-editor-toolbar-item-margin); +} + +.rz-html-editor-colorpicker { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger { + color: inherit; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} +.rz-html-editor-colorpicker .rz-colorpicker-value { + display: none; +} +.rz-html-editor-colorpicker .rz-colorpicker { + border: none; + box-shadow: none; + padding: 0; + height: auto; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} + +.rz-html-editor-color { + border: none; + display: flex; + flex-direction: column; + background: inherit; + color: inherit; + appearance: none; + padding: 0; + position: relative; +} +.rz-html-editor-color:disabled { + color: var(--rz-input-disabled-color); +} + +.rz-html-editor-color-value { + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; +} + +.rz-html-editor-button { + color: var(--rz-editor-button-color); + appearance: none; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-button.rz-selected { + background-color: var(--rz-editor-button-selected-background-color); + color: var(--rz-editor-button-selected-color); + border-radius: var(--rz-editor-border-radius); +} +.rz-html-editor-button:disabled { + color: var(--rz-editor-button-disabled-color); +} + +.rz-html-editor-dropdown { + display: inline-flex; + padding: var(--rz-editor-button-padding); + align-items: center; + cursor: pointer; +} +.rz-html-editor-dropdown.rz-disabled { + color: var(--rz-input-disabled-color); + cursor: default; +} + +.rz-html-editor-dropdown-item { + cursor: default; + font-size: var(--rz-dropdown-item-font-size); + padding: var(--rz-dropdown-item-padding); + white-space: nowrap; +} +.rz-html-editor-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-html-editor-dropdown-item.rz-selected { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); +} + +.rz-html-editor-dropdown-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: inherit; + background-color: inherit; +} +.rz-html-editor-dropdown-trigger .rzi:before { + content: "arrow_drop_down"; +} + +.rz-html-editor-dropdown-items { + display: none; +} + +.rz-html-editor-dialog-item { + margin-bottom: 1rem; +} +.rz-html-editor-dialog-item label:first-child { + display: block; +} + +.rz-html-editor-dialog-buttons { + text-align: right; +} + +.rz-html-editor-separator { + width: 1px; + background-color: var(--rz-editor-separator-background-color); +} + +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; +} +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} + +.rz-colorpicker { + display: inline-flex; + align-items: center; + cursor: pointer; +} +.rz-colorpicker.rz-state-disabled { + cursor: default; +} + +button.rz-colorpicker-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: var(--rz-text-color); + background-color: inherit; + outline: none; +} +button.rz-colorpicker-trigger .rzi { + font-size: var(--rz-icon-size); +} +button.rz-colorpicker-trigger .rzi:before { + content: "arrow_drop_down"; +} +.rz-state-disabled button.rz-colorpicker-trigger { + color: var(--rz-input-disabled-color); +} + +.rz-colorpicker-popup { + display: none; + position: absolute; + border: var(--rz-colorpicker-panel-border); + background-color: var(--rz-colorpicker-panel-background-color); + box-shadow: var(--rz-colorpicker-panel-shadow); + min-width: 200px; + max-width: var(--rz-colorpicker-panel-max-width); + padding: var(--rz-colorpicker-panel-padding); + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-value { + flex: 1; + border-radius: var(--rz-colorpicker-value-border-radius); + border: var(--rz-colorpicker-panel-border); + min-width: 20px; + min-height: 20px; +} + +.rz-saturation-picker { + height: var(--rz-colorpicker-saturation-height); + position: relative; + touch-action: none; + border-radius: var(--rz-border-radius); +} +.rz-saturation-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-saturation-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-saturation-white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} + +.rz-saturation-black, +.rz-saturation-white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--rz-border-radius); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); +} + +.rz-saturation-black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} + +.rz-saturation-handle { + position: absolute; + width: var(--rz-colorpicker-handle-size); + height: var(--rz-colorpicker-handle-size); + border: var(--rz-colorpicker-handle-border); + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-hue-picker { + margin-bottom: 8px; + touch-action: none; + position: relative; + background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-hue-picker:active { + cursor: none; +} +.rz-hue-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-hue-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-alpha-picker { + touch-action: none; + position: relative; + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-alpha-picker:active { + cursor: none; +} +.rz-alpha-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-alpha-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-hue-handle, +.rz-alpha-handle { + position: absolute; + height: 100%; + width: 8px; + border: var(--rz-colorpicker-handle-border); + border-radius: calc(var(--rz-border-radius) / 2); + transform: translateX(-50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-colorpicker-preview-area { + display: flex; +} + +.rz-hue-and-alpha { + flex: 1; + padding-inline-end: 8px; +} + +.rz-alpha-picker:before, +.rz-colorpicker-preview:before { + position: absolute; + z-index: -1; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--rz-border-radius); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); + background-size: 8px 8px; + background-position: 0 0, 0 4px, 4px -4px, -4px 0px; +} + +.rz-colorpicker-preview { + position: relative; + width: 32px; + height: 32px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-rgba { + display: flex; + gap: 4px; +} + +.rz-color-box { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + color: var(--rz-colorpicker-input-labels-color); + font-size: 0.75rem; + text-transform: uppercase; +} +.rz-color-box .rz-textbox { + width: 80px; + margin-inline-end: 4px; + padding: var(--rz-colorpicker-hex-input-padding); + height: var(--rz-colorpicker-hex-input-height); +} +.rz-color-box .rz-numeric { + padding: var(--rz-colorpicker-rgba-input-padding); + height: var(--rz-colorpicker-rgba-input-height); +} +.rz-color-box .rz-numeric .rz-numeric-input { + padding: 0; + outline: none; +} +.rz-color-box .rz-numeric button { + display: none; +} +.rz-color-box .rz-numeric button:hover { + display: initial; +} + +.rz-colorpicker-button { + justify-content: flex-end; + display: flex; +} + +.rz-colorpicker-section:not(:last-child) { + margin-bottom: 8px; +} + +.rz-colorpicker-colors { + display: flex; + flex-wrap: wrap; + gap: var(--rz-colorpicker-items-gap); +} + +.rz-colorpicker-item { + width: var(--rz-colorpicker-item-size); + height: var(--rz-colorpicker-item-size); + border-radius: var(--rz-colorpicker-item-border-radius); + box-shadow: var(--rz-colorpicker-item-shadow); + cursor: pointer; +} +.rz-colorpicker-item:focus { + outline: var(--rz-outline-normal); +} +.rz-colorpicker-item:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-splitter { + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 100%; +} +.rz-splitter > .rz-splitter-bar { + flex: 0 0 auto; + position: relative; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--rz-splitter-bar-color); + background-color: var(--rz-splitter-bar-background-color); + opacity: 0.4; + user-select: none; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color); + border-radius: 1px; +} +.rz-splitter > .rz-splitter-bar > .rz-expand { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar-resizable:hover { + background-color: var(--rz-splitter-bar-background-color); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active { + background-color: var(--rz-splitter-bar-background-color-active); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-expand, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-collapse { + color: var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:disabled { + opacity: 0.2; +} +.rz-splitter-horizontal { + flex-direction: row; +} +.rz-splitter-horizontal > .rz-splitter-bar { + flex-direction: column; + width: 8px; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_left"; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-resize { + height: 16px; + margin: 2px 0; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before { + content: "arrow_right"; +} +.rz-splitter-horizontal > .rz-splitter-bar-resizable:hover { + cursor: col-resize; +} +.rz-splitter-vertical { + flex-direction: column; +} +.rz-splitter-vertical > .rz-splitter-bar { + flex-direction: row; + height: 8px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_drop_up"; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-resize { + width: 16px; + margin: 0 2px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-expand:before { + content: "arrow_drop_down"; +} +.rz-splitter-vertical > .rz-splitter-bar-resizable:hover { + cursor: row-resize; +} +.rz-splitter-pane { + overflow: hidden; + position: relative; + flex: 0 0 auto; +} +.rz-splitter-pane-collapsed { + flex: 0 1 0% !important; + overflow: hidden !important; + display: block !important; +} +.rz-splitter-pane-lastresizable { + flex: 1 1 auto; +} + +.rz-splitter-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* RadzenLayout styles */ +.rz-layout { + box-sizing: border-box; + height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; + background-color: var(--rz-layout-background-color); +} +.rz-layout .rz-body { + grid-area: rz-body; + overflow: auto; +} +.rz-layout .rz-sidebar { + grid-area: rz-sidebar; + position: static; +} +.rz-layout .rz-header { + grid-area: rz-header; + z-index: 2; +} +.rz-layout .rz-footer { + grid-area: rz-footer; +} + +@media (max-width: 768px) { + body:has(> .rz-layout) { + overflow-x: hidden; + } + .rz-header, + .rz-footer, + .rz-body { + width: 100vw; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } +} +.rz-breadcrumb { + box-sizing: border-box; + display: flex; + align-items: center; +} + +.rz-breadcrumb-item + .rz-breadcrumb-item::before { + content: "»"; + display: inline-block; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + font-size: 1rem; + line-height: 1.25rem; +} + +.rz-breadcrumb-item { + display: inline-flex; + align-items: center; +} +.rz-breadcrumb-item .rz-link { + display: inline-flex; + align-items: center; +} + +.rz-alert { + box-sizing: border-box; + display: flex; + align-items: flex-start; + gap: var(--rz-alert-gap); + margin: var(--rz-alert-margin); + padding: var(--rz-alert-padding); + width: 100%; + border-radius: var(--rz-alert-border-radius); + background-color: var(--rz-alert-background-color); + color: var(--rz-alert-color); +} +.rz-alert-lg { + --rz-alert-gap: 1.5rem; + --rz-alert-margin: 1.5rem 0; + --rz-alert-padding: 1.5rem; + --rz-alert-message-margin: 0.125rem 0; + --rz-alert-icon-margin: 0.125rem 0; +} +.rz-alert-md { + --rz-alert-gap: 1rem; + --rz-alert-margin: 1rem 0; + --rz-alert-padding: 1rem; + --rz-alert-message-margin: 0.125rem 0; + --rz-alert-icon-margin: 0.125rem 0; +} +.rz-alert-sm { + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 0.5rem; + --rz-alert-message-margin: 0.125rem 0; + --rz-alert-icon-margin: 0.125rem 0; +} +.rz-alert-xs { + --rz-alert-gap: 0.25rem; + --rz-alert-margin: 0.25rem 0; + --rz-alert-padding: 0.25rem; + --rz-alert-message-margin: 0; + --rz-alert-icon-margin: 0; +} +.rz-alert .rz-alert-item { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-alert-gap); +} +.rz-alert .rz-alert-icon { + color: var(--rz-alert-icon-color); + margin: var(--rz-alert-icon-margin); + font-size: var(--rz-alert-icon-size); +} +.rz-alert .rz-alert-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + margin: var(--rz-alert-message-margin); +} +.rz-alert .rz-alert-title { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-alert-title-color); + margin-bottom: var(--rz-text-h6-margin-bottom); +} +.rz-alert.rz-variant-filled { + box-shadow: var(--rz-alert-box-shadow); +} +.rz-alert.rz-variant-text { + --rz-alert-padding: 0; + --rz-alert-background-color: transparent; + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0; +} +.rz-alert.rz-variant-text .rz-alert-item { + flex: unset; +} +.rz-alert.rz-variant-text .rz-alert-message { + flex-direction: row; +} +.rz-alert.rz-variant-text .rz-alert-title { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + margin-bottom: 0; + margin-right: 0.5rem; +} +.rz-alert.rz-primary { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-primary-lighter); + --rz-alert-color: var(--rz-on-primary-lighter); + --rz-alert-title-color: var(--rz-on-primary-lighter); + --rz-alert-icon-color: var(--rz-on-primary-lighter); +} +.rz-alert.rz-primary.rz-shade-light { + --rz-alert-background-color: var(--rz-primary-light); + --rz-alert-color: var(--rz-on-primary-light); + --rz-alert-title-color: var(--rz-on-primary-light); + --rz-alert-icon-color: var(--rz-on-primary-light); +} +.rz-alert.rz-primary.rz-shade-default { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-dark { + --rz-alert-background-color: var(--rz-primary-dark); + --rz-alert-color: var(--rz-on-primary-dark); + --rz-alert-title-color: var(--rz-on-primary-dark); + --rz-alert-icon-color: var(--rz-on-primary-dark); +} +.rz-alert.rz-primary.rz-shade-darker { + --rz-alert-background-color: var(--rz-primary-darker); + --rz-alert-color: var(--rz-on-primary-darker); + --rz-alert-title-color: var(--rz-on-primary-darker); + --rz-alert-icon-color: var(--rz-on-primary-darker); +} +.rz-alert.rz-variant-outlined.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + --rz-alert-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-variant-text.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-default { + --rz-alert-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-lighter { + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-light { + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-dark { + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-darker { + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-secondary { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-on-secondary-lighter); + --rz-alert-title-color: var(--rz-on-secondary-lighter); + --rz-alert-icon-color: var(--rz-on-secondary-lighter); +} +.rz-alert.rz-secondary.rz-shade-light { + --rz-alert-background-color: var(--rz-secondary-light); + --rz-alert-color: var(--rz-on-secondary-light); + --rz-alert-title-color: var(--rz-on-secondary-light); + --rz-alert-icon-color: var(--rz-on-secondary-light); +} +.rz-alert.rz-secondary.rz-shade-default { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-dark { + --rz-alert-background-color: var(--rz-secondary-dark); + --rz-alert-color: var(--rz-on-secondary-dark); + --rz-alert-title-color: var(--rz-on-secondary-dark); + --rz-alert-icon-color: var(--rz-on-secondary-dark); +} +.rz-alert.rz-secondary.rz-shade-darker { + --rz-alert-background-color: var(--rz-secondary-darker); + --rz-alert-color: var(--rz-on-secondary-darker); + --rz-alert-title-color: var(--rz-on-secondary-darker); + --rz-alert-icon-color: var(--rz-on-secondary-darker); +} +.rz-alert.rz-variant-outlined.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + --rz-alert-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-variant-text.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-default { + --rz-alert-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-lighter { + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-light { + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-dark { + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-darker { + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-info { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-lighter { + --rz-alert-background-color: var(--rz-info-lighter); + --rz-alert-color: var(--rz-on-info-lighter); + --rz-alert-title-color: var(--rz-on-info-lighter); + --rz-alert-icon-color: var(--rz-on-info-lighter); +} +.rz-alert.rz-info.rz-shade-light { + --rz-alert-background-color: var(--rz-info-light); + --rz-alert-color: var(--rz-on-info-light); + --rz-alert-title-color: var(--rz-on-info-light); + --rz-alert-icon-color: var(--rz-on-info-light); +} +.rz-alert.rz-info.rz-shade-default { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-dark { + --rz-alert-background-color: var(--rz-info-dark); + --rz-alert-color: var(--rz-on-info-dark); + --rz-alert-title-color: var(--rz-on-info-dark); + --rz-alert-icon-color: var(--rz-on-info-dark); +} +.rz-alert.rz-info.rz-shade-darker { + --rz-alert-background-color: var(--rz-info-darker); + --rz-alert-color: var(--rz-on-info-darker); + --rz-alert-title-color: var(--rz-on-info-darker); + --rz-alert-icon-color: var(--rz-on-info-darker); +} +.rz-alert.rz-variant-outlined.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + --rz-alert-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-variant-text.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-info.rz-shade-default { + --rz-alert-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-lighter { + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-light { + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-dark { + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-darker { + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-warning { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-lighter { + --rz-alert-background-color: var(--rz-warning-lighter); + --rz-alert-color: var(--rz-on-warning-lighter); + --rz-alert-title-color: var(--rz-on-warning-lighter); + --rz-alert-icon-color: var(--rz-on-warning-lighter); +} +.rz-alert.rz-warning.rz-shade-light { + --rz-alert-background-color: var(--rz-warning-light); + --rz-alert-color: var(--rz-on-warning-light); + --rz-alert-title-color: var(--rz-on-warning-light); + --rz-alert-icon-color: var(--rz-on-warning-light); +} +.rz-alert.rz-warning.rz-shade-default { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-dark { + --rz-alert-background-color: var(--rz-warning-dark); + --rz-alert-color: var(--rz-on-warning-dark); + --rz-alert-title-color: var(--rz-on-warning-dark); + --rz-alert-icon-color: var(--rz-on-warning-dark); +} +.rz-alert.rz-warning.rz-shade-darker { + --rz-alert-background-color: var(--rz-warning-darker); + --rz-alert-color: var(--rz-on-warning-darker); + --rz-alert-title-color: var(--rz-on-warning-darker); + --rz-alert-icon-color: var(--rz-on-warning-darker); +} +.rz-alert.rz-variant-outlined.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + --rz-alert-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-variant-text.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-default { + --rz-alert-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-lighter { + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-light { + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-dark { + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-darker { + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-error { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-error.rz-shade-lighter { + --rz-alert-background-color: var(--rz-error-lighter); + --rz-alert-color: var(--rz-on-error-lighter); + --rz-alert-title-color: var(--rz-on-error-lighter); + --rz-alert-icon-color: var(--rz-on-error-lighter); +} +.rz-alert.rz-error.rz-shade-light { + --rz-alert-background-color: var(--rz-error-light); + --rz-alert-color: var(--rz-on-error-light); + --rz-alert-title-color: var(--rz-on-error-light); + --rz-alert-icon-color: var(--rz-on-error-light); +} +.rz-alert.rz-error.rz-shade-default { + --rz-alert-background-color: var(--rz-error); + --rz-alert-color: var(--rz-on-error); + --rz-alert-title-color: var(--rz-on-error); + --rz-alert-icon-color: var(--rz-on-error); +} +.rz-alert.rz-error.rz-shade-dark { + --rz-alert-background-color: var(--rz-error-dark); + --rz-alert-color: var(--rz-on-error-dark); + --rz-alert-title-color: var(--rz-on-error-dark); + --rz-alert-icon-color: var(--rz-on-error-dark); +} +.rz-alert.rz-error.rz-shade-darker { + --rz-alert-background-color: var(--rz-error-darker); + --rz-alert-color: var(--rz-on-error-darker); + --rz-alert-title-color: var(--rz-on-error-darker); + --rz-alert-icon-color: var(--rz-on-error-darker); +} +.rz-alert.rz-variant-outlined.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-variant-text.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-error.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-lighter { + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-light { + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-dark { + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-darker { + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-danger { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-lighter { + --rz-alert-background-color: var(--rz-danger-lighter); + --rz-alert-color: var(--rz-on-danger-lighter); + --rz-alert-title-color: var(--rz-on-danger-lighter); + --rz-alert-icon-color: var(--rz-on-danger-lighter); +} +.rz-alert.rz-danger.rz-shade-light { + --rz-alert-background-color: var(--rz-danger-light); + --rz-alert-color: var(--rz-on-danger-light); + --rz-alert-title-color: var(--rz-on-danger-light); + --rz-alert-icon-color: var(--rz-on-danger-light); +} +.rz-alert.rz-danger.rz-shade-default { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-dark { + --rz-alert-background-color: var(--rz-danger-dark); + --rz-alert-color: var(--rz-on-danger-dark); + --rz-alert-title-color: var(--rz-on-danger-dark); + --rz-alert-icon-color: var(--rz-on-danger-dark); +} +.rz-alert.rz-danger.rz-shade-darker { + --rz-alert-background-color: var(--rz-danger-darker); + --rz-alert-color: var(--rz-on-danger-darker); + --rz-alert-title-color: var(--rz-on-danger-darker); + --rz-alert-icon-color: var(--rz-on-danger-darker); +} +.rz-alert.rz-variant-outlined.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-variant-text.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-lighter { + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-light { + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-dark { + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-darker { + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-success { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-lighter { + --rz-alert-background-color: var(--rz-success-lighter); + --rz-alert-color: var(--rz-on-success-lighter); + --rz-alert-title-color: var(--rz-on-success-lighter); + --rz-alert-icon-color: var(--rz-on-success-lighter); +} +.rz-alert.rz-success.rz-shade-light { + --rz-alert-background-color: var(--rz-success-light); + --rz-alert-color: var(--rz-on-success-light); + --rz-alert-title-color: var(--rz-on-success-light); + --rz-alert-icon-color: var(--rz-on-success-light); +} +.rz-alert.rz-success.rz-shade-default { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-dark { + --rz-alert-background-color: var(--rz-success-dark); + --rz-alert-color: var(--rz-on-success-dark); + --rz-alert-title-color: var(--rz-on-success-dark); + --rz-alert-icon-color: var(--rz-on-success-dark); +} +.rz-alert.rz-success.rz-shade-darker { + --rz-alert-background-color: var(--rz-success-darker); + --rz-alert-color: var(--rz-on-success-darker); + --rz-alert-title-color: var(--rz-on-success-darker); + --rz-alert-icon-color: var(--rz-on-success-darker); +} +.rz-alert.rz-variant-outlined.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + --rz-alert-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-variant-text.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-success.rz-shade-default { + --rz-alert-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-lighter { + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-light { + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-dark { + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-darker { + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-base { + --rz-alert-background-color: var(--rz-base-600); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); +} +.rz-alert.rz-variant-outlined.rz-base { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-base { + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-light { + --rz-alert-background-color: var(--rz-base-600); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); +} +.rz-alert.rz-variant-outlined.rz-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-light { + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-dark { + --rz-alert-background-color: var(--rz-black); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); +} +.rz-alert.rz-variant-outlined.rz-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-black); + --rz-alert-color: var(--rz-black); + --rz-alert-title-color: var(--rz-black); + --rz-alert-icon-color: var(--rz-black); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-dark { + --rz-alert-color: var(--rz-black); + --rz-alert-title-color: var(--rz-black); + --rz-alert-icon-color: var(--rz-black); + --rz-alert-background-color: transparent; +} + +@keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +@-webkit-keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +.rz-button.rz-speech-to-text-button-recording { + -webkit-animation: mic-blink 2s linear infinite; + -moz-animation: mic-blink 2s linear infinite; + animation: mic-blink 2s linear infinite; +} + +.rz-flex-row { + flex-direction: row !important; +} + +.rz-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.rz-flex-column { + flex-direction: column !important; +} + +.rz-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.rz-stack { + box-sizing: border-box; + gap: var(--rz-gap); +} + +.rz-row { + box-sizing: border-box; + flex-wrap: wrap; + gap: var(--rz-gap); + row-gap: var(--rz-row-gap); +} + +.rz-row > [class^=rz-col] { + flex: 1 0 0%; +} + +.rz-row > [class*=rz-col-] { + flex: 0 0 auto; + width: 100%; +} + +.rz-row > .rz-col-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); +} + +.rz-row > .rz-col-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-row > .rz-col-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-row > .rz-col-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-row > .rz-col-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-row > .rz-col-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-row > .rz-col-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-row > .rz-col-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-row > .rz-col-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-row > .rz-col-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-row > .rz-col-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-row > .rz-col-12 { + max-width: 100%; + flex-basis: 100%; +} + +@media (min-width: 576px) { + .rz-row > .rz-col-xs-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xs-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 768px) { + .rz-row > .rz-col-sm-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-sm-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1024px) { + .rz-row > .rz-col-md-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-md-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-md-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-md-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-md-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-md-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-md-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-md-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-md-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-md-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-md-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-md-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1280px) { + .rz-row > .rz-col-lg-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-lg-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1920px) { + .rz-row > .rz-col-xl-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xl-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 2560px) { + .rz-row > .rz-col-xx-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xx-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-12 { + max-width: 100%; + flex-basis: 100%; + } +} +.rz-offset-0 { + margin-inline-start: 0; +} + +.rz-offset-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-offset-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-offset-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-offset-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-offset-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-offset-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-offset-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-offset-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-offset-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-offset-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-offset-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); +} + +@media (min-width: 576px) { + .rz-offset-xs-0 { + margin-inline-start: 0; + } + .rz-offset-xs-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xs-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xs-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xs-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xs-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xs-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xs-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xs-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xs-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xs-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xs-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 768px) { + .rz-offset-sm-0 { + margin-inline-start: 0; + } + .rz-offset-sm-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-sm-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-sm-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-sm-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-sm-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-sm-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-sm-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-sm-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-sm-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-sm-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-sm-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1024px) { + .rz-offset-md-0 { + margin-inline-start: 0; + } + .rz-offset-md-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-md-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-md-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-md-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-md-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-md-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-md-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-md-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-md-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-md-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-md-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1280px) { + .rz-offset-lg-0 { + margin-inline-start: 0; + } + .rz-offset-lg-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-lg-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-lg-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-lg-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-lg-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-lg-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-lg-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-lg-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-lg-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-lg-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-lg-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1920px) { + .rz-offset-xl-0 { + margin-inline-start: 0; + } + .rz-offset-xl-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xl-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xl-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xl-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xl-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xl-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xl-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xl-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xl-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xl-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xl-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 2560px) { + .rz-offset-xx-0 { + margin-inline-start: 0; + } + .rz-offset-xx-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xx-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xx-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xx-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xx-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xx-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xx-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xx-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xx-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xx-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xx-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +.rz-order-first { + order: -1 !important; +} + +.rz-order-last { + order: 13 !important; +} + +.rz-order-0 { + order: 0 !important; +} + +.rz-order-1 { + order: 1 !important; +} + +.rz-order-2 { + order: 2 !important; +} + +.rz-order-3 { + order: 3 !important; +} + +.rz-order-4 { + order: 4 !important; +} + +.rz-order-5 { + order: 5 !important; +} + +.rz-order-6 { + order: 6 !important; +} + +.rz-order-7 { + order: 7 !important; +} + +.rz-order-8 { + order: 8 !important; +} + +.rz-order-9 { + order: 9 !important; +} + +.rz-order-10 { + order: 10 !important; +} + +.rz-order-11 { + order: 11 !important; +} + +.rz-order-12 { + order: 12 !important; +} + +@media (min-width: 576px) { + .rz-order-xs-first { + order: -1 !important; + } + .rz-order-xs-last { + order: 13 !important; + } + .rz-order-xs-0 { + order: 0 !important; + } + .rz-order-xs-1 { + order: 1 !important; + } + .rz-order-xs-2 { + order: 2 !important; + } + .rz-order-xs-3 { + order: 3 !important; + } + .rz-order-xs-4 { + order: 4 !important; + } + .rz-order-xs-5 { + order: 5 !important; + } + .rz-order-xs-6 { + order: 6 !important; + } + .rz-order-xs-7 { + order: 7 !important; + } + .rz-order-xs-8 { + order: 8 !important; + } + .rz-order-xs-9 { + order: 9 !important; + } + .rz-order-xs-10 { + order: 10 !important; + } + .rz-order-xs-11 { + order: 11 !important; + } + .rz-order-xs-12 { + order: 12 !important; + } +} +@media (min-width: 768px) { + .rz-order-sm-first { + order: -1 !important; + } + .rz-order-sm-last { + order: 13 !important; + } + .rz-order-sm-0 { + order: 0 !important; + } + .rz-order-sm-1 { + order: 1 !important; + } + .rz-order-sm-2 { + order: 2 !important; + } + .rz-order-sm-3 { + order: 3 !important; + } + .rz-order-sm-4 { + order: 4 !important; + } + .rz-order-sm-5 { + order: 5 !important; + } + .rz-order-sm-6 { + order: 6 !important; + } + .rz-order-sm-7 { + order: 7 !important; + } + .rz-order-sm-8 { + order: 8 !important; + } + .rz-order-sm-9 { + order: 9 !important; + } + .rz-order-sm-10 { + order: 10 !important; + } + .rz-order-sm-11 { + order: 11 !important; + } + .rz-order-sm-12 { + order: 12 !important; + } +} +@media (min-width: 1024px) { + .rz-order-md-first { + order: -1 !important; + } + .rz-order-md-last { + order: 13 !important; + } + .rz-order-md-0 { + order: 0 !important; + } + .rz-order-md-1 { + order: 1 !important; + } + .rz-order-md-2 { + order: 2 !important; + } + .rz-order-md-3 { + order: 3 !important; + } + .rz-order-md-4 { + order: 4 !important; + } + .rz-order-md-5 { + order: 5 !important; + } + .rz-order-md-6 { + order: 6 !important; + } + .rz-order-md-7 { + order: 7 !important; + } + .rz-order-md-8 { + order: 8 !important; + } + .rz-order-md-9 { + order: 9 !important; + } + .rz-order-md-10 { + order: 10 !important; + } + .rz-order-md-11 { + order: 11 !important; + } + .rz-order-md-12 { + order: 12 !important; + } +} +@media (min-width: 1280px) { + .rz-order-lg-first { + order: -1 !important; + } + .rz-order-lg-last { + order: 13 !important; + } + .rz-order-lg-0 { + order: 0 !important; + } + .rz-order-lg-1 { + order: 1 !important; + } + .rz-order-lg-2 { + order: 2 !important; + } + .rz-order-lg-3 { + order: 3 !important; + } + .rz-order-lg-4 { + order: 4 !important; + } + .rz-order-lg-5 { + order: 5 !important; + } + .rz-order-lg-6 { + order: 6 !important; + } + .rz-order-lg-7 { + order: 7 !important; + } + .rz-order-lg-8 { + order: 8 !important; + } + .rz-order-lg-9 { + order: 9 !important; + } + .rz-order-lg-10 { + order: 10 !important; + } + .rz-order-lg-11 { + order: 11 !important; + } + .rz-order-lg-12 { + order: 12 !important; + } +} +@media (min-width: 1920px) { + .rz-order-xl-first { + order: -1 !important; + } + .rz-order-xl-last { + order: 13 !important; + } + .rz-order-xl-0 { + order: 0 !important; + } + .rz-order-xl-1 { + order: 1 !important; + } + .rz-order-xl-2 { + order: 2 !important; + } + .rz-order-xl-3 { + order: 3 !important; + } + .rz-order-xl-4 { + order: 4 !important; + } + .rz-order-xl-5 { + order: 5 !important; + } + .rz-order-xl-6 { + order: 6 !important; + } + .rz-order-xl-7 { + order: 7 !important; + } + .rz-order-xl-8 { + order: 8 !important; + } + .rz-order-xl-9 { + order: 9 !important; + } + .rz-order-xl-10 { + order: 10 !important; + } + .rz-order-xl-11 { + order: 11 !important; + } + .rz-order-xl-12 { + order: 12 !important; + } +} +@media (min-width: 2560px) { + .rz-order-xx-first { + order: -1 !important; + } + .rz-order-xx-last { + order: 13 !important; + } + .rz-order-xx-0 { + order: 0 !important; + } + .rz-order-xx-1 { + order: 1 !important; + } + .rz-order-xx-2 { + order: 2 !important; + } + .rz-order-xx-3 { + order: 3 !important; + } + .rz-order-xx-4 { + order: 4 !important; + } + .rz-order-xx-5 { + order: 5 !important; + } + .rz-order-xx-6 { + order: 6 !important; + } + .rz-order-xx-7 { + order: 7 !important; + } + .rz-order-xx-8 { + order: 8 !important; + } + .rz-order-xx-9 { + order: 9 !important; + } + .rz-order-xx-10 { + order: 10 !important; + } + .rz-order-xx-11 { + order: 11 !important; + } + .rz-order-xx-12 { + order: 12 !important; + } +} +.rz-form-field-helper { + padding: var(--rz-form-field-helper-padding); +} + +.rz-form-field-content { + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); + box-shadow: var(--rz-form-field-shadow); + transition: var(--rz-input-transition); +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + flex: 1; +} +.rz-form-field-content .rz-form-field-start, +.rz-form-field-content .rz-form-field-end { + display: flex; + flex: 0; + align-items: center; + white-space: nowrap; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); +} + +.rz-form-field { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + vertical-align: top; +} +.rz-form-field:hover .rz-form-field-content { + box-shadow: var(--rz-form-field-hover-shadow); +} +.rz-form-field.rz-state-focused .rz-form-field-content { + box-shadow: var(--rz-form-field-focus-shadow); +} +.rz-form-field.rz-state-disabled .rz-form-field-content { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); +} +.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content { + border: var(--rz-input-disabled-border); +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled { + color: var(--rz-input-disabled-color); + opacity: 1; +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled::placeholder, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +.rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { + margin: 0; + --rz-input-height: var(--rz-form-field-filled-height); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); + --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); + box-shadow: var(--rz-input-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { + top: calc(var(--rz-numeric-button-offset) + 1rem); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end { + padding-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-textarea, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-textarea { + margin-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-datepicker-trigger, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-datepicker-trigger { + top: calc(50% + 0.4375rem); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-input-hover-border); + box-shadow: var(--rz-input-hover-shadow); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content { + border: var(--rz-input-focus-border); + box-shadow: var(--rz-input-focus-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content { + border: var(--rz-form-field-filled-border); + border-radius: var(--rz-form-field-filled-border-radius); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-filled .rz-form-field-content:after { + display: var(--rz-form-field-filled-underline-display); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-form-field-filled-hover-border); + box-shadow: var(--rz-form-field-filled-hover-shadow); + background-color: var(--rz-form-field-filled-hover-background-color); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused .rz-form-field-content, .rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused:hover .rz-form-field-content { + border: var(--rz-form-field-filled-focus-border); + box-shadow: var(--rz-form-field-filled-focus-shadow); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-text .rz-form-field-content { + border-color: transparent; + box-shadow: none; + --rz-input-background-color: transparent; + --rz-input-border-radius: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; + --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); +} +.rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { + padding: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-start { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-end { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { + content: ""; + position: absolute; + z-index: 1; + inset-inline-start: 50%; + inset-inline-end: 50%; + bottom: calc(-1 * var(--rz-border-width)); + height: calc(var(--rz-border-width) + 1px); + border: var(--rz-input-focus-border); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { + content: ""; + position: absolute; + inset: calc(-1 * var(--rz-border-width)); + top: auto; + height: var(--rz-border-width); + border-bottom: var(--rz-input-border); +} +.rz-form-field.rz-variant-filled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-hover-border); +} +.rz-form-field.rz-variant-filled.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-filled.rz-state-disabled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-disabled-border); +} +.rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); + border: var(--rz-input-focus-border); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); +} +.rz-form-field .rz-numeric-button { + display: none; +} +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { + display: block; +} + +.rz-form-field-label { + position: absolute; + pointer-events: none; + padding: var(--rz-form-field-label-padding); + inset-block-start: 50%; + inset-inline-end: auto; + border-radius: var(--rz-border-radius); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); + max-width: calc(100% - 1.5rem); + transform: translate(0, -50%); + background-color: transparent; + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); +} +.rz-state-disabled .rz-form-field-content > .rz-form-field-label { + color: var(--rz-input-disabled-color) !important; +} +.rz-form-field-label:last-child { + inset-inline-end: 1.5rem; +} +.rz-textarea ~ .rz-form-field-label { + inset-block-start: var(--rz-form-field-label-textarea-top); + transform: translate(0, 0); +} +.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { + transform: translate(0, 0.625rem); +} +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; + transform: translate(0, 0); + color: var(--rz-input-placeholder-color); + background-color: var(--rz-form-field-label-floating-background-color); + font-size: 0.75rem; + line-height: 1rem; + max-width: calc(100% - 1.5rem); +} +.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + background-color: inherit !important; +} +.invalid ~ .rz-form-field-label { + color: var(--rz-danger) !important; +} +.rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} + +.rz-timeline { + box-sizing: border-box; + display: flex; +} +.rz-timeline.rz-timeline-column { + flex-direction: column; +} +.rz-timeline.rz-timeline-column .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row { + flex-direction: row; +} +.rz-timeline.rz-timeline-row .rz-timeline-item { + flex-direction: column; + justify-content: end; + width: 100%; +} +.rz-timeline.rz-timeline-row.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: column-reverse; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse .rz-timeline-item { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column; + justify-content: end; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item { + flex-direction: column; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-end { + display: none; +} + +.rz-timeline-item { + display: flex; + padding: var(--rz-timeline-item-padding); + position: relative; +} +.rz-timeline-align-items-center .rz-timeline-item { + align-items: center; +} +.rz-timeline-align-items-normal .rz-timeline-item { + align-items: normal; +} +.rz-timeline-align-items-start .rz-timeline-item { + align-items: start; +} +.rz-timeline-align-items-end .rz-timeline-item { + align-items: end; +} +.rz-timeline-align-items-stretch .rz-timeline-item { + align-items: stretch; +} +.rz-timeline-item:before { + content: ""; + position: absolute; + background-color: var(--rz-timeline-line-color); +} +.rz-timeline-column .rz-timeline-item:before { + width: var(--rz-timeline-line-width); + top: 0; + bottom: 0; + left: calc(50% - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline-column .rz-timeline-item:first-child:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-top-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + top: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column .rz-timeline-item:last-child:before { + bottom: calc(50% - var(--rz-timeline-line-width) / 2); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + bottom: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + bottom: auto; + left: 0; + right: 0; + height: var(--rz-timeline-line-width); +} +.rz-timeline-row .rz-timeline-item:first-child:before { + left: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + left: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:last-child:before { + right: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-right-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + right: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} + +.rz-timeline-content-start { + text-align: center; +} +.rz-timeline-column .rz-timeline-content-start { + flex: 1 1 auto; + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-content-end { + flex: 1 1 auto; + text-align: center; +} +.rz-timeline-column .rz-timeline-content-end { + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} +.rz-timeline-row .rz-timeline-content-end { + max-height: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-axis { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 var(--rz-timeline-axis-size); +} +.rz-timeline-column .rz-timeline-axis { + width: var(--rz-timeline-axis-size); +} +.rz-timeline-row .rz-timeline-axis { + height: var(--rz-timeline-axis-size); +} + +.rz-timeline-point { + position: relative; + display: flex; + flex: 0 1 var(--rz-timeline-point-size); + align-items: center; + justify-content: center; + height: var(--rz-timeline-point-size); + width: var(--rz-timeline-point-size); + border: var(--rz-timeline-point-border); + border-radius: var(--rz-timeline-point-border-radius); + background-color: var(--rz-timeline-point-background-color); + color: var(--rz-timeline-point-color); +} + +.rz-timeline-point-outlined { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border-color: var(--rz-timeline-point-background-color); +} + +.rz-timeline-point-flat { + border: 0; +} + +.rz-timeline-point-text { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border: 0; +} + +.rz-timeline-point-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} + +.rz-timeline-point-outlined.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); + border-color: var(--rz-primary); +} + +.rz-timeline-point-text.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); +} + +.rz-timeline-point-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} + +.rz-timeline-point-outlined.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); + border-color: var(--rz-secondary); +} + +.rz-timeline-point-text.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); +} + +.rz-timeline-point-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} + +.rz-timeline-point-outlined.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); + border-color: var(--rz-info); +} + +.rz-timeline-point-text.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); +} + +.rz-timeline-point-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} + +.rz-timeline-point-outlined.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); + border-color: var(--rz-warning); +} + +.rz-timeline-point-text.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); +} + +.rz-timeline-point-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} + +.rz-timeline-point-outlined.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); + border-color: var(--rz-success); +} + +.rz-timeline-point-text.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); +} + +.rz-timeline-point-base { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-600); + border-color: var(--rz-base-600); +} + +.rz-timeline-point-text.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-600); +} + +.rz-timeline-point-light { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-600); + border-color: var(--rz-base-600); +} + +.rz-timeline-point-text.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-600); +} + +.rz-timeline-point-dark { + background-color: var(--rz-black); + color: var(--rz-text-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-black); + border-color: var(--rz-black); +} + +.rz-timeline-point-text.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-black); +} + +.rz-timeline-axis-lg { + --rz-timeline-point-size: 3rem; +} +.rz-timeline-axis-lg .rzi { + font-size: 2rem; +} + +.rz-timeline-axis-md { + --rz-timeline-point-size: 1.5rem; +} +.rz-timeline-axis-md .rzi { + font-size: 1rem; +} + +.rz-timeline-axis-sm { + --rz-timeline-point-size: 1rem; +} +.rz-timeline-axis-sm .rzi { + font-size: 0.625rem; +} + +.rz-timeline-axis-xs { + --rz-timeline-point-size: 0.75rem; +} +.rz-timeline-axis-xs .rzi { + font-size: 0.5rem; +} + +.rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { + width: 100%; + height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #383838; + --rz-base-50: #e0e0e0; + --rz-base-100: #a0a0a0; + --rz-base-200: #6c6c6c; + --rz-base-300: #545454; + --rz-base-400: #383838; + --rz-base-500: #333333; + --rz-base-600: #2e2e2e; + --rz-base-700: #252525; + --rz-base-800: #1e1e1e; + --rz-base-900: #121212; + --rz-base-light: #a0a0a0; + --rz-base-lighter: #ffffff; + --rz-base-dark: #252525; + --rz-base-darker: #000000; + --rz-primary: #bb86fc; + --rz-primary-light: #c99efd; + --rz-primary-lighter: rgba(187, 134, 252, 0.12); + --rz-primary-dark: #966bca; + --rz-primary-darker: #7f5bab; + --rz-secondary: #01a299; + --rz-secondary-light: #34b5ad; + --rz-secondary-lighter: rgba(1, 162, 153, 0.12); + --rz-secondary-dark: #01827a; + --rz-secondary-darker: #016e68; + --rz-info: #2196f3; + --rz-info-light: #4dabf5; + --rz-info-lighter: rgba(33, 150, 243, 0.2); + --rz-info-dark: #1a78c2; + --rz-info-darker: #1666a5; + --rz-success: #4caf50; + --rz-success-light: #70bf73; + --rz-success-lighter: rgba(76, 175, 80, 0.16); + --rz-success-dark: #3d8c40; + --rz-success-darker: #347736; + --rz-warning: #ff9800; + --rz-warning-light: #ffad33; + --rz-warning-lighter: rgba(255, 152, 0, 0.2); + --rz-warning-dark: #cc7a00; + --rz-warning-darker: #ad6700; + --rz-danger: #f44336; + --rz-danger-light: #f6695e; + --rz-danger-lighter: rgba(244, 67, 54, 0.2); + --rz-danger-dark: #c3362b; + --rz-danger-darker: #a62e25; + --rz-on-base: #ffffff; + --rz-on-base-light: #121212; + --rz-on-base-lighter: #121212; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #bb86fc; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #01a299; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2196f3; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #4caf50; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #ff9800; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f44336; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #3700b3; + --rz-series-2: #ba68c8; + --rz-series-3: #f06292; + --rz-series-4: #ff8a65; + --rz-series-5: #ffee58; + --rz-series-6: #9ccc65; + --rz-series-7: #26a69a; + --rz-series-8: #4fc3f7; + --rz-series-9: #7f5cce; + --rz-series-10: #ce93d8; + --rz-series-11: #f48fb1; + --rz-series-12: #ffab91; + --rz-series-13: #fff176; + --rz-series-14: #aed581; + --rz-series-15: #4db6ac; + --rz-series-16: #81d4fa; + --rz-series-17: #a58cdd; + --rz-series-18: #e1bee7; + --rz-series-19: #f8bbd0; + --rz-series-20: #ffccbc; + --rz-series-21: #fff59d; + --rz-series-22: #c5e1a5; + --rz-series-23: #80cbc4; + --rz-series-24: #b3e5fc; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 1rem; + --rz-body-line-height: 1.5; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Roboto, sans-serif; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-50); + --rz-text-secondary-color: var(--rz-base-100); + --rz-text-tertiary-color: var(--rz-base-200); + --rz-text-disabled-color: var(--rz-base-300); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: normal; + --rz-text-display-h1-font-weight: 400; + --rz-text-display-h1-letter-spacing: -1.5px; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); + --rz-text-display-h2-line-height: normal; + --rz-text-display-h2-font-weight: 400; + --rz-text-display-h2-letter-spacing: -0.5px; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h3-line-height: normal; + --rz-text-display-h3-font-weight: 400; + --rz-text-display-h3-letter-spacing: 0; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); + --rz-text-display-h4-line-height: normal; + --rz-text-display-h4-font-weight: 400; + --rz-text-display-h4-letter-spacing: 0.25px; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h5-line-height: normal; + --rz-text-display-h5-font-weight: 400; + --rz-text-display-h5-letter-spacing: 0; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); + --rz-text-display-h6-line-height: normal; + --rz-text-display-h6-font-weight: 500; + --rz-text-display-h6-letter-spacing: 0.15px; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-h1-line-height: normal; + --rz-text-h1-font-weight: 400; + --rz-text-h1-letter-spacing: -1.5px; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); + --rz-text-h2-line-height: normal; + --rz-text-h2-font-weight: 400; + --rz-text-h2-letter-spacing: -0.5px; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: normal; + --rz-text-h3-font-weight: 400; + --rz-text-h3-letter-spacing: 0; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); + --rz-text-h4-line-height: normal; + --rz-text-h4-font-weight: 400; + --rz-text-h4-letter-spacing: 0.25px; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: normal; + --rz-text-h5-font-weight: 400; + --rz-text-h5-letter-spacing: 0; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); + --rz-text-h6-line-height: normal; + --rz-text-h6-font-weight: 500; + --rz-text-h6-letter-spacing: 0.15px; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.5; + --rz-text-subtitle1-font-weight: 400; + --rz-text-subtitle1-letter-spacing: 0.15px; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.5; + --rz-text-subtitle2-font-weight: 500; + --rz-text-subtitle2-letter-spacing: 0.1px; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.5; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: 0.5px; + --rz-text-body1-color: var(--rz-text-title-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.5; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: 0.25px; + --rz-text-body2-color: var(--rz-text-title-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: normal; + --rz-text-button-font-weight: 500; + --rz-text-button-letter-spacing: 1.25px; + --rz-text-button-text-transform: uppercase; + --rz-text-button-color: var(--rz-text-title-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-title-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-title-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-focus: var(--rz-border-width) solid var(--rz-primary); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-500); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.14); + --rz-shadow-2: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-3: 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 3px 3px rgba(0, 0, 0, 0.12), 0px 1px 8px rgba(0, 0, 0, 0.14); + --rz-shadow-4: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); + --rz-shadow-5: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-6: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-7: 0px 9px 12px rgba(0, 0, 0, 0.14), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 5px 6px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0px 12px 17px rgba(0, 0, 0, 0.14), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 7px 8px rgba(0, 0, 0, 0.14); + --rz-shadow-9: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14); + --rz-shadow-10: 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 11px 15px rgba(0, 0, 0, 0.14); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 1rem; + --rz-accordion-item-padding-inline: 1rem; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: var(--rz-border-base-900); + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-secondary-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.5rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: 500; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.75rem; + --rz-accordion-toggle-icon-margin-inline: 0.75rem 0; + --rz-accordion-toggle-icon-order: 1; + --rz-accordion-selected-color: var(--rz-text-title-color); + --rz-accordion-hover-color: var(--rz-text-title-color); + --rz-accordion-content-padding-inline: 1rem; + --rz-accordion-content-padding-block: 1rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: var(--rz-shadow-1); + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 500; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: var(--rz-shadow-1); + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: var(--rz-shadow-3); + --rz-button-hover-gradient: none; + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: var(--rz-shadow-3); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: var(--rz-shadow-6); + --rz-button-active-gradient: none; + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-background-color); + --rz-card-shadow: var(--rz-shadow-1); + --rz-card-border: var(--rz-border-base-500); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.125rem; + --rz-checkbox-height: 1.125rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: 2px; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-primary); + --rz-checkbox-checked-hover-background-color: var(--rz-primary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-base-300); + --rz-checkbox-checked-color: var(--rz-on-primary); + --rz-checkbox-checked-shadow: none; + --rz-checkbox-checked-border: var(--rz-border-primary); + --rz-checkbox-checked-hover-border: var(--rz-border-primary); + --rz-checkbox-checked-disabled-border: var(--rz-border-300); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-600); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0.125rem; + --rz-chip-padding-inline: 0.75rem 0.125rem; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: calc(4 * var(--rz-border-radius)); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: var(--rz-shadow-1); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-600); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: var(--rz-shadow-0); + --rz-datalist-item-border: var(--rz-border-base-600); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.5rem; + --rz-datepicker-trigger-icon-color: var(--rz-text-secondary-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); + --rz-datepicker-popup-width: 22rem; + --rz-datepicker-panel-border: none; + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: var(--rz-shadow-4); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-background-color); + --rz-datepicker-header-padding-block: 0.75rem; + --rz-datepicker-header-padding-inline: 0.75rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 0.75rem; + --rz-datepicker-footer-line-height: 3rem; + --rz-datepicker-prev-next-icon-size: 2rem; + --rz-datepicker-prev-next-button-border-radius: 50%; + --rz-datepicker-calendar-padding-block: 0 0.75rem; + --rz-datepicker-calendar-padding-inline: 0.75rem; + --rz-datepicker-calendar-item-padding: 0.625rem 0; + --rz-datepicker-calendar-header-font-size: 0.75rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: 0.875rem; + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-white); + --rz-datepicker-calendar-hover-background-color: var(--rz-base-600); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-border: none; + --rz-datepicker-calendar-border-radius: 50%; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-text-color); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-base-100); + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8.75rem; + --rz-datepicker-year-dropdown-width: 6rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-background-color); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.75rem; + --rz-timepicker-padding-inline: 0.75rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-text-color); + --rz-timepicker-button-background-color: var(--rz-base-700); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: var(--rz-border-base-600); + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-900); + --rz-dialog-shadow: var(--rz-shadow-9); + --rz-dialog-title-background-color: var(--rz-base-900); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 1.5rem 0; + --rz-dialog-title-padding-inline: 1.5rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.5rem; + --rz-dialog-title-font-weight: 500; + --rz-dialog-title-letter-spacing: 0.0125em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-title-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.5rem; + --rz-dialog-mask-background-color: var(--rz-black); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 1rem; + --rz-dropdown-panel-padding: 0 1rem; + --rz-dropdown-items-margin: 0 -1rem; + --rz-dropdown-items-padding: 0.5rem 0; + --rz-dropdown-item-padding: 0.75rem 1rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-base-400); + --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-shadow: none; + --rz-dropdown-item-hover-color: var(--rz-white); + --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-500); + --rz-dropdown-filter-padding: 1rem 0 0.5rem; + --rz-dropdown-open-background-color: var(--rz-base-600); + --rz-dropdown-open-border: 2px solid var(--rz-primary); + --rz-dropdown-panel-border: none; + --rz-dropdown-panel-shadow: var(--rz-shadow-4); + --rz-dropdown-chips-padding-block: 0.4375rem; + --rz-dropdown-chips-padding-inline: 0.4375rem 0.9375rem; + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 1rem; + /* Editor */ + --rz-editor-border: var(--rz-border-base-600); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary-lighter); + --rz-editor-button-selected-color: var(--rz-on-secondary-lighter); + --rz-editor-separator-background-color: var(--rz-base-600); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-600); + --rz-fieldset-border-radius: var(--rz-border-radius); + --rz-fieldset-padding: 0 1rem 1rem; + --rz-fieldset-legend-color: var(--rz-text-secondary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0 1rem; + --rz-fieldset-legend-margin-inline: 0.5rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 0.5rem; + --rz-fieldset-toggle-width: 1.5rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0; + --rz-fieldset-toggle-height: 1.5rem; + --rz-fieldset-toggle-background-color: transparent; + --rz-fieldset-toggle-color: var(--rz-text-secondary-color); + --rz-fieldset-toggle-font-size: 1.5rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: none; + --rz-footer-color: var(--rz-text-secondary-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.5rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: 0.75rem; + --rz-form-field-filled-height: 3.375rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.9375rem; + --rz-form-field-filled-numeric-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-numeric-padding-inline: 0.9375rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-600); + --rz-form-field-filled-hover-background-color: var(--rz-base-500); + --rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-600); + --rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-500); + --rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-600); + --rz-form-field-filled-border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0; + --rz-form-field-filled-label-floating-top: 0.5rem; + --rz-form-field-filled-hover-shadow: none; + --rz-form-field-filled-focus-shadow: none; + --rz-form-field-filled-underline-display: block; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0 0.25rem; + --rz-form-field-text-label-padding: 0; + --rz-form-field-label-inset-inline-start: 0.6875rem; + --rz-form-field-label-textarea-top: 0.5rem; + --rz-form-field-label-floating-top: -0.5625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 1rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(244, 67, 54, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2.5rem; + --rz-gravatar-height: 2.5rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-base-600); + --rz-grid-right-cell-border: none; + --rz-grid-bottom-cell-border: var(--rz-border-base-600); + --rz-grid-cell-padding: 0.625rem 1rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: 0.875rem; + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-base-600); + --rz-grid-hover-color: var(--rz-white); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-primary-lighter); + --rz-grid-selected-color: var(--rz-on-primary-lighter); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: none; + --rz-grid-header-cell-border-bottom: var(--rz-border-base-600); + --rz-grid-header-background-color: var(--rz-base-background-color); + --rz-grid-header-font-size: 0.875rem; + --rz-grid-header-line-height: 1.5rem; + --rz-grid-header-font-weight: 500; + --rz-grid-header-text-transform: none; + --rz-grid-header-color: var(--rz-text-title-color); + --rz-grid-header-cell-padding: 0.75rem 0; + --rz-grid-header-title-padding-inline: 1rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-600); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-600); + --rz-grid-filter-background-color: var(--rz-base-600); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: none; + --rz-grid-filter-font-size: 0.875rem; + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: 0.875rem; + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-600); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base-600); + --rz-grid-clear-filter-button-color: var(--rz-text-color); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-base-600); + --rz-grid-apply-filter-button-color: var(--rz-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 1rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1.25rem; + --rz-grid-border: var(--rz-border-base-600); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1.25rem; + --rz-grid-sort-icon-height: 1.25rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: none; + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-900); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.25rem; + --rz-grid-column-resizer-helper-width: 0.125rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-base-600); + --rz-grid-frozen-cell-background-color: var(--rz-base-background-color); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 1rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-600); + --rz-grid-group-header-item-padding-block: 0.25rem; + --rz-grid-group-header-item-padding-inline: 0.75rem 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-base-600); + --rz-grid-group-header-item-border-radius: calc(4 * var(--rz-border-radius)); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-disabled-color); + --rz-column-drag-handle-hover-color: var(--rz-text-title-color); + --rz-column-drag-handle-margin-inline: 0; + --rz-column-draggable-shadow: var(--rz-shadow-4); + /* Header */ + --rz-header-background-color: var(--rz-base-700); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: none; + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: var(--rz-shadow-4); + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.5rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 40; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.5rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.9375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: none; + --rz-input-hover-shadow: none; + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-primary); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: none; + --rz-input-disabled-background-color: var(--rz-base-background-color); + --rz-input-disabled-color: var(--rz-text-disabled-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-500); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 1rem; + --rz-listbox-header-padding-block: 0.75rem; + --rz-listbox-header-padding-inline: 1rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: rgba(0, 0, 0, 0.04); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: rgba(0, 0, 0, 0.04); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-700); + --rz-menu-border: none; + --rz-menu-border-radius: var(--rz-border-radius); + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-white); + --rz-menu-item-hover-background-color: var(--rz-base-400); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-primary); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-white); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-700); + --rz-menu-top-item-hover-color: var(--rz-primary); + --rz-menu-top-item-hover-background-color: var(--rz-base-700); + --rz-menu-top-item-selected-color: var(--rz-primary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-primary); + --rz-context-menu-padding-block: 0.5rem; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: var(--rz-shadow-6); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: var(--rz-base-800); + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-success); + --rz-notification-success-background-color: var(--rz-success-lighter); + --rz-notification-success-icon-color: var(--rz-success); + --rz-notification-warning-color: var(--rz-warning); + --rz-notification-warning-background-color: var(--rz-warning-lighter); + --rz-notification-warning-icon-color: var(--rz-warning); + --rz-notification-error-color: var(--rz-danger); + --rz-notification-error-background-color: var(--rz-danger-lighter); + --rz-notification-error-icon-color: var(--rz-danger); + --rz-notification-info-color: var(--rz-info); + --rz-notification-info-background-color: var(--rz-info-lighter); + --rz-notification-info-icon-color: var(--rz-info); + /* Numeric */ + --rz-numeric-line-height: var(--rz-body-line-height); + --rz-numeric-input-padding-block: 0.4375rem; + --rz-numeric-input-padding-inline: 0.9375rem 1.25rem; + --rz-numeric-button-width: 1rem; + --rz-numeric-button-height: 1rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: transparent; + --rz-numeric-button-disabled-background-color: transparent; + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-text-color); + /* Overlay */ + --rz-overlay-shadow: var(--rz-shadow-4); + --rz-overlay-border: none; + --rz-overlay-background-color: var(--rz-base-600); + /* Pager */ + --rz-pager-background-color: transparent; + --rz-pager-padding: 0.5rem 1rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: none; + --rz-pager-button-border-radius: 2rem; + --rz-pager-numeric-button-background-color: transparent; + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: none; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-600); + --rz-pager-numeric-button-hover-color: var(--rz-white); + --rz-pager-numeric-button-padding: 0.75rem 1rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-primary-lighter); + --rz-pager-numeric-button-selected-color: var(--rz-primary); + --rz-pager-numeric-button-selected-border: none; + --rz-pager-numeric-button-selected-padding: 0.75rem 1rem; + --rz-pager-numeric-button-min-width: 3rem; + --rz-pager-back-button-background-color: transparent; + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: transparent; + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: 0.875rem; + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: calc(var(--rz-body-font-size) * 0.875); + --rz-panel-menu-font-weight: 500; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.5rem; + --rz-panel-menu-item-padding-block: 1rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-600); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-color); + --rz-panel-menu-item-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-hover-color: var(--rz-white); + --rz-panel-menu-item-hover-background-color: var(--rz-base-600); + --rz-panel-menu-item-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem 0.5rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0.5rem; + --rz-panel-menu-item-2nd-level-border-radius: var(--rz-border-radius); + --rz-panel-menu-item-2nd-level-offset: 3rem; + --rz-panel-menu-item-2nd-level-font-size: calc(var(--rz-body-font-size) * 0.875); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: var(--rz-text-color); + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-600); + --rz-panel-menu-item-2nd-level-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-item-2nd-level-active-font-weight: 500; + --rz-panel-menu-item-3rd-level-color: var(--rz-text-color); + --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-600); + --rz-panel-menu-item-3rd-level-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: var(--rz-text-secondary-color); + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 1rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -2.25rem 1rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 1rem; + --rz-panel-title-line-height: 1.5rem; + --rz-panel-title-font-weight: 500; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: transparent; + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-text-title-color); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: var(--rz-shadow-1); + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-700); + --rz-profile-menu-top-item-background-color: var(--rz-base-700); + --rz-profile-menu-border: none; + --rz-profile-menu-padding-block: 0.5rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-base-400); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-primary-lighter); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 0.25rem; + --rz-progressbar-border-radius: 0; + --rz-progressbar-value-background-color: var(--rz-primary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 0; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: square; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: 2px; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-base-background-color); + --rz-radio-active-shadow: none; + --rz-radio-checked-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-shadow: none; + --rz-radio-checked-color: var(--rz-text-color); + --rz-radio-circle-background-color: var(--rz-primary); + --rz-radio-circle-shadow: none; + --rz-radio-circle-hover-background-color: var(--rz-primary-light); + --rz-radio-icon-width: 0.625rem; + --rz-radio-icon-height: 0.625rem; + --rz-radio-checked-border: var(--rz-border-primary); + /* Rating */ + --rz-rating-color: var(--rz-text-secondary-color); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.5; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-text-disabled-color); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-base-600); + --rz-scheduler-border-color: var(--rz-base-600); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: var(--rz-shadow-0); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-secondary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-background-color); + --rz-scheduler-toolbar-title-font-size: 1.5rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-base-background-color); + --rz-scheduler-prev-next-button-color: var(--rz-text-color); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: 2rem; + --rz-scheduler-prev-button-border-start-end-radius: 2rem; + --rz-scheduler-prev-button-border-end-start-radius: 2rem; + --rz-scheduler-prev-button-border-end-end-radius: 2rem; + --rz-scheduler-next-button-border-start-start-radius: 2rem; + --rz-scheduler-next-button-border-start-end-radius: 2rem; + --rz-scheduler-next-button-border-end-start-radius: 2rem; + --rz-scheduler-next-button-border-end-end-radius: 2rem; + --rz-scheduler-today-button-margin-inline-start: 1rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.875rem; + --rz-scheduler-today-button-text-transform: capitalize; + --rz-scheduler-view-button-border: var(--rz-border-base-600); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); + --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); + --rz-scheduler-view-selected-border-color: var(--rz-base-600); + --rz-scheduler-header-background-color: var(--rz-base-background-color); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-base-600); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-900); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 0.25rem; + --rz-scheduler-year-slot-title-width: fit-content; + --rz-scheduler-year-slot-title-border-radius: 50%; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: rgba(255, 255, 255, 0.12); + --rz-scrollbar-border-radius: 0; + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-background-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-base-600); + --rz-selectbar-selected-background-color: var(--rz-primary-lighter); + --rz-selectbar-selected-color: var(--rz-on-primary-lighter); + --rz-selectbar-selected-border: var(--rz-border-base-600); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: none; + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: transparent; + --rz-sidebar-toggle-hover-color: var(--rz-white); + --rz-sidebar-toggle-hover-background-color: var(--rz-base-500); + --rz-sidebar-toggle-hover-border-radius: 50%; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 300px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-primary-lighter); + --rz-slider-border: none; + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 4px; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-primary); + --rz-slider-range-border: none; + --rz-slider-handle-width: 20px; + --rz-slider-handle-height: 20px; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-primary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: 50%; + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-primary); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: 0px 0px 0px 10px var(--rz-primary-lighter); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-400); + --rz-slider-disabled-border: none; + --rz-slider-disabled-range-background-color: var(--rz-base-200); + --rz-slider-disabled-range-border: none; + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-200); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-color); + --rz-splitter-bar-color-active: var(--rz-on-primary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-primary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-secondary-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.25rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-secondary-color); + --rz-steps-number-background-color: var(--rz-base-600); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-600); + --rz-switch-checked-background-color: var(--rz-primary-lighter); + --rz-switch-box-shadow: var(--rz-shadow-1); + --rz-switch-circle-background-color: var(--rz-text-color); + --rz-switch-checked-circle-background-color: var(--rz-on-primary-lighter); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1rem; + --rz-tabs-shadow: none; + --rz-tabs-border: none; + --rz-tabs-border-radius: 0; + --rz-tabs-background-color: transparent; + --rz-tabs-tab-font-size: 0.875rem; + --rz-tabs-tab-line-height: 1.5rem; + --rz-tabs-tab-font-weight: 500; + --rz-tabs-tab-text-transform: uppercase; + --rz-tabs-tab-letter-spacing: 1.25px; + --rz-tabs-tab-padding-block: 0.75rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: transparent; + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-primary); + --rz-tabs-tab-selected-top-border-color: var(--rz-primary); + --rz-tabs-tab-hover-background-color: var(--rz-base-600); + --rz-tabs-tab-hover-color: var(--rz-text-title-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-title-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 1rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-200); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-200); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: transparent; + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.5rem; + --rz-tree-node-selected-background-color: var(--rz-primary-lighter); + --rz-tree-node-selected-color: var(--rz-on-primary-lighter); + --rz-tree-node-selected-border-radius: var(--rz-border-radius); + --rz-tree-node-margin-block: 0; + --rz-tree-node-margin-inline: 0; + --rz-tree-node-hover-background-color: var(--rz-base-600); + --rz-tree-node-hover-color: var(--rz-white); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 2rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all); + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-600); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-base-600); + --rz-upload-choose-color: var(--rz-text-color); + --rz-upload-choose-hover-background-color: var(--rz-base-400); + --rz-upload-choose-hover-color: var(--rz-white); + --rz-upload-choose-active-background-color: var(--rz-base-400); + --rz-upload-choose-active-color: var(--rz-white); + --rz-upload-cancel-background-color: var(--rz-base-600); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/material-dark-wcag.css b/_content/Radzen.Blazor/css/material-dark-wcag.css new file mode 100755 index 0000000..7c03423 --- /dev/null +++ b/_content/Radzen.Blazor/css/material-dark-wcag.css @@ -0,0 +1,85 @@ +:root, +.rz-material-dark { + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #383838; + --rz-base-50: #e0e0e0; + --rz-base-100: #bdbdbd; + --rz-base-200: #9E9E9E; + --rz-base-300: #858585; + --rz-base-400: #383838; + --rz-base-500: #333333; + --rz-base-600: #2e2e2e; + --rz-base-700: #252525; + --rz-base-800: #1e1e1e; + --rz-base-900: #121212; + --rz-base-light: #a0a0a0; + --rz-base-lighter: #ffffff; + --rz-base-dark: #252525; + --rz-base-darker: #000000; + --rz-primary: #bb86fc; + --rz-primary-light: #c99efd; + --rz-primary-lighter: rgba(187, 134, 252, 0.12); + --rz-primary-dark: #966bca; + --rz-primary-darker: #7f5bab; + --rz-secondary: #01a299; + --rz-secondary-light: #34b5ad; + --rz-secondary-lighter: rgba(1, 162, 153, 0.12); + --rz-secondary-dark: #01827a; + --rz-secondary-darker: #016e68; + --rz-info: #2196f3; + --rz-info-light: #4dabf5; + --rz-info-lighter: rgba(33, 150, 243, 0.2); + --rz-info-dark: #1a78c2; + --rz-info-darker: #1666a5; + --rz-success: #4caf50; + --rz-success-light: #70bf73; + --rz-success-lighter: rgba(76, 175, 80, 0.16); + --rz-success-dark: #3d8c40; + --rz-success-darker: #347736; + --rz-warning: #ff9800; + --rz-warning-light: #ffad33; + --rz-warning-lighter: rgba(255, 152, 0, 0.2); + --rz-warning-dark: #cc7a00; + --rz-warning-darker: #ad6700; + --rz-danger: #f44336; + --rz-danger-light: #f6695e; + --rz-danger-lighter: rgba(244, 67, 54, 0.2); + --rz-danger-dark: #c3362b; + --rz-danger-darker: #a62e25; + --rz-on-base: #ffffff; + --rz-on-base-light: #000000; + --rz-on-base-lighter: #000000; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #000000; + --rz-on-primary-light: #000000; + --rz-on-primary-lighter: #ffffff; + --rz-on-primary-dark: #000000; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #000000; + --rz-on-secondary-light: #000000; + --rz-on-secondary-lighter: #34b5ad; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #000000; + --rz-on-info-light: #000000; + --rz-on-info-lighter: #4dabf5; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #000000; + --rz-on-success-light: #000000; + --rz-on-success-lighter: #70bf73; + --rz-on-success-dark: #000000; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #000000; + --rz-on-warning-light: #000000; + --rz-on-warning-lighter: #ffad33; + --rz-on-warning-dark: #000000; + --rz-on-warning-darker: #000000; + --rz-on-danger: #000000; + --rz-on-danger-light: #000000; + --rz-on-danger-lighter: #f6695e; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/material-dark.css b/_content/Radzen.Blazor/css/material-dark.css new file mode 100755 index 0000000..80bba48 --- /dev/null +++ b/_content/Radzen.Blazor/css/material-dark.css @@ -0,0 +1,21743 @@ +@charset "UTF-8"; +.rz-button { + position: relative; + overflow: hidden; +} +.rz-button:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-button:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +.rz-header a, +.rz-header a:hover, +.rz-header a:focus { + color: var(--rz-primary); +} + +.rz-sidebar-toggle { + position: relative; + overflow: hidden; +} +.rz-sidebar-toggle:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-sidebar-toggle:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +.rz-navigation-item-link, +.rz-menu-toggle { + position: relative; + overflow: hidden; +} +.rz-navigation-item-link:not(.rz-state-disabled):before, +.rz-menu-toggle:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-navigation-item-link:not(.rz-state-disabled):active:before, +.rz-menu-toggle:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +.panel-menu .navigation-item-wrapper-active:before { + display: none; +} + +.rz-panel-menu .rz-navigation-item-link { + background-position: center; + transition: background-size 0.8s; + background: radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.08) 1%) center/15000%; +} +.rz-panel-menu .rz-navigation-item-link:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.08); + transition: background-size 0s; + background-size: 100%; +} +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-steps [role=tablist] { + display: flex; +} +.rz-steps .rz-steps-item:not(:last-child) { + flex: auto; + display: flex; + align-items: center; +} +.rz-steps .rz-steps-item:not(:last-child):after { + display: "block"; + content: ""; + flex: auto; + height: 1px; + margin-inline-end: 16px; + background-color: var(--rz-base-600); +} + +.rz-chkbox-box:after { + content: ""; + position: absolute; + width: 1rem; + height: 1rem; + border-radius: 50%; + opacity: 0; + transition: background-color var(--rz-transition), width var(--rz-transition), height var(--rz-transition); +} +.rz-chkbox-box:hover:not(.rz-state-disabled):after { + width: 2.5rem; + height: 2.5rem; + background-color: var(--rz-base-300); + opacity: 0.3; +} +.rz-chkbox-box:active:not(.rz-state-disabled):after { + background-color: var(--rz-base-200); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled):after { + background-color: var(--rz-primary); + opacity: 0.08; +} +.rz-chkbox-box.rz-state-active:active:hover:not(.rz-state-disabled):after { + opacity: 0.16; +} + +.rz-switch .rz-switch-circle:hover:not(.rz-disabled):before { + transition: background var(--rz-transition), transform var(--rz-transition), outlin-color var(--rz-transition); + box-shadow: var(--rz-switch-box-shadow), 0 0 0 10px rgba(255, 255, 255, 0.08); +} + +.rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled):before { + box-shadow: var(--rz-switch-box-shadow), 0 0 0 10px var(--rz-primary-lighter); +} + +.rz-radiobutton-box:after { + content: ""; + position: absolute; + width: 1rem; + height: 1rem; + border-radius: 50%; + opacity: 0; + transition: background-color var(--rz-transition), width var(--rz-transition), height var(--rz-transition); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled):after { + width: 2.5rem; + height: 2.5rem; + background-color: var(--rz-base-300); + opacity: 0.3; +} +.rz-radiobutton-box:active:not(.rz-state-disabled):after { + background-color: var(--rz-base-200); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled):after { + background-color: var(--rz-primary); + opacity: 0.08; +} +.rz-radiobutton-box.rz-state-active:active:hover:not(.rz-state-disabled):after { + opacity: 0.16; +} + +.rz-slider .rz-slider-range { + top: 0; + bottom: 0; +} +.rz-slider .rz-slider-handle:before { + display: none; +} + +.rz-selectbutton .rz-button { + box-shadow: none; +} +.rz-selectbutton .rz-button:hover { + box-shadow: none !important; + background: var(--rz-base-600); +} + +.rz-datepicker-inline table { + width: 100%; +} + +.rz-calendar-view td, +.rz-calendar-view th { + text-align: center; +} +.rz-calendar-view td a.rz-state-default, +.rz-calendar-view td span.rz-state-default, +.rz-calendar-view th a.rz-state-default, +.rz-calendar-view th span.rz-state-default { + display: inline-block; + width: 2.25rem; + height: 2.25rem; + line-height: 1rem; +} +.rz-calendar-view td a.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view td span.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view th a.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view th span.rz-state-default:not(.rz-state-active):hover { + border-radius: 50%; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view th .rz-state-active { + border-radius: 50%; +} + +.rz-timepicker { + flex-wrap: wrap; +} +.rz-timepicker .rz-numeric { + flex: 1; +} +.rz-timepicker > .rz-button { + flex-basis: 100%; +} + +.rz-numeric .rz-numeric-button { + box-shadow: none; +} +.rz-numeric .rz-numeric-button:hover { + box-shadow: none !important; +} + +.rz-fileupload-choose.rz-button { + background-position: center; + transition: background-size 0.8s; + background: radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.08) 1%) center/15000%; +} +.rz-fileupload-choose.rz-button:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.08); + transition: background-size 0s; + background-size: 100%; +} +.rz-fileupload-choose.rz-button input { + z-index: 1; +} + +.rz-datatable .rz-col-icon { + border-inline-end: var(--rz-border-base-600); +} + +.rz-grid-table-composite { + --rz-grid-right-cell-border: var(--rz-border-base-600); + --rz-grid-header-cell-border: var(--rz-border-base-600); +} + +.rz-pager-pages { + max-height: 3rem; +} + +.rz-pager-element { + box-shadow: var(--rz-shadow-0) !important; +} +.rz-pager-element:hover { + box-shadow: var(--rz-shadow-0) !important; +} +.rz-pager-element:active { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-tree-toggler { + position: relative; +} + +.rz-tree-toggler.rzi-caret-right:before { + margin-left: 0 !important; +} +.rz-tree-toggler.rzi-caret-down:before { + margin-left: 0 !important; +} +.rz-tree-toggler:after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 1rem; + height: 1rem; + border-radius: 50%; + opacity: 0; + transition: background-color var(--rz-transition), width var(--rz-transition), height var(--rz-transition), left var(--rz-transition), top var(--rz-transition); +} +.rz-tree-toggler:active:after { + left: 0; + top: -0.25rem; + width: 2rem; + height: 2rem; + background-color: var(--rz-base-200); + opacity: 0.3; +} + +.rz-scheduler-nav .rz-button { + box-shadow: var(--rz-shadow-0) !important; +} +.rz-scheduler-nav .rz-button:hover { + box-shadow: var(--rz-shadow-0) !important; + background: var(--rz-base-600); +} +.rz-scheduler-nav .rz-button:active { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-view-header { + border-top: none !important; +} +.rz-year-view .rz-view-header { + border-bottom: none !important; +} + +.rz-tabview-nav > li > a { + position: relative; + overflow: hidden; +} +.rz-tabview-nav > li > a:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-tabview-nav > li > a:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +.rz-tabview.rz-tabview-top > .rz-tabview-nav li { + border-bottom: 2px solid transparent; +} +.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-top-width: 0; + border-bottom: 2px solid var(--rz-primary); +} +.rz-tabview.rz-tabview-bottom > .rz-tabview-nav li { + border-top: 2px solid transparent; +} +.rz-tabview.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-bottom-width: 0; + border-top: 2px solid var(--rz-primary); +} +.rz-tabview.rz-tabview-left > .rz-tabview-nav li { + border-right: 2px solid transparent; +} +.rz-tabview.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-left-width: 0; + border-right: 2px solid var(--rz-primary); +} +.rz-tabview.rz-tabview-right > .rz-tabview-nav li { + border-left: 2px solid transparent; +} +.rz-tabview.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-right-width: 0; + border-left: 2px solid var(--rz-primary); +} +.rz-tabview.rz-tabview-top > .rz-tabview-panels { + border-top: var(--rz-border-base-600); +} +.rz-tabview.rz-tabview-bottom > .rz-tabview-panels { + border-bottom: var(--rz-border-base-600); +} +.rz-tabview.rz-tabview-left > .rz-tabview-panels { + border-left: var(--rz-border-base-600); +} +.rz-tabview.rz-tabview-right > .rz-tabview-panels { + border-right: var(--rz-border-base-600); +} + +.rz-login .rz-textbox.invalid { + --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-danger); +} + +.rz-progressbar:has(.rz-progressbar-label) { + --rz-progressbar-height: 1.25rem; +} + +.rz-html-editor-toolbar { + font-size: 0.825rem; +} +.rz-html-editor-toolbar .rz-html-editor-button { + position: relative; + overflow: hidden; +} +.rz-html-editor-toolbar .rz-html-editor-button:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-html-editor-toolbar .rz-html-editor-button:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Roboto"; + src: url("../fonts/RobotoFlex.woff2") format("woff2 supports variations"), url("../fonts/RobotoFlex.woff2") format("woff2-variations"); + font-weight: 100 1000; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +.rz-text-title-color { + color: var(--rz-base-50) !important; +} + +.rz-text-color { + color: var(--rz-base-50) !important; +} + +.rz-text-secondary-color { + color: var(--rz-base-100) !important; +} + +.rz-text-tertiary-color { + color: var(--rz-base-200) !important; +} + +.rz-text-disabled-color { + color: var(--rz-base-300) !important; +} + +.rz-text-contrast-color { + color: var(--rz-white) !important; +} + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; +} + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; +} + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; +} + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; +} + +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; +} + +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; +} + +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; +} + +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; +} + +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; +} + +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; +} + +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; +} + +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; +} + +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; +} + +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; +} + +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; +} + +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; +} + +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; +} + +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; +} + +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; +} + +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; +} + +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; +} + +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; +} + +.rz-display-none { + display: none !important; +} + +.rz-display-block { + display: block !important; +} + +.rz-display-inline { + display: inline !important; +} + +.rz-display-inline-block { + display: inline-block !important; +} + +.rz-display-flex { + display: flex !important; +} + +.rz-display-inline-flex { + display: inline-flex !important; +} + +.rz-display-grid { + display: grid !important; +} + +.rz-display-inline-grid { + display: inline-grid !important; +} + +@media (min-width: 576px) { + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 768px) { + .rz-display-sm-none { + display: none !important; + } + .rz-display-sm-block { + display: block !important; + } + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} + +.rz-justify-content-stretch { + justify-content: stretch !important; +} + +.rz-justify-content-center { + justify-content: center !important; +} + +.rz-justify-content-start { + justify-content: start !important; +} + +.rz-justify-content-end { + justify-content: end !important; +} + +.rz-justify-content-flex-start { + justify-content: flex-start !important; +} + +.rz-justify-content-flex-end { + justify-content: flex-end !important; +} + +.rz-justify-content-left { + justify-content: left !important; +} + +.rz-justify-content-right { + justify-content: right !important; +} + +.rz-justify-content-space-between { + justify-content: space-between !important; +} + +.rz-justify-content-space-around { + justify-content: space-around !important; +} + +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.rz-align-items-normal { + align-items: normal !important; +} + +.rz-align-items-stretch { + align-items: stretch !important; +} + +.rz-align-items-center { + align-items: center !important; +} + +.rz-align-items-start { + align-items: start !important; +} + +.rz-align-items-end { + align-items: end !important; +} + +.rz-align-items-flex-start { + align-items: flex-start !important; +} + +.rz-align-items-flex-end { + align-items: flex-end !important; +} + +.rz-color-white { + color: var(--rz-white) !important; +} + +.rz-color-black { + color: var(--rz-black) !important; +} + +.rz-color-base { + color: var(--rz-base) !important; +} + +.rz-color-base-50 { + color: var(--rz-base-50) !important; +} + +.rz-color-base-100 { + color: var(--rz-base-100) !important; +} + +.rz-color-base-200 { + color: var(--rz-base-200) !important; +} + +.rz-color-base-300 { + color: var(--rz-base-300) !important; +} + +.rz-color-base-400 { + color: var(--rz-base-400) !important; +} + +.rz-color-base-500 { + color: var(--rz-base-500) !important; +} + +.rz-color-base-600 { + color: var(--rz-base-600) !important; +} + +.rz-color-base-700 { + color: var(--rz-base-700) !important; +} + +.rz-color-base-800 { + color: var(--rz-base-800) !important; +} + +.rz-color-base-900 { + color: var(--rz-base-900) !important; +} + +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + +.rz-color-primary { + color: var(--rz-primary) !important; +} + +.rz-color-primary-light { + color: var(--rz-primary-light) !important; +} + +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; +} + +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; +} + +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; +} + +.rz-color-secondary { + color: var(--rz-secondary) !important; +} + +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; +} + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; +} + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; +} + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; +} + +.rz-color-info { + color: var(--rz-info) !important; +} + +.rz-color-info-light { + color: var(--rz-info-light) !important; +} + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; +} + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; +} + +.rz-color-info-darker { + color: var(--rz-info-darker) !important; +} + +.rz-color-success { + color: var(--rz-success) !important; +} + +.rz-color-success-light { + color: var(--rz-success-light) !important; +} + +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; +} + +.rz-color-success-dark { + color: var(--rz-success-dark) !important; +} + +.rz-color-success-darker { + color: var(--rz-success-darker) !important; +} + +.rz-color-warning { + color: var(--rz-warning) !important; +} + +.rz-color-warning-light { + color: var(--rz-warning-light) !important; +} + +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; +} + +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; +} + +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; +} + +.rz-color-danger { + color: var(--rz-danger) !important; +} + +.rz-color-danger-light { + color: var(--rz-danger-light) !important; +} + +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; +} + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; +} + +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; +} + +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + +.rz-color-on-primary { + color: var(--rz-on-primary) !important; +} + +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; +} + +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; +} + +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; +} + +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; +} + +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; +} + +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; +} + +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; +} + +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; +} + +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; +} + +.rz-color-on-info { + color: var(--rz-on-info) !important; +} + +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; +} + +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; +} + +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; +} + +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; +} + +.rz-color-on-success { + color: var(--rz-on-success) !important; +} + +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; +} + +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; +} + +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; +} + +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; +} + +.rz-color-on-warning { + color: var(--rz-on-warning) !important; +} + +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; +} + +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; +} + +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; +} + +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; +} + +.rz-color-on-danger { + color: var(--rz-on-danger) !important; +} + +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; +} + +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; +} + +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; +} + +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; +} + +.rz-color-series-1 { + color: var(--rz-series-1) !important; +} + +.rz-color-series-2 { + color: var(--rz-series-2) !important; +} + +.rz-color-series-3 { + color: var(--rz-series-3) !important; +} + +.rz-color-series-4 { + color: var(--rz-series-4) !important; +} + +.rz-color-series-5 { + color: var(--rz-series-5) !important; +} + +.rz-color-series-6 { + color: var(--rz-series-6) !important; +} + +.rz-color-series-7 { + color: var(--rz-series-7) !important; +} + +.rz-color-series-8 { + color: var(--rz-series-8) !important; +} + +.rz-color-series-9 { + color: var(--rz-series-9) !important; +} + +.rz-color-series-10 { + color: var(--rz-series-10) !important; +} + +.rz-color-series-11 { + color: var(--rz-series-11) !important; +} + +.rz-color-series-12 { + color: var(--rz-series-12) !important; +} + +.rz-color-series-13 { + color: var(--rz-series-13) !important; +} + +.rz-color-series-14 { + color: var(--rz-series-14) !important; +} + +.rz-color-series-15 { + color: var(--rz-series-15) !important; +} + +.rz-color-series-16 { + color: var(--rz-series-16) !important; +} + +.rz-color-series-17 { + color: var(--rz-series-17) !important; +} + +.rz-color-series-18 { + color: var(--rz-series-18) !important; +} + +.rz-color-series-19 { + color: var(--rz-series-19) !important; +} + +.rz-color-series-20 { + color: var(--rz-series-20) !important; +} + +.rz-color-series-21 { + color: var(--rz-series-21) !important; +} + +.rz-color-series-22 { + color: var(--rz-series-22) !important; +} + +.rz-color-series-23 { + color: var(--rz-series-23) !important; +} + +.rz-color-series-24 { + color: var(--rz-series-24) !important; +} + +.rz-background-color-white { + background-color: var(--rz-white) !important; +} + +.rz-background-color-black { + background-color: var(--rz-black) !important; +} + +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; +} + +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; +} + +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; +} + +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; +} + +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; +} + +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; +} + +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; +} + +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; +} + +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; +} + +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; +} + +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + +.rz-background-color-primary { + background-color: var(--rz-primary) !important; +} + +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; +} + +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; +} + +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; +} + +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; +} + +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; +} + +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; +} + +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; +} + +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; +} + +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; +} + +.rz-background-color-info { + background-color: var(--rz-info) !important; +} + +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; +} + +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; +} + +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; +} + +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; +} + +.rz-background-color-success { + background-color: var(--rz-success) !important; +} + +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; +} + +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; +} + +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; +} + +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; +} + +.rz-background-color-warning { + background-color: var(--rz-warning) !important; +} + +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; +} + +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; +} + +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; +} + +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; +} + +.rz-background-color-danger { + background-color: var(--rz-danger) !important; +} + +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; +} + +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; +} + +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; +} + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; +} + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; +} + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; +} + +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; +} + +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; +} + +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; +} + +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; +} + +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; +} + +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; +} + +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; +} + +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; +} + +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; +} + +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; +} + +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; +} + +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; +} + +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; +} + +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; +} + +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; +} + +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; +} + +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; +} + +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; +} + +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; +} + +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; +} + +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; +} + +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; +} + +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; +} + +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; +} + +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; +} + +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; +} + +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; +} + +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; +} + +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; +} + +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; +} + +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; +} + +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; +} + +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; +} + +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; +} + +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; +} + +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; +} + +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; +} + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; +} + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; +} + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; +} + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; +} + +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; +} + +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; +} + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; +} + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; +} + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; +} + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; +} + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; +} + +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; +} + +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; +} + +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; +} + +.rz-border-color-white { + border-color: var(--rz-white) !important; +} + +.rz-border-color-black { + border-color: var(--rz-black) !important; +} + +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; +} + +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; +} + +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; +} + +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; +} + +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; +} + +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; +} + +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; +} + +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; +} + +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; +} + +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; +} + +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + +.rz-border-color-primary { + border-color: var(--rz-primary) !important; +} + +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; +} + +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; +} + +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-color-info { + border-color: var(--rz-info) !important; +} + +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; +} + +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; +} + +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; +} + +.rz-border-color-success { + border-color: var(--rz-success) !important; +} + +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; +} + +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; +} + +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; +} + +.rz-border-color-warning { + border-color: var(--rz-warning) !important; +} + +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; +} + +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-color-danger { + border-color: var(--rz-danger) !important; +} + +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; +} + +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; +} + +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; +} + +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; +} + +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; +} + +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; +} + +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; +} + +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; +} + +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; +} + +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; +} + +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; +} + +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; +} + +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; +} + +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; +} + +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; +} + +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; +} + +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; +} + +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; +} + +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; +} + +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; +} + +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; +} + +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; +} + +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; +} + +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; +} + +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; +} + +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; +} + +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; +} + +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; +} + +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; +} + +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; +} + +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; +} + +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; +} + +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; +} + +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; +} + +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; +} + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; +} + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; +} + +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; +} + +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; +} + +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; +} + +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; +} + +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; +} + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; +} + +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; +} + +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; +} + +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; +} + +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; +} + +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; +} + +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; +} + +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; +} + +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; +} + +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; +} + +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; +} + +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; +} + +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} + +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; +} + +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; +} + +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; +} + +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; +} + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; +} + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; +} + +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; +} + +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; +} + +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; +} + +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; +} + +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; +} + +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; +} + +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; +} + +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; +} + +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; +} + +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; +} + +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; +} + +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; +} + +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; +} + +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; +} + +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; +} + +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; +} + +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; +} + +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; +} + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; +} + +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; +} + +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; +} + +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; +} + +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; +} + +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; +} + +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; +} + +.rz-ripple { + position: relative; + overflow: hidden; +} +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +body { + margin: 0; +} + +.rz-m-0 { + margin: 0 !important; +} + +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; +} + +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; +} + +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; +} + +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; +} + +.rz-ms-0 { + margin-inline-start: 0 !important; +} + +.rz-me-0 { + margin-inline-end: 0 !important; +} + +.rz-m-05 { + margin: 0.125rem !important; +} + +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; +} + +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; +} + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; +} + +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; +} + +.rz-ms-05 { + margin-inline-start: 0.125rem !important; +} + +.rz-me-05 { + margin-inline-end: 0.125rem !important; +} + +.rz-m-1 { + margin: 0.25rem !important; +} + +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; +} + +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; +} + +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; +} + +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; +} + +.rz-ms-1 { + margin-inline-start: 0.25rem !important; +} + +.rz-me-1 { + margin-inline-end: 0.25rem !important; +} + +.rz-m-2 { + margin: 0.5rem !important; +} + +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; +} + +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; +} + +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; +} + +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; +} + +.rz-ms-2 { + margin-inline-start: 0.5rem !important; +} + +.rz-me-2 { + margin-inline-end: 0.5rem !important; +} + +.rz-m-3 { + margin: 0.75rem !important; +} + +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; +} + +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; +} + +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; +} + +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; +} + +.rz-ms-3 { + margin-inline-start: 0.75rem !important; +} + +.rz-me-3 { + margin-inline-end: 0.75rem !important; +} + +.rz-m-4 { + margin: 1rem !important; +} + +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; +} + +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; +} + +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; +} + +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; +} + +.rz-ms-4 { + margin-inline-start: 1rem !important; +} + +.rz-me-4 { + margin-inline-end: 1rem !important; +} + +.rz-m-5 { + margin: 1.25rem !important; +} + +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; +} + +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; +} + +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; +} + +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; +} + +.rz-ms-5 { + margin-inline-start: 1.25rem !important; +} + +.rz-me-5 { + margin-inline-end: 1.25rem !important; +} + +.rz-m-6 { + margin: 1.5rem !important; +} + +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; +} + +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; +} + +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; +} + +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; +} + +.rz-ms-6 { + margin-inline-start: 1.5rem !important; +} + +.rz-me-6 { + margin-inline-end: 1.5rem !important; +} + +.rz-m-7 { + margin: 1.75rem !important; +} + +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; +} + +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; +} + +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; +} + +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; +} + +.rz-ms-7 { + margin-inline-start: 1.75rem !important; +} + +.rz-me-7 { + margin-inline-end: 1.75rem !important; +} + +.rz-m-8 { + margin: 2rem !important; +} + +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; +} + +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; +} + +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; +} + +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; +} + +.rz-ms-8 { + margin-inline-start: 2rem !important; +} + +.rz-me-8 { + margin-inline-end: 2rem !important; +} + +.rz-m-9 { + margin: 2.25rem !important; +} + +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; +} + +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; +} + +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; +} + +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; +} + +.rz-ms-9 { + margin-inline-start: 2.25rem !important; +} + +.rz-me-9 { + margin-inline-end: 2.25rem !important; +} + +.rz-m-10 { + margin: 2.5rem !important; +} + +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; +} + +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; +} + +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; +} + +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; +} + +.rz-ms-10 { + margin-inline-start: 2.5rem !important; +} + +.rz-me-10 { + margin-inline-end: 2.5rem !important; +} + +.rz-m-11 { + margin: 2.75rem !important; +} + +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; +} + +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; +} + +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; +} + +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; +} + +.rz-ms-11 { + margin-inline-start: 2.75rem !important; +} + +.rz-me-11 { + margin-inline-end: 2.75rem !important; +} + +.rz-m-12 { + margin: 3rem !important; +} + +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; +} + +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; +} + +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; +} + +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; +} + +.rz-ms-12 { + margin-inline-start: 3rem !important; +} + +.rz-me-12 { + margin-inline-end: 3rem !important; +} + +.rz-p-0 { + padding: 0 !important; +} + +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; +} + +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; +} + +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; +} + +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; +} + +.rz-ps-0 { + padding-inline-start: 0 !important; +} + +.rz-pe-0 { + padding-inline-end: 0 !important; +} + +.rz-p-05 { + padding: 0.125rem !important; +} + +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; +} + +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; +} + +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; +} + +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; +} + +.rz-ps-05 { + padding-inline-start: 0.125rem !important; +} + +.rz-pe-05 { + padding-inline-end: 0.125rem !important; +} + +.rz-p-1 { + padding: 0.25rem !important; +} + +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; +} + +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; +} + +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; +} + +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; +} + +.rz-ps-1 { + padding-inline-start: 0.25rem !important; +} + +.rz-pe-1 { + padding-inline-end: 0.25rem !important; +} + +.rz-p-2 { + padding: 0.5rem !important; +} + +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; +} + +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; +} + +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; +} + +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; +} + +.rz-ps-2 { + padding-inline-start: 0.5rem !important; +} + +.rz-pe-2 { + padding-inline-end: 0.5rem !important; +} + +.rz-p-3 { + padding: 0.75rem !important; +} + +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; +} + +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; +} + +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; +} + +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; +} + +.rz-ps-3 { + padding-inline-start: 0.75rem !important; +} + +.rz-pe-3 { + padding-inline-end: 0.75rem !important; +} + +.rz-p-4 { + padding: 1rem !important; +} + +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; +} + +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; +} + +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; +} + +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; +} + +.rz-ps-4 { + padding-inline-start: 1rem !important; +} + +.rz-pe-4 { + padding-inline-end: 1rem !important; +} + +.rz-p-5 { + padding: 1.25rem !important; +} + +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; +} + +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; +} + +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; +} + +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; +} + +.rz-ps-5 { + padding-inline-start: 1.25rem !important; +} + +.rz-pe-5 { + padding-inline-end: 1.25rem !important; +} + +.rz-p-6 { + padding: 1.5rem !important; +} + +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; +} + +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; +} + +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; +} + +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; +} + +.rz-ps-6 { + padding-inline-start: 1.5rem !important; +} + +.rz-pe-6 { + padding-inline-end: 1.5rem !important; +} + +.rz-p-7 { + padding: 1.75rem !important; +} + +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; +} + +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; +} + +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; +} + +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; +} + +.rz-ps-7 { + padding-inline-start: 1.75rem !important; +} + +.rz-pe-7 { + padding-inline-end: 1.75rem !important; +} + +.rz-p-8 { + padding: 2rem !important; +} + +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; +} + +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; +} + +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; +} + +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; +} + +.rz-ps-8 { + padding-inline-start: 2rem !important; +} + +.rz-pe-8 { + padding-inline-end: 2rem !important; +} + +.rz-p-9 { + padding: 2.25rem !important; +} + +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; +} + +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; +} + +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; +} + +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; +} + +.rz-ps-9 { + padding-inline-start: 2.25rem !important; +} + +.rz-pe-9 { + padding-inline-end: 2.25rem !important; +} + +.rz-p-10 { + padding: 2.5rem !important; +} + +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; +} + +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; +} + +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; +} + +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; +} + +.rz-ps-10 { + padding-inline-start: 2.5rem !important; +} + +.rz-pe-10 { + padding-inline-end: 2.5rem !important; +} + +.rz-p-11 { + padding: 2.75rem !important; +} + +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; +} + +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; +} + +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; +} + +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; +} + +.rz-ps-11 { + padding-inline-start: 2.75rem !important; +} + +.rz-pe-11 { + padding-inline-end: 2.75rem !important; +} + +.rz-p-12 { + padding: 3rem !important; +} + +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; +} + +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; +} + +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; +} + +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; +} + +.rz-ps-12 { + padding-inline-start: 3rem !important; +} + +.rz-pe-12 { + padding-inline-end: 3rem !important; +} + +.rz-m-auto { + margin: auto !important; +} + +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; +} + +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; +} + +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; +} + +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; +} + +.rz-ms-auto { + margin-inline-start: auto !important; +} + +.rz-me-auto { + margin-inline-end: auto !important; +} + +@media (min-width: 576px) { + .rz-m-xs-0 { + margin: 0 !important; + } + .rz-my-xs-0, + .rz-mt-xs-0 { + margin-top: 0 !important; + } + .rz-mx-xs-0, + .rz-mr-xs-0 { + margin-right: 0 !important; + } + .rz-my-xs-0, + .rz-mb-xs-0 { + margin-bottom: 0 !important; + } + .rz-mx-xs-0, + .rz-ml-xs-0 { + margin-left: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-end: 0 !important; + } + .rz-m-xs-05 { + margin: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mt-xs-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-mr-xs-05 { + margin-right: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mb-xs-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-ml-xs-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xs-1 { + margin: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mt-xs-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-mr-xs-1 { + margin-right: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mb-xs-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-ml-xs-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xs-2 { + margin: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mt-xs-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-mr-xs-2 { + margin-right: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mb-xs-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-ml-xs-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xs-3 { + margin: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mt-xs-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-mr-xs-3 { + margin-right: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mb-xs-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-ml-xs-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xs-4 { + margin: 1rem !important; + } + .rz-my-xs-4, + .rz-mt-xs-4 { + margin-top: 1rem !important; + } + .rz-mx-xs-4, + .rz-mr-xs-4 { + margin-right: 1rem !important; + } + .rz-my-xs-4, + .rz-mb-xs-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xs-4, + .rz-ml-xs-4 { + margin-left: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xs-5 { + margin: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mt-xs-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-mr-xs-5 { + margin-right: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mb-xs-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-ml-xs-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xs-6 { + margin: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mt-xs-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-mr-xs-6 { + margin-right: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mb-xs-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-ml-xs-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xs-7 { + margin: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mt-xs-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-mr-xs-7 { + margin-right: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mb-xs-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-ml-xs-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xs-8 { + margin: 2rem !important; + } + .rz-my-xs-8, + .rz-mt-xs-8 { + margin-top: 2rem !important; + } + .rz-mx-xs-8, + .rz-mr-xs-8 { + margin-right: 2rem !important; + } + .rz-my-xs-8, + .rz-mb-xs-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xs-8, + .rz-ml-xs-8 { + margin-left: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xs-9 { + margin: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mt-xs-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-mr-xs-9 { + margin-right: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mb-xs-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-ml-xs-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xs-10 { + margin: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mt-xs-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-mr-xs-10 { + margin-right: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mb-xs-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-ml-xs-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xs-11 { + margin: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mt-xs-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-mr-xs-11 { + margin-right: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mb-xs-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-ml-xs-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xs-12 { + margin: 3rem !important; + } + .rz-my-xs-12, + .rz-mt-xs-12 { + margin-top: 3rem !important; + } + .rz-mx-xs-12, + .rz-mr-xs-12 { + margin-right: 3rem !important; + } + .rz-my-xs-12, + .rz-mb-xs-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xs-12, + .rz-ml-xs-12 { + margin-left: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xs-0 { + padding: 0 !important; + } + .rz-py-xs-0, + .rz-pt-xs-0 { + padding-top: 0 !important; + } + .rz-px-xs-0, + .rz-pr-xs-0 { + padding-right: 0 !important; + } + .rz-py-xs-0, + .rz-pb-xs-0 { + padding-bottom: 0 !important; + } + .rz-px-xs-0, + .rz-pl-xs-0 { + padding-left: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-end: 0 !important; + } + .rz-p-xs-05 { + padding: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pt-xs-05 { + padding-top: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pr-xs-05 { + padding-right: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pb-xs-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pl-xs-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xs-1 { + padding: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pt-xs-1 { + padding-top: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pr-xs-1 { + padding-right: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pb-xs-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pl-xs-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xs-2 { + padding: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pt-xs-2 { + padding-top: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pr-xs-2 { + padding-right: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pb-xs-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pl-xs-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xs-3 { + padding: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pt-xs-3 { + padding-top: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pr-xs-3 { + padding-right: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pb-xs-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pl-xs-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xs-4 { + padding: 1rem !important; + } + .rz-py-xs-4, + .rz-pt-xs-4 { + padding-top: 1rem !important; + } + .rz-px-xs-4, + .rz-pr-xs-4 { + padding-right: 1rem !important; + } + .rz-py-xs-4, + .rz-pb-xs-4 { + padding-bottom: 1rem !important; + } + .rz-px-xs-4, + .rz-pl-xs-4 { + padding-left: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xs-5 { + padding: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pt-xs-5 { + padding-top: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pr-xs-5 { + padding-right: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pb-xs-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pl-xs-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xs-6 { + padding: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pt-xs-6 { + padding-top: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pr-xs-6 { + padding-right: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pb-xs-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pl-xs-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xs-7 { + padding: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pt-xs-7 { + padding-top: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pr-xs-7 { + padding-right: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pb-xs-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pl-xs-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xs-8 { + padding: 2rem !important; + } + .rz-py-xs-8, + .rz-pt-xs-8 { + padding-top: 2rem !important; + } + .rz-px-xs-8, + .rz-pr-xs-8 { + padding-right: 2rem !important; + } + .rz-py-xs-8, + .rz-pb-xs-8 { + padding-bottom: 2rem !important; + } + .rz-px-xs-8, + .rz-pl-xs-8 { + padding-left: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xs-9 { + padding: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pt-xs-9 { + padding-top: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pr-xs-9 { + padding-right: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pb-xs-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pl-xs-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xs-10 { + padding: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pt-xs-10 { + padding-top: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pr-xs-10 { + padding-right: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pb-xs-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pl-xs-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xs-11 { + padding: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pt-xs-11 { + padding-top: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pr-xs-11 { + padding-right: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pb-xs-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pl-xs-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xs-12 { + padding: 3rem !important; + } + .rz-py-xs-12, + .rz-pt-xs-12 { + padding-top: 3rem !important; + } + .rz-px-xs-12, + .rz-pr-xs-12 { + padding-right: 3rem !important; + } + .rz-py-xs-12, + .rz-pb-xs-12 { + padding-bottom: 3rem !important; + } + .rz-px-xs-12, + .rz-pl-xs-12 { + padding-left: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xs-auto { + margin: auto !important; + } + .rz-my-xs-auto, + .rz-mt-xs-auto { + margin-top: auto !important; + } + .rz-mx-xs-auto, + .rz-mr-xs-auto { + margin-right: auto !important; + } + .rz-my-xs-auto, + .rz-mb-xs-auto { + margin-bottom: auto !important; + } + .rz-mx-xs-auto, + .rz-ml-xs-auto { + margin-left: auto !important; + } + .rz-ms-xs-auto { + margin-inline-start: auto !important; + } + .rz-me-xs-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 768px) { + .rz-m-sm-0 { + margin: 0 !important; + } + .rz-my-sm-0, + .rz-mt-sm-0 { + margin-top: 0 !important; + } + .rz-mx-sm-0, + .rz-mr-sm-0 { + margin-right: 0 !important; + } + .rz-my-sm-0, + .rz-mb-sm-0 { + margin-bottom: 0 !important; + } + .rz-mx-sm-0, + .rz-ml-sm-0 { + margin-left: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-start: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-end: 0 !important; + } + .rz-m-sm-05 { + margin: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mt-sm-05 { + margin-top: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-mr-sm-05 { + margin-right: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mb-sm-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-ml-sm-05 { + margin-left: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-sm-1 { + margin: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mt-sm-1 { + margin-top: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-mr-sm-1 { + margin-right: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-ml-sm-1 { + margin-left: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-sm-2 { + margin: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mt-sm-2 { + margin-top: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-mr-sm-2 { + margin-right: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-ml-sm-2 { + margin-left: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-sm-3 { + margin: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mt-sm-3 { + margin-top: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-mr-sm-3 { + margin-right: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mb-sm-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-ml-sm-3 { + margin-left: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-sm-4 { + margin: 1rem !important; + } + .rz-my-sm-4, + .rz-mt-sm-4 { + margin-top: 1rem !important; + } + .rz-mx-sm-4, + .rz-mr-sm-4 { + margin-right: 1rem !important; + } + .rz-my-sm-4, + .rz-mb-sm-4 { + margin-bottom: 1rem !important; + } + .rz-mx-sm-4, + .rz-ml-sm-4 { + margin-left: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-end: 1rem !important; + } + .rz-m-sm-5 { + margin: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mt-sm-5 { + margin-top: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-mr-sm-5 { + margin-right: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mb-sm-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-ml-sm-5 { + margin-left: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-sm-6 { + margin: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mt-sm-6 { + margin-top: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-mr-sm-6 { + margin-right: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mb-sm-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-ml-sm-6 { + margin-left: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-sm-7 { + margin: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mt-sm-7 { + margin-top: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-mr-sm-7 { + margin-right: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mb-sm-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-ml-sm-7 { + margin-left: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-sm-8 { + margin: 2rem !important; + } + .rz-my-sm-8, + .rz-mt-sm-8 { + margin-top: 2rem !important; + } + .rz-mx-sm-8, + .rz-mr-sm-8 { + margin-right: 2rem !important; + } + .rz-my-sm-8, + .rz-mb-sm-8 { + margin-bottom: 2rem !important; + } + .rz-mx-sm-8, + .rz-ml-sm-8 { + margin-left: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-end: 2rem !important; + } + .rz-m-sm-9 { + margin: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mt-sm-9 { + margin-top: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-mr-sm-9 { + margin-right: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mb-sm-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-ml-sm-9 { + margin-left: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-sm-10 { + margin: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mt-sm-10 { + margin-top: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-mr-sm-10 { + margin-right: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mb-sm-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-ml-sm-10 { + margin-left: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-sm-11 { + margin: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mt-sm-11 { + margin-top: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-mr-sm-11 { + margin-right: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mb-sm-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-ml-sm-11 { + margin-left: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-sm-12 { + margin: 3rem !important; + } + .rz-my-sm-12, + .rz-mt-sm-12 { + margin-top: 3rem !important; + } + .rz-mx-sm-12, + .rz-mr-sm-12 { + margin-right: 3rem !important; + } + .rz-my-sm-12, + .rz-mb-sm-12 { + margin-bottom: 3rem !important; + } + .rz-mx-sm-12, + .rz-ml-sm-12 { + margin-left: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-end: 3rem !important; + } + .rz-p-sm-0 { + padding: 0 !important; + } + .rz-py-sm-0, + .rz-pt-sm-0 { + padding-top: 0 !important; + } + .rz-px-sm-0, + .rz-pr-sm-0 { + padding-right: 0 !important; + } + .rz-py-sm-0, + .rz-pb-sm-0 { + padding-bottom: 0 !important; + } + .rz-px-sm-0, + .rz-pl-sm-0 { + padding-left: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-start: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-end: 0 !important; + } + .rz-p-sm-05 { + padding: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pt-sm-05 { + padding-top: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pr-sm-05 { + padding-right: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pb-sm-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pl-sm-05 { + padding-left: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-sm-1 { + padding: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pt-sm-1 { + padding-top: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pr-sm-1 { + padding-right: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pl-sm-1 { + padding-left: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-sm-2 { + padding: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pt-sm-2 { + padding-top: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pr-sm-2 { + padding-right: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pl-sm-2 { + padding-left: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-sm-3 { + padding: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pt-sm-3 { + padding-top: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pr-sm-3 { + padding-right: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pb-sm-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pl-sm-3 { + padding-left: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-sm-4 { + padding: 1rem !important; + } + .rz-py-sm-4, + .rz-pt-sm-4 { + padding-top: 1rem !important; + } + .rz-px-sm-4, + .rz-pr-sm-4 { + padding-right: 1rem !important; + } + .rz-py-sm-4, + .rz-pb-sm-4 { + padding-bottom: 1rem !important; + } + .rz-px-sm-4, + .rz-pl-sm-4 { + padding-left: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-end: 1rem !important; + } + .rz-p-sm-5 { + padding: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pt-sm-5 { + padding-top: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pr-sm-5 { + padding-right: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pb-sm-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pl-sm-5 { + padding-left: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-sm-6 { + padding: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pt-sm-6 { + padding-top: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pr-sm-6 { + padding-right: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pb-sm-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pl-sm-6 { + padding-left: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-sm-7 { + padding: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pt-sm-7 { + padding-top: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pr-sm-7 { + padding-right: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pb-sm-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pl-sm-7 { + padding-left: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-sm-8 { + padding: 2rem !important; + } + .rz-py-sm-8, + .rz-pt-sm-8 { + padding-top: 2rem !important; + } + .rz-px-sm-8, + .rz-pr-sm-8 { + padding-right: 2rem !important; + } + .rz-py-sm-8, + .rz-pb-sm-8 { + padding-bottom: 2rem !important; + } + .rz-px-sm-8, + .rz-pl-sm-8 { + padding-left: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-end: 2rem !important; + } + .rz-p-sm-9 { + padding: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pt-sm-9 { + padding-top: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pr-sm-9 { + padding-right: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pb-sm-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pl-sm-9 { + padding-left: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-sm-10 { + padding: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pt-sm-10 { + padding-top: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pr-sm-10 { + padding-right: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pb-sm-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pl-sm-10 { + padding-left: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-sm-11 { + padding: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pt-sm-11 { + padding-top: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pr-sm-11 { + padding-right: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pb-sm-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pl-sm-11 { + padding-left: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-sm-12 { + padding: 3rem !important; + } + .rz-py-sm-12, + .rz-pt-sm-12 { + padding-top: 3rem !important; + } + .rz-px-sm-12, + .rz-pr-sm-12 { + padding-right: 3rem !important; + } + .rz-py-sm-12, + .rz-pb-sm-12 { + padding-bottom: 3rem !important; + } + .rz-px-sm-12, + .rz-pl-sm-12 { + padding-left: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-end: 3rem !important; + } + .rz-m-sm-auto { + margin: auto !important; + } + .rz-my-sm-auto, + .rz-mt-sm-auto { + margin-top: auto !important; + } + .rz-mx-sm-auto, + .rz-mr-sm-auto { + margin-right: auto !important; + } + .rz-my-sm-auto, + .rz-mb-sm-auto { + margin-bottom: auto !important; + } + .rz-mx-sm-auto, + .rz-ml-sm-auto { + margin-left: auto !important; + } + .rz-ms-sm-auto { + margin-inline-start: auto !important; + } + .rz-me-sm-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1024px) { + .rz-m-md-0 { + margin: 0 !important; + } + .rz-my-md-0, + .rz-mt-md-0 { + margin-top: 0 !important; + } + .rz-mx-md-0, + .rz-mr-md-0 { + margin-right: 0 !important; + } + .rz-my-md-0, + .rz-mb-md-0 { + margin-bottom: 0 !important; + } + .rz-mx-md-0, + .rz-ml-md-0 { + margin-left: 0 !important; + } + .rz-ms-md-0 { + margin-inline-start: 0 !important; + } + .rz-ms-md-0 { + margin-inline-end: 0 !important; + } + .rz-m-md-05 { + margin: 0.125rem !important; + } + .rz-my-md-05, + .rz-mt-md-05 { + margin-top: 0.125rem !important; + } + .rz-mx-md-05, + .rz-mr-md-05 { + margin-right: 0.125rem !important; + } + .rz-my-md-05, + .rz-mb-md-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-md-05, + .rz-ml-md-05 { + margin-left: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-md-1 { + margin: 0.25rem !important; + } + .rz-my-md-1, + .rz-mt-md-1 { + margin-top: 0.25rem !important; + } + .rz-mx-md-1, + .rz-mr-md-1 { + margin-right: 0.25rem !important; + } + .rz-my-md-1, + .rz-mb-md-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-md-1, + .rz-ml-md-1 { + margin-left: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-md-2 { + margin: 0.5rem !important; + } + .rz-my-md-2, + .rz-mt-md-2 { + margin-top: 0.5rem !important; + } + .rz-mx-md-2, + .rz-mr-md-2 { + margin-right: 0.5rem !important; + } + .rz-my-md-2, + .rz-mb-md-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-md-2, + .rz-ml-md-2 { + margin-left: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-md-3 { + margin: 0.75rem !important; + } + .rz-my-md-3, + .rz-mt-md-3 { + margin-top: 0.75rem !important; + } + .rz-mx-md-3, + .rz-mr-md-3 { + margin-right: 0.75rem !important; + } + .rz-my-md-3, + .rz-mb-md-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-md-3, + .rz-ml-md-3 { + margin-left: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-md-4 { + margin: 1rem !important; + } + .rz-my-md-4, + .rz-mt-md-4 { + margin-top: 1rem !important; + } + .rz-mx-md-4, + .rz-mr-md-4 { + margin-right: 1rem !important; + } + .rz-my-md-4, + .rz-mb-md-4 { + margin-bottom: 1rem !important; + } + .rz-mx-md-4, + .rz-ml-md-4 { + margin-left: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-end: 1rem !important; + } + .rz-m-md-5 { + margin: 1.25rem !important; + } + .rz-my-md-5, + .rz-mt-md-5 { + margin-top: 1.25rem !important; + } + .rz-mx-md-5, + .rz-mr-md-5 { + margin-right: 1.25rem !important; + } + .rz-my-md-5, + .rz-mb-md-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-md-5, + .rz-ml-md-5 { + margin-left: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-md-6 { + margin: 1.5rem !important; + } + .rz-my-md-6, + .rz-mt-md-6 { + margin-top: 1.5rem !important; + } + .rz-mx-md-6, + .rz-mr-md-6 { + margin-right: 1.5rem !important; + } + .rz-my-md-6, + .rz-mb-md-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-md-6, + .rz-ml-md-6 { + margin-left: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-md-7 { + margin: 1.75rem !important; + } + .rz-my-md-7, + .rz-mt-md-7 { + margin-top: 1.75rem !important; + } + .rz-mx-md-7, + .rz-mr-md-7 { + margin-right: 1.75rem !important; + } + .rz-my-md-7, + .rz-mb-md-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-md-7, + .rz-ml-md-7 { + margin-left: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-md-8 { + margin: 2rem !important; + } + .rz-my-md-8, + .rz-mt-md-8 { + margin-top: 2rem !important; + } + .rz-mx-md-8, + .rz-mr-md-8 { + margin-right: 2rem !important; + } + .rz-my-md-8, + .rz-mb-md-8 { + margin-bottom: 2rem !important; + } + .rz-mx-md-8, + .rz-ml-md-8 { + margin-left: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-end: 2rem !important; + } + .rz-m-md-9 { + margin: 2.25rem !important; + } + .rz-my-md-9, + .rz-mt-md-9 { + margin-top: 2.25rem !important; + } + .rz-mx-md-9, + .rz-mr-md-9 { + margin-right: 2.25rem !important; + } + .rz-my-md-9, + .rz-mb-md-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-md-9, + .rz-ml-md-9 { + margin-left: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-md-10 { + margin: 2.5rem !important; + } + .rz-my-md-10, + .rz-mt-md-10 { + margin-top: 2.5rem !important; + } + .rz-mx-md-10, + .rz-mr-md-10 { + margin-right: 2.5rem !important; + } + .rz-my-md-10, + .rz-mb-md-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-md-10, + .rz-ml-md-10 { + margin-left: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-md-11 { + margin: 2.75rem !important; + } + .rz-my-md-11, + .rz-mt-md-11 { + margin-top: 2.75rem !important; + } + .rz-mx-md-11, + .rz-mr-md-11 { + margin-right: 2.75rem !important; + } + .rz-my-md-11, + .rz-mb-md-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-md-11, + .rz-ml-md-11 { + margin-left: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-md-12 { + margin: 3rem !important; + } + .rz-my-md-12, + .rz-mt-md-12 { + margin-top: 3rem !important; + } + .rz-mx-md-12, + .rz-mr-md-12 { + margin-right: 3rem !important; + } + .rz-my-md-12, + .rz-mb-md-12 { + margin-bottom: 3rem !important; + } + .rz-mx-md-12, + .rz-ml-md-12 { + margin-left: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-end: 3rem !important; + } + .rz-p-md-0 { + padding: 0 !important; + } + .rz-py-md-0, + .rz-pt-md-0 { + padding-top: 0 !important; + } + .rz-px-md-0, + .rz-pr-md-0 { + padding-right: 0 !important; + } + .rz-py-md-0, + .rz-pb-md-0 { + padding-bottom: 0 !important; + } + .rz-px-md-0, + .rz-pl-md-0 { + padding-left: 0 !important; + } + .rz-ps-md-0 { + padding-inline-start: 0 !important; + } + .rz-ps-md-0 { + padding-inline-end: 0 !important; + } + .rz-p-md-05 { + padding: 0.125rem !important; + } + .rz-py-md-05, + .rz-pt-md-05 { + padding-top: 0.125rem !important; + } + .rz-px-md-05, + .rz-pr-md-05 { + padding-right: 0.125rem !important; + } + .rz-py-md-05, + .rz-pb-md-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-md-05, + .rz-pl-md-05 { + padding-left: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-md-1 { + padding: 0.25rem !important; + } + .rz-py-md-1, + .rz-pt-md-1 { + padding-top: 0.25rem !important; + } + .rz-px-md-1, + .rz-pr-md-1 { + padding-right: 0.25rem !important; + } + .rz-py-md-1, + .rz-pb-md-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-md-1, + .rz-pl-md-1 { + padding-left: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-md-2 { + padding: 0.5rem !important; + } + .rz-py-md-2, + .rz-pt-md-2 { + padding-top: 0.5rem !important; + } + .rz-px-md-2, + .rz-pr-md-2 { + padding-right: 0.5rem !important; + } + .rz-py-md-2, + .rz-pb-md-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-md-2, + .rz-pl-md-2 { + padding-left: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-md-3 { + padding: 0.75rem !important; + } + .rz-py-md-3, + .rz-pt-md-3 { + padding-top: 0.75rem !important; + } + .rz-px-md-3, + .rz-pr-md-3 { + padding-right: 0.75rem !important; + } + .rz-py-md-3, + .rz-pb-md-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-md-3, + .rz-pl-md-3 { + padding-left: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-md-4 { + padding: 1rem !important; + } + .rz-py-md-4, + .rz-pt-md-4 { + padding-top: 1rem !important; + } + .rz-px-md-4, + .rz-pr-md-4 { + padding-right: 1rem !important; + } + .rz-py-md-4, + .rz-pb-md-4 { + padding-bottom: 1rem !important; + } + .rz-px-md-4, + .rz-pl-md-4 { + padding-left: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-end: 1rem !important; + } + .rz-p-md-5 { + padding: 1.25rem !important; + } + .rz-py-md-5, + .rz-pt-md-5 { + padding-top: 1.25rem !important; + } + .rz-px-md-5, + .rz-pr-md-5 { + padding-right: 1.25rem !important; + } + .rz-py-md-5, + .rz-pb-md-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-md-5, + .rz-pl-md-5 { + padding-left: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-md-6 { + padding: 1.5rem !important; + } + .rz-py-md-6, + .rz-pt-md-6 { + padding-top: 1.5rem !important; + } + .rz-px-md-6, + .rz-pr-md-6 { + padding-right: 1.5rem !important; + } + .rz-py-md-6, + .rz-pb-md-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-md-6, + .rz-pl-md-6 { + padding-left: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-md-7 { + padding: 1.75rem !important; + } + .rz-py-md-7, + .rz-pt-md-7 { + padding-top: 1.75rem !important; + } + .rz-px-md-7, + .rz-pr-md-7 { + padding-right: 1.75rem !important; + } + .rz-py-md-7, + .rz-pb-md-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-md-7, + .rz-pl-md-7 { + padding-left: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-md-8 { + padding: 2rem !important; + } + .rz-py-md-8, + .rz-pt-md-8 { + padding-top: 2rem !important; + } + .rz-px-md-8, + .rz-pr-md-8 { + padding-right: 2rem !important; + } + .rz-py-md-8, + .rz-pb-md-8 { + padding-bottom: 2rem !important; + } + .rz-px-md-8, + .rz-pl-md-8 { + padding-left: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-end: 2rem !important; + } + .rz-p-md-9 { + padding: 2.25rem !important; + } + .rz-py-md-9, + .rz-pt-md-9 { + padding-top: 2.25rem !important; + } + .rz-px-md-9, + .rz-pr-md-9 { + padding-right: 2.25rem !important; + } + .rz-py-md-9, + .rz-pb-md-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-md-9, + .rz-pl-md-9 { + padding-left: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-md-10 { + padding: 2.5rem !important; + } + .rz-py-md-10, + .rz-pt-md-10 { + padding-top: 2.5rem !important; + } + .rz-px-md-10, + .rz-pr-md-10 { + padding-right: 2.5rem !important; + } + .rz-py-md-10, + .rz-pb-md-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-md-10, + .rz-pl-md-10 { + padding-left: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-md-11 { + padding: 2.75rem !important; + } + .rz-py-md-11, + .rz-pt-md-11 { + padding-top: 2.75rem !important; + } + .rz-px-md-11, + .rz-pr-md-11 { + padding-right: 2.75rem !important; + } + .rz-py-md-11, + .rz-pb-md-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-md-11, + .rz-pl-md-11 { + padding-left: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-md-12 { + padding: 3rem !important; + } + .rz-py-md-12, + .rz-pt-md-12 { + padding-top: 3rem !important; + } + .rz-px-md-12, + .rz-pr-md-12 { + padding-right: 3rem !important; + } + .rz-py-md-12, + .rz-pb-md-12 { + padding-bottom: 3rem !important; + } + .rz-px-md-12, + .rz-pl-md-12 { + padding-left: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-end: 3rem !important; + } + .rz-m-md-auto { + margin: auto !important; + } + .rz-my-md-auto, + .rz-mt-md-auto { + margin-top: auto !important; + } + .rz-mx-md-auto, + .rz-mr-md-auto { + margin-right: auto !important; + } + .rz-my-md-auto, + .rz-mb-md-auto { + margin-bottom: auto !important; + } + .rz-mx-md-auto, + .rz-ml-md-auto { + margin-left: auto !important; + } + .rz-ms-md-auto { + margin-inline-start: auto !important; + } + .rz-me-md-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1280px) { + .rz-m-lg-0 { + margin: 0 !important; + } + .rz-my-lg-0, + .rz-mt-lg-0 { + margin-top: 0 !important; + } + .rz-mx-lg-0, + .rz-mr-lg-0 { + margin-right: 0 !important; + } + .rz-my-lg-0, + .rz-mb-lg-0 { + margin-bottom: 0 !important; + } + .rz-mx-lg-0, + .rz-ml-lg-0 { + margin-left: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-start: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-end: 0 !important; + } + .rz-m-lg-05 { + margin: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mt-lg-05 { + margin-top: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-mr-lg-05 { + margin-right: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mb-lg-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-ml-lg-05 { + margin-left: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-lg-1 { + margin: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mt-lg-1 { + margin-top: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-mr-lg-1 { + margin-right: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-ml-lg-1 { + margin-left: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-lg-2 { + margin: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mt-lg-2 { + margin-top: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-mr-lg-2 { + margin-right: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-ml-lg-2 { + margin-left: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-lg-3 { + margin: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mt-lg-3 { + margin-top: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-mr-lg-3 { + margin-right: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mb-lg-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-ml-lg-3 { + margin-left: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-lg-4 { + margin: 1rem !important; + } + .rz-my-lg-4, + .rz-mt-lg-4 { + margin-top: 1rem !important; + } + .rz-mx-lg-4, + .rz-mr-lg-4 { + margin-right: 1rem !important; + } + .rz-my-lg-4, + .rz-mb-lg-4 { + margin-bottom: 1rem !important; + } + .rz-mx-lg-4, + .rz-ml-lg-4 { + margin-left: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-end: 1rem !important; + } + .rz-m-lg-5 { + margin: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mt-lg-5 { + margin-top: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-mr-lg-5 { + margin-right: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mb-lg-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-ml-lg-5 { + margin-left: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-lg-6 { + margin: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mt-lg-6 { + margin-top: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-mr-lg-6 { + margin-right: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mb-lg-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-ml-lg-6 { + margin-left: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-lg-7 { + margin: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mt-lg-7 { + margin-top: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-mr-lg-7 { + margin-right: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mb-lg-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-ml-lg-7 { + margin-left: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-lg-8 { + margin: 2rem !important; + } + .rz-my-lg-8, + .rz-mt-lg-8 { + margin-top: 2rem !important; + } + .rz-mx-lg-8, + .rz-mr-lg-8 { + margin-right: 2rem !important; + } + .rz-my-lg-8, + .rz-mb-lg-8 { + margin-bottom: 2rem !important; + } + .rz-mx-lg-8, + .rz-ml-lg-8 { + margin-left: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-end: 2rem !important; + } + .rz-m-lg-9 { + margin: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mt-lg-9 { + margin-top: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-mr-lg-9 { + margin-right: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mb-lg-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-ml-lg-9 { + margin-left: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-lg-10 { + margin: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mt-lg-10 { + margin-top: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-mr-lg-10 { + margin-right: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mb-lg-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-ml-lg-10 { + margin-left: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-lg-11 { + margin: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mt-lg-11 { + margin-top: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-mr-lg-11 { + margin-right: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mb-lg-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-ml-lg-11 { + margin-left: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-lg-12 { + margin: 3rem !important; + } + .rz-my-lg-12, + .rz-mt-lg-12 { + margin-top: 3rem !important; + } + .rz-mx-lg-12, + .rz-mr-lg-12 { + margin-right: 3rem !important; + } + .rz-my-lg-12, + .rz-mb-lg-12 { + margin-bottom: 3rem !important; + } + .rz-mx-lg-12, + .rz-ml-lg-12 { + margin-left: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-end: 3rem !important; + } + .rz-p-lg-0 { + padding: 0 !important; + } + .rz-py-lg-0, + .rz-pt-lg-0 { + padding-top: 0 !important; + } + .rz-px-lg-0, + .rz-pr-lg-0 { + padding-right: 0 !important; + } + .rz-py-lg-0, + .rz-pb-lg-0 { + padding-bottom: 0 !important; + } + .rz-px-lg-0, + .rz-pl-lg-0 { + padding-left: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-start: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-end: 0 !important; + } + .rz-p-lg-05 { + padding: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pt-lg-05 { + padding-top: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pr-lg-05 { + padding-right: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pb-lg-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pl-lg-05 { + padding-left: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-lg-1 { + padding: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pt-lg-1 { + padding-top: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pr-lg-1 { + padding-right: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pl-lg-1 { + padding-left: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-lg-2 { + padding: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pt-lg-2 { + padding-top: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pr-lg-2 { + padding-right: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pl-lg-2 { + padding-left: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-lg-3 { + padding: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pt-lg-3 { + padding-top: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pr-lg-3 { + padding-right: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pb-lg-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pl-lg-3 { + padding-left: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-lg-4 { + padding: 1rem !important; + } + .rz-py-lg-4, + .rz-pt-lg-4 { + padding-top: 1rem !important; + } + .rz-px-lg-4, + .rz-pr-lg-4 { + padding-right: 1rem !important; + } + .rz-py-lg-4, + .rz-pb-lg-4 { + padding-bottom: 1rem !important; + } + .rz-px-lg-4, + .rz-pl-lg-4 { + padding-left: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-end: 1rem !important; + } + .rz-p-lg-5 { + padding: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pt-lg-5 { + padding-top: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pr-lg-5 { + padding-right: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pb-lg-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pl-lg-5 { + padding-left: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-lg-6 { + padding: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pt-lg-6 { + padding-top: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pr-lg-6 { + padding-right: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pb-lg-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pl-lg-6 { + padding-left: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-lg-7 { + padding: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pt-lg-7 { + padding-top: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pr-lg-7 { + padding-right: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pb-lg-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pl-lg-7 { + padding-left: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-lg-8 { + padding: 2rem !important; + } + .rz-py-lg-8, + .rz-pt-lg-8 { + padding-top: 2rem !important; + } + .rz-px-lg-8, + .rz-pr-lg-8 { + padding-right: 2rem !important; + } + .rz-py-lg-8, + .rz-pb-lg-8 { + padding-bottom: 2rem !important; + } + .rz-px-lg-8, + .rz-pl-lg-8 { + padding-left: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-end: 2rem !important; + } + .rz-p-lg-9 { + padding: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pt-lg-9 { + padding-top: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pr-lg-9 { + padding-right: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pb-lg-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pl-lg-9 { + padding-left: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-lg-10 { + padding: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pt-lg-10 { + padding-top: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pr-lg-10 { + padding-right: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pb-lg-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pl-lg-10 { + padding-left: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-lg-11 { + padding: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pt-lg-11 { + padding-top: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pr-lg-11 { + padding-right: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pb-lg-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pl-lg-11 { + padding-left: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-lg-12 { + padding: 3rem !important; + } + .rz-py-lg-12, + .rz-pt-lg-12 { + padding-top: 3rem !important; + } + .rz-px-lg-12, + .rz-pr-lg-12 { + padding-right: 3rem !important; + } + .rz-py-lg-12, + .rz-pb-lg-12 { + padding-bottom: 3rem !important; + } + .rz-px-lg-12, + .rz-pl-lg-12 { + padding-left: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-end: 3rem !important; + } + .rz-m-lg-auto { + margin: auto !important; + } + .rz-my-lg-auto, + .rz-mt-lg-auto { + margin-top: auto !important; + } + .rz-mx-lg-auto, + .rz-mr-lg-auto { + margin-right: auto !important; + } + .rz-my-lg-auto, + .rz-mb-lg-auto { + margin-bottom: auto !important; + } + .rz-mx-lg-auto, + .rz-ml-lg-auto { + margin-left: auto !important; + } + .rz-ms-lg-auto { + margin-inline-start: auto !important; + } + .rz-me-lg-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1920px) { + .rz-m-xl-0 { + margin: 0 !important; + } + .rz-my-xl-0, + .rz-mt-xl-0 { + margin-top: 0 !important; + } + .rz-mx-xl-0, + .rz-mr-xl-0 { + margin-right: 0 !important; + } + .rz-my-xl-0, + .rz-mb-xl-0 { + margin-bottom: 0 !important; + } + .rz-mx-xl-0, + .rz-ml-xl-0 { + margin-left: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-end: 0 !important; + } + .rz-m-xl-05 { + margin: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mt-xl-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-mr-xl-05 { + margin-right: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mb-xl-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-ml-xl-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xl-1 { + margin: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mt-xl-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-mr-xl-1 { + margin-right: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-ml-xl-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xl-2 { + margin: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mt-xl-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-mr-xl-2 { + margin-right: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-ml-xl-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xl-3 { + margin: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mt-xl-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-mr-xl-3 { + margin-right: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mb-xl-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-ml-xl-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xl-4 { + margin: 1rem !important; + } + .rz-my-xl-4, + .rz-mt-xl-4 { + margin-top: 1rem !important; + } + .rz-mx-xl-4, + .rz-mr-xl-4 { + margin-right: 1rem !important; + } + .rz-my-xl-4, + .rz-mb-xl-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xl-4, + .rz-ml-xl-4 { + margin-left: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xl-5 { + margin: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mt-xl-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-mr-xl-5 { + margin-right: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mb-xl-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-ml-xl-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xl-6 { + margin: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mt-xl-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-mr-xl-6 { + margin-right: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mb-xl-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-ml-xl-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xl-7 { + margin: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mt-xl-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-mr-xl-7 { + margin-right: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mb-xl-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-ml-xl-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xl-8 { + margin: 2rem !important; + } + .rz-my-xl-8, + .rz-mt-xl-8 { + margin-top: 2rem !important; + } + .rz-mx-xl-8, + .rz-mr-xl-8 { + margin-right: 2rem !important; + } + .rz-my-xl-8, + .rz-mb-xl-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xl-8, + .rz-ml-xl-8 { + margin-left: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xl-9 { + margin: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mt-xl-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-mr-xl-9 { + margin-right: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mb-xl-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-ml-xl-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xl-10 { + margin: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mt-xl-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-mr-xl-10 { + margin-right: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mb-xl-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-ml-xl-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xl-11 { + margin: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mt-xl-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-mr-xl-11 { + margin-right: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mb-xl-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-ml-xl-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xl-12 { + margin: 3rem !important; + } + .rz-my-xl-12, + .rz-mt-xl-12 { + margin-top: 3rem !important; + } + .rz-mx-xl-12, + .rz-mr-xl-12 { + margin-right: 3rem !important; + } + .rz-my-xl-12, + .rz-mb-xl-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xl-12, + .rz-ml-xl-12 { + margin-left: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xl-0 { + padding: 0 !important; + } + .rz-py-xl-0, + .rz-pt-xl-0 { + padding-top: 0 !important; + } + .rz-px-xl-0, + .rz-pr-xl-0 { + padding-right: 0 !important; + } + .rz-py-xl-0, + .rz-pb-xl-0 { + padding-bottom: 0 !important; + } + .rz-px-xl-0, + .rz-pl-xl-0 { + padding-left: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-end: 0 !important; + } + .rz-p-xl-05 { + padding: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pt-xl-05 { + padding-top: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pr-xl-05 { + padding-right: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pb-xl-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pl-xl-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xl-1 { + padding: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pt-xl-1 { + padding-top: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pr-xl-1 { + padding-right: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pl-xl-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xl-2 { + padding: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pt-xl-2 { + padding-top: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pr-xl-2 { + padding-right: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pl-xl-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xl-3 { + padding: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pt-xl-3 { + padding-top: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pr-xl-3 { + padding-right: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pb-xl-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pl-xl-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xl-4 { + padding: 1rem !important; + } + .rz-py-xl-4, + .rz-pt-xl-4 { + padding-top: 1rem !important; + } + .rz-px-xl-4, + .rz-pr-xl-4 { + padding-right: 1rem !important; + } + .rz-py-xl-4, + .rz-pb-xl-4 { + padding-bottom: 1rem !important; + } + .rz-px-xl-4, + .rz-pl-xl-4 { + padding-left: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xl-5 { + padding: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pt-xl-5 { + padding-top: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pr-xl-5 { + padding-right: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pb-xl-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pl-xl-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xl-6 { + padding: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pt-xl-6 { + padding-top: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pr-xl-6 { + padding-right: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pb-xl-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pl-xl-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xl-7 { + padding: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pt-xl-7 { + padding-top: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pr-xl-7 { + padding-right: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pb-xl-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pl-xl-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xl-8 { + padding: 2rem !important; + } + .rz-py-xl-8, + .rz-pt-xl-8 { + padding-top: 2rem !important; + } + .rz-px-xl-8, + .rz-pr-xl-8 { + padding-right: 2rem !important; + } + .rz-py-xl-8, + .rz-pb-xl-8 { + padding-bottom: 2rem !important; + } + .rz-px-xl-8, + .rz-pl-xl-8 { + padding-left: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xl-9 { + padding: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pt-xl-9 { + padding-top: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pr-xl-9 { + padding-right: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pb-xl-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pl-xl-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xl-10 { + padding: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pt-xl-10 { + padding-top: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pr-xl-10 { + padding-right: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pb-xl-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pl-xl-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xl-11 { + padding: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pt-xl-11 { + padding-top: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pr-xl-11 { + padding-right: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pb-xl-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pl-xl-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xl-12 { + padding: 3rem !important; + } + .rz-py-xl-12, + .rz-pt-xl-12 { + padding-top: 3rem !important; + } + .rz-px-xl-12, + .rz-pr-xl-12 { + padding-right: 3rem !important; + } + .rz-py-xl-12, + .rz-pb-xl-12 { + padding-bottom: 3rem !important; + } + .rz-px-xl-12, + .rz-pl-xl-12 { + padding-left: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xl-auto { + margin: auto !important; + } + .rz-my-xl-auto, + .rz-mt-xl-auto { + margin-top: auto !important; + } + .rz-mx-xl-auto, + .rz-mr-xl-auto { + margin-right: auto !important; + } + .rz-my-xl-auto, + .rz-mb-xl-auto { + margin-bottom: auto !important; + } + .rz-mx-xl-auto, + .rz-ml-xl-auto { + margin-left: auto !important; + } + .rz-ms-xl-auto { + margin-inline-start: auto !important; + } + .rz-me-xl-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 2560px) { + .rz-m-xx-0 { + margin: 0 !important; + } + .rz-my-xx-0, + .rz-mt-xx-0 { + margin-top: 0 !important; + } + .rz-mx-xx-0, + .rz-mr-xx-0 { + margin-right: 0 !important; + } + .rz-my-xx-0, + .rz-mb-xx-0 { + margin-bottom: 0 !important; + } + .rz-mx-xx-0, + .rz-ml-xx-0 { + margin-left: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-end: 0 !important; + } + .rz-m-xx-05 { + margin: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mt-xx-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-mr-xx-05 { + margin-right: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mb-xx-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-ml-xx-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xx-1 { + margin: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mt-xx-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-mr-xx-1 { + margin-right: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mb-xx-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-ml-xx-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xx-2 { + margin: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mt-xx-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-mr-xx-2 { + margin-right: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mb-xx-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-ml-xx-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xx-3 { + margin: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mt-xx-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-mr-xx-3 { + margin-right: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mb-xx-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-ml-xx-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xx-4 { + margin: 1rem !important; + } + .rz-my-xx-4, + .rz-mt-xx-4 { + margin-top: 1rem !important; + } + .rz-mx-xx-4, + .rz-mr-xx-4 { + margin-right: 1rem !important; + } + .rz-my-xx-4, + .rz-mb-xx-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xx-4, + .rz-ml-xx-4 { + margin-left: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xx-5 { + margin: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mt-xx-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-mr-xx-5 { + margin-right: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mb-xx-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-ml-xx-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xx-6 { + margin: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mt-xx-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-mr-xx-6 { + margin-right: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mb-xx-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-ml-xx-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xx-7 { + margin: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mt-xx-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-mr-xx-7 { + margin-right: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mb-xx-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-ml-xx-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xx-8 { + margin: 2rem !important; + } + .rz-my-xx-8, + .rz-mt-xx-8 { + margin-top: 2rem !important; + } + .rz-mx-xx-8, + .rz-mr-xx-8 { + margin-right: 2rem !important; + } + .rz-my-xx-8, + .rz-mb-xx-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xx-8, + .rz-ml-xx-8 { + margin-left: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xx-9 { + margin: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mt-xx-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-mr-xx-9 { + margin-right: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mb-xx-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-ml-xx-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xx-10 { + margin: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mt-xx-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-mr-xx-10 { + margin-right: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mb-xx-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-ml-xx-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xx-11 { + margin: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mt-xx-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-mr-xx-11 { + margin-right: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mb-xx-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-ml-xx-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xx-12 { + margin: 3rem !important; + } + .rz-my-xx-12, + .rz-mt-xx-12 { + margin-top: 3rem !important; + } + .rz-mx-xx-12, + .rz-mr-xx-12 { + margin-right: 3rem !important; + } + .rz-my-xx-12, + .rz-mb-xx-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xx-12, + .rz-ml-xx-12 { + margin-left: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xx-0 { + padding: 0 !important; + } + .rz-py-xx-0, + .rz-pt-xx-0 { + padding-top: 0 !important; + } + .rz-px-xx-0, + .rz-pr-xx-0 { + padding-right: 0 !important; + } + .rz-py-xx-0, + .rz-pb-xx-0 { + padding-bottom: 0 !important; + } + .rz-px-xx-0, + .rz-pl-xx-0 { + padding-left: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-end: 0 !important; + } + .rz-p-xx-05 { + padding: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pt-xx-05 { + padding-top: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pr-xx-05 { + padding-right: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pb-xx-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pl-xx-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xx-1 { + padding: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pt-xx-1 { + padding-top: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pr-xx-1 { + padding-right: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pb-xx-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pl-xx-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xx-2 { + padding: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pt-xx-2 { + padding-top: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pr-xx-2 { + padding-right: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pb-xx-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pl-xx-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xx-3 { + padding: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pt-xx-3 { + padding-top: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pr-xx-3 { + padding-right: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pb-xx-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pl-xx-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xx-4 { + padding: 1rem !important; + } + .rz-py-xx-4, + .rz-pt-xx-4 { + padding-top: 1rem !important; + } + .rz-px-xx-4, + .rz-pr-xx-4 { + padding-right: 1rem !important; + } + .rz-py-xx-4, + .rz-pb-xx-4 { + padding-bottom: 1rem !important; + } + .rz-px-xx-4, + .rz-pl-xx-4 { + padding-left: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xx-5 { + padding: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pt-xx-5 { + padding-top: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pr-xx-5 { + padding-right: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pb-xx-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pl-xx-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xx-6 { + padding: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pt-xx-6 { + padding-top: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pr-xx-6 { + padding-right: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pb-xx-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pl-xx-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xx-7 { + padding: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pt-xx-7 { + padding-top: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pr-xx-7 { + padding-right: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pb-xx-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pl-xx-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xx-8 { + padding: 2rem !important; + } + .rz-py-xx-8, + .rz-pt-xx-8 { + padding-top: 2rem !important; + } + .rz-px-xx-8, + .rz-pr-xx-8 { + padding-right: 2rem !important; + } + .rz-py-xx-8, + .rz-pb-xx-8 { + padding-bottom: 2rem !important; + } + .rz-px-xx-8, + .rz-pl-xx-8 { + padding-left: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xx-9 { + padding: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pt-xx-9 { + padding-top: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pr-xx-9 { + padding-right: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pb-xx-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pl-xx-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xx-10 { + padding: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pt-xx-10 { + padding-top: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pr-xx-10 { + padding-right: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pb-xx-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pl-xx-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xx-11 { + padding: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pt-xx-11 { + padding-top: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pr-xx-11 { + padding-right: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pb-xx-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pl-xx-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xx-12 { + padding: 3rem !important; + } + .rz-py-xx-12, + .rz-pt-xx-12 { + padding-top: 3rem !important; + } + .rz-px-xx-12, + .rz-pr-xx-12 { + padding-right: 3rem !important; + } + .rz-py-xx-12, + .rz-pb-xx-12 { + padding-bottom: 3rem !important; + } + .rz-px-xx-12, + .rz-pl-xx-12 { + padding-left: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xx-auto { + margin: auto !important; + } + .rz-my-xx-auto, + .rz-mt-xx-auto { + margin-top: auto !important; + } + .rz-mx-xx-auto, + .rz-mr-xx-auto { + margin-right: auto !important; + } + .rz-my-xx-auto, + .rz-mb-xx-auto { + margin-bottom: auto !important; + } + .rz-mx-xx-auto, + .rz-ml-xx-auto { + margin-left: auto !important; + } + .rz-ms-xx-auto { + margin-inline-start: auto !important; + } + .rz-me-xx-auto { + margin-inline-end: auto !important; + } +} +h1.rz-heading { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2.rz-heading { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3.rz-heading { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4.rz-heading { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5.rz-heading { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1, +.h1 { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2, +.h2 { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3, +.h3 { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4, +.h4 { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5, +.h5 { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; +} + +.rz-text-display-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h1-font-size); + line-height: var(--rz-text-display-h1-line-height); + font-weight: var(--rz-text-display-h1-font-weight); + letter-spacing: var(--rz-text-display-h1-letter-spacing); + color: var(--rz-text-display-h1-color); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); +} + +.rz-text-display-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h2-font-size); + line-height: var(--rz-text-display-h2-line-height); + font-weight: var(--rz-text-display-h2-font-weight); + letter-spacing: var(--rz-text-display-h2-letter-spacing); + color: var(--rz-text-display-h2-color); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); +} + +.rz-text-display-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h3-font-size); + line-height: var(--rz-text-display-h3-line-height); + font-weight: var(--rz-text-display-h3-font-weight); + letter-spacing: var(--rz-text-display-h3-letter-spacing); + color: var(--rz-text-display-h3-color); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); +} + +.rz-text-display-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h4-font-size); + line-height: var(--rz-text-display-h4-line-height); + font-weight: var(--rz-text-display-h4-font-weight); + letter-spacing: var(--rz-text-display-h4-letter-spacing); + color: var(--rz-text-display-h4-color); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); +} + +.rz-text-display-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h5-font-size); + line-height: var(--rz-text-display-h5-line-height); + font-weight: var(--rz-text-display-h5-font-weight); + letter-spacing: var(--rz-text-display-h5-letter-spacing); + color: var(--rz-text-display-h5-color); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); +} + +.rz-text-display-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h6-font-size); + line-height: var(--rz-text-display-h6-line-height); + font-weight: var(--rz-text-display-h6-font-weight); + letter-spacing: var(--rz-text-display-h6-letter-spacing); + color: var(--rz-text-display-h6-color); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); +} + +.rz-text-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h1-font-size); + line-height: var(--rz-text-h1-line-height); + font-weight: var(--rz-text-h1-font-weight); + letter-spacing: var(--rz-text-h1-letter-spacing); + color: var(--rz-text-h1-color); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); +} + +.rz-text-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h2-font-size); + line-height: var(--rz-text-h2-line-height); + font-weight: var(--rz-text-h2-font-weight); + letter-spacing: var(--rz-text-h2-letter-spacing); + color: var(--rz-text-h2-color); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); +} + +.rz-text-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h3-font-size); + line-height: var(--rz-text-h3-line-height); + font-weight: var(--rz-text-h3-font-weight); + letter-spacing: var(--rz-text-h3-letter-spacing); + color: var(--rz-text-h3-color); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); +} + +.rz-text-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h4-font-size); + line-height: var(--rz-text-h4-line-height); + font-weight: var(--rz-text-h4-font-weight); + letter-spacing: var(--rz-text-h4-letter-spacing); + color: var(--rz-text-h4-color); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); +} + +.rz-text-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h5-font-size); + line-height: var(--rz-text-h5-line-height); + font-weight: var(--rz-text-h5-font-weight); + letter-spacing: var(--rz-text-h5-letter-spacing); + color: var(--rz-text-h5-color); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); +} + +.rz-text-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-text-h6-color); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); +} + +.rz-text-subtitle1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle1-font-size); + line-height: var(--rz-text-subtitle1-line-height); + font-weight: var(--rz-text-subtitle1-font-weight); + letter-spacing: var(--rz-text-subtitle1-letter-spacing); + color: var(--rz-text-subtitle1-color); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); +} + +.rz-text-subtitle2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle2-font-size); + line-height: var(--rz-text-subtitle2-line-height); + font-weight: var(--rz-text-subtitle2-font-weight); + letter-spacing: var(--rz-text-subtitle2-letter-spacing); + color: var(--rz-text-subtitle2-color); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); +} + +.rz-text-body1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body1-font-size); + line-height: var(--rz-text-body1-line-height); + font-weight: var(--rz-text-body1-font-weight); + letter-spacing: var(--rz-text-body1-letter-spacing); + color: var(--rz-text-body1-color); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); +} + +.rz-text-body2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body2-font-size); + line-height: var(--rz-text-body2-line-height); + font-weight: var(--rz-text-body2-font-weight); + letter-spacing: var(--rz-text-body2-letter-spacing); + color: var(--rz-text-body2-color); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); +} + +.rz-text-button { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-button-font-size); + line-height: var(--rz-text-button-line-height); + font-weight: var(--rz-text-button-font-weight); + letter-spacing: var(--rz-text-button-letter-spacing); + text-transform: var(--rz-text-button-text-transform); + color: var(--rz-text-button-color); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); +} + +.rz-text-caption { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-caption-font-size); + line-height: var(--rz-text-caption-line-height); + font-weight: var(--rz-text-caption-font-weight); + letter-spacing: var(--rz-text-caption-letter-spacing); + color: var(--rz-text-caption-color); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); +} + +.rz-text-overline { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-overline-font-size); + line-height: var(--rz-text-overline-line-height); + font-weight: var(--rz-text-overline-font-weight); + letter-spacing: var(--rz-text-overline-letter-spacing); + text-transform: var(--rz-text-overline-text-transform); + color: var(--rz-text-overline-color); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); +} + +.rz-text-align-start { + text-align: start; +} + +.rz-text-align-end { + text-align: end; +} + +.rz-text-align-left { + text-align: left; +} + +.rz-text-align-right { + text-align: right; +} + +.rz-text-align-center { + text-align: center; +} + +.rz-text-align-justify { + text-align: justify; +} + +.rz-text-align-justify-all { + text-align: justify-all; +} + +.rz-text-align-match-parent { + text-align: match-parent; +} + +@media (min-width: 576px) { + .rz-text-align-xs-start { + text-align: start !important; + } + .rz-text-align-xs-end { + text-align: end !important; + } + .rz-text-align-xs-left { + text-align: left !important; + } + .rz-text-align-xs-right { + text-align: right !important; + } + .rz-text-align-xs-center { + text-align: center !important; + } + .rz-text-align-xs-justify { + text-align: justify !important; + } + .rz-text-align-xs-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xs-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 768px) { + .rz-text-align-sm-start { + text-align: start !important; + } + .rz-text-align-sm-end { + text-align: end !important; + } + .rz-text-align-sm-left { + text-align: left !important; + } + .rz-text-align-sm-right { + text-align: right !important; + } + .rz-text-align-sm-center { + text-align: center !important; + } + .rz-text-align-sm-justify { + text-align: justify !important; + } + .rz-text-align-sm-justify-all { + text-align: justify-all !important; + } + .rz-text-align-sm-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1024px) { + .rz-text-align-md-start { + text-align: start !important; + } + .rz-text-align-md-end { + text-align: end !important; + } + .rz-text-align-md-left { + text-align: left !important; + } + .rz-text-align-md-right { + text-align: right !important; + } + .rz-text-align-md-center { + text-align: center !important; + } + .rz-text-align-md-justify { + text-align: justify !important; + } + .rz-text-align-md-justify-all { + text-align: justify-all !important; + } + .rz-text-align-md-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1280px) { + .rz-text-align-lg-start { + text-align: start !important; + } + .rz-text-align-lg-end { + text-align: end !important; + } + .rz-text-align-lg-left { + text-align: left !important; + } + .rz-text-align-lg-right { + text-align: right !important; + } + .rz-text-align-lg-center { + text-align: center !important; + } + .rz-text-align-lg-justify { + text-align: justify !important; + } + .rz-text-align-lg-justify-all { + text-align: justify-all !important; + } + .rz-text-align-lg-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1920px) { + .rz-text-align-xl-start { + text-align: start !important; + } + .rz-text-align-xl-end { + text-align: end !important; + } + .rz-text-align-xl-left { + text-align: left !important; + } + .rz-text-align-xl-right { + text-align: right !important; + } + .rz-text-align-xl-center { + text-align: center !important; + } + .rz-text-align-xl-justify { + text-align: justify !important; + } + .rz-text-align-xl-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xl-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 2560px) { + .rz-text-align-xx-start { + text-align: start !important; + } + .rz-text-align-xx-end { + text-align: end !important; + } + .rz-text-align-xx-left { + text-align: left !important; + } + .rz-text-align-xx-right { + text-align: right !important; + } + .rz-text-align-xx-center { + text-align: center !important; + } + .rz-text-align-xx-justify { + text-align: justify !important; + } + .rz-text-align-xx-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xx-match-parent { + text-align: match-parent !important; + } +} +.rz-text-wrap { + white-space: normal !important; +} + +.rz-text-nowrap { + white-space: nowrap !important; +} + +.rz-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rz-text-capitalize { + text-transform: capitalize; +} + +.rz-text-uppercase { + text-transform: uppercase; +} + +.rz-text-lowercase { + text-transform: lowercase; +} + +:root { + font-size: var(--rz-root-font-size); +} + +body { + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +p { + line-height: var(--rz-body-line-height); +} + +.rz-label { + vertical-align: middle; + margin-block-start: 0; + margin-block-end: 0; +} + +.rz-form .row .rz-label { + min-height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; + border-top: var(--rz-input-border); + border-bottom: var(--rz-input-border); + border-color: transparent; +} + +label { + margin-block-start: 0; + margin-block-end: 0; +} + +::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-layout ::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; + font-family: var(--rz-icon-font-family); + font-weight: var(--rz-icon-weight, inherit); + font-style: normal; + font-size: var(--rz-icon-size); + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: "liga"; +} + +i.rzi { + display: inline-flex; + justify-content: center; + align-items: center; +} + +.rzi-primary { + color: var(--rz-primary); +} + +.rzi-secondary { + color: var(--rz-secondary); +} + +.rzi-info { + color: var(--rz-info); +} + +.rzi-warning { + color: var(--rz-warning); +} + +.rzi-error { + color: var(--rz-danger); +} + +.rzi-danger { + color: var(--rz-danger); +} + +.rzi-success { + color: var(--rz-success); +} + +.rzi-base { + color: var(--rz-base-600); +} + +.rzi-light { + color: var(--rz-base-600); +} + +.rzi-dark { + color: var(--rz-black); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + +.rz-helper-hidden-accessible { + opacity: 0; + height: 0; +} +.rz-helper-hidden-accessible input { + height: 0; + padding: 0; + margin: 0; + border: 0; +} + +.rz-helper-hidden { + display: none; +} + +.rz-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; +} + +.rz-pager-element, .rz-button { + box-sizing: border-box; + display: inline-block; + margin: 0; + color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; + border: none; + border-radius: var(--rz-button-border-radius); + outline: none; + box-shadow: var(--rz-button-shadow); + font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); + text-decoration: none; + transition: var(--rz-button-transition); + -webkit-appearance: none; +} +.rz-pager-element:focus, .rz-button:focus { + outline: var(--rz-outline-normal); +} +.rz-pager-element:focus-visible, .rz-button:focus-visible { + outline: var(--rz-button-focus-outline); + outline-offset: var(--rz-button-focus-outline-offset); +} +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { + cursor: pointer; +} +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { + text-decoration: none; + background-image: var(--rz-button-hover-gradient); + background-size: var(--rz-button-hover-background-size); + box-shadow: var(--rz-button-hover-shadow); +} +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { + text-decoration: none; + background-image: var(--rz-button-focus-gradient); + background-size: var(--rz-button-focus-background-size); + box-shadow: var(--rz-button-focus-shadow); +} +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { + text-decoration: none; + background-image: var(--rz-button-active-gradient); + background-size: var(--rz-button-active-background-size); + box-shadow: var(--rz-button-active-shadow); +} +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { + opacity: var(--rz-button-disabled-opacity); + cursor: initial; +} +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { + opacity: var(--rz-button-empty-opacity); + cursor: initial; +} +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: var(--rz-button-vertical-align); + line-height: var(--rz-button-line-height); +} +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { + vertical-align: var(--rz-button-vertical-align); +} +.rz-pager-element .rzi, .rz-button .rzi { + vertical-align: var(--rz-button-vertical-align); +} + +.rz-button.rz-primary:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-button.rz-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-button.rz-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-button.rz-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} +.rz-button.rz-primary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-button.rz-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-button.rz-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-button.rz-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} +.rz-button.rz-secondary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-secondary.rz-variant-flat:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-button.rz-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-button.rz-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-button.rz-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} +.rz-button.rz-info.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-info.rz-variant-flat:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-button.rz-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-button.rz-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-button.rz-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} +.rz-button.rz-warning.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-warning.rz-variant-flat:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-button.rz-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-button.rz-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-button.rz-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-button.rz-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} +.rz-button.rz-error.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-error.rz-variant-flat:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-button.rz-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-button.rz-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-black); + color: var(--rz-text-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-secondary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-info { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} +.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-warning { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-error { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} +.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-danger { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-success { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} +.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-base { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-light { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-dark { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-black); + color: var(--rz-black); +} +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; +} + +.rz-button.rz-variant-text.rz-primary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-secondary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-info { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-button.rz-variant-text.rz-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-button.rz-variant-text.rz-info.rz-shade-default { + color: var(--rz-info); +} +.rz-button.rz-variant-text.rz-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-button.rz-variant-text.rz-info.rz-shade-darker { + color: var(--rz-info-darker); +} +.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-warning { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-error { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-button.rz-variant-text.rz-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-button.rz-variant-text.rz-error.rz-shade-default { + color: var(--rz-error); +} +.rz-button.rz-variant-text.rz-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-button.rz-variant-text.rz-error.rz-shade-darker { + color: var(--rz-error-darker); +} +.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-danger { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-success { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-button.rz-variant-text.rz-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-button.rz-variant-text.rz-success.rz-shade-default { + color: var(--rz-success); +} +.rz-button.rz-variant-text.rz-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-button.rz-variant-text.rz-success.rz-shade-darker { + color: var(--rz-success-darker); +} +.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-text-color); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-black); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-pager-element, .rz-button-lg { + padding: 0.75rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3rem; + min-width: 3rem; + font-size: 1rem; + font-weight: 500; + letter-spacing: 1.25px; + text-transform: uppercase; +} +.rz-pager-element .rz-button-box, .rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-pager-element, .rz-button-lg.rz-button-icon-only { + padding: 0.75rem; +} +.rz-pager-element .rzi, .rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 1.25px; + text-transform: uppercase; +} +.rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-md.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-md.rz-button-icon-only, .rz-button-md.rz-pager-element { + padding: 0.5rem; +} +.rz-button-md .rzi { + font-size: 1.25rem; + height: 1.25rem; + line-height: 1.25rem; + width: 1.25rem; +} + +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { + padding: 0.375rem 0.75rem; + height: auto; + line-height: 1rem; + min-height: 1.75rem; + min-width: 1.75rem; + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.75px; + text-transform: uppercase; +} +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { + line-height: 1rem; + gap: 0.25rem; +} +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { + padding: 0.375rem; +} +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { + font-size: 1rem; + height: 1rem; + line-height: 1rem; + width: 1rem; +} + +.rz-button-xs { + padding: 0.25rem 0.5rem; + height: auto; + line-height: 1rem; + min-height: 1.25rem; + min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0; + text-transform: uppercase; +} +.rz-button-xs .rz-button-box { + line-height: 1rem; + gap: 0.125rem; +} +.rz-button-xs.rz-button-icon-left { + padding: 0 1rem; +} +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { + padding: 0.25rem; +} +.rz-button-xs .rzi { + font-size: 1rem; + height: 1rem; + line-height: 1rem; + width: 1rem; +} + +@keyframes button-icon-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.rz-badge { + box-sizing: border-box; + color: var(--rz-text-contrast-color); + display: inline-block; + padding: var(--rz-badge-padding); + font-size: var(--rz-badge-font-size); + font-weight: var(--rz-badge-font-weight); + line-height: var(--rz-badge-line-height); + text-align: center; + text-transform: var(--rz-badge-text-transform); + white-space: nowrap; + border-radius: var(--rz-badge-border-radius); + letter-spacing: var(--rz-badge-letter-spacing); +} +.rz-button .rz-badge { + vertical-align: top; +} + +.rz-badge-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-badge-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-badge-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-badge-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} + +.rz-badge-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-badge-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-badge-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-badge-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} + +.rz-badge-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-badge-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-badge-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-badge-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} + +.rz-badge-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-badge-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-badge-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-badge-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} + +.rz-badge-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-badge-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-badge-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-badge-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-badge-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} + +.rz-badge-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-badge-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-badge-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-badge-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} + +.rz-badge-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-badge-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-badge-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-badge-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} + +.rz-badge-base { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-black); + color: var(--rz-text-color); +} + +.rz-variant-outlined.rz-badge-primary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} + +.rz-variant-outlined.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-lighter); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} + +.rz-variant-outlined.rz-badge-info { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-lighter); +} +.rz-variant-outlined.rz-badge-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-variant-outlined.rz-badge-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-variant-outlined.rz-badge-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-variant-outlined.rz-badge-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} + +.rz-variant-outlined.rz-badge-warning { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-lighter); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} + +.rz-variant-outlined.rz-badge-error { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-lighter); +} +.rz-variant-outlined.rz-badge-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-variant-outlined.rz-badge-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-variant-outlined.rz-badge-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-variant-outlined.rz-badge-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} + +.rz-variant-outlined.rz-badge-danger { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-lighter); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} + +.rz-variant-outlined.rz-badge-success { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-lighter); +} +.rz-variant-outlined.rz-badge-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-variant-outlined.rz-badge-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-variant-outlined.rz-badge-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-variant-outlined.rz-badge-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} + +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-600); + color: var(--rz-base-600); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-black); + color: var(--rz-black); +} + +.rz-variant-text.rz-badge-primary { + background-color: transparent; +} +.rz-variant-text.rz-badge-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-variant-text.rz-badge-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-variant-text.rz-badge-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-variant-text.rz-badge-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-variant-text.rz-badge-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} + +.rz-variant-text.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-text.rz-badge-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-variant-text.rz-badge-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-variant-text.rz-badge-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-variant-text.rz-badge-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-variant-text.rz-badge-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} + +.rz-variant-text.rz-badge-info { + background-color: transparent; +} +.rz-variant-text.rz-badge-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-variant-text.rz-badge-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-variant-text.rz-badge-info.rz-shade-default { + color: var(--rz-info); +} +.rz-variant-text.rz-badge-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-variant-text.rz-badge-info.rz-shade-darker { + color: var(--rz-info-darker); +} + +.rz-variant-text.rz-badge-warning { + background-color: transparent; +} +.rz-variant-text.rz-badge-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-variant-text.rz-badge-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-variant-text.rz-badge-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-variant-text.rz-badge-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-variant-text.rz-badge-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} + +.rz-variant-text.rz-badge-error { + background-color: transparent; +} +.rz-variant-text.rz-badge-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-variant-text.rz-badge-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-variant-text.rz-badge-error.rz-shade-default { + color: var(--rz-error); +} +.rz-variant-text.rz-badge-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-variant-text.rz-badge-error.rz-shade-darker { + color: var(--rz-error-darker); +} + +.rz-variant-text.rz-badge-danger { + background-color: transparent; +} +.rz-variant-text.rz-badge-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-variant-text.rz-badge-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-variant-text.rz-badge-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-variant-text.rz-badge-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-variant-text.rz-badge-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} + +.rz-variant-text.rz-badge-success { + background-color: transparent; +} +.rz-variant-text.rz-badge-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-variant-text.rz-badge-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-variant-text.rz-badge-success.rz-shade-default { + color: var(--rz-success); +} +.rz-variant-text.rz-badge-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-variant-text.rz-badge-success.rz-shade-darker { + color: var(--rz-success-darker); +} + +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-600); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-black); + background-color: transparent; +} + +.rz-badge-pill { + border-radius: var(--rz-badge-pill-border-radius); + padding: var(--rz-badge-pill-padding); +} + +.rz-dropzone { + user-select: none; +} + +.rz-dropzone-item { + user-select: none; + cursor: grab; +} + +.rz-dragging { + cursor: grabbing; +} + +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { + box-shadow: var(--rz-input-hover-shadow); + border: var(--rz-input-hover-border); +} + +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { + box-shadow: var(--rz-input-focus-shadow); + border: var(--rz-input-focus-border); + outline: var(--rz-input-focus-outline); + outline-offset: var(--rz-input-focus-outline-offset); +} + +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { + background-color: var(--rz-input-disabled-background-color); + color: var(--rz-input-disabled-color); + border: none; +} + +input { + color: var(--rz-input-value-color); + font-size: var(--rz-input-font-size); +} +input::placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); +} + +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + color: var(--rz-input-value-color); + font-family: inherit; + font-size: var(--rz-input-font-size); + transition: var(--rz-input-transition); + outline: none; +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + box-shadow: none; + background-color: transparent; + outline: none; + border: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus-within { + border: none; + box-shadow: none; +} + +.rz-header { + background-color: var(--rz-header-background-color); + min-height: var(--rz-header-min-height); + border-bottom: var(--rz-header-border); + color: var(--rz-header-color); + box-shadow: var(--rz-header-shadow); +} +.rz-header.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--rz-header-z); +} +.rz-header a { + text-decoration: none; +} + +.rz-footer { + padding: var(--rz-footer-padding); + border-top: var(--rz-footer-border); + background-color: var(--rz-footer-background-color); + color: var(--rz-footer-color); +} +.rz-footer.fixed { + position: fixed; + z-index: var(--rz-footer-z); + bottom: 0; + left: 0; + right: 0; +} + +.rz-sidebar { + background-color: var(--rz-sidebar-background-color); + color: var(--rz-sidebar-color); + border-inline-end: var(--rz-sidebar-border-inline-end); + position: fixed; + overflow: auto; + left: 0; + top: 0; + bottom: 0; + z-index: var(--rz-sidebar-z); + width: var(--rz-sidebar-width); + opacity: 1; + transition: width var(--rz-transition), opacity var(--rz-transition); +} + +@media (max-width: 768px) { + .rz-sidebar-responsive { + width: 0; + opacity: 0; + } +} +.rz-sidebar-expanded { + width: var(--rz-sidebar-width); + opacity: 1; +} + +.rz-sidebar-collapsed { + width: 0 !important; + opacity: 0; +} + +.rz-card { + box-sizing: border-box; + padding: var(--rz-card-padding); + border-radius: var(--rz-card-border-radius); + background-color: var(--rz-card-background-color); +} +.rz-card.rz-variant-filled { + box-shadow: var(--rz-card-shadow); +} +.rz-card.rz-variant-flat { + background-color: var(--rz-card-flat-background-color); +} +.rz-card.rz-variant-outlined { + background: transparent; + border: var(--rz-card-border); +} +.rz-card.rz-variant-text { + background: transparent; +} +.rz-card h1, +.rz-card h2, +.rz-card h3, +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + +.rz-accordion { + box-sizing: border-box; + border-radius: var(--rz-accordion-border-radius); + box-shadow: var(--rz-accordion-shadow); +} +.rz-accordion > div:first-child { + border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; +} +.rz-accordion > div:last-child, .rz-accordion > div:last-child > div { + border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); +} +.rz-accordion > div:only-child { + border-radius: var(--rz-accordion-border-radius); +} +.rz-accordion:focus { + outline: var(--rz-outline-normal); +} +.rz-accordion:focus-visible { + outline: var(--rz-accordion-item-focus-outline); +} +.rz-accordion .rz-accordion-header { + background-color: var(--rz-accordion-item-background-color); + margin: var(--rz-accordion-item-margin); +} +.rz-accordion .rz-accordion-header:not(:first-child) { + border-top: var(--rz-accordion-item-border); +} +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); + color: var(--rz-accordion-item-color); + line-height: var(--rz-accordion-item-line-height); + text-decoration: none; + display: flex; + align-items: center; + font-size: var(--rz-accordion-item-font-size); + font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; +} +.rz-accordion .rz-accordion-header > a:hover { + color: var(--rz-accordion-hover-color); +} +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { + flex-grow: 1; +} +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { + outline: var(--rz-accordion-item-focus-outline); + outline-offset: var(--rz-accordion-item-focus-outline-offset); +} +.rz-accordion .rz-accordion-header .rzi { + font-size: var(--rz-accordion-icon-font-size); + margin-inline: var(--rz-accordion-icon-margin-inline); +} + +.rz-accordion-toggle-icon { + width: var(--rz-accordion-icon-width); + height: var(--rz-accordion-icon-height); + font-size: var(--rz-accordion-icon-font-size); + order: var(--rz-accordion-toggle-icon-order); +} +.rz-accordion-toggle-icon.rzi { + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); +} +.rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "keyboard_arrow_down"; +} +.rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "keyboard_arrow_up"; +} + +.rz-accordion-content-wrapper-overflown { + overflow: hidden; +} + +.rz-accordion-content { + font-size: var(--rz-accordion-content-font-size); + background-color: var(--rz-accordion-item-background-color); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); +} + +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "keyboard_arrow_down"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "keyboard_arrow_up"; +} + +.rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); + background: var(--rz-panel-background-color); + border-radius: var(--rz-panel-border-radius); + box-shadow: var(--rz-panel-shadow); +} + +.rz-panel-titlebar { + display: flex; + justify-content: space-between; +} + +.rz-panel-content { + margin: var(--rz-panel-content-margin); +} + +.rz-panel-content-wrapper[aria-hidden=true] { + display: none; +} + +.rz-panel-title { + line-height: var(--rz-panel-title-line-height); + font-weight: var(--rz-panel-title-font-weight); +} + +.rz-panel-titlebar-toggler { + width: var(--rz-panel-toggle-icon-width); + height: var(--rz-panel-toggle-icon-height); + font-size: var(--rz-panel-toggle-icon-font-size); + border-radius: var(--rz-panel-toggle-icon-border-radius); + background-color: var(--rz-panel-toggle-icon-background-color); + color: inherit; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} +.rz-panel-titlebar-toggler:hover { + text-decoration: none; + color: var(--rz-panel-hover-color); +} +.rz-panel-titlebar-toggler:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-titlebar-toggler:focus-visible { + outline: var(--rz-panel-toggle-icon-focus-outline); + outline-offset: var(--rz-panel-toggle-icon-focus-outline-offset); +} +.rz-panel-titlebar-toggler .rzi-minus:before { + content: "remove"; +} +.rz-panel-titlebar-toggler .rzi-plus:before { + content: "add"; +} + +.rz-sidebar-toggle { + appearance: none; + cursor: pointer; + border: none; + padding: var(--rz-sidebar-toggle-padding); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); + background-color: var(--rz-sidebar-toggle-background-color); + color: var(--rz-sidebar-toggle-color); +} +.rz-justify-content-flex-end .rz-sidebar-toggle { + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; +} +.rz-sidebar-toggle:focus { + outline: none; +} +.rz-sidebar-toggle:focus-visible { + outline: var(--rz-sidebar-toggle-focus-outline); + outline-offset: var(--rz-sidebar-toggle-focus-outline-offset); +} +.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover { + color: var(--rz-sidebar-toggle-hover-color); + background: var(--rz-sidebar-toggle-hover-background-color); + border-radius: var(--rz-sidebar-toggle-hover-border-radius); +} +.rz-sidebar-toggle .rzi { + width: var(--rz-sidebar-toggle-icon-width); + height: var(--rz-sidebar-toggle-icon-height); + font-size: var(--rz-sidebar-toggle-icon-width); +} + +.rz-navigation-item-link { + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.rz-navigation-item-link:hover { + text-decoration: none; +} + +.rz-navigation-item-text { + flex: auto; +} + +.rz-context-menu { + box-sizing: border-box; +} +.rz-context-menu .rz-menu { + flex-direction: column; +} + +.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { + box-shadow: var(--rz-context-menu-box-shadow); + border: var(--rz-menu-border); + border-radius: var(--rz-menu-border-radius); +} + +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + align-items: stretch; + background-color: var(--rz-menu-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + background-color: var(--rz-menu-top-item-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-top-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-top-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-top-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu):focus { + outline: var(--rz-outline-normal); +} +.rz-menu:not(.rz-profile-menu):focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-menu-item-focus-outline); + outline-offset: var(--rz-menu-item-focus-outline-offset); +} +.rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-end: -2px; + height: 1px; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: var(--rz-menu-top-item-selected-color); + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item { + position: relative; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + margin: 0; + min-width: 100%; + box-shadow: var(--rz-context-menu-box-shadow); + z-index: 3; + border-radius: var(--rz-menu-border-radius); + background-color: var(--rz-menu-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu { + position: static; + box-shadow: none; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + margin-inline-start: var(--rz-menu-item-offset); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); +} +.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { + margin-inline: var(--rz-menu-item-icon-margin-inline); +} + +.rz-navigation-item-wrapper, +.rz-navigation-item-link, +.rz-navigation-item-text { + transition: var(--rz-menu-item-transition); +} + +li.rz-navigation-item.rz-state-disabled { + opacity: var(--rz-menu-item-disabled-opacity); + cursor: initial; + pointer-events: none; +} + +.rz-menu-toggle-item { + display: none; + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); + justify-content: end; + align-items: center; + width: 100%; + height: 100%; +} + +.rz-menu-toggle { + appearance: none; + background-color: transparent; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: var(--rz-menu-top-item-color); +} +.rz-menu-toggle:hover { + background-color: transparent; + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu-toggle:active { + background-color: transparent; + color: var(--rz-menu-top-item-color); +} +.rz-context-menu .rz-menu-toggle { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu-toggle:hover { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu-toggle:active { + color: var(--rz-menu-item-color); +} + +@media (max-width: 768px) { + .rz-menu:not(.rz-profile-menu).rz-menu-closed .rz-navigation-item { + display: none; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle .rzi { + margin: 0; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open { + display: block; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-item { + background-color: inherit; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-menu { + position: static; + box-shadow: none; + border-radius: 0; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item { + display: flex; + } + .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active:before { + display: none !important; + } +} +.rz-panel-menu { + box-sizing: border-box; + list-style: none; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; + overflow: auto; + font-size: var(--rz-panel-menu-font-size); + font-weight: var(--rz-panel-menu-font-weight); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ +} +.rz-panel-menu:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-panel-menu-focus-outline); + outline-offset: var(--rz-panel-menu-focus-outline-offset); +} +.rz-panel-menu > .rz-navigation-item { + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); +} +.rz-panel-menu .rz-navigation-item { + border-block-end: var(--rz-panel-menu-item-border); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper { + position: relative; + line-height: var(--rz-panel-menu-item-line-height); + transition: var(--rz-panel-menu-item-transition); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-active-background-color); + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-active:before, +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-start: 0; + inset-block-end: 0; + width: 4px; + background-color: var(--rz-panel-menu-item-active-indicator); +} +.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); + color: inherit; + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu a.rz-navigation-item-link { + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu .rz-navigation-item-text { + flex: auto; +} +.rz-panel-menu .rz-navigation-item-icon-children { + margin-inline-start: auto; + font-size: var(--rz-panel-menu-toggle-icon-font-size); + opacity: var(--rz-panel-menu-toggle-icon-opacity); + z-index: 1; +} +.rz-panel-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-height); + width: var(--rz-panel-menu-icon-width); + color: var(--rz-panel-menu-icon-color); + margin-inline: var(--rz-panel-menu-icon-margin-inline); + font-size: var(--rz-panel-menu-icon-font-size); + transition: var(--rz-panel-menu-item-transition); +} +.rz-panel-menu .rz-navigation-menu { + list-style: none; + padding: 0; + margin-block-end: 0; + overflow: hidden; + /* Third level items */ +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); + border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color); + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-2nd-level-active-background-color); + color: var(--rz-panel-menu-item-2nd-level-active-color); + font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-active-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-2nd-level-icon-size); + width: var(--rz-panel-menu-icon-2nd-level-icon-size); + font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu { + margin: 0; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); + color: var(--rz-panel-menu-item-3rd-level-active-color); +} + +ul.rz-profile-menu { + box-sizing: border-box; + list-style: none; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); + display: inline-block; + background-color: var(--rz-profile-menu-top-item-background-color); + border-inline-start: var(--rz-profile-menu-border); + position: relative; + z-index: 3; +} +ul.rz-profile-menu:focus { + outline: var(--rz-outline-normal); +} +ul.rz-profile-menu:focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +ul.rz-profile-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-profile-menu-item-focus-outline); + outline-offset: var(--rz-profile-menu-item-focus-outline-offset); +} +ul.rz-profile-menu .rz-navigation-item-icon-children { + color: var(--rz-profile-menu-toggle-button-color); +} +ul.rz-profile-menu .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + border-radius: var(--rz-profile-menu-border-radius); + background-color: var(--rz-profile-menu-background-color); + box-shadow: var(--rz-context-menu-box-shadow); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; + min-width: 100%; + white-space: nowrap; +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-profile-menu-item-hover-background-color); + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link, +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text { + color: var(--rz-menu-item-color); +} +ul.rz-profile-menu .rz-navigation-menu .rzi { + width: var(--rz-profile-menu-item-icon-width); + height: var(--rz-profile-menu-item-icon-height); + font-size: var(--rz-profile-menu-item-icon-font-size); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); +} + +.rz-gravatar { + box-sizing: border-box; + width: var(--rz-gravatar-width); + height: var(--rz-gravatar-height); + display: inline-block; + border-radius: var(--rz-gravatar-border-radius); + box-shadow: var(--rz-gravatar-box-shadow); +} + +.rz-steps { + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.rz-steps .rz-widget-content { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.rz-steps ul { + list-style: none; + padding: 0; +} +.rz-steps .rz-menuitem-link { + display: inline-flex; + align-items: center; + color: var(--rz-steps-color); + cursor: pointer; + text-decoration: none; +} +.rz-steps .rz-menuitem-link:hover { + text-decoration: none; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps .rz-state-disabled .rz-menuitem-link { + color: var(--rz-text-disabled-color); + cursor: default; +} +.rz-steps .rz-state-disabled .rz-menuitem-link:hover { + color: var(--rz-text-disabled-color) !important; +} +.rz-steps .rz-state-highlight .rz-steps-title { + color: var(--rz-steps-title-selected-color); +} +.rz-steps .rz-state-highlight .rz-steps-number { + background: var(--rz-steps-number-selected-background); + color: var(--rz-steps-number-selected-color); +} + +.rz-steps-item { + display: inline-block; +} +.rz-steps-item:focus { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible .rz-steps-number { + outline: var(--rz-steps-number-focus-outline); + outline-offset: var(--rz-steps-number-focus-outline-offset); +} + +.rz-steps-title { + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); +} + +.rz-steps-number { + text-align: center; + line-height: var(--rz-steps-number-line-height); + color: var(--rz-steps-number-color); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); + width: var(--rz-steps-number-width); + height: var(--rz-steps-number-height); + background-color: var(--rz-steps-number-background-color); + border-radius: var(--rz-steps-number-border-radius); +} + +.rz-steps-buttons { + display: flex; + justify-content: space-between; + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); +} + +.rz-steps-next, +.rz-steps-prev { + display: inline-flex; + align-items: center; + color: var(--rz-steps-button-color) !important; + text-decoration: none; +} +.rz-steps-next:not(.rz-state-disabled):hover, +.rz-steps-prev:not(.rz-state-disabled):hover { + cursor: pointer; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps-next:hover, +.rz-steps-prev:hover { + text-decoration: none; +} +.rz-steps-next.rz-state-disabled, +.rz-steps-prev.rz-state-disabled { + opacity: 0.5 !important; +} + +.rz-steps-prev .rzi:before { + content: "navigate_before"; +} + +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; +} + +.rz-checkbox-list-vertical { + box-sizing: border-box; +} +.rz-checkbox-list-vertical .rz-checkbox { + display: flex; + align-items: center; + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); + cursor: pointer; +} + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} +.rz-checkbox-list-horizontal .rz-checkbox { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-checkbox { + cursor: initial; +} + +.rz-chkbox-label, +.rz-chkbox-template { + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); +} + +.rz-chkbox { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + width: var(--rz-checkbox-width); + min-width: var(--rz-checkbox-width); + height: var(--rz-checkbox-height); +} +.rz-chkbox:focus { + outline: var(--rz-outline-normal); +} +.rz-chkbox:focus-visible .rz-chkbox-box { + outline: var(--rz-checkbox-focus-outline); + outline-offset: var(--rz-checkbox-focus-outline-offset); +} + +.rz-chkbox-box { + position: absolute; + cursor: pointer; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: var(--rz-input-border); + border-width: var(--rz-checkbox-border-width); + border-radius: var(--rz-checkbox-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-chkbox-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-checkbox-border-width); +} +.rz-chkbox-box.rz-state-disabled { + cursor: initial; + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-checkbox-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-chkbox-box .rzi { + width: var(--rz-checkbox-icon-width); + height: var(--rz-checkbox-icon-height); + font-size: var(--rz-checkbox-icon-font-size); + color: var(--rz-checkbox-checked-color); + vertical-align: middle; + background-color: var(--rz-checkbox-checked-icon-background-color); + border-radius: var(--rz-checkbox-checked-icon-border-radius); +} +.rz-chkbox-box .rzi-check:before { + content: "check"; +} +.rz-chkbox-box .rzi-times { + width: var(--rz-checkbox-tri-icon-width); + height: var(--rz-checkbox-tri-icon-height); + font-size: var(--rz-checkbox-tri-icon-font-size); +} +.rz-chkbox-box .rzi-times:before { + content: "remove"; +} +.rz-chkbox-box.rz-state-active { + background-color: var(--rz-checkbox-checked-background-color); + border: var(--rz-checkbox-checked-border); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-checkbox-checked-hover-background-color); + border: var(--rz-checkbox-checked-hover-border); +} +.rz-chkbox-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-checkbox-checked-disabled-background-color); + border: var(--rz-checkbox-checked-disabled-border); + opacity: 0.5; +} + +.rz-switch { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + width: 2.25rem; + min-width: 2.25rem; + height: 0.875rem; + border-radius: calc(5 * var(--rz-border-radius)); +} +.rz-switch:focus { + outline: var(--rz-outline-normal); +} +.rz-switch:focus-visible { + outline: var(--rz-switch-focus-outline); + outline-offset: var(--rz-switch-focus-outline-offset); +} + +.rz-switch-circle { + position: absolute; + cursor: pointer; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; +} + +.rz-switch-circle.rz-disabled { + opacity: 0.5; + cursor: initial; +} + +.rz-switch .rz-switch-circle { + background: var(--rz-switch-background-color); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: calc(5 * var(--rz-border-radius)); +} + +.rz-switch.rz-switch-checked .rz-switch-circle { + background: var(--rz-switch-checked-background-color); +} + +.rz-switch .rz-switch-circle:before { + background: var(--rz-switch-circle-background-color); + width: 1.25rem; + height: 1.25rem; + inset-inline-start: 0; + margin-block-start: -0.625rem; + border-radius: calc(5 * var(--rz-border-radius) - 3px); + transition: transform 0.2s linear; + box-shadow: var(--rz-switch-box-shadow); +} + +.rz-switch-circle:before { + position: absolute; + content: ""; + inset-block-start: 50%; +} + +.rz-switch-circle.rz-disabled:before { + box-shadow: none; +} + +.rz-switch.rz-switch-checked .rz-switch-circle:before { + background: var(--rz-switch-checked-circle-background-color); + transform: translateX(1rem); +} + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1rem); +} + +.rz-radio-button-list-vertical { + box-sizing: border-box; +} +.rz-radio-button-list-vertical .rz-radio-btn { + display: flex; + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); + align-items: center; +} + +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} +.rz-radio-button-list-horizontal .rz-radio-btn { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-radiobutton { + cursor: initial; +} + +.rz-radiobutton-label, +.rz-radiobutton-template { + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); +} + +.rz-radiobutton { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + width: var(--rz-radio-width); + height: var(--rz-radio-height); + border-radius: var(--rz-radio-border-radius); +} +.rz-radiobutton:focus { + outline: var(--rz-outline-normal); +} +.rz-radiobutton:focus-visible { + outline: var(--rz-radio-focus-outline); + outline-offset: var(--rz-radio-focus-outline-offset); +} + +.rz-radiobutton-box { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + width: inherit; + border: var(--rz-input-border); + border-width: var(--rz-radio-border-width); + border-radius: var(--rz-radio-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box:active:not(.rz-state-disabled) { + background-color: var(--rz-radio-active-background-color); + box-shadow: var(--rz-radio-active-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-disabled { + cursor: initial; + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-radio-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-radiobutton-box .rzi { + width: var(--rz-radio-icon-width); + height: var(--rz-radio-icon-height); + color: var(--rz-radio-checked-color); +} +.rz-radiobutton-box .rzi-circle-on { + border-radius: var(--rz-radio-border-radius); + vertical-align: middle; + background-color: var(--rz-radio-circle-background-color); + box-shadow: var(--rz-radio-circle-shadow); +} +.rz-radiobutton-box .rzi-circle-on:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-circle-hover-background-color); +} +.rz-radiobutton-box.rz-state-active { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-checked-hover-background-color); + border: var(--rz-radio-checked-border); + box-shadow: var(--rz-radio-checked-hover-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); + opacity: 0.5; +} + +.rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; + border: var(--rz-fieldset-border); + border-radius: var(--rz-fieldset-border-radius); +} + +.rz-fieldset-content { + padding: var(--rz-fieldset-padding); +} + +.rz-fieldset-content-wrapper { + overflow: hidden; +} + +.rz-fieldset-legend-text { + vertical-align: middle; +} + +.rz-fieldset-toggler { + vertical-align: middle; + width: var(--rz-fieldset-toggle-width); + height: var(--rz-fieldset-toggle-height); + background-color: var(--rz-fieldset-toggle-background-color); + color: var(--rz-fieldset-toggle-color); + border: var(--rz-fieldset-toggle-border); +} +.rz-fieldset-toggler.rzi { + text-align: center; + font-size: var(--rz-fieldset-toggle-font-size); + line-height: var(--rz-fieldset-toggle-height); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); +} +.rz-fieldset-toggler.rzi-minus:before { + content: "remove"; +} +.rz-fieldset-toggler.rzi-plus:before { + content: "add"; +} +a:focus .rz-fieldset-toggler { + outline: var(--rz-outline-normal); +} +a:focus-visible .rz-fieldset-toggler { + outline: var(--rz-fieldset-toggle-focus-outline); + outline-offset: var(--rz-fieldset-toggle-focus-outline-offset); +} + +.rz-fieldset-legend { + float: none; + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); + width: auto; + color: var(--rz-fieldset-legend-color); + font-size: var(--rz-fieldset-legend-font-size); +} +.rz-fieldset-legend a { + display: inline-flex; + align-items: center; + color: inherit; + text-decoration: none; +} +.rz-fieldset-legend a:focus { + outline: var(--rz-outline-normal); +} + +.rz-multiselect, .rz-dropdown { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + position: relative; + overflow: hidden; + text-align: start; +} +.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-dropdown.rz-dropdown-open { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect.rz-state-focus { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect-trigger, .rz-dropdown-trigger { + position: absolute; + display: flex; + align-items: center; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; +} +.rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { + width: var(--rz-dropdown-trigger-icon-width); + height: var(--rz-dropdown-trigger-icon-height); + font-size: var(--rz-dropdown-trigger-icon-height); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); +} +.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-dropdown-clear-icon { + position: absolute; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; + height: 100%; + display: flex; + align-items: center; + font-size: var(--rz-dropdown-trigger-icon-height); + opacity: 0.4; +} +.rz-dropdown-clear-icon:before { + content: "close"; +} +.rz-dropdown-clear-icon:hover { + opacity: 1; +} +.rz-state-disabled > .rz-dropdown-clear-icon { + display: none; +} + +.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel { + position: absolute; + background-color: var(--rz-dropdown-open-background-color); + border-radius: var(--rz-input-border-radius); + border: var(--rz-dropdown-panel-border); + box-shadow: var(--rz-dropdown-panel-shadow); +} + +.rz-dropdown-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} + +.rz-multiselect-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} +.rz-multiselect-panel .rz-chkbox { + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); +} + +.rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { + list-style: none; + padding: var(--rz-dropdown-items-padding); + margin: 0; +} +.rz-autocomplete-items li, .rz-multiselect-items li, .rz-dropdown-items li { + /* The 'No results found' item has no CSS class */ +} + +.rz-dropdown-items-wrapper, +.rz-multiselect-items-wrapper { + overflow: auto; + margin: var(--rz-dropdown-items-margin); + border-radius: var(--rz-input-border-radius); +} + +.rz-multiselect-items-wrapper { + overflow: auto; +} + +.rz-dropdown-filter-container { + padding: var(--rz-dropdown-filter-padding); + border-bottom: var(--rz-dropdown-filter-border); +} + +.rz-multiselect-filter-container .rz-inputtext, .rz-dropdown-filter { + background-color: transparent; + color: var(--rz-text-color); +} + +.rz-multiselect-header { + display: flex; + align-items: center; + padding: var(--rz-dropdown-item-padding); + margin: var(--rz-dropdown-items-margin); +} + +.rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-autocomplete-items li, .rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item { + padding: var(--rz-dropdown-item-padding); + transition: var(--rz-dropdown-item-transition); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover, .rz-dropdown-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-state-disabled.rz-menuitem, .rz-state-disabled.rz-autocomplete-list-item, .rz-state-disabled.rz-multiselect-item, .rz-autocomplete-items li.rz-state-disabled, .rz-dropdown-items li.rz-state-disabled, .rz-multiselect-items li.rz-state-disabled, .rz-dropdown-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} +.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} + +.rz-multiselect-close { + display: none; +} + +.rz-multiselect-filter-container { + flex: auto; + border-bottom: var(--rz-dropdown-filter-border); +} +.rz-multiselect-filter-container .rz-inputtext { + padding: 0; +} + +.rz-multiselect-item { + display: flex; + align-items: center; +} + +.rz-multiselect-item-content { + flex: 1; +} + +.rz-multiselect-label-container, +.rz-dropdown-label { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); + margin: 0; +} + +.rz-dropdown-chips { + height: inherit; + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); +} +.rz-dropdown-chips .rz-dropdown-chips-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-inline-end: 3rem; +} +.rz-dropdown-chips .rz-chip { + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: var(--rz-chip-gap); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); + color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); + border-radius: var(--rz-chip-border-radius); +} +.rz-dropdown-chips .rz-chip .rz-chip-text { + font-size: var(--rz-chip-font-size); +} +.rz-dropdown-chips .rz-chip .rz-button { + border-radius: var(--rz-chip-border-radius); + box-shadow: none; + align-self: stretch; +} +.rz-dropdown-chips .rz-chip .rzi { + vertical-align: middle; + font-size: 1rem; +} + +.rz-clear .rz-multiselect-label-container, +.rz-clear .rz-dropdown-label { + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); +} + +.rz-autocomplete { + box-sizing: border-box; + display: inline-block; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + background-color: var(--rz-input-background-color); + transition: var(--rz-input-transition); + overflow: hidden; +} +.rz-autocomplete-input { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + background-color: transparent; + color: var(--rz-input-value-color); + box-shadow: var(--rz-input-shadow); + border: none; + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + width: 100%; + transition: var(--rz-input-transition); +} +.rz-autocomplete-input:focus { + outline: none; +} +.rz-autocomplete-input:disabled { + border: none; +} + +.rz-autocomplete-panel { + overflow: auto; + box-sizing: content-box; +} + +.rz-listbox { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + overflow: hidden; + background-color: var(--rz-listbox-background-color); + border: var(--rz-listbox-border); + border-radius: var(--rz-listbox-border-radius); + text-align: start; +} +.rz-listbox .rz-chkbox { + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); +} +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-listbox:focus, .rz-listbox:focus-within { + outline: var(--rz-outline-normal); + border: var(--rz-listbox-focus-border); + box-shadow: var(--rz-listbox-focus-shadow); +} + +.rz-listbox-list { + margin: 0; + padding: 0; +} + +.rz-listbox-item { + cursor: default; + padding: var(--rz-listbox-item-padding); + margin: var(--rz-listbox-item-margin); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-listbox-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-listbox-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-listbox-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} + +.rz-listbox-header { + display: flex; + align-items: center; + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); + border-bottom: var(--rz-listbox-filter-border); +} + +.rz-listbox-list-wrapper { + flex: auto; + overflow: auto; + padding: var(--rz-listbox-padding); +} + +.rz-listbox-filter-container, .rz-dropdown-filter-container, .rz-multiselect-filter-container { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.rz-listbox-filter-container .rz-inputtext, .rz-dropdown-filter-container .rz-inputtext, .rz-multiselect-filter-container .rz-inputtext { + flex: auto; + width: 0; + border: none; + line-height: var(--rz-input-line-height); +} +.rz-listbox-filter-container .rz-inputtext:focus, .rz-dropdown-filter-container .rz-inputtext:focus, .rz-multiselect-filter-container .rz-inputtext:focus { + outline: none; +} +.rz-listbox-filter-container .rzi-search, .rz-dropdown-filter-container .rzi-search, .rz-multiselect-filter-container .rzi-search { + width: var(--rz-listbox-header-icon-width); + height: var(--rz-listbox-header-icon-height); + line-height: var(--rz-listbox-header-icon-height); + font-size: var(--rz-listbox-header-icon-height); +} +.rz-listbox-filter-container .rzi-search:before, .rz-dropdown-filter-container .rzi-search:before, .rz-multiselect-filter-container .rzi-search:before { + content: "search"; +} + +.rz-listbox-filter-container { + flex: auto; +} +.rz-listbox-filter-container .rz-inputtext { + background-color: transparent; +} + +.rz-splitbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { + display: none; +} +.rz-splitbutton .rz-button.rz-splitbutton-menubutton { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { + flex: auto; + overflow: hidden; + text-overflow: ellipsis; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.rz-splitbutton-menu { + display: none; + position: absolute; + min-width: var(--rz-splitbutton-menu-min-width); + box-shadow: var(--rz-splitbutton-menu-shadow); +} + +.rz-menu-list { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-menuitem .rz-menuitem-link { + color: inherit; + display: block; + text-decoration: none; +} +.rz-menuitem .rz-menuitem-link:hover { + text-decoration: none; +} +.rz-menuitem .rz-menuitem-icon { + vertical-align: top; +} + +.rz-splitbutton-menubutton { + margin-inline-start: 1px; +} +.rz-splitbutton-menubutton.rz-variant-outlined { + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); +} +.rz-splitbutton-menubutton .rz-button-text { + display: none; +} +.rz-splitbutton-menubutton .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-slider { + box-sizing: border-box; + position: relative; + display: inline-block; + border: var(--rz-slider-border); + border-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-background-color); +} +.rz-slider.rz-state-disabled { + background-color: var(--rz-slider-disabled-background-color); + border: var(--rz-slider-disabled-border); +} +.rz-slider.rz-state-disabled .rz-slider-range { + background-color: var(--rz-slider-disabled-range-background-color); + border: var(--rz-slider-disabled-range-border); +} +.rz-slider.rz-state-disabled .rz-slider-handle { + background-color: var(--rz-slider-disabled-handle-background-color); + border: var(--rz-slider-disabled-handle-border); +} + +.rz-slider-horizontal { + height: var(--rz-slider-horizontal-height); + width: var(--rz-slider-horizontal-width); +} + +.rz-slider-range { + position: absolute; + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-range-background-color); + border: var(--rz-slider-range-border); +} + +.rz-slider-handle { + position: absolute; + transform: translateY(-50%); + top: 50%; + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); + background-color: var(--rz-slider-handle-background-color); + border: var(--rz-slider-handle-border); + border-radius: var(--rz-slider-handle-border-radius); + box-shadow: var(--rz-slider-handle-shadow); + width: var(--rz-slider-handle-width); + height: var(--rz-slider-handle-height); + transition: var(--rz-slider-handle-transition); +} + +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active { + background-color: var(--rz-slider-handle-hover-background-color); + box-shadow: var(--rz-slider-handle-hover-shadow); + border: var(--rz-slider-handle-hover-border); + cursor: pointer; + outline: none; +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus { + outline: var(--rz-outline-normal); +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus-visible { + outline: var(--rz-slider-handle-focus-outline); + outline-offset: var(--rz-slider-handle-focus-outline-offset); +} + +.rz-rating { + box-sizing: border-box; + display: inline-flex; + font-size: var(--rz-rating-font-size); + height: 1em; +} +.rz-rating.rz-state-disabled .rzi { + opacity: var(--rz-rating-disabled-opacity); + color: var(--rz-rating-disabled-color); +} +.rz-rating a { + width: 1em; + height: 1em; + text-decoration: none; + cursor: default; + outline: none; +} +.rz-rating .rzi { + color: var(--rz-rating-color); + font-size: 1em; +} +.rz-rating .rzi-ban { + color: var(--rz-rating-ban-icon-color); +} +.rz-rating .rzi-ban:before { + content: "highlight_off"; +} +.rz-rating .rzi-star-o { + opacity: var(--rz-rating-opacity); +} +.rz-rating .rzi-star-o:before { + content: "star_border"; +} +.rz-rating .rzi-star { + color: var(--rz-rating-selected-color); +} +.rz-rating .rzi-star:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover { + cursor: pointer; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-ban { + color: var(--rz-rating-selected-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-ban { + color: var(--rz-rating-focus-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o:before { + content: "star"; +} + +.rz-security-code { + box-sizing: border-box; + display: inline-flex; +} + +.rz-security-code-wrapper { + flex: 1; + --rz-gap: 0.5rem; +} + +.rz-security-code-input { + text-align: center; + min-width: var(--rz-security-code-input-min-width); + min-height: var(--rz-security-code-input-min-height); + width: 100%; + height: 100%; + padding: var(--rz-security-code-input-padding); + font-size: var(--rz-security-code-input-font-size); + font-weight: var(--rz-security-code-input-font-weight); + line-height: var(--rz-security-code-input-line-height); +} + +.rz-selectbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-selectbutton .rz-button:focus-visible { + z-index: 1; +} + +.rz-selectbutton .rz-button.rz-button-xs { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-xs:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-sm { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { + display: inline-block; + position: relative; +} +.rz-datepicker .rz-readonly { + cursor: pointer; +} +.rz-datepicker > .rz-inputtext { + width: 100%; + line-height: var(--rz-datepicker-line-height); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); +} +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { + box-shadow: none; + color: var(--rz-datepicker-trigger-icon-hover-color); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} + +.rz-datepicker-inline { + background-color: var(--rz-datepicker-panel-background-color); + border: var(--rz-input-border); +} + +.rz-datepicker-trigger { + box-shadow: none; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 0.625rem; + transform: translateY(-50%); + background-color: transparent; + padding: 0; + vertical-align: text-top; + color: var(--rz-datepicker-trigger-icon-color); + width: var(--rz-datepicker-trigger-icon-width); + height: var(--rz-datepicker-trigger-icon-height); + font-size: var(--rz-datepicker-trigger-icon-height); +} +.rz-datepicker-trigger.rz-state-disabled { + border: none; + box-shadow: none; + cursor: initial; + opacity: 1; + color: var(--rz-input-disabled-color); +} +.rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active), .rz-datepicker-trigger:not(.rz-state-disabled):hover:active { + background-color: transparent; +} +.rz-datepicker-trigger:not(.rz-state-disabled):active { + box-shadow: none !important; + background-image: none !important; +} +.rz-datepicker-trigger .rzi-calendar, +.rz-datepicker-trigger .rzi-time { + font-size: inherit; + vertical-align: top; +} +.rz-datepicker-trigger .rzi-calendar:before { + content: "calendar_today"; +} +.rz-datepicker-trigger .rzi-time:before { + content: "schedule"; +} +.rz-datepicker-trigger .rz-button-text { + display: none; +} + +.rz-datepicker-popup-container { + box-sizing: content-box; + position: absolute; + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); + box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); +} + +.rz-datepicker-inline-container { + position: static; + white-space: nowrap; +} +.rz-datepicker-inline-container .rz-calendar { + display: inline-block; +} + +.rz-datepicker-footer { + position: relative; + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--rz-datepicker-header-background-color); + border-bottom: var(--rz-datepicker-header-border); + color: var(--rz-datepicker-header-color); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); +} + +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); +} +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { + color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); +} +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); +} + +.rz-calendar-prev { + order: 1; +} +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { + content: "chevron_right"; +} + +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { + outline: var(--rz-outline-normal); +} +.rz-calendar-view-container:focus-visible { + outline: var(--rz-datepicker-focus-outline); + outline-offset: var(--rz-datepicker-focus-outline-offset); +} + +.rz-calendar-view { + table-layout: fixed; + border-collapse: collapse; +} +.rz-calendar-view th { + font-weight: normal; + font-size: var(--rz-datepicker-calendar-header-font-size); + text-transform: var(--rz-datepicker-calendar-header-text-transform); + color: var(--rz-datepicker-calendar-header-color); + padding: var(--rz-datepicker-calendar-item-padding); + text-align: center; +} +.rz-calendar-view td { + text-align: center; + border-top: var(--rz-datepicker-calendar-border); + padding: 0; +} +.rz-calendar-view td .rz-state-default { + display: block; + padding: var(--rz-datepicker-calendar-item-padding); + color: var(--rz-datepicker-calendar-color); + font-size: var(--rz-datepicker-calendar-font-size); + border-radius: var(--rz-datepicker-calendar-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-calendar-view td .rz-state-default.rz-calendar-today { + color: var(--rz-datepicker-calendar-today-color); + background-color: var(--rz-datepicker-calendar-today-background-color); + box-shadow: var(--rz-datepicker-calendar-today-box-shadow); + border-radius: var(--rz-datepicker-calendar-today-border-radius); +} +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { + text-decoration: none; + color: var(--rz-datepicker-calendar-hover-color); + background-color: var(--rz-datepicker-calendar-hover-background-color); + cursor: pointer; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { + color: var(--rz-datepicker-calendar-selected-color); + background-color: var(--rz-datepicker-calendar-selected-background-color); + padding: var(--rz-datepicker-calendar-item-padding); + box-shadow: none; +} +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { + color: var(--rz-datepicker-calendar-selected-hover-color); + background-color: var(--rz-datepicker-calendar-selected-hover-background-color); +} +.rz-calendar-view .rz-state-disabled { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-other-month { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-week-number { + opacity: 0.5; +} + +/* Time Picker Styles */ +.rz-timepicker { + display: flex; + align-items: center; + justify-content: center; + gap: var(--rz-timepicker-gap); + border-top: var(--rz-datepicker-calendar-border); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); + color: var(--rz-timepicker-color); +} +.rz-timepicker .rzi-chevron-up:before { + content: "expand_less"; +} +.rz-timepicker .rzi-chevron-down:before { + content: "expand_more"; +} +.rz-timepicker .rz-separator { + color: var(--rz-timepicker-separator-color); +} +.rz-timepicker .rz-separator a { + display: none; +} +.rz-timepicker .rz-button-md { + padding: var(--rz-timepicker-button-padding); + text-transform: uppercase; +} + +.rz-hour-picker, +.rz-minute-picker, +.rz-second-picker { + background-color: var(--rz-timepicker-background-color); + width: 4rem; +} + +.rz-ampm-picker a { + text-decoration: none; +} + +.rz-numeric { + display: inline-block; + position: relative; + padding: 0px; +} +.rz-numeric input[type=number], +.rz-numeric input[type=text] { + -moz-appearance: textfield; + width: 100%; + height: 100%; + border: none; + background-color: transparent; + line-height: var(--rz-numeric-line-height); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); + outline: none; +} +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.rz-numeric.rz-state-disabled .rz-numeric-button { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); +} +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); + background-image: none; + box-shadow: none; + cursor: initial; +} + +.rz-numeric-button { + position: absolute; + inset-inline-end: var(--rz-numeric-button-offset); + padding: 0; + width: var(--rz-numeric-button-width); + height: var(--rz-numeric-button-height); + border-radius: var(--rz-numeric-button-border-radius); + background-color: var(--rz-numeric-button-background-color); + color: var(--rz-numeric-button-color); +} +.rz-numeric-button:hover { + background-color: var(--rz-numeric-button-background-color); +} +.rz-numeric-button .rzi { + font-size: var(--rz-numeric-button-height); + vertical-align: top; +} +.rz-numeric-button .rzi-caret-up:before { + content: "expand_less"; +} +.rz-numeric-button .rzi-caret-down:before { + content: "expand_more"; +} + +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); +} + +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); +} + +.rz-fileupload { + box-sizing: border-box; + display: inline-block; +} +.rz-fileupload .rz-button { + vertical-align: middle; + -webkit-appearance: none !important; +} + +.rz-fileupload-choose { + position: relative; + display: inline-block; + overflow: hidden; + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose input[type=file] { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + min-height: 100%; + cursor: pointer; +} +.rz-fileupload-choose.rz-state-disabled input[type=file] { + cursor: default; +} +.rz-fileupload-choose:not(.rz-state-disabled) { + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):active { + background-color: var(--rz-upload-choose-active-background-color); + color: var(--rz-upload-choose-active-color); +} + +.rz-fileupload-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.rz-fileupload-row > div { + margin: var(--rz-upload-files-margin); +} +.rz-fileupload-row .rz-button-text { + display: none; +} +.rz-fileupload-row .rz-button { + background-color: var(--rz-upload-files-remove-background-color); + color: var(--rz-upload-files-remove-color); +} +.rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash { + display: block; +} +.rz-fileupload-row .rz-button .rzi-close:before, +.rz-fileupload-row .rz-button .rzi-times:before, +.rz-fileupload-row .rz-button .rz-icon-trash:before { + content: "close"; +} + +.rz-fileupload-buttonbar { + position: relative; + background-color: var(--rz-upload-button-bar-background-color); + padding: var(--rz-upload-button-bar-padding); + border-radius: var(--rz-upload-button-bar-border-radius); +} +.rz-fileupload-buttonbar .rz-button:nth-child(3) { + float: right; + background-color: var(--rz-upload-cancel-background-color); + color: var(--rz-upload-cancel-color); +} + +.rz-fileupload-files { + background-color: var(--rz-upload-files-background-color); + padding: var(--rz-upload-files-padding); +} + +.rz-datatable { + position: relative; + box-shadow: var(--rz-grid-shadow); + border: var(--rz-grid-cell-border); + border-radius: var(--rz-grid-border-radius); + background-color: var(--rz-grid-background-color); + overflow: hidden; +} +.rz-datatable:focus { + outline: var(--rz-outline-normal); +} +.rz-datatable:focus-visible { + outline: var(--rz-grid-focus-outline); + outline-offset: var(--rz-grid-focus-outline-offset); +} +.rz-datatable .rz-col-icon { + text-align: center; + vertical-align: middle; + width: var(--rz-grid-column-icon-width); + padding: var(--rz-grid-column-icon-padding); +} +.rz-datatable .rzi-chevron-circle-right { + vertical-align: top; + /* Right-to-left arrow icons */ +} +.rz-datatable .rzi-chevron-circle-right:before { + content: "arrow_right"; +} +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} +.rz-datatable .rzi-chevron-circle-down { + vertical-align: top; +} +.rz-datatable .rzi-chevron-circle-down:before { + content: "arrow_drop_down"; +} +.rz-datatable.rz-has-template > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view > .rz-datatable-scrollable-body > .rz-datatable-scrollable-table-wrapper > table > .rz-datatable-scrollable-colgroup col:first-child { + width: var(--rz-grid-column-icon-width); +} + +.rz-unselectable-text { + user-select: none; +} + +.rz-datatable-tablewrapper > table, +.rz-datatable-scrollable-header-box > table, +.rz-datatable-scrollable-table-wrapper > table, +.rz-datatable-scrollable-footer-box > table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +.rz-resizable-column { + position: relative; +} + +.rz-datatable-reorder-indicator-up { + position: absolute; +} +.rz-datatable-reorder-indicator-up:before { + content: "arrow_drop_down"; +} + +.rz-datatable-reorder-indicator-down { + position: absolute; +} +.rz-datatable-reorder-indicator-down:before { + content: "arrow_drop_up"; +} + +.rz-column-resizer { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + cursor: col-resize; + width: var(--rz-grid-column-resizer-width); +} +.rz-column-resizer:after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + width: var(--rz-grid-column-resizer-helper-width); + background-color: transparent; +} +.rz-column-resizer:hover:after, .rz-column-resizer:active:after { + background-color: var(--rz-grid-column-resizer-helper-background-color); +} + +.rz-rowgroup-header .fa, +.rz-row-toggler { + color: var(--rz-grid-cell-color); +} + +.rz-datatable-scrollable-footer { + background-color: var(--rz-grid-header-background-color); + border-top: var(--rz-grid-cell-border); +} + +.rz-datatable-thead th, +.rz-grid-table thead th { + background-color: var(--rz-grid-header-background-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: inherit; + border-bottom: var(--rz-grid-header-cell-border-bottom); +} +.rz-datatable-thead th:not(:last-child), +.rz-grid-table thead th:not(:last-child) { + border-inline-end: var(--rz-grid-header-cell-border); +} +.rz-datatable-thead th > div:not(.rz-cell-filter), +.rz-grid-table thead th > div:not(.rz-cell-filter) { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + outline: none; + padding: var(--rz-grid-header-cell-padding); +} +.rz-datatable-thead th.rz-state-focused, +.rz-grid-table thead th.rz-state-focused { + outline: var(--rz-grid-cell-focus-outline); + outline-offset: var(--rz-grid-cell-focus-outline-offset); +} +.rz-datatable-thead th .rz-column-title, +.rz-grid-table thead th .rz-column-title { + display: inline-flex; + flex: auto; + align-items: center; + gap: 0.25rem; + width: 100%; + font-size: var(--rz-grid-header-font-size); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding-inline: var(--rz-grid-header-title-padding-inline); + font-weight: var(--rz-grid-header-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content, +.rz-grid-table thead th .rz-column-title-content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content:has(.rz-chkbox), +.rz-grid-table thead th .rz-column-title-content:has(.rz-chkbox) { + overflow: visible; +} +.rz-datatable-thead th.rz-text-align-center .rz-column-title, +.rz-grid-table thead th.rz-text-align-center .rz-column-title { + justify-content: center; + padding-inline-start: 0; +} +.rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th.rz-text-align-right .rz-column-title, +.rz-grid-table thead th.rz-text-align-right .rz-column-title { + justify-content: right; +} +.rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th .rz-column-drag + .rz-column-title, +.rz-grid-table thead th .rz-column-drag + .rz-column-title { + padding-inline-start: 0; +} + +.rz-datatable-tfoot td, .rz-grid-table tfoot td { + background-color: var(--rz-grid-foot-background-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + color: var(--rz-grid-foot-cell-color); + padding: var(--rz-grid-cell-padding); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} + +.rz-datatable-scrollable-header { + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-datatable-scrollable-body { + overflow: auto; + border-top: none; + flex: auto; + border-bottom-right-radius: var(--rz-border-radius); + border-bottom-left-radius: var(--rz-border-radius); +} + +.rz-has-pager .rz-datatable-scrollable-body { + border-radius: 0; +} + +.rz-sortable-column { + cursor: pointer; +} +.rz-sortable-column:focus { + outline: none; +} +.rz-sortable-column.rz-state-active { + background-color: var(--rz-grid-header-sorted-background-color); +} +.rz-sortable-column > div:hover .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { + color: var(--rz-grid-sort-icon-color); +} +.rz-sortable-column .rzi-grid-sort { + width: var(--rz-grid-sort-icon-width); + height: var(--rz-grid-sort-icon-height); + font-size: var(--rz-grid-sort-icon-height); + text-align: left; +} +.rz-sortable-column .rzi-sort { + color: transparent; +} +.rz-sortable-column .rzi-sort:before { + content: "sort"; +} +.rz-sortable-column .rzi-sort-asc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-asc:before { + content: "arrow_drop_up"; +} +.rz-sortable-column .rzi-sort-desc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-desc:before { + content: "arrow_drop_down"; +} + +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td { + background-color: var(--rz-grid-stripe-background-color); +} +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td { + background-color: var(--rz-grid-stripe-odd-background-color); +} + +.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th { + border-bottom: var(--rz-grid-header-cell-border); +} +.rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { + border-inline-end: var(--rz-grid-header-cell-border); +} + +.rz-datatable-data td, +.rz-grid-table td { + padding: var(--rz-grid-cell-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-data td:not(:last-child), +.rz-grid-table td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td.rz-composite-cell, +.rz-grid-table td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td .rz-cell-data, +.rz-grid-table td .rz-cell-data { + color: var(--rz-grid-cell-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rz-datatable-data td .rz-cell-data:has(.rz-chkbox), .rz-datatable-data td .rz-cell-data:has(.rz-button), +.rz-grid-table td .rz-cell-data:has(.rz-chkbox), +.rz-grid-table td .rz-cell-data:has(.rz-button) { + overflow: visible; +} +.rz-datatable-data td .rz-cell-toggle, +.rz-grid-table td .rz-cell-toggle { + display: flex; + align-items: center; + gap: 0.25rem; +} +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} +.rz-datatable-data tr td:first-child, +.rz-grid-table tr td:first-child { + border-inline-start: none; +} +.rz-datatable-data tr td:last-child:not(.rz-composite-cell), +.rz-grid-table tr td:last-child:not(.rz-composite-cell) { + border-inline-end: none; +} +.rz-datatable-data tr:first-child > td, +.rz-grid-table tr:first-child > td { + border-top: none; +} +.rz-datatable-data tr:last-child > td, +.rz-grid-table tr:last-child > td { + border-bottom: none; +} + +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { + border-bottom: none; + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td { + border-bottom: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} + +.rz-datatable-reflow tbody td > .rz-column-title { + display: none; +} + +.rz-datatable-scrollable { + display: flex; + flex-direction: column; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper { + height: 0; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view { + height: 0; +} + +.rz-datatable-scrollable-wrapper { + display: flex; + flex-direction: column; + flex: auto; +} + +.rz-datatable-scrollable-view { + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; +} + +.rz-datatable-header { + background-color: var(--rz-grid-toolbar-background-color); + padding: var(--rz-grid-header-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-header .rzi-plus { + font-size: var(--rz-grid-cell-font-size); +} +.rz-datatable-header .rzi-plus:before { + content: "add"; +} + +.rz-cell-filter { + padding: var(--rz-grid-filter-padding); + margin: var(--rz-grid-filter-margin); + border-top: var(--rz-grid-filter-border); + font-size: var(--rz-grid-filter-font-size); + font-weight: normal; +} +.rz-cell-filter .rz-cell-filter-label { + display: flex; + flex: auto; + align-items: center; +} +.rz-cell-filter .rz-cell-filter-label > .rzi { + width: var(--rz-grid-filter-icon-width); + height: var(--rz-grid-filter-icon-height); + font-size: var(--rz-grid-filter-icon-font-size); + margin-inline: var(--rz-grid-filter-icon-margin-inline); + color: var(--rz-grid-filter-color); +} +.rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { + margin-inline-start: auto; +} +.rz-cell-filter .rz-cell-filter-label .rz-current-filter { + margin-inline-start: 0.5rem; +} + +.rz-selectable tbody tr.rz-data-row td, +.rz-selectable tbody tr.rz-data-row .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:after { + content: ""; + position: absolute; + inset: 0; + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:before { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:after { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > .rzi { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > th.rz-state-focused { + color: var(--rz-grid-cell-focus-color) !important; +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > .rzi { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-disabled { + opacity: 0.5; + pointer-events: none; +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { + color: var(--rz-grid-hover-color); +} + +.rz-cell-filter-content { + display: flex; + flex: auto; + align-items: center; + color: var(--rz-grid-filter-color); + min-height: 1.375rem; + container-type: inline-size; + container-name: rz-cell-filter-content; +} + +@container rz-cell-filter-content (max-width: 200px) { + .rz-cell-filter-content .rz-filter-button .rzi { + display: none; + } + .rz-cell-filter-content .rz-filter-button { + position: absolute; + z-index: 1; + min-height: 0; + inset-inline-start: calc(var(--rz-border-width) + 1px); + height: calc(var(--rz-input-height) - var(--rz-border-width) * 2 - 2px); + max-height: calc(var(--rz-input-height) - var(--rz-border-width) * 2 - 2px); + line-height: calc(1.25rem - var(--rz-border-width) * 2 - 2px); + border-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width) - 1px); + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } +} +.rz-expanded-row > td { + border-bottom: none; + background-color: var(--rz-grid-hover-background-color); +} +.rz-expanded-row > td .rz-cell-data, +.rz-expanded-row > td .rz-row-toggler { + color: var(--rz-grid-hover-color); +} + +.rz-expanded-row-template { + background-color: var(--rz-grid-detail-template-background-color); + padding: var(--rz-grid-detail-template-padding); + border: var(--rz-grid-detail-template-border); + border-radius: var(--rz-grid-detail-template-border-radius); +} + +.rz-expanded-row-content > td { + padding-top: 0; + background-color: var(--rz-grid-detail-template-background-color); +} + +.rz-rowgroup-header a:hover { + text-decoration: none; +} +.rz-rowgroup-header td { + border-top: var(--rz-grid-border); + border-bottom: var(--rz-grid-border); +} + +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; +} + +.rz-datatable-loading-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--rz-grid-loading-indicator-color); + z-index: 2; +} +.rz-datatable-loading-content .rzi-circle-o-notch { + animation: rotation 0.5s linear infinite; + font-size: 2rem; +} +.rz-datatable-loading-content .rzi-circle-o-notch:before { + content: "refresh"; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@media (max-width: 768px) { + .rz-datatable-reflow .rz-data-grid-data > table, + .rz-datatable-reflow .rz-datatable-tablewrapper > table, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table { + table-layout: auto; + display: block; + } + .rz-datatable-reflow .rz-data-grid-data > table > tbody, + .rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody { + display: block; + } + .rz-datatable-reflow thead th { + display: none; + } + .rz-datatable-reflow .rz-data-row { + display: block; + } + .rz-datatable-reflow .rz-data-row > td { + display: block; + width: 100% !important; + text-align: left !important; + border: none; + } + .rz-datatable-reflow .rz-data-row > td .rz-column-title { + display: block; + } +} +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + +.rz-grid-filter-buttons { + display: flex; + justify-content: space-between; + padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} + +.rz-grid-filter-icon { + justify-self: flex-end; + color: var(--rz-grid-filter-color); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); + font-size: var(--rz-grid-header-filter-icon-font-size); + transition: var(--rz-grid-state-transition); + font-weight: 400; +} +.rz-grid-filter-icon:hover { + cursor: pointer; + color: var(--rz-grid-header-filter-icon-hover-color); +} + +.rz-grid-filter-active { + color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; +} + +.rz-data-grid { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.rz-data-grid-data { + overflow: auto; + flex: 1; + box-shadow: var(--rz-grid-data-border-shadow); +} + +.rz-grid-table td, .rz-grid-table th { + padding: var(--rz-grid-cell-padding); +} + +.rz-grid-table thead { + position: sticky; + top: 0; + z-index: 2; +} +.rz-grid-table thead th { + position: sticky; + top: 0; + z-index: 1; +} + +.rz-grid-table-fixed { + table-layout: fixed; +} +.rz-grid-table-fixed .rz-frozen-cell { + position: -webkit-sticky; + position: sticky; +} +.rz-grid-table-fixed .rz-frozen-cell-left, +.rz-grid-table-fixed .rz-frozen-cell-right, +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + background: var(--rz-grid-frozen-cell-background-color); + z-index: 1; +} +.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} + +.rz-grid-table tfoot, .rz-grid-table tfoot td { + position: sticky; + bottom: 0; + z-index: 1; +} + +.rz-grid-table { + width: 100%; + position: relative; + border-collapse: separate; + border-spacing: 0; +} +.rz-grid-table th { + white-space: nowrap; + overflow: hidden; +} +.rz-grid-table td { + white-space: nowrap; + overflow: hidden; +} + +.rz-grid-table tbody > div { + display: table-row; +} + +.rz-column-drag { + cursor: grab; + font-size: inherit; + color: var(--rz-column-drag-handle-color); + transition: var(--rz-grid-state-transition); + margin-inline: var(--rz-column-drag-handle-margin-inline); +} +.rz-column-drag:after { + content: "more_vert"; +} +.rz-column-drag:hover { + color: var(--rz-column-drag-handle-hover-color); +} +.rz-column-drag:active { + color: var(--rz-column-drag-handle-hover-color); + cursor: grabbing; +} + +.rz-column-draggable { + background-color: var(--rz-grid-header-background-color); + border-radius: var(--rz-border-radius); + box-shadow: var(--rz-column-draggable-shadow); + padding: 0; + display: flex; + align-items: center; +} +.rz-column-draggable > div { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + outline: none; + padding: 0; +} +.rz-column-draggable .rz-column-drag { + max-width: 1rem; +} +.rz-column-draggable .rz-column-title { + display: inline-flex; + flex: auto; + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-column-draggable .rz-grid-filter-icon { + display: none; +} + +.rz-group-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-group-header-items { + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); +} + +.rz-group-header-item { + display: flex; + align-items: center; + color: var(--rz-grid-group-header-item-color); + background-color: var(--rz-grid-group-header-item-background-color); + border: var(--rz-grid-group-header-item-border); + border-radius: var(--rz-grid-group-header-item-border-radius); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); + width: fit-content; + float: left; +} +.rz-group-header-item .rz-dialog-titlebar-close { + display: flex; + align-items: center; + text-decoration: none; +} + +.rz-group-header-item-title { + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); +} + +.rz-group-header-drop { + font-size: var(--rz-body-font-size); + color: var(--rz-text-tertiary-color); + height: fit-content; +} + +.rz-column-picker { + display: flex; +} + +.rz-filter-menu-symbol { + width: 1.75rem; + display: inline-block; +} + +.rz-filter-button { + flex: none; + margin-inline-end: 0.5rem; +} + +.rz-data-grid.rz-density-compact { + --rz-grid-cell-line-height: 1rem; + --rz-grid-cell-padding: 0.25rem 0.5rem; + --rz-grid-header-cell-padding: 0.25rem 0; + --rz-grid-header-padding: 0.25rem 1rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-filter-padding: 0.25rem 0.5rem; + --rz-grid-group-header-padding: 0.25rem; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; + --rz-dialog-close-font-size: 1rem; +} + +.rz-pager { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--rz-pager-gap); + flex-wrap: wrap; + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ +} +.rz-pager:focus { + outline: var(--rz-outline-normal); +} +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-pager.rz-align-right { + justify-content: right; +} +.rz-pager.rz-align-left { + justify-content: left; +} +.rz-pager.rz-align-center { + justify-content: center; +} +.rz-pager .rzi-step-backward:before { + content: "first_page"; +} +.rz-pager .rzi-caret-left:before { + content: "navigate_before"; +} +.rz-pager .rzi-caret-right:before { + content: "navigate_next"; +} +.rz-pager .rzi-step-forward:before { + content: "last_page"; +} +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { + order: 2; + width: var(--rz-pager-dropdown-width); + overflow: visible; +} +.rz-pager .rz-pagesize-text { + order: 2; + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); +} + +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); +} + +.rz-pager-bottom { + border-top: var(--rz-pager-border); +} + +.rz-pager-pages { + display: inline-flex; + gap: var(--rz-pager-gap); + margin: 0 0.5rem; +} + +.rz-pager-element { + letter-spacing: 0; +} + +.rz-align-center .rz-pager-first { + margin-inline-start: auto; +} + +.rz-pager-prev { + margin-inline-end: auto; +} +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; +} + +.rz-pager-next { + margin-inline-start: auto; +} +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; +} + +.rz-align-center .rz-pager-last { + margin-inline-end: auto; +} + +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-element:hover { + text-decoration: none; +} + +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-page { + display: inline-block; + min-width: var(--rz-pager-numeric-button-min-width); + text-align: center; + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { + margin-right: auto; +} +.rz-align-left .rz-pager-summary { + order: 2; + margin-left: auto; + padding: 0; +} +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} + +@media (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +@container rz-lookup-panel (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; +} +.rz-overlaypanel { + position: absolute; + overflow: hidden; + box-shadow: var(--rz-overlay-shadow); + border: var(--rz-overlay-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-overlay-background-color); +} + +.rz-tree { + box-sizing: border-box; + display: inline-block; + overflow: auto; +} +.rz-tree:focus { + outline: var(--rz-outline-normal); +} +.rz-tree:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} + +.rz-tree .rz-treenode.rz-treenode-leaf > .rz-treenode-content > .rz-tree-toggler { + visibility: hidden; +} + +.rz-treenode { + padding-inline-start: var(--rz-tree-node-toggle-width); +} + +.rz-tree-toggler { + cursor: pointer; + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); + width: var(--rz-tree-node-toggle-width); + height: 1.5rem; + font-size: var(--rz-icon-size); + line-height: 1.5rem; + text-align: center; + color: var(--rz-tree-node-toggle-color); + transition: var(--rz-tree-transition); +} +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} +.rz-tree-toggler.rzi-caret-right:before { + content: "chevron_right"; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); +} +.rz-tree-toggler.rzi-caret-down:before { + content: "expand_more"; + margin-inline-start: -0.125rem; +} +.rz-tree-toggler:hover { + color: var(--rz-tree-node-toggle-hover-color); +} + +.rz-treenode-content { + display: flex; + align-items: center; + cursor: pointer; + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); +} +.rz-treenode-content .rz-treenode-label { + display: flex; + align-items: center; + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); +} +.rz-treenode-content .rz-treenode-label .rzi:first-child { + margin-inline-end: 0.25rem; +} +.rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { + outline: var(--rz-tree-node-focus-outline); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} +.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { + background-color: var(--rz-tree-node-hover-background-color); + color: var(--rz-tree-node-hover-color); + border-radius: var(--rz-tree-node-selected-border-radius); +} +.rz-treenode-content .rz-chkbox { + margin-inline-end: 0.25rem; +} + +.rz-tree-container, +.rz-treenode-children { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-treenode-label { + transition: var(--rz-tree-transition); +} +.rz-treenode-content-selected .rz-treenode-label { + border-radius: var(--rz-tree-node-selected-border-radius); + color: var(--rz-tree-node-selected-color); + background-color: var(--rz-tree-node-selected-background-color); +} + +.rz-datalist, +.rz-datagrid { + background-color: var(--rz-datalist-background-color); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); + box-shadow: var(--rz-datalist-shadow); + border: var(--rz-datalist-border); +} + +.rz-g > div, .rz-datalist-data > li { + border-radius: var(--rz-datalist-border-radius); + border: var(--rz-datalist-item-border); + box-shadow: var(--rz-datalist-item-shadow); + padding: var(--rz-datalist-item-padding); + background-color: var(--rz-datalist-item-background-color); +} + +.rz-datalist-data { + list-style: none; + padding: var(--rz-datalist-padding); + margin: 0; +} +.rz-datalist-data > li { + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} +.rz-datalist-data > li:first-child { + margin-block-start: 0; +} +.rz-datalist-data > li:last-child { + margin-block-end: 0; +} + +.rz-g { + display: flex; + flex-wrap: wrap; +} +.rz-g > div { + flex: auto; + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} + +.rz-datalist-content { + box-sizing: border-box; + position: relative; +} + +.rz-datafilter { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + column-gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-selectbutton { + display: inline-flex; +} +.rz-datafilter .rz-datafilter-group { + position: relative; + margin: 0.25rem 0 0; + padding: 0; + flex-basis: 100%; +} +.rz-datafilter .rz-datafilter-group .rz-datafilter-group { + margin: 0; +} +.rz-datafilter .rz-datafilter-item { + position: relative; + list-style: none; + margin: 0; + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-datafilter-item:before { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item:after { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item .rz-multiselect, +.rz-datafilter .rz-datafilter-item .rz-dropdown { + flex: 10rem 1; +} +.rz-datafilter .rz-datafilter-group-item:after { + height: calc(var(--rz-input-height) / 2); +} +.rz-datafilter .rz-datafilter-bar { + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; +} +.rz-datafilter .rz-datafilter-bar:before { + display: none; +} +.rz-datafilter .rz-datafilter-bar:after { + height: calc(var(--rz-input-height) / 2); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); +} +.rz-datafilter .rz-datafilter-bar .rz-splitbutton { + margin-block-start: 0.3125rem; +} +.rz-datafilter .rz-datafilter-editor { + flex: 10rem 4; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear { + color: var(--rz-text-secondary-color); + opacity: 0.5; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear:hover { + opacity: 1; +} + +.rz-scheduler { + box-sizing: border-box; + container-name: scheduler; + container-type: inline-size; + display: flex; + height: 400px; + flex-direction: column; + border-radius: var(--rz-scheduler-border-radius); + border: 1px solid var(--rz-scheduler-border-color); + box-shadow: var(--rz-scheduler-shadow); + color: var(--rz-scheduler-color); + background: var(--rz-scheduler-background-color); + overflow: hidden; + background-clip: border-box; +} +.rz-scheduler a.rz-event-list-btn { + position: absolute; + padding-inline-start: 0.25rem; + color: var(--rz-scheduler-event-list-button-color); + font-size: var(--rz-scheduler-event-list-button-font-size); +} +.rz-scheduler a.rz-event-list-btn:hover { + cursor: pointer; + color: var(--rz-scheduler-event-list-button-color); + text-decoration: underline; +} + +.rz-slot { + display: flex; + height: 1.5em; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} + +.rz-slot-title { + text-align: end; + font-size: var(--rz-scheduler-slot-title-font-size); + padding: var(--rz-scheduler-slot-title-padding); +} + +.rz-slot-hours { + flex: 0 0 5rem; +} +.rz-slot-hours .rz-slot-header { + height: 1.5rem; + text-align: end; + font-size: var(--rz-scheduler-header-font-size); + padding: 0 0.25rem; + border-inline-end: 1px solid var(--rz-scheduler-border-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.rz-slot-minor { + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); +} + +.rz-day-view .rz-slot, +.rz-slots:first-child .rz-slot { + border-inline-start: none; +} + +.rz-event { + position: absolute; + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); + cursor: pointer; +} + +.rz-event-content { + background: var(--rz-scheduler-event-background-color); + border-radius: var(--rz-scheduler-border-radius); + color: var(--rz-scheduler-event-color); + height: 100%; + padding: var(--rz-scheduler-event-content-padding); + font-size: var(--rz-scheduler-event-font-size); + line-height: var(--rz-scheduler-event-line-height); + overflow: hidden; +} + +.rz-events { + position: relative; +} + +.rz-scheduler-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--rz-scheduler-toolbar-padding); + background: var(--rz-scheduler-toolbar-background-color); +} +.rz-scheduler-nav .rz-scheduler-nav-title { + display: flex; + align-self: center; + font-size: var(--rz-scheduler-toolbar-title-font-size); + font-weight: var(--rz-scheduler-toolbar-title-font-weight); + color: var(--rz-scheduler-toolbar-title-color); +} + +.rz-view-header { + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); + background-color: var(--rz-scheduler-header-background-color); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); + display: flex; +} +.rz-view-header .rz-slot-header { + flex: 1; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rz-view-header .rz-slot-hour-header { + flex: 0 0 5rem; +} + +.rz-view { + display: flex; + flex-direction: column; + flex: 1; +} + +.rz-view-content { + flex: auto; + display: flex; + overflow: auto; + height: 0; +} +.rz-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-slot:has(.rz-state-focused) { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-slots { + flex: 1; + font-size: 1rem; +} + +.rz-scheduler-nav-views { + display: flex; +} +.rz-scheduler-nav-views .rz-button.rz-primary { + background: var(--rz-scheduler-view-button-background-color); + color: var(--rz-scheduler-view-button-color); + border: var(--rz-scheduler-view-button-border); + border-radius: 0; + border-inline-end: none; +} +.rz-scheduler-nav-views .rz-button.rz-primary:first-child { + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); +} +.rz-scheduler-nav-views .rz-button.rz-primary:last-child { + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); +} +.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { + background-color: var(--rz-scheduler-view-selected-background-color); + border-color: var(--rz-scheduler-view-selected-border-color); + color: var(--rz-scheduler-view-selected-color); +} +.rz-scheduler-nav-views .rz-button.rz-primary:focus-visible { + z-index: 1; +} + +.rz-scheduler-nav-prev-next { + display: flex; +} +.rz-scheduler-nav-prev-next .rz-button { + background-color: var(--rz-scheduler-prev-next-button-background-color); + color: var(--rz-scheduler-prev-next-button-color); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); + font-size: var(--rz-scheduler-prev-next-button-font-size); +} +.rz-scheduler-nav-prev-next .rz-button.rz-today { + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); + padding: var(--rz-scheduler-today-button-padding); + font-size: var(--rz-scheduler-today-button-font-size); + text-transform: var(--rz-scheduler-today-button-text-transform); +} +.rz-scheduler-nav-prev-next .rz-button.rz-prev { + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button.rz-next { + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button:focus-visible { + z-index: 1; +} + +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + +.rz-event-list .rz-event { + position: static; +} + +.rz-week { + flex: 1; + font-size: 1rem; +} +.rz-week .rz-slots { + display: flex; + height: 100%; +} +.rz-week:first-child .rz-slot { + border-block-start: none; +} + +.rz-month { + flex: 1; + font-size: 1rem; +} +.rz-month .rz-slots { + display: flex; + height: 100%; +} +.rz-month:nth-child(2) .rz-slot { + border-block-start: none; +} +.rz-month .rz-slot { + flex: 1; + height: 100%; + display: flex; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child { + position: sticky; + z-index: 9998; + inset-inline-start: 0; + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child .rz-slot-header { + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-month .rz-slot:nth-child(2) { + border-inline-start: none; +} + +.rz-day-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-day-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-week-view-content { + flex: 1; + display: flex; +} +.rz-week-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-week-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-slots.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-week-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-week-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-month-view .rz-view-content { + flex: 1; + flex-direction: column; +} +.rz-month-view .rz-slot { + flex: 1; + height: 100%; +} +.rz-month-view .rz-slot:first-child { + border-inline-start: none; +} + +.rz-planner-view { + overflow: auto; +} +.rz-planner-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 2.25rem; + z-index: 9999; +} +.rz-planner-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-planner-view .rz-month .rz-slot:first-child .rz-slot-header { + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +.rz-planner-view .rz-month .rz-slot:last-child { + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); +} +.rz-planner-view .rz-month .rz-slot:last-child .rz-slot-header { + writing-mode: vertical-rl; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-planner-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-planner-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-timeline-view { + flex: auto; + overflow: auto; + flex-wrap: wrap; + flex-direction: unset; +} +.rz-timeline-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 36px; + z-index: 9999; +} +.rz-timeline-view .rz-view-header .rz-slot-header { + min-width: var(--rz-scheduler-timeline-slot-width); + flex: 0 0 auto; +} +.rz-timeline-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-timeline-view .rz-month { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slots { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slot { + width: var(--rz-scheduler-timeline-slot-width); + height: var(--rz-scheduler-timeline-slot-height); +} +.rz-timeline-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-timeline-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-year-view { + overflow: auto; + padding: var(--rz-scheduler-year-padding); + --rz-gap: var(--rz-scheduler-year-padding); +} +.rz-year-view .rz-flex-column, +.rz-year-view .rz-week { + min-width: fit-content; +} +.rz-year-view .rz-slot { + flex: 1; + border-block-start: none; + justify-content: center; + height: initial; + padding: var(--rz-scheduler-year-slot-padding); + cursor: pointer; +} +.rz-year-view .rz-slot .rz-slot-title { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-align: center; + width: var(--rz-scheduler-year-slot-title-width); + min-width: 2rem; + min-height: 2rem; + border-radius: var(--rz-scheduler-year-slot-title-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-year-view .rz-slot .rz-slot-title.rz-other-month { + opacity: 0.5; +} +.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments { + color: var(--rz-scheduler-event-color); + background-color: var(--rz-scheduler-event-background-color); +} +.rz-year-view .rz-slot .rz-slot-title.rz-state-focused { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} +.rz-year-view .rz-slot:hover .rz-slot-title:not(.rz-has-appointments) { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} + +.rz-year-month:focus { + outline: var(--rz-outline-normal); +} +.rz-year-month:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); + border-radius: var(--rz-border-radius); +} + +@container scheduler (width < 640px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@container scheduler (width < 1400px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +@media (max-width: 576px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@media (max-width: 1399px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +.rz-tabview { + box-sizing: border-box; + display: flex; +} +.rz-tabview:focus { + outline: var(--rz-outline-normal); +} +.rz-tabview:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-tabview:focus-visible .rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + outline: var(--rz-tabs-tab-focus-outline); + outline-offset: var(--rz-tabs-tab-focus-outline-offset); +} +.rz-tabview.rz-tabview-top { + flex-direction: column; +} +.rz-tabview.rz-tabview-top-right { + flex-direction: column; +} +.rz-tabview.rz-tabview-bottom { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-bottom-right { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-left { + flex-direction: row; +} +.rz-tabview.rz-tabview-right { + flex-direction: row-reverse; +} + +.rz-tabview-nav { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} +.rz-tabview-nav li { + border: var(--rz-tabs-border); + background-color: var(--rz-tabs-tab-background-color); + color: var(--rz-tabs-tab-color); + transition: var(--rz-tabs-transition); +} +.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-hover-background-color); + color: var(--rz-tabs-tab-hover-color); +} +.rz-tabview-nav li a, +.rz-tabview-nav li a:not([href]):not([class]) { + display: flex; + align-items: center; + color: inherit; + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); + font-size: var(--rz-tabs-tab-font-size); + line-height: var(--rz-tabs-tab-line-height); + font-weight: var(--rz-tabs-tab-font-weight); + text-transform: var(--rz-tabs-tab-text-transform); + letter-spacing: var(--rz-tabs-tab-letter-spacing); + text-decoration: none; + cursor: pointer; +} +.rz-tabview-nav li a:hover, +.rz-tabview-nav li a:not([href]):not([class]):hover { + text-decoration: none; +} +.rz-tabview-nav li.rz-state-disabled { + opacity: 0.5; +} +.rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-focus-background-color); + border-color: var(--rz-tabs-tab-focus-background-color); + color: var(--rz-tabs-tab-focus-color); +} +.rz-tabview-nav .rz-tabview-selected { + background-color: var(--rz-tabs-tab-selected-background-color); + color: var(--rz-tabs-tab-selected-color); + position: relative; +} +.rz-tabview-top > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-top > .rz-tabview-nav li { + border-top-width: 2px; + border-bottom-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-bottom-color: var(--rz-tabs-background-color); + margin-bottom: -1px; + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-bottom > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-bottom > .rz-tabview-nav li { + border-bottom-width: 2px; + border-top-color: var(--rz-tabs-tab-background-color); + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-top-color: var(--rz-tabs-background-color); + margin-top: -1px; + padding-top: 1px; + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-left > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-left > .rz-tabview-nav li { + border-left-width: 2px; + border-right-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} +.rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-right-color: var(--rz-tabs-background-color); + margin-right: -1px; + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-right > .rz-tabview-nav li { + border-right-width: 2px; + border-left-color: var(--rz-tabs-tab-background-color); + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-left-color: var(--rz-tabs-background-color); + margin-left: -1px; + padding-left: 1px; + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} + +.rz-tabview-panels { + background-color: var(--rz-tabs-background-color); + border: var(--rz-tabs-border); + box-shadow: var(--rz-tabs-shadow); + flex: 1; + overflow: auto; +} +.rz-tabview-top > .rz-tabview-panels { + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-left > .rz-tabview-panels { + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .rz-tabview-panels { + flex: auto; + } +} +.rz-tabview-panel { + padding: var(--rz-tabs-padding); +} + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); +} + +.rz-tooltip { + box-sizing: border-box; + position: absolute; + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-tooltip-content { + background: var(--rz-tooltip-background-color); + color: var(--rz-tooltip-color); + box-shadow: var(--rz-tooltip-shadow); + padding: var(--rz-tooltip-padding); + border-radius: var(--rz-tooltip-border-radius); + font-size: var(--rz-tooltip-font-size); + white-space: nowrap; +} + +.rz-tooltip .rz-top-tooltip-content { + margin-bottom: 16px; +} + +.rz-tooltip .rz-top-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-end: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-bottom-tooltip-content { + margin-top: -8px; +} + +.rz-tooltip .rz-bottom-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-start: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-left-tooltip-content { + margin-right: 8px; +} + +.rz-tooltip .rz-left-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + right: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-right-tooltip-content { + margin-left: 0; +} + +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-dialog-wrapper { + box-sizing: border-box; + display: flex; + position: fixed; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + z-index: var(--rz-dialog-zindex); + align-items: center; + justify-content: center; +} + +.rz-dialog { + box-sizing: border-box; + position: absolute; + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 150px; + max-height: 100%; + min-height: 150px; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); +} + +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); + font-size: var(--rz-dialog-title-font-size); + line-height: var(--rz-dialog-title-line-height); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); +} + +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; + font-weight: var(--rz-dialog-title-font-weight); + letter-spacing: var(--rz-dialog-title-letter-spacing); + color: var(--rz-dialog-title-color); + user-select: none; +} + +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { + font-size: var(--rz-dialog-close-font-size); + color: var(--rz-dialog-close-color); + vertical-align: var(--rz-dialog-close-vertical-align); +} +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { + content: "close"; +} +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { + color: var(--rz-dialog-close-hover-color); +} + +.rz-dialog-content, +.rz-dialog-side-content { + flex: 0 1 auto; + padding: var(--rz-dialog-content-padding); + overflow: auto; +} + +.rz-dialog-confirm, .rz-dialog-alert { + max-width: 400px; + margin: 0.75rem; +} + +.rz-dialog-confirm-message, .rz-dialog-alert-message { + margin-block-end: 1.5rem; +} + +.rz-dialog-confirm-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.rz-dialog-confirm-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-alert-buttons { + text-align: end; + gap: 0.5rem; +} +.rz-dialog-alert-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-mask { + position: fixed; + z-index: var(--rz-dialog-mask-zindex); + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--rz-dialog-mask-background-color); + opacity: 0.5; +} + +.no-scroll { + overflow: hidden; + padding-inline-end: 15px; +} + +.rz-dialog-side-position-right { + right: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-left { + left: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-top { + top: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +.rz-dialog-side-position-bottom { + bottom: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; +} + +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; +} + +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); +} +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); +} +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); +} +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); +} + +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); +} + +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.rz-notification-title { + font-weight: bold; +} + +.rz-notification-icon { + margin: var(--rz-notification-icon-margin); +} +.rz-notification-icon.rzi-check { + color: var(--rz-notification-success-icon-color); +} +.rz-notification-icon.rzi-check:before { + content: "check"; +} +.rz-notification-icon.rzi-exclamation-triangle { + color: var(--rz-notification-warning-icon-color); +} +.rz-notification-icon.rzi-exclamation-triangle:before { + content: "warning"; +} +.rz-notification-icon.rzi-info-circle { + color: var(--rz-notification-info-icon-color); +} +.rz-notification-icon.rzi-info-circle:before { + content: "info"; +} +.rz-notification-icon.rzi-times { + color: var(--rz-notification-error-icon-color); +} +.rz-notification-icon.rzi-times:before { + content: "error"; +} + +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; +} + +.rz-form { + box-sizing: border-box; +} + +.rz-message { + box-sizing: border-box; +} + +.rz-messages-error { + display: inline-block; + color: var(--rz-form-error-color); + font-size: var(--rz-form-error-font-size); + padding: var(--rz-validator-text-padding); +} + +.rz-message-popup { + position: absolute; + background-color: var(--rz-validator-background-color); + transform: var(--rz-validator-transform); + box-shadow: var(--rz-validator-shadow); + padding: var(--rz-validator-padding); + border-radius: var(--rz-border-radius); + color: var(--rz-validator-color); + pointer-events: none; +} +.rz-message-popup:before { + content: ""; + border: var(--rz-validator-pointer-size) solid transparent; + border-bottom-color: var(--rz-validator-background-color); + position: absolute; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); +} + +body:not(.rz-default-scrollbars)::-webkit-scrollbar, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +body:not(.rz-default-scrollbars)::-webkit-scrollbar-corner, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-layout::-webkit-scrollbar, +.rz-layout ::-webkit-scrollbar, +.rz-scrollbars::-webkit-scrollbar, +.rz-scrollbars ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-thumb, +.rz-layout ::-webkit-scrollbar-thumb, +.rz-scrollbars::-webkit-scrollbar-thumb, +.rz-scrollbars ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-corner, +.rz-layout ::-webkit-scrollbar-corner, +.rz-scrollbars::-webkit-scrollbar-corner, +.rz-scrollbars ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-login { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rz-login .rz-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.rz-login .rz-form .rz-form-row { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} +.rz-login .rz-form .rz-form-row .rz-label { + flex: 1 8rem; +} +.rz-login .rz-form .rz-form-row .rz-form-input-wrapper { + flex: 3 14rem; +} +.rz-login .rz-form .rz-form-row .rz-textbox { + display: block; + width: 100%; +} +.rz-login .rz-form .rz-form-row .rz-textbox.invalid { + border: var(--rz-border-danger); +} +.rz-login .rz-form .rz-form-row .rz-switch { + margin-inline-end: 0.5rem; +} +.rz-login .rz-form .rz-messages-error { + position: absolute; +} +.rz-login .rz-register { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: var(--rz-login-register-background-color); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); + border-radius: var(--rz-border-radius); +} +.rz-login .rz-register .rz-button { + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); +} +.rz-login .rz-login-buttons { + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.rz-lookup-panel { + background-color: var(--rz-lookup-panel-background-color); + padding: var(--rz-lookup-panel-padding); + container-type: inline-size; + container-name: rz-lookup-panel; +} + +.rz-lookup-search { + display: flex; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); +} +.rz-lookup-search input { + flex: auto; +} + +.ssrsviewer { + display: flex; +} +.ssrsviewer iframe { + flex: auto; +} + +.rz-map { + box-sizing: border-box; + height: var(--rz-map-height); + padding: var(--rz-map-padding); + background-color: var(--rz-map-background-color); + box-shadow: var(--rz-map-shadow); + border-radius: var(--rz-border-radius); +} + +.rz-map-container { + height: 100%; +} + +.rz-gauge, +.rz-arc-gauge { + box-sizing: border-box; + position: relative; + display: inline-block; + width: 300px; + height: 300px; +} + +.rz-gauge .rz-line, +.rz-gauge .rz-tick { + stroke: var(--rz-gauge-scale-color); +} +.rz-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-scale-label-color); +} + +.rz-arc-gauge .rz-line, +.rz-arc-gauge .rz-tick { + stroke: var(--rz-gauge-arc-scale-color); +} +.rz-arc-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-arc-scale-label-color); +} + +.rz-gauge-value { + position: absolute; + transform: translateX(-50%); + padding: 0.5rem; +} + +.rz-arc-gauge-value { + position: absolute; + transform: translate(-50%, -50%); + padding: 0.5rem; +} + +.rz-gauge-pointer { + fill: var(--rz-gauge-pointer-color); +} + +.rz-arc-gauge-scale-value { + fill: var(--rz-gauge-arc-value-color); +} + +.rz-arc-gauge-scale { + fill: var(--rz-gauge-arc-scale-color); +} + +.rz-progressbar { + box-sizing: border-box; + border-radius: var(--rz-progressbar-border-radius); + height: var(--rz-progressbar-height); + position: relative; + background-color: var(--rz-progressbar-background-color); + text-align: center; + display: flex; + align-items: center; +} + +.rz-progressbar-value { + border-radius: var(--rz-progressbar-border-radius); + position: absolute; + background-color: var(--rz-progressbar-value-background-color); + height: 100%; + width: 100%; + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-label { + position: relative; + width: 100%; + text-align: center; + font-size: var(--rz-progressbar-font-size); + line-height: var(--rz-progressbar-font-size); +} + +.rz-progressbar-circular { + box-sizing: border-box; + position: relative; +} + +.rz-progressbar-circular-viewbox { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.rz-progressbar-circular-label { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +.rz-progressbar-circular-background { + stroke: var(--rz-progressbar-background-color); + stroke-width: var(--rz-progressbar-circular-stroke-width); +} + +.rz-progressbar-circular-value { + stroke-linecap: var(--rz-progressbar-circular-value-endpoint); + stroke-width: var(--rz-progressbar-circular-value-stroke-width); + stroke: var(--rz-progressbar-value-background-color); + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-determinate .rz-progressbar-circular-value { + stroke-dasharray: 100; + transform: rotate(-0.25turn); +} + +.rz-progressbar-indeterminate { + overflow: hidden; +} +.rz-progressbar-indeterminate .rz-progressbar-value { + background-color: transparent; +} +.rz-progressbar-indeterminate .rz-progressbar-value:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} +.rz-progressbar-indeterminate .rz-progressbar-value:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; + animation-delay: 1.15s; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} +@keyframes rz-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 100%, 60% { + left: 100%; + right: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} +.rz-progressbar-indeterminate .rz-progressbar-circular-value { + animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + transform-origin: 0 0; +} +@keyframes rz-progressbar-circular-indeterminate-anim-rotate { + 100% { + transform: rotate(1turn); + } +} +@keyframes rz-progressbar-circular-indeterminate-anim-dash { + 0% { + stroke-dasharray: 1, 100; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -28; + } + 100% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -99; + } +} + +.rz-progressbar.rz-progressbar-primary { + color: var(--rz-on-primary); +} + +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value { + background-color: var(--rz-primary); +} +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:before { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:after { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); +} + +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); +} +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:before { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:after { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar.rz-progressbar-info { + color: var(--rz-on-info); +} + +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-value { + background-color: var(--rz-info); +} +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:before { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:after { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar.rz-progressbar-warning { + color: var(--rz-on-warning); +} + +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-value { + background-color: var(--rz-warning); +} +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:before { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:after { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-danger { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-success { + color: var(--rz-on-success); +} + +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value { + background-color: var(--rz-success); +} +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:before { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:after { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} + +.rz-scheme-pastel .rz-series-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} + +.rz-scheme-pastel .rz-series-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} + +.rz-scheme-pastel .rz-series-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} + +.rz-scheme-pastel .rz-series-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} + +.rz-scheme-pastel .rz-series-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} + +.rz-scheme-pastel .rz-series-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} + +.rz-scheme-pastel .rz-series-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} + +.rz-scheme-pastel .rz-series-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} + +.rz-scheme-pastel .rz-series-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-9-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} + +.rz-scheme-pastel .rz-series-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-10-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} + +.rz-scheme-pastel .rz-series-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-11-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} + +.rz-scheme-pastel .rz-series-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-12-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} + +.rz-scheme-pastel .rz-series-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-13-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} + +.rz-scheme-pastel .rz-series-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-14-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} + +.rz-scheme-pastel .rz-series-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-15-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} + +.rz-scheme-pastel .rz-series-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-16-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} + +.rz-scheme-pastel .rz-series-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-17-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} + +.rz-scheme-pastel .rz-series-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-18-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} + +.rz-scheme-pastel .rz-series-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-19-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} + +.rz-scheme-pastel .rz-series-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-20-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} + +.rz-scheme-pastel .rz-series-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-21-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} + +.rz-scheme-pastel .rz-series-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-22-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} + +.rz-scheme-pastel .rz-series-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-23-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} + +.rz-scheme-palette .rz-series-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} +.rz-scheme-palette .rz-series-item-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} + +.rz-scheme-palette .rz-series-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} + +.rz-scheme-palette .rz-series-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #665191; +} +.rz-scheme-palette .rz-series-item-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #665191; +} + +.rz-scheme-palette .rz-series-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #a05195; +} +.rz-scheme-palette .rz-series-item-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #a05195; +} + +.rz-scheme-palette .rz-series-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #d45087; +} +.rz-scheme-palette .rz-series-item-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #d45087; +} + +.rz-scheme-palette .rz-series-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} + +.rz-scheme-palette .rz-series-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} + +.rz-scheme-palette .rz-series-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} +.rz-scheme-palette .rz-series-item-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} + +.rz-scheme-monochrome .rz-series-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} + +.rz-scheme-monochrome .rz-series-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #296080; +} +.rz-scheme-monochrome .rz-series-item-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #296080; +} + +.rz-scheme-monochrome .rz-series-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #437594; +} +.rz-scheme-monochrome .rz-series-item-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #437594; +} + +.rz-scheme-monochrome .rz-series-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} + +.rz-scheme-monochrome .rz-series-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} + +.rz-scheme-monochrome .rz-series-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} + +.rz-scheme-monochrome .rz-series-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} + +.rz-scheme-monochrome .rz-series-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} + +.rz-scheme-divergent .rz-series-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #00876c; +} +.rz-scheme-divergent .rz-series-item-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #00876c; +} + +.rz-scheme-divergent .rz-series-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} + +.rz-scheme-divergent .rz-series-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} + +.rz-scheme-divergent .rz-series-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} + +.rz-scheme-divergent .rz-series-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} + +.rz-scheme-divergent .rz-series-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} + +.rz-scheme-divergent .rz-series-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} + +.rz-scheme-divergent .rz-series-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #e27076; +} +.rz-scheme-divergent .rz-series-item-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #e27076; +} + +.rz-scheme-divergent .rz-series-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} + +.rz-marker { + stroke: var(--rz-chart-marker-stroke); +} + +.rz-area-series .rz-marker { + fill-opacity: 1; +} + +.rz-axis { + stroke: var(--rz-chart-axis-color); + font-size: var(--rz-chart-axis-font-size); +} + +.rz-axis .rz-grid-line { + stroke: var(--rz-chart-axis-color); +} + +.rz-tick-text { + stroke: none; + fill: var(--rz-chart-axis-label-color); +} + +.rz-series-data-label { + fill: var(--rz-chart-axis-label-color); +} + +.rz-value-axis .rz-tick-text { + text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; +} + +.rz-category-axis .rz-tick-text { + text-anchor: middle; +} + +.rz-axis .rz-axis-title { + stroke: none; + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-title { + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-content { + height: 100%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rz-legend { + position: absolute; + display: flex; + font-size: var(--rz-chart-legend-font-size); +} + +.rz-legend-right { + right: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-left { + left: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-top { + top: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-bottom { + bottom: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-items { + padding: 0; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; +} + +.rz-legend-item { + display: flex; + align-items: center; + gap: 4px; + margin: 4px; + cursor: pointer; +} +.rz-legend-item:focus { + outline: var(--rz-outline-normal); +} +.rz-legend-item:focus-visible { + outline: var(--rz-chart-legend-focus-outline); + outline-offset: var(--rz-chart-legend-focus-outline-offset); + border-radius: var(--rz-border-radius); +} + +.rz-legend-top .rz-legend-item, +.rz-legend-bottom .rz-legend-item { + display: inline-flex; +} + +.rz-chart-tooltip { + position: absolute; + transform: translate(-50%, -100%); + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-chart-tooltip-content { + background: var(--rz-chart-tooltip-background); + color: var(--rz-chart-tooltip-color); + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + padding: 0.25rem 0.5rem; + border-radius: var(--rz-border-radius); + white-space: nowrap; +} + +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content { + margin-bottom: 15px; +} +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + left: 50%; + bottom: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -11px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-link { + box-sizing: border-box; + color: var(--rz-link-color); + text-decoration: none; + cursor: pointer; +} +.rz-link .rz-link-text { + text-decoration: var(--rz-link-text-decoration); +} +.rz-link .rzi { + font-size: inherit; + vertical-align: middle; +} +.rz-link:hover, .rz-link:focus { + color: var(--rz-link-hover-color); + text-decoration: none; +} +.rz-link:hover .rz-link-text, .rz-link:focus .rz-link-text { + text-decoration: var(--rz-link-hover-text-decoration); +} +.rz-link:focus-visible { + outline: var(--rz-link-focus-outline); +} + +.rz-state-highlight .link { + color: var(--rz-text-contrast-color); +} + +.rz-html-editor { + box-sizing: border-box; + display: flex; + flex-direction: column; + border-radius: var(--rz-editor-border-radius); + border: var(--rz-editor-border); + overflow: hidden; +} +.rz-html-editor:focus-within { + outline: var(--rz-editor-focus-outline); + outline-offset: var(--rz-editor-focus-outline-offset); +} + +.rz-html-editor-content { + flex: 1; + overflow: auto; + padding: 0.5rem; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-source.rz-textarea { + --rz-input-hover-shadow: none; + --rz-input-border: none; + --rz-input-hover-border: none; + --rz-input-focus-shadow: none; + --rz-input-focus-border: none; + flex: 1; + padding: 0.5rem; + overflow: auto; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-toolbar { + border-bottom: var(--rz-editor-border); + display: flex; + line-height: 1rem; + flex-wrap: wrap; + background-color: var(--rz-editor-toolbar-background-color); +} +.rz-html-editor-toolbar .rzi { + font-size: 1rem; +} +.rz-html-editor-toolbar > * { + margin: var(--rz-editor-toolbar-item-margin); +} + +.rz-html-editor-colorpicker { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger { + color: inherit; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} +.rz-html-editor-colorpicker .rz-colorpicker-value { + display: none; +} +.rz-html-editor-colorpicker .rz-colorpicker { + border: none; + box-shadow: none; + padding: 0; + height: auto; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} + +.rz-html-editor-color { + border: none; + display: flex; + flex-direction: column; + background: inherit; + color: inherit; + appearance: none; + padding: 0; + position: relative; +} +.rz-html-editor-color:disabled { + color: var(--rz-input-disabled-color); +} + +.rz-html-editor-color-value { + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; +} + +.rz-html-editor-button { + color: var(--rz-editor-button-color); + appearance: none; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-button.rz-selected { + background-color: var(--rz-editor-button-selected-background-color); + color: var(--rz-editor-button-selected-color); + border-radius: var(--rz-editor-border-radius); +} +.rz-html-editor-button:disabled { + color: var(--rz-editor-button-disabled-color); +} + +.rz-html-editor-dropdown { + display: inline-flex; + padding: var(--rz-editor-button-padding); + align-items: center; + cursor: pointer; +} +.rz-html-editor-dropdown.rz-disabled { + color: var(--rz-input-disabled-color); + cursor: default; +} + +.rz-html-editor-dropdown-item { + cursor: default; + font-size: var(--rz-dropdown-item-font-size); + padding: var(--rz-dropdown-item-padding); + white-space: nowrap; +} +.rz-html-editor-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-html-editor-dropdown-item.rz-selected { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); +} + +.rz-html-editor-dropdown-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: inherit; + background-color: inherit; +} +.rz-html-editor-dropdown-trigger .rzi:before { + content: "arrow_drop_down"; +} + +.rz-html-editor-dropdown-items { + display: none; +} + +.rz-html-editor-dialog-item { + margin-bottom: 1rem; +} +.rz-html-editor-dialog-item label:first-child { + display: block; +} + +.rz-html-editor-dialog-buttons { + text-align: right; +} + +.rz-html-editor-separator { + width: 1px; + background-color: var(--rz-editor-separator-background-color); +} + +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; +} +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} + +.rz-colorpicker { + display: inline-flex; + align-items: center; + cursor: pointer; +} +.rz-colorpicker.rz-state-disabled { + cursor: default; +} + +button.rz-colorpicker-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: var(--rz-text-color); + background-color: inherit; + outline: none; +} +button.rz-colorpicker-trigger .rzi { + font-size: var(--rz-icon-size); +} +button.rz-colorpicker-trigger .rzi:before { + content: "arrow_drop_down"; +} +.rz-state-disabled button.rz-colorpicker-trigger { + color: var(--rz-input-disabled-color); +} + +.rz-colorpicker-popup { + display: none; + position: absolute; + border: var(--rz-colorpicker-panel-border); + background-color: var(--rz-colorpicker-panel-background-color); + box-shadow: var(--rz-colorpicker-panel-shadow); + min-width: 200px; + max-width: var(--rz-colorpicker-panel-max-width); + padding: var(--rz-colorpicker-panel-padding); + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-value { + flex: 1; + border-radius: var(--rz-colorpicker-value-border-radius); + border: var(--rz-colorpicker-panel-border); + min-width: 20px; + min-height: 20px; +} + +.rz-saturation-picker { + height: var(--rz-colorpicker-saturation-height); + position: relative; + touch-action: none; + border-radius: var(--rz-border-radius); +} +.rz-saturation-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-saturation-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-saturation-white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} + +.rz-saturation-black, +.rz-saturation-white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--rz-border-radius); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); +} + +.rz-saturation-black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} + +.rz-saturation-handle { + position: absolute; + width: var(--rz-colorpicker-handle-size); + height: var(--rz-colorpicker-handle-size); + border: var(--rz-colorpicker-handle-border); + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-hue-picker { + margin-bottom: 8px; + touch-action: none; + position: relative; + background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-hue-picker:active { + cursor: none; +} +.rz-hue-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-hue-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-alpha-picker { + touch-action: none; + position: relative; + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-alpha-picker:active { + cursor: none; +} +.rz-alpha-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-alpha-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-hue-handle, +.rz-alpha-handle { + position: absolute; + height: 100%; + width: 8px; + border: var(--rz-colorpicker-handle-border); + border-radius: calc(var(--rz-border-radius) / 2); + transform: translateX(-50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-colorpicker-preview-area { + display: flex; +} + +.rz-hue-and-alpha { + flex: 1; + padding-inline-end: 8px; +} + +.rz-alpha-picker:before, +.rz-colorpicker-preview:before { + position: absolute; + z-index: -1; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--rz-border-radius); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); + background-size: 8px 8px; + background-position: 0 0, 0 4px, 4px -4px, -4px 0px; +} + +.rz-colorpicker-preview { + position: relative; + width: 32px; + height: 32px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-rgba { + display: flex; + gap: 4px; +} + +.rz-color-box { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + color: var(--rz-colorpicker-input-labels-color); + font-size: 0.75rem; + text-transform: uppercase; +} +.rz-color-box .rz-textbox { + width: 80px; + margin-inline-end: 4px; + padding: var(--rz-colorpicker-hex-input-padding); + height: var(--rz-colorpicker-hex-input-height); +} +.rz-color-box .rz-numeric { + padding: var(--rz-colorpicker-rgba-input-padding); + height: var(--rz-colorpicker-rgba-input-height); +} +.rz-color-box .rz-numeric .rz-numeric-input { + padding: 0; + outline: none; +} +.rz-color-box .rz-numeric button { + display: none; +} +.rz-color-box .rz-numeric button:hover { + display: initial; +} + +.rz-colorpicker-button { + justify-content: flex-end; + display: flex; +} + +.rz-colorpicker-section:not(:last-child) { + margin-bottom: 8px; +} + +.rz-colorpicker-colors { + display: flex; + flex-wrap: wrap; + gap: var(--rz-colorpicker-items-gap); +} + +.rz-colorpicker-item { + width: var(--rz-colorpicker-item-size); + height: var(--rz-colorpicker-item-size); + border-radius: var(--rz-colorpicker-item-border-radius); + box-shadow: var(--rz-colorpicker-item-shadow); + cursor: pointer; +} +.rz-colorpicker-item:focus { + outline: var(--rz-outline-normal); +} +.rz-colorpicker-item:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-splitter { + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 100%; +} +.rz-splitter > .rz-splitter-bar { + flex: 0 0 auto; + position: relative; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--rz-splitter-bar-color); + background-color: var(--rz-splitter-bar-background-color); + opacity: 0.4; + user-select: none; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color); + border-radius: 1px; +} +.rz-splitter > .rz-splitter-bar > .rz-expand { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar-resizable:hover { + background-color: var(--rz-splitter-bar-background-color); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active { + background-color: var(--rz-splitter-bar-background-color-active); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-expand, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-collapse { + color: var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:disabled { + opacity: 0.2; +} +.rz-splitter-horizontal { + flex-direction: row; +} +.rz-splitter-horizontal > .rz-splitter-bar { + flex-direction: column; + width: 8px; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_left"; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-resize { + height: 16px; + margin: 2px 0; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before { + content: "arrow_right"; +} +.rz-splitter-horizontal > .rz-splitter-bar-resizable:hover { + cursor: col-resize; +} +.rz-splitter-vertical { + flex-direction: column; +} +.rz-splitter-vertical > .rz-splitter-bar { + flex-direction: row; + height: 8px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_drop_up"; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-resize { + width: 16px; + margin: 0 2px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-expand:before { + content: "arrow_drop_down"; +} +.rz-splitter-vertical > .rz-splitter-bar-resizable:hover { + cursor: row-resize; +} +.rz-splitter-pane { + overflow: hidden; + position: relative; + flex: 0 0 auto; +} +.rz-splitter-pane-collapsed { + flex: 0 1 0% !important; + overflow: hidden !important; + display: block !important; +} +.rz-splitter-pane-lastresizable { + flex: 1 1 auto; +} + +.rz-splitter-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* RadzenLayout styles */ +.rz-layout { + box-sizing: border-box; + height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; + background-color: var(--rz-layout-background-color); +} +.rz-layout .rz-body { + grid-area: rz-body; + overflow: auto; +} +.rz-layout .rz-sidebar { + grid-area: rz-sidebar; + position: static; +} +.rz-layout .rz-header { + grid-area: rz-header; + z-index: 2; +} +.rz-layout .rz-footer { + grid-area: rz-footer; +} + +@media (max-width: 768px) { + body:has(> .rz-layout) { + overflow-x: hidden; + } + .rz-header, + .rz-footer, + .rz-body { + width: 100vw; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } +} +.rz-breadcrumb { + box-sizing: border-box; + display: flex; + align-items: center; +} + +.rz-breadcrumb-item + .rz-breadcrumb-item::before { + content: "»"; + display: inline-block; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + font-size: 1rem; + line-height: 1.25rem; +} + +.rz-breadcrumb-item { + display: inline-flex; + align-items: center; +} +.rz-breadcrumb-item .rz-link { + display: inline-flex; + align-items: center; +} + +.rz-alert { + box-sizing: border-box; + display: flex; + align-items: flex-start; + gap: var(--rz-alert-gap); + margin: var(--rz-alert-margin); + padding: var(--rz-alert-padding); + width: 100%; + border-radius: var(--rz-alert-border-radius); + background-color: var(--rz-alert-background-color); + color: var(--rz-alert-color); +} +.rz-alert-lg { + --rz-alert-gap: 1.5rem; + --rz-alert-margin: 1.5rem 0; + --rz-alert-padding: 1.5rem; + --rz-alert-message-margin: 0.125rem 0; + --rz-alert-icon-margin: 0.125rem 0; +} +.rz-alert-md { + --rz-alert-gap: 1rem; + --rz-alert-margin: 1rem 0; + --rz-alert-padding: 1rem; + --rz-alert-message-margin: 0.125rem 0; + --rz-alert-icon-margin: 0.125rem 0; +} +.rz-alert-sm { + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 0.5rem; + --rz-alert-message-margin: 0.125rem 0; + --rz-alert-icon-margin: 0.125rem 0; +} +.rz-alert-xs { + --rz-alert-gap: 0.25rem; + --rz-alert-margin: 0.25rem 0; + --rz-alert-padding: 0.25rem; + --rz-alert-message-margin: 0; + --rz-alert-icon-margin: 0; +} +.rz-alert .rz-alert-item { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-alert-gap); +} +.rz-alert .rz-alert-icon { + color: var(--rz-alert-icon-color); + margin: var(--rz-alert-icon-margin); + font-size: var(--rz-alert-icon-size); +} +.rz-alert .rz-alert-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + margin: var(--rz-alert-message-margin); +} +.rz-alert .rz-alert-title { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-alert-title-color); + margin-bottom: var(--rz-text-h6-margin-bottom); +} +.rz-alert.rz-variant-filled { + box-shadow: var(--rz-alert-box-shadow); +} +.rz-alert.rz-variant-text { + --rz-alert-padding: 0; + --rz-alert-background-color: transparent; + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0; +} +.rz-alert.rz-variant-text .rz-alert-item { + flex: unset; +} +.rz-alert.rz-variant-text .rz-alert-message { + flex-direction: row; +} +.rz-alert.rz-variant-text .rz-alert-title { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + margin-bottom: 0; + margin-right: 0.5rem; +} +.rz-alert.rz-primary { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-primary-lighter); + --rz-alert-color: var(--rz-on-primary-lighter); + --rz-alert-title-color: var(--rz-on-primary-lighter); + --rz-alert-icon-color: var(--rz-on-primary-lighter); +} +.rz-alert.rz-primary.rz-shade-light { + --rz-alert-background-color: var(--rz-primary-light); + --rz-alert-color: var(--rz-on-primary-light); + --rz-alert-title-color: var(--rz-on-primary-light); + --rz-alert-icon-color: var(--rz-on-primary-light); +} +.rz-alert.rz-primary.rz-shade-default { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-dark { + --rz-alert-background-color: var(--rz-primary-dark); + --rz-alert-color: var(--rz-on-primary-dark); + --rz-alert-title-color: var(--rz-on-primary-dark); + --rz-alert-icon-color: var(--rz-on-primary-dark); +} +.rz-alert.rz-primary.rz-shade-darker { + --rz-alert-background-color: var(--rz-primary-darker); + --rz-alert-color: var(--rz-on-primary-darker); + --rz-alert-title-color: var(--rz-on-primary-darker); + --rz-alert-icon-color: var(--rz-on-primary-darker); +} +.rz-alert.rz-variant-outlined.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + --rz-alert-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-variant-text.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-default { + --rz-alert-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-lighter { + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-light { + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-dark { + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-darker { + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-secondary { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-on-secondary-lighter); + --rz-alert-title-color: var(--rz-on-secondary-lighter); + --rz-alert-icon-color: var(--rz-on-secondary-lighter); +} +.rz-alert.rz-secondary.rz-shade-light { + --rz-alert-background-color: var(--rz-secondary-light); + --rz-alert-color: var(--rz-on-secondary-light); + --rz-alert-title-color: var(--rz-on-secondary-light); + --rz-alert-icon-color: var(--rz-on-secondary-light); +} +.rz-alert.rz-secondary.rz-shade-default { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-dark { + --rz-alert-background-color: var(--rz-secondary-dark); + --rz-alert-color: var(--rz-on-secondary-dark); + --rz-alert-title-color: var(--rz-on-secondary-dark); + --rz-alert-icon-color: var(--rz-on-secondary-dark); +} +.rz-alert.rz-secondary.rz-shade-darker { + --rz-alert-background-color: var(--rz-secondary-darker); + --rz-alert-color: var(--rz-on-secondary-darker); + --rz-alert-title-color: var(--rz-on-secondary-darker); + --rz-alert-icon-color: var(--rz-on-secondary-darker); +} +.rz-alert.rz-variant-outlined.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + --rz-alert-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-variant-text.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-default { + --rz-alert-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-lighter { + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-light { + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-dark { + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-darker { + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-info { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-lighter { + --rz-alert-background-color: var(--rz-info-lighter); + --rz-alert-color: var(--rz-on-info-lighter); + --rz-alert-title-color: var(--rz-on-info-lighter); + --rz-alert-icon-color: var(--rz-on-info-lighter); +} +.rz-alert.rz-info.rz-shade-light { + --rz-alert-background-color: var(--rz-info-light); + --rz-alert-color: var(--rz-on-info-light); + --rz-alert-title-color: var(--rz-on-info-light); + --rz-alert-icon-color: var(--rz-on-info-light); +} +.rz-alert.rz-info.rz-shade-default { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-dark { + --rz-alert-background-color: var(--rz-info-dark); + --rz-alert-color: var(--rz-on-info-dark); + --rz-alert-title-color: var(--rz-on-info-dark); + --rz-alert-icon-color: var(--rz-on-info-dark); +} +.rz-alert.rz-info.rz-shade-darker { + --rz-alert-background-color: var(--rz-info-darker); + --rz-alert-color: var(--rz-on-info-darker); + --rz-alert-title-color: var(--rz-on-info-darker); + --rz-alert-icon-color: var(--rz-on-info-darker); +} +.rz-alert.rz-variant-outlined.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + --rz-alert-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-variant-text.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-info.rz-shade-default { + --rz-alert-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-lighter { + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-light { + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-dark { + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-darker { + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-warning { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-lighter { + --rz-alert-background-color: var(--rz-warning-lighter); + --rz-alert-color: var(--rz-on-warning-lighter); + --rz-alert-title-color: var(--rz-on-warning-lighter); + --rz-alert-icon-color: var(--rz-on-warning-lighter); +} +.rz-alert.rz-warning.rz-shade-light { + --rz-alert-background-color: var(--rz-warning-light); + --rz-alert-color: var(--rz-on-warning-light); + --rz-alert-title-color: var(--rz-on-warning-light); + --rz-alert-icon-color: var(--rz-on-warning-light); +} +.rz-alert.rz-warning.rz-shade-default { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-dark { + --rz-alert-background-color: var(--rz-warning-dark); + --rz-alert-color: var(--rz-on-warning-dark); + --rz-alert-title-color: var(--rz-on-warning-dark); + --rz-alert-icon-color: var(--rz-on-warning-dark); +} +.rz-alert.rz-warning.rz-shade-darker { + --rz-alert-background-color: var(--rz-warning-darker); + --rz-alert-color: var(--rz-on-warning-darker); + --rz-alert-title-color: var(--rz-on-warning-darker); + --rz-alert-icon-color: var(--rz-on-warning-darker); +} +.rz-alert.rz-variant-outlined.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + --rz-alert-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-variant-text.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-default { + --rz-alert-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-lighter { + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-light { + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-dark { + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-darker { + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-error { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-error.rz-shade-lighter { + --rz-alert-background-color: var(--rz-error-lighter); + --rz-alert-color: var(--rz-on-error-lighter); + --rz-alert-title-color: var(--rz-on-error-lighter); + --rz-alert-icon-color: var(--rz-on-error-lighter); +} +.rz-alert.rz-error.rz-shade-light { + --rz-alert-background-color: var(--rz-error-light); + --rz-alert-color: var(--rz-on-error-light); + --rz-alert-title-color: var(--rz-on-error-light); + --rz-alert-icon-color: var(--rz-on-error-light); +} +.rz-alert.rz-error.rz-shade-default { + --rz-alert-background-color: var(--rz-error); + --rz-alert-color: var(--rz-on-error); + --rz-alert-title-color: var(--rz-on-error); + --rz-alert-icon-color: var(--rz-on-error); +} +.rz-alert.rz-error.rz-shade-dark { + --rz-alert-background-color: var(--rz-error-dark); + --rz-alert-color: var(--rz-on-error-dark); + --rz-alert-title-color: var(--rz-on-error-dark); + --rz-alert-icon-color: var(--rz-on-error-dark); +} +.rz-alert.rz-error.rz-shade-darker { + --rz-alert-background-color: var(--rz-error-darker); + --rz-alert-color: var(--rz-on-error-darker); + --rz-alert-title-color: var(--rz-on-error-darker); + --rz-alert-icon-color: var(--rz-on-error-darker); +} +.rz-alert.rz-variant-outlined.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-variant-text.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-error.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-lighter { + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-light { + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-dark { + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-darker { + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-danger { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-lighter { + --rz-alert-background-color: var(--rz-danger-lighter); + --rz-alert-color: var(--rz-on-danger-lighter); + --rz-alert-title-color: var(--rz-on-danger-lighter); + --rz-alert-icon-color: var(--rz-on-danger-lighter); +} +.rz-alert.rz-danger.rz-shade-light { + --rz-alert-background-color: var(--rz-danger-light); + --rz-alert-color: var(--rz-on-danger-light); + --rz-alert-title-color: var(--rz-on-danger-light); + --rz-alert-icon-color: var(--rz-on-danger-light); +} +.rz-alert.rz-danger.rz-shade-default { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-dark { + --rz-alert-background-color: var(--rz-danger-dark); + --rz-alert-color: var(--rz-on-danger-dark); + --rz-alert-title-color: var(--rz-on-danger-dark); + --rz-alert-icon-color: var(--rz-on-danger-dark); +} +.rz-alert.rz-danger.rz-shade-darker { + --rz-alert-background-color: var(--rz-danger-darker); + --rz-alert-color: var(--rz-on-danger-darker); + --rz-alert-title-color: var(--rz-on-danger-darker); + --rz-alert-icon-color: var(--rz-on-danger-darker); +} +.rz-alert.rz-variant-outlined.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-variant-text.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-lighter { + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-light { + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-dark { + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-darker { + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-success { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-lighter { + --rz-alert-background-color: var(--rz-success-lighter); + --rz-alert-color: var(--rz-on-success-lighter); + --rz-alert-title-color: var(--rz-on-success-lighter); + --rz-alert-icon-color: var(--rz-on-success-lighter); +} +.rz-alert.rz-success.rz-shade-light { + --rz-alert-background-color: var(--rz-success-light); + --rz-alert-color: var(--rz-on-success-light); + --rz-alert-title-color: var(--rz-on-success-light); + --rz-alert-icon-color: var(--rz-on-success-light); +} +.rz-alert.rz-success.rz-shade-default { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-dark { + --rz-alert-background-color: var(--rz-success-dark); + --rz-alert-color: var(--rz-on-success-dark); + --rz-alert-title-color: var(--rz-on-success-dark); + --rz-alert-icon-color: var(--rz-on-success-dark); +} +.rz-alert.rz-success.rz-shade-darker { + --rz-alert-background-color: var(--rz-success-darker); + --rz-alert-color: var(--rz-on-success-darker); + --rz-alert-title-color: var(--rz-on-success-darker); + --rz-alert-icon-color: var(--rz-on-success-darker); +} +.rz-alert.rz-variant-outlined.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + --rz-alert-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-variant-text.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-success.rz-shade-default { + --rz-alert-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-lighter { + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-light { + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-dark { + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-darker { + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-base { + --rz-alert-background-color: var(--rz-base-600); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); +} +.rz-alert.rz-variant-outlined.rz-base { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-base { + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-light { + --rz-alert-background-color: var(--rz-base-600); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); +} +.rz-alert.rz-variant-outlined.rz-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-light { + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-dark { + --rz-alert-background-color: var(--rz-black); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); +} +.rz-alert.rz-variant-outlined.rz-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-black); + --rz-alert-color: var(--rz-black); + --rz-alert-title-color: var(--rz-black); + --rz-alert-icon-color: var(--rz-black); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-dark { + --rz-alert-color: var(--rz-black); + --rz-alert-title-color: var(--rz-black); + --rz-alert-icon-color: var(--rz-black); + --rz-alert-background-color: transparent; +} + +@keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +@-webkit-keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +.rz-button.rz-speech-to-text-button-recording { + -webkit-animation: mic-blink 2s linear infinite; + -moz-animation: mic-blink 2s linear infinite; + animation: mic-blink 2s linear infinite; +} + +.rz-flex-row { + flex-direction: row !important; +} + +.rz-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.rz-flex-column { + flex-direction: column !important; +} + +.rz-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.rz-stack { + box-sizing: border-box; + gap: var(--rz-gap); +} + +.rz-row { + box-sizing: border-box; + flex-wrap: wrap; + gap: var(--rz-gap); + row-gap: var(--rz-row-gap); +} + +.rz-row > [class^=rz-col] { + flex: 1 0 0%; +} + +.rz-row > [class*=rz-col-] { + flex: 0 0 auto; + width: 100%; +} + +.rz-row > .rz-col-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); +} + +.rz-row > .rz-col-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-row > .rz-col-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-row > .rz-col-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-row > .rz-col-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-row > .rz-col-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-row > .rz-col-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-row > .rz-col-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-row > .rz-col-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-row > .rz-col-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-row > .rz-col-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-row > .rz-col-12 { + max-width: 100%; + flex-basis: 100%; +} + +@media (min-width: 576px) { + .rz-row > .rz-col-xs-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xs-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 768px) { + .rz-row > .rz-col-sm-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-sm-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1024px) { + .rz-row > .rz-col-md-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-md-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-md-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-md-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-md-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-md-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-md-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-md-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-md-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-md-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-md-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-md-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1280px) { + .rz-row > .rz-col-lg-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-lg-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1920px) { + .rz-row > .rz-col-xl-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xl-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 2560px) { + .rz-row > .rz-col-xx-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xx-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-12 { + max-width: 100%; + flex-basis: 100%; + } +} +.rz-offset-0 { + margin-inline-start: 0; +} + +.rz-offset-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-offset-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-offset-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-offset-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-offset-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-offset-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-offset-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-offset-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-offset-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-offset-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-offset-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); +} + +@media (min-width: 576px) { + .rz-offset-xs-0 { + margin-inline-start: 0; + } + .rz-offset-xs-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xs-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xs-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xs-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xs-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xs-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xs-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xs-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xs-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xs-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xs-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 768px) { + .rz-offset-sm-0 { + margin-inline-start: 0; + } + .rz-offset-sm-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-sm-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-sm-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-sm-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-sm-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-sm-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-sm-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-sm-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-sm-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-sm-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-sm-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1024px) { + .rz-offset-md-0 { + margin-inline-start: 0; + } + .rz-offset-md-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-md-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-md-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-md-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-md-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-md-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-md-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-md-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-md-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-md-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-md-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1280px) { + .rz-offset-lg-0 { + margin-inline-start: 0; + } + .rz-offset-lg-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-lg-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-lg-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-lg-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-lg-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-lg-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-lg-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-lg-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-lg-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-lg-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-lg-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1920px) { + .rz-offset-xl-0 { + margin-inline-start: 0; + } + .rz-offset-xl-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xl-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xl-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xl-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xl-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xl-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xl-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xl-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xl-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xl-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xl-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 2560px) { + .rz-offset-xx-0 { + margin-inline-start: 0; + } + .rz-offset-xx-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xx-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xx-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xx-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xx-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xx-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xx-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xx-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xx-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xx-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xx-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +.rz-order-first { + order: -1 !important; +} + +.rz-order-last { + order: 13 !important; +} + +.rz-order-0 { + order: 0 !important; +} + +.rz-order-1 { + order: 1 !important; +} + +.rz-order-2 { + order: 2 !important; +} + +.rz-order-3 { + order: 3 !important; +} + +.rz-order-4 { + order: 4 !important; +} + +.rz-order-5 { + order: 5 !important; +} + +.rz-order-6 { + order: 6 !important; +} + +.rz-order-7 { + order: 7 !important; +} + +.rz-order-8 { + order: 8 !important; +} + +.rz-order-9 { + order: 9 !important; +} + +.rz-order-10 { + order: 10 !important; +} + +.rz-order-11 { + order: 11 !important; +} + +.rz-order-12 { + order: 12 !important; +} + +@media (min-width: 576px) { + .rz-order-xs-first { + order: -1 !important; + } + .rz-order-xs-last { + order: 13 !important; + } + .rz-order-xs-0 { + order: 0 !important; + } + .rz-order-xs-1 { + order: 1 !important; + } + .rz-order-xs-2 { + order: 2 !important; + } + .rz-order-xs-3 { + order: 3 !important; + } + .rz-order-xs-4 { + order: 4 !important; + } + .rz-order-xs-5 { + order: 5 !important; + } + .rz-order-xs-6 { + order: 6 !important; + } + .rz-order-xs-7 { + order: 7 !important; + } + .rz-order-xs-8 { + order: 8 !important; + } + .rz-order-xs-9 { + order: 9 !important; + } + .rz-order-xs-10 { + order: 10 !important; + } + .rz-order-xs-11 { + order: 11 !important; + } + .rz-order-xs-12 { + order: 12 !important; + } +} +@media (min-width: 768px) { + .rz-order-sm-first { + order: -1 !important; + } + .rz-order-sm-last { + order: 13 !important; + } + .rz-order-sm-0 { + order: 0 !important; + } + .rz-order-sm-1 { + order: 1 !important; + } + .rz-order-sm-2 { + order: 2 !important; + } + .rz-order-sm-3 { + order: 3 !important; + } + .rz-order-sm-4 { + order: 4 !important; + } + .rz-order-sm-5 { + order: 5 !important; + } + .rz-order-sm-6 { + order: 6 !important; + } + .rz-order-sm-7 { + order: 7 !important; + } + .rz-order-sm-8 { + order: 8 !important; + } + .rz-order-sm-9 { + order: 9 !important; + } + .rz-order-sm-10 { + order: 10 !important; + } + .rz-order-sm-11 { + order: 11 !important; + } + .rz-order-sm-12 { + order: 12 !important; + } +} +@media (min-width: 1024px) { + .rz-order-md-first { + order: -1 !important; + } + .rz-order-md-last { + order: 13 !important; + } + .rz-order-md-0 { + order: 0 !important; + } + .rz-order-md-1 { + order: 1 !important; + } + .rz-order-md-2 { + order: 2 !important; + } + .rz-order-md-3 { + order: 3 !important; + } + .rz-order-md-4 { + order: 4 !important; + } + .rz-order-md-5 { + order: 5 !important; + } + .rz-order-md-6 { + order: 6 !important; + } + .rz-order-md-7 { + order: 7 !important; + } + .rz-order-md-8 { + order: 8 !important; + } + .rz-order-md-9 { + order: 9 !important; + } + .rz-order-md-10 { + order: 10 !important; + } + .rz-order-md-11 { + order: 11 !important; + } + .rz-order-md-12 { + order: 12 !important; + } +} +@media (min-width: 1280px) { + .rz-order-lg-first { + order: -1 !important; + } + .rz-order-lg-last { + order: 13 !important; + } + .rz-order-lg-0 { + order: 0 !important; + } + .rz-order-lg-1 { + order: 1 !important; + } + .rz-order-lg-2 { + order: 2 !important; + } + .rz-order-lg-3 { + order: 3 !important; + } + .rz-order-lg-4 { + order: 4 !important; + } + .rz-order-lg-5 { + order: 5 !important; + } + .rz-order-lg-6 { + order: 6 !important; + } + .rz-order-lg-7 { + order: 7 !important; + } + .rz-order-lg-8 { + order: 8 !important; + } + .rz-order-lg-9 { + order: 9 !important; + } + .rz-order-lg-10 { + order: 10 !important; + } + .rz-order-lg-11 { + order: 11 !important; + } + .rz-order-lg-12 { + order: 12 !important; + } +} +@media (min-width: 1920px) { + .rz-order-xl-first { + order: -1 !important; + } + .rz-order-xl-last { + order: 13 !important; + } + .rz-order-xl-0 { + order: 0 !important; + } + .rz-order-xl-1 { + order: 1 !important; + } + .rz-order-xl-2 { + order: 2 !important; + } + .rz-order-xl-3 { + order: 3 !important; + } + .rz-order-xl-4 { + order: 4 !important; + } + .rz-order-xl-5 { + order: 5 !important; + } + .rz-order-xl-6 { + order: 6 !important; + } + .rz-order-xl-7 { + order: 7 !important; + } + .rz-order-xl-8 { + order: 8 !important; + } + .rz-order-xl-9 { + order: 9 !important; + } + .rz-order-xl-10 { + order: 10 !important; + } + .rz-order-xl-11 { + order: 11 !important; + } + .rz-order-xl-12 { + order: 12 !important; + } +} +@media (min-width: 2560px) { + .rz-order-xx-first { + order: -1 !important; + } + .rz-order-xx-last { + order: 13 !important; + } + .rz-order-xx-0 { + order: 0 !important; + } + .rz-order-xx-1 { + order: 1 !important; + } + .rz-order-xx-2 { + order: 2 !important; + } + .rz-order-xx-3 { + order: 3 !important; + } + .rz-order-xx-4 { + order: 4 !important; + } + .rz-order-xx-5 { + order: 5 !important; + } + .rz-order-xx-6 { + order: 6 !important; + } + .rz-order-xx-7 { + order: 7 !important; + } + .rz-order-xx-8 { + order: 8 !important; + } + .rz-order-xx-9 { + order: 9 !important; + } + .rz-order-xx-10 { + order: 10 !important; + } + .rz-order-xx-11 { + order: 11 !important; + } + .rz-order-xx-12 { + order: 12 !important; + } +} +.rz-form-field-helper { + padding: var(--rz-form-field-helper-padding); +} + +.rz-form-field-content { + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); + box-shadow: var(--rz-form-field-shadow); + transition: var(--rz-input-transition); +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + flex: 1; +} +.rz-form-field-content .rz-form-field-start, +.rz-form-field-content .rz-form-field-end { + display: flex; + flex: 0; + align-items: center; + white-space: nowrap; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); +} + +.rz-form-field { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + vertical-align: top; +} +.rz-form-field:hover .rz-form-field-content { + box-shadow: var(--rz-form-field-hover-shadow); +} +.rz-form-field.rz-state-focused .rz-form-field-content { + box-shadow: var(--rz-form-field-focus-shadow); +} +.rz-form-field.rz-state-disabled .rz-form-field-content { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); +} +.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content { + border: var(--rz-input-disabled-border); +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled { + color: var(--rz-input-disabled-color); + opacity: 1; +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled::placeholder, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +.rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { + margin: 0; + --rz-input-height: var(--rz-form-field-filled-height); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); + --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); + box-shadow: var(--rz-input-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { + top: calc(var(--rz-numeric-button-offset) + 1rem); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end { + padding-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-textarea, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-textarea { + margin-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-datepicker-trigger, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-datepicker-trigger { + top: calc(50% + 0.4375rem); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-input-hover-border); + box-shadow: var(--rz-input-hover-shadow); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content { + border: var(--rz-input-focus-border); + box-shadow: var(--rz-input-focus-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content { + border: var(--rz-form-field-filled-border); + border-radius: var(--rz-form-field-filled-border-radius); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-filled .rz-form-field-content:after { + display: var(--rz-form-field-filled-underline-display); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-form-field-filled-hover-border); + box-shadow: var(--rz-form-field-filled-hover-shadow); + background-color: var(--rz-form-field-filled-hover-background-color); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused .rz-form-field-content, .rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused:hover .rz-form-field-content { + border: var(--rz-form-field-filled-focus-border); + box-shadow: var(--rz-form-field-filled-focus-shadow); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-text .rz-form-field-content { + border-color: transparent; + box-shadow: none; + --rz-input-background-color: transparent; + --rz-input-border-radius: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; + --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); +} +.rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { + padding: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-start { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-end { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { + content: ""; + position: absolute; + z-index: 1; + inset-inline-start: 50%; + inset-inline-end: 50%; + bottom: calc(-1 * var(--rz-border-width)); + height: calc(var(--rz-border-width) + 1px); + border: var(--rz-input-focus-border); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { + content: ""; + position: absolute; + inset: calc(-1 * var(--rz-border-width)); + top: auto; + height: var(--rz-border-width); + border-bottom: var(--rz-input-border); +} +.rz-form-field.rz-variant-filled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-hover-border); +} +.rz-form-field.rz-variant-filled.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-filled.rz-state-disabled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-disabled-border); +} +.rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); + border: var(--rz-input-focus-border); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); +} +.rz-form-field .rz-numeric-button { + display: none; +} +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { + display: block; +} + +.rz-form-field-label { + position: absolute; + pointer-events: none; + padding: var(--rz-form-field-label-padding); + inset-block-start: 50%; + inset-inline-end: auto; + border-radius: var(--rz-border-radius); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); + max-width: calc(100% - 1.5rem); + transform: translate(0, -50%); + background-color: transparent; + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); +} +.rz-state-disabled .rz-form-field-content > .rz-form-field-label { + color: var(--rz-input-disabled-color) !important; +} +.rz-form-field-label:last-child { + inset-inline-end: 1.5rem; +} +.rz-textarea ~ .rz-form-field-label { + inset-block-start: var(--rz-form-field-label-textarea-top); + transform: translate(0, 0); +} +.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { + transform: translate(0, 0.625rem); +} +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; + transform: translate(0, 0); + color: var(--rz-input-placeholder-color); + background-color: var(--rz-form-field-label-floating-background-color); + font-size: 0.75rem; + line-height: 1rem; + max-width: calc(100% - 1.5rem); +} +.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + background-color: inherit !important; +} +.invalid ~ .rz-form-field-label { + color: var(--rz-danger) !important; +} +.rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} + +.rz-timeline { + box-sizing: border-box; + display: flex; +} +.rz-timeline.rz-timeline-column { + flex-direction: column; +} +.rz-timeline.rz-timeline-column .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row { + flex-direction: row; +} +.rz-timeline.rz-timeline-row .rz-timeline-item { + flex-direction: column; + justify-content: end; + width: 100%; +} +.rz-timeline.rz-timeline-row.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: column-reverse; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse .rz-timeline-item { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column; + justify-content: end; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item { + flex-direction: column; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-end { + display: none; +} + +.rz-timeline-item { + display: flex; + padding: var(--rz-timeline-item-padding); + position: relative; +} +.rz-timeline-align-items-center .rz-timeline-item { + align-items: center; +} +.rz-timeline-align-items-normal .rz-timeline-item { + align-items: normal; +} +.rz-timeline-align-items-start .rz-timeline-item { + align-items: start; +} +.rz-timeline-align-items-end .rz-timeline-item { + align-items: end; +} +.rz-timeline-align-items-stretch .rz-timeline-item { + align-items: stretch; +} +.rz-timeline-item:before { + content: ""; + position: absolute; + background-color: var(--rz-timeline-line-color); +} +.rz-timeline-column .rz-timeline-item:before { + width: var(--rz-timeline-line-width); + top: 0; + bottom: 0; + left: calc(50% - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline-column .rz-timeline-item:first-child:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-top-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + top: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column .rz-timeline-item:last-child:before { + bottom: calc(50% - var(--rz-timeline-line-width) / 2); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + bottom: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + bottom: auto; + left: 0; + right: 0; + height: var(--rz-timeline-line-width); +} +.rz-timeline-row .rz-timeline-item:first-child:before { + left: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + left: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:last-child:before { + right: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-right-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + right: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} + +.rz-timeline-content-start { + text-align: center; +} +.rz-timeline-column .rz-timeline-content-start { + flex: 1 1 auto; + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-content-end { + flex: 1 1 auto; + text-align: center; +} +.rz-timeline-column .rz-timeline-content-end { + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} +.rz-timeline-row .rz-timeline-content-end { + max-height: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-axis { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 var(--rz-timeline-axis-size); +} +.rz-timeline-column .rz-timeline-axis { + width: var(--rz-timeline-axis-size); +} +.rz-timeline-row .rz-timeline-axis { + height: var(--rz-timeline-axis-size); +} + +.rz-timeline-point { + position: relative; + display: flex; + flex: 0 1 var(--rz-timeline-point-size); + align-items: center; + justify-content: center; + height: var(--rz-timeline-point-size); + width: var(--rz-timeline-point-size); + border: var(--rz-timeline-point-border); + border-radius: var(--rz-timeline-point-border-radius); + background-color: var(--rz-timeline-point-background-color); + color: var(--rz-timeline-point-color); +} + +.rz-timeline-point-outlined { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border-color: var(--rz-timeline-point-background-color); +} + +.rz-timeline-point-flat { + border: 0; +} + +.rz-timeline-point-text { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border: 0; +} + +.rz-timeline-point-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} + +.rz-timeline-point-outlined.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); + border-color: var(--rz-primary); +} + +.rz-timeline-point-text.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); +} + +.rz-timeline-point-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} + +.rz-timeline-point-outlined.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); + border-color: var(--rz-secondary); +} + +.rz-timeline-point-text.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); +} + +.rz-timeline-point-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} + +.rz-timeline-point-outlined.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); + border-color: var(--rz-info); +} + +.rz-timeline-point-text.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); +} + +.rz-timeline-point-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} + +.rz-timeline-point-outlined.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); + border-color: var(--rz-warning); +} + +.rz-timeline-point-text.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); +} + +.rz-timeline-point-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} + +.rz-timeline-point-outlined.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); + border-color: var(--rz-success); +} + +.rz-timeline-point-text.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); +} + +.rz-timeline-point-base { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-600); + border-color: var(--rz-base-600); +} + +.rz-timeline-point-text.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-600); +} + +.rz-timeline-point-light { + background-color: var(--rz-base-600); + color: var(--rz-text-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-600); + border-color: var(--rz-base-600); +} + +.rz-timeline-point-text.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-600); +} + +.rz-timeline-point-dark { + background-color: var(--rz-black); + color: var(--rz-text-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-black); + border-color: var(--rz-black); +} + +.rz-timeline-point-text.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-black); +} + +.rz-timeline-axis-lg { + --rz-timeline-point-size: 3rem; +} +.rz-timeline-axis-lg .rzi { + font-size: 2rem; +} + +.rz-timeline-axis-md { + --rz-timeline-point-size: 1.5rem; +} +.rz-timeline-axis-md .rzi { + font-size: 1rem; +} + +.rz-timeline-axis-sm { + --rz-timeline-point-size: 1rem; +} +.rz-timeline-axis-sm .rzi { + font-size: 0.625rem; +} + +.rz-timeline-axis-xs { + --rz-timeline-point-size: 0.75rem; +} +.rz-timeline-axis-xs .rzi { + font-size: 0.5rem; +} + +.rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { + width: 100%; + height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #383838; + --rz-base-50: #e0e0e0; + --rz-base-100: #a0a0a0; + --rz-base-200: #6c6c6c; + --rz-base-300: #545454; + --rz-base-400: #383838; + --rz-base-500: #333333; + --rz-base-600: #2e2e2e; + --rz-base-700: #252525; + --rz-base-800: #1e1e1e; + --rz-base-900: #121212; + --rz-base-light: #a0a0a0; + --rz-base-lighter: #ffffff; + --rz-base-dark: #252525; + --rz-base-darker: #000000; + --rz-primary: #bb86fc; + --rz-primary-light: #c99efd; + --rz-primary-lighter: rgba(187, 134, 252, 0.12); + --rz-primary-dark: #966bca; + --rz-primary-darker: #7f5bab; + --rz-secondary: #01a299; + --rz-secondary-light: #34b5ad; + --rz-secondary-lighter: rgba(1, 162, 153, 0.12); + --rz-secondary-dark: #01827a; + --rz-secondary-darker: #016e68; + --rz-info: #2196f3; + --rz-info-light: #4dabf5; + --rz-info-lighter: rgba(33, 150, 243, 0.2); + --rz-info-dark: #1a78c2; + --rz-info-darker: #1666a5; + --rz-success: #4caf50; + --rz-success-light: #70bf73; + --rz-success-lighter: rgba(76, 175, 80, 0.16); + --rz-success-dark: #3d8c40; + --rz-success-darker: #347736; + --rz-warning: #ff9800; + --rz-warning-light: #ffad33; + --rz-warning-lighter: rgba(255, 152, 0, 0.2); + --rz-warning-dark: #cc7a00; + --rz-warning-darker: #ad6700; + --rz-danger: #f44336; + --rz-danger-light: #f6695e; + --rz-danger-lighter: rgba(244, 67, 54, 0.2); + --rz-danger-dark: #c3362b; + --rz-danger-darker: #a62e25; + --rz-on-base: #ffffff; + --rz-on-base-light: #121212; + --rz-on-base-lighter: #121212; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #bb86fc; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #01a299; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2196f3; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #4caf50; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #ff9800; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f44336; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #3700b3; + --rz-series-2: #ba68c8; + --rz-series-3: #f06292; + --rz-series-4: #ff8a65; + --rz-series-5: #ffee58; + --rz-series-6: #9ccc65; + --rz-series-7: #26a69a; + --rz-series-8: #4fc3f7; + --rz-series-9: #7f5cce; + --rz-series-10: #ce93d8; + --rz-series-11: #f48fb1; + --rz-series-12: #ffab91; + --rz-series-13: #fff176; + --rz-series-14: #aed581; + --rz-series-15: #4db6ac; + --rz-series-16: #81d4fa; + --rz-series-17: #a58cdd; + --rz-series-18: #e1bee7; + --rz-series-19: #f8bbd0; + --rz-series-20: #ffccbc; + --rz-series-21: #fff59d; + --rz-series-22: #c5e1a5; + --rz-series-23: #80cbc4; + --rz-series-24: #b3e5fc; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 1rem; + --rz-body-line-height: 1.5; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Roboto, sans-serif; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-50); + --rz-text-secondary-color: var(--rz-base-100); + --rz-text-tertiary-color: var(--rz-base-200); + --rz-text-disabled-color: var(--rz-base-300); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: normal; + --rz-text-display-h1-font-weight: 400; + --rz-text-display-h1-letter-spacing: -1.5px; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); + --rz-text-display-h2-line-height: normal; + --rz-text-display-h2-font-weight: 400; + --rz-text-display-h2-letter-spacing: -0.5px; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h3-line-height: normal; + --rz-text-display-h3-font-weight: 400; + --rz-text-display-h3-letter-spacing: 0; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); + --rz-text-display-h4-line-height: normal; + --rz-text-display-h4-font-weight: 400; + --rz-text-display-h4-letter-spacing: 0.25px; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h5-line-height: normal; + --rz-text-display-h5-font-weight: 400; + --rz-text-display-h5-letter-spacing: 0; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); + --rz-text-display-h6-line-height: normal; + --rz-text-display-h6-font-weight: 500; + --rz-text-display-h6-letter-spacing: 0.15px; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-h1-line-height: normal; + --rz-text-h1-font-weight: 400; + --rz-text-h1-letter-spacing: -1.5px; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); + --rz-text-h2-line-height: normal; + --rz-text-h2-font-weight: 400; + --rz-text-h2-letter-spacing: -0.5px; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: normal; + --rz-text-h3-font-weight: 400; + --rz-text-h3-letter-spacing: 0; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); + --rz-text-h4-line-height: normal; + --rz-text-h4-font-weight: 400; + --rz-text-h4-letter-spacing: 0.25px; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: normal; + --rz-text-h5-font-weight: 400; + --rz-text-h5-letter-spacing: 0; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); + --rz-text-h6-line-height: normal; + --rz-text-h6-font-weight: 500; + --rz-text-h6-letter-spacing: 0.15px; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.5; + --rz-text-subtitle1-font-weight: 400; + --rz-text-subtitle1-letter-spacing: 0.15px; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.5; + --rz-text-subtitle2-font-weight: 500; + --rz-text-subtitle2-letter-spacing: 0.1px; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.5; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: 0.5px; + --rz-text-body1-color: var(--rz-text-title-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.5; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: 0.25px; + --rz-text-body2-color: var(--rz-text-title-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: normal; + --rz-text-button-font-weight: 500; + --rz-text-button-letter-spacing: 1.25px; + --rz-text-button-text-transform: uppercase; + --rz-text-button-color: var(--rz-text-title-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-title-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-title-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-focus: var(--rz-border-width) solid var(--rz-primary); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-500); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.14); + --rz-shadow-2: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-3: 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 3px 3px rgba(0, 0, 0, 0.12), 0px 1px 8px rgba(0, 0, 0, 0.14); + --rz-shadow-4: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); + --rz-shadow-5: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-6: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-7: 0px 9px 12px rgba(0, 0, 0, 0.14), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 5px 6px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0px 12px 17px rgba(0, 0, 0, 0.14), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 7px 8px rgba(0, 0, 0, 0.14); + --rz-shadow-9: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14); + --rz-shadow-10: 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 11px 15px rgba(0, 0, 0, 0.14); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 1rem; + --rz-accordion-item-padding-inline: 1rem; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: var(--rz-border-base-900); + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-secondary-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.5rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: 500; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.75rem; + --rz-accordion-toggle-icon-margin-inline: 0.75rem 0; + --rz-accordion-toggle-icon-order: 1; + --rz-accordion-selected-color: var(--rz-text-title-color); + --rz-accordion-hover-color: var(--rz-text-title-color); + --rz-accordion-content-padding-inline: 1rem; + --rz-accordion-content-padding-block: 1rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: var(--rz-shadow-1); + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 500; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: var(--rz-shadow-1); + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: var(--rz-shadow-3); + --rz-button-hover-gradient: none; + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: var(--rz-shadow-3); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: var(--rz-shadow-6); + --rz-button-active-gradient: none; + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-background-color); + --rz-card-shadow: var(--rz-shadow-1); + --rz-card-border: var(--rz-border-base-500); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.125rem; + --rz-checkbox-height: 1.125rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: 2px; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-primary); + --rz-checkbox-checked-hover-background-color: var(--rz-primary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-base-300); + --rz-checkbox-checked-color: var(--rz-on-primary); + --rz-checkbox-checked-shadow: none; + --rz-checkbox-checked-border: var(--rz-border-primary); + --rz-checkbox-checked-hover-border: var(--rz-border-primary); + --rz-checkbox-checked-disabled-border: var(--rz-border-300); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-600); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0.125rem; + --rz-chip-padding-inline: 0.75rem 0.125rem; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: calc(4 * var(--rz-border-radius)); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: var(--rz-shadow-1); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-600); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: var(--rz-shadow-0); + --rz-datalist-item-border: var(--rz-border-base-600); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.5rem; + --rz-datepicker-trigger-icon-color: var(--rz-text-secondary-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); + --rz-datepicker-popup-width: 22rem; + --rz-datepicker-panel-border: none; + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: var(--rz-shadow-4); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-background-color); + --rz-datepicker-header-padding-block: 0.75rem; + --rz-datepicker-header-padding-inline: 0.75rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 0.75rem; + --rz-datepicker-footer-line-height: 3rem; + --rz-datepicker-prev-next-icon-size: 2rem; + --rz-datepicker-prev-next-button-border-radius: 50%; + --rz-datepicker-calendar-padding-block: 0 0.75rem; + --rz-datepicker-calendar-padding-inline: 0.75rem; + --rz-datepicker-calendar-item-padding: 0.625rem 0; + --rz-datepicker-calendar-header-font-size: 0.75rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: 0.875rem; + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-white); + --rz-datepicker-calendar-hover-background-color: var(--rz-base-600); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-border: none; + --rz-datepicker-calendar-border-radius: 50%; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-text-color); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-base-100); + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8.75rem; + --rz-datepicker-year-dropdown-width: 6rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-background-color); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.75rem; + --rz-timepicker-padding-inline: 0.75rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-text-color); + --rz-timepicker-button-background-color: var(--rz-base-700); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: var(--rz-border-base-600); + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-900); + --rz-dialog-shadow: var(--rz-shadow-9); + --rz-dialog-title-background-color: var(--rz-base-900); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 1.5rem 0; + --rz-dialog-title-padding-inline: 1.5rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.5rem; + --rz-dialog-title-font-weight: 500; + --rz-dialog-title-letter-spacing: 0.0125em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-title-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.5rem; + --rz-dialog-mask-background-color: var(--rz-black); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 1rem; + --rz-dropdown-panel-padding: 0 1rem; + --rz-dropdown-items-margin: 0 -1rem; + --rz-dropdown-items-padding: 0.5rem 0; + --rz-dropdown-item-padding: 0.75rem 1rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-base-400); + --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-shadow: none; + --rz-dropdown-item-hover-color: var(--rz-white); + --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-500); + --rz-dropdown-filter-padding: 1rem 0 0.5rem; + --rz-dropdown-open-background-color: var(--rz-base-600); + --rz-dropdown-open-border: 2px solid var(--rz-primary); + --rz-dropdown-panel-border: none; + --rz-dropdown-panel-shadow: var(--rz-shadow-4); + --rz-dropdown-chips-padding-block: 0.4375rem; + --rz-dropdown-chips-padding-inline: 0.4375rem 0.9375rem; + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 1rem; + /* Editor */ + --rz-editor-border: var(--rz-border-base-600); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary-lighter); + --rz-editor-button-selected-color: var(--rz-on-secondary-lighter); + --rz-editor-separator-background-color: var(--rz-base-600); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-600); + --rz-fieldset-border-radius: var(--rz-border-radius); + --rz-fieldset-padding: 0 1rem 1rem; + --rz-fieldset-legend-color: var(--rz-text-secondary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0 1rem; + --rz-fieldset-legend-margin-inline: 0.5rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 0.5rem; + --rz-fieldset-toggle-width: 1.5rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0; + --rz-fieldset-toggle-height: 1.5rem; + --rz-fieldset-toggle-background-color: transparent; + --rz-fieldset-toggle-color: var(--rz-text-secondary-color); + --rz-fieldset-toggle-font-size: 1.5rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: none; + --rz-footer-color: var(--rz-text-secondary-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.5rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: 0.75rem; + --rz-form-field-filled-height: 3.375rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.9375rem; + --rz-form-field-filled-numeric-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-numeric-padding-inline: 0.9375rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-600); + --rz-form-field-filled-hover-background-color: var(--rz-base-500); + --rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-600); + --rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-500); + --rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-600); + --rz-form-field-filled-border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0; + --rz-form-field-filled-label-floating-top: 0.5rem; + --rz-form-field-filled-hover-shadow: none; + --rz-form-field-filled-focus-shadow: none; + --rz-form-field-filled-underline-display: block; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0 0.25rem; + --rz-form-field-text-label-padding: 0; + --rz-form-field-label-inset-inline-start: 0.6875rem; + --rz-form-field-label-textarea-top: 0.5rem; + --rz-form-field-label-floating-top: -0.5625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 1rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(244, 67, 54, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2.5rem; + --rz-gravatar-height: 2.5rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-base-600); + --rz-grid-right-cell-border: none; + --rz-grid-bottom-cell-border: var(--rz-border-base-600); + --rz-grid-cell-padding: 0.625rem 1rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: 0.875rem; + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-base-600); + --rz-grid-hover-color: var(--rz-white); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-primary-lighter); + --rz-grid-selected-color: var(--rz-on-primary-lighter); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: none; + --rz-grid-header-cell-border-bottom: var(--rz-border-base-600); + --rz-grid-header-background-color: var(--rz-base-background-color); + --rz-grid-header-font-size: 0.875rem; + --rz-grid-header-line-height: 1.5rem; + --rz-grid-header-font-weight: 500; + --rz-grid-header-text-transform: none; + --rz-grid-header-color: var(--rz-text-title-color); + --rz-grid-header-cell-padding: 0.75rem 0; + --rz-grid-header-title-padding-inline: 1rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-600); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-600); + --rz-grid-filter-background-color: var(--rz-base-600); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: none; + --rz-grid-filter-font-size: 0.875rem; + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: 0.875rem; + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-600); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base-600); + --rz-grid-clear-filter-button-color: var(--rz-text-color); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-base-600); + --rz-grid-apply-filter-button-color: var(--rz-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 1rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1.25rem; + --rz-grid-border: var(--rz-border-base-600); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1.25rem; + --rz-grid-sort-icon-height: 1.25rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: none; + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-900); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.25rem; + --rz-grid-column-resizer-helper-width: 0.125rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-base-600); + --rz-grid-frozen-cell-background-color: var(--rz-base-background-color); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 1rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-600); + --rz-grid-group-header-item-padding-block: 0.25rem; + --rz-grid-group-header-item-padding-inline: 0.75rem 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-base-600); + --rz-grid-group-header-item-border-radius: calc(4 * var(--rz-border-radius)); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-disabled-color); + --rz-column-drag-handle-hover-color: var(--rz-text-title-color); + --rz-column-drag-handle-margin-inline: 0; + --rz-column-draggable-shadow: var(--rz-shadow-4); + /* Header */ + --rz-header-background-color: var(--rz-base-700); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: none; + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: var(--rz-shadow-4); + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.5rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 40; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.5rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.9375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: none; + --rz-input-hover-shadow: none; + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-primary); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: none; + --rz-input-disabled-background-color: var(--rz-base-background-color); + --rz-input-disabled-color: var(--rz-text-disabled-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-500); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 1rem; + --rz-listbox-header-padding-block: 0.75rem; + --rz-listbox-header-padding-inline: 1rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: rgba(0, 0, 0, 0.04); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: rgba(0, 0, 0, 0.04); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-700); + --rz-menu-border: none; + --rz-menu-border-radius: var(--rz-border-radius); + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-white); + --rz-menu-item-hover-background-color: var(--rz-base-400); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-primary); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-white); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-700); + --rz-menu-top-item-hover-color: var(--rz-primary); + --rz-menu-top-item-hover-background-color: var(--rz-base-700); + --rz-menu-top-item-selected-color: var(--rz-primary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-primary); + --rz-context-menu-padding-block: 0.5rem; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: var(--rz-shadow-6); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: var(--rz-base-800); + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-success); + --rz-notification-success-background-color: var(--rz-success-lighter); + --rz-notification-success-icon-color: var(--rz-success); + --rz-notification-warning-color: var(--rz-warning); + --rz-notification-warning-background-color: var(--rz-warning-lighter); + --rz-notification-warning-icon-color: var(--rz-warning); + --rz-notification-error-color: var(--rz-danger); + --rz-notification-error-background-color: var(--rz-danger-lighter); + --rz-notification-error-icon-color: var(--rz-danger); + --rz-notification-info-color: var(--rz-info); + --rz-notification-info-background-color: var(--rz-info-lighter); + --rz-notification-info-icon-color: var(--rz-info); + /* Numeric */ + --rz-numeric-line-height: var(--rz-body-line-height); + --rz-numeric-input-padding-block: 0.4375rem; + --rz-numeric-input-padding-inline: 0.9375rem 1.25rem; + --rz-numeric-button-width: 1rem; + --rz-numeric-button-height: 1rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: transparent; + --rz-numeric-button-disabled-background-color: transparent; + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-text-color); + /* Overlay */ + --rz-overlay-shadow: var(--rz-shadow-4); + --rz-overlay-border: none; + --rz-overlay-background-color: var(--rz-base-600); + /* Pager */ + --rz-pager-background-color: transparent; + --rz-pager-padding: 0.5rem 1rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: none; + --rz-pager-button-border-radius: 2rem; + --rz-pager-numeric-button-background-color: transparent; + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: none; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-600); + --rz-pager-numeric-button-hover-color: var(--rz-white); + --rz-pager-numeric-button-padding: 0.75rem 1rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-primary-lighter); + --rz-pager-numeric-button-selected-color: var(--rz-primary); + --rz-pager-numeric-button-selected-border: none; + --rz-pager-numeric-button-selected-padding: 0.75rem 1rem; + --rz-pager-numeric-button-min-width: 3rem; + --rz-pager-back-button-background-color: transparent; + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: transparent; + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: 0.875rem; + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: calc(var(--rz-body-font-size) * 0.875); + --rz-panel-menu-font-weight: 500; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.5rem; + --rz-panel-menu-item-padding-block: 1rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-600); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-color); + --rz-panel-menu-item-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-hover-color: var(--rz-white); + --rz-panel-menu-item-hover-background-color: var(--rz-base-600); + --rz-panel-menu-item-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem 0.5rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0.5rem; + --rz-panel-menu-item-2nd-level-border-radius: var(--rz-border-radius); + --rz-panel-menu-item-2nd-level-offset: 3rem; + --rz-panel-menu-item-2nd-level-font-size: calc(var(--rz-body-font-size) * 0.875); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: var(--rz-text-color); + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-600); + --rz-panel-menu-item-2nd-level-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-item-2nd-level-active-font-weight: 500; + --rz-panel-menu-item-3rd-level-color: var(--rz-text-color); + --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-600); + --rz-panel-menu-item-3rd-level-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: var(--rz-text-secondary-color); + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 1rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -2.25rem 1rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 1rem; + --rz-panel-title-line-height: 1.5rem; + --rz-panel-title-font-weight: 500; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: transparent; + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-text-title-color); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: var(--rz-shadow-1); + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-700); + --rz-profile-menu-top-item-background-color: var(--rz-base-700); + --rz-profile-menu-border: none; + --rz-profile-menu-padding-block: 0.5rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-base-400); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-primary-lighter); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 0.25rem; + --rz-progressbar-border-radius: 0; + --rz-progressbar-value-background-color: var(--rz-primary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 0; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: square; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: 2px; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-base-background-color); + --rz-radio-active-shadow: none; + --rz-radio-checked-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-shadow: none; + --rz-radio-checked-color: var(--rz-text-color); + --rz-radio-circle-background-color: var(--rz-primary); + --rz-radio-circle-shadow: none; + --rz-radio-circle-hover-background-color: var(--rz-primary-light); + --rz-radio-icon-width: 0.625rem; + --rz-radio-icon-height: 0.625rem; + --rz-radio-checked-border: var(--rz-border-primary); + /* Rating */ + --rz-rating-color: var(--rz-text-secondary-color); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.5; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-text-disabled-color); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-base-600); + --rz-scheduler-border-color: var(--rz-base-600); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: var(--rz-shadow-0); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-secondary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-background-color); + --rz-scheduler-toolbar-title-font-size: 1.5rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-base-background-color); + --rz-scheduler-prev-next-button-color: var(--rz-text-color); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: 2rem; + --rz-scheduler-prev-button-border-start-end-radius: 2rem; + --rz-scheduler-prev-button-border-end-start-radius: 2rem; + --rz-scheduler-prev-button-border-end-end-radius: 2rem; + --rz-scheduler-next-button-border-start-start-radius: 2rem; + --rz-scheduler-next-button-border-start-end-radius: 2rem; + --rz-scheduler-next-button-border-end-start-radius: 2rem; + --rz-scheduler-next-button-border-end-end-radius: 2rem; + --rz-scheduler-today-button-margin-inline-start: 1rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.875rem; + --rz-scheduler-today-button-text-transform: capitalize; + --rz-scheduler-view-button-border: var(--rz-border-base-600); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); + --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); + --rz-scheduler-view-selected-border-color: var(--rz-base-600); + --rz-scheduler-header-background-color: var(--rz-base-background-color); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-base-600); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-900); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 0.25rem; + --rz-scheduler-year-slot-title-width: fit-content; + --rz-scheduler-year-slot-title-border-radius: 50%; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: rgba(255, 255, 255, 0.12); + --rz-scrollbar-border-radius: 0; + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-background-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-base-600); + --rz-selectbar-selected-background-color: var(--rz-primary-lighter); + --rz-selectbar-selected-color: var(--rz-on-primary-lighter); + --rz-selectbar-selected-border: var(--rz-border-base-600); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: none; + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: transparent; + --rz-sidebar-toggle-hover-color: var(--rz-white); + --rz-sidebar-toggle-hover-background-color: var(--rz-base-500); + --rz-sidebar-toggle-hover-border-radius: 50%; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 300px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-primary-lighter); + --rz-slider-border: none; + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 4px; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-primary); + --rz-slider-range-border: none; + --rz-slider-handle-width: 20px; + --rz-slider-handle-height: 20px; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-primary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: 50%; + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-primary); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: 0px 0px 0px 10px var(--rz-primary-lighter); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-400); + --rz-slider-disabled-border: none; + --rz-slider-disabled-range-background-color: var(--rz-base-200); + --rz-slider-disabled-range-border: none; + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-200); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-color); + --rz-splitter-bar-color-active: var(--rz-on-primary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-primary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-secondary-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.25rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-secondary-color); + --rz-steps-number-background-color: var(--rz-base-600); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-600); + --rz-switch-checked-background-color: var(--rz-primary-lighter); + --rz-switch-box-shadow: var(--rz-shadow-1); + --rz-switch-circle-background-color: var(--rz-text-color); + --rz-switch-checked-circle-background-color: var(--rz-on-primary-lighter); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1rem; + --rz-tabs-shadow: none; + --rz-tabs-border: none; + --rz-tabs-border-radius: 0; + --rz-tabs-background-color: transparent; + --rz-tabs-tab-font-size: 0.875rem; + --rz-tabs-tab-line-height: 1.5rem; + --rz-tabs-tab-font-weight: 500; + --rz-tabs-tab-text-transform: uppercase; + --rz-tabs-tab-letter-spacing: 1.25px; + --rz-tabs-tab-padding-block: 0.75rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: transparent; + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-primary); + --rz-tabs-tab-selected-top-border-color: var(--rz-primary); + --rz-tabs-tab-hover-background-color: var(--rz-base-600); + --rz-tabs-tab-hover-color: var(--rz-text-title-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-title-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 1rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-200); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-200); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: transparent; + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.5rem; + --rz-tree-node-selected-background-color: var(--rz-primary-lighter); + --rz-tree-node-selected-color: var(--rz-on-primary-lighter); + --rz-tree-node-selected-border-radius: var(--rz-border-radius); + --rz-tree-node-margin-block: 0; + --rz-tree-node-margin-inline: 0; + --rz-tree-node-hover-background-color: var(--rz-base-600); + --rz-tree-node-hover-color: var(--rz-white); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 2rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all); + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-600); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-base-600); + --rz-upload-choose-color: var(--rz-text-color); + --rz-upload-choose-hover-background-color: var(--rz-base-400); + --rz-upload-choose-hover-color: var(--rz-white); + --rz-upload-choose-active-background-color: var(--rz-base-400); + --rz-upload-choose-active-color: var(--rz-white); + --rz-upload-cancel-background-color: var(--rz-base-600); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/material-wcag.css b/_content/Radzen.Blazor/css/material-wcag.css index 60c2bdf..c148d37 100755 --- a/_content/Radzen.Blazor/css/material-wcag.css +++ b/_content/Radzen.Blazor/css/material-wcag.css @@ -1,6 +1,8 @@ -:root { +:root, +.rz-material { --rz-white: #ffffff; --rz-black: #000000; + --rz-base: #eeeeee; --rz-base-50: #fafafa; --rz-base-100: #f5f5f5; --rz-base-200: #eeeeee; @@ -11,6 +13,10 @@ --rz-base-700: #616161; --rz-base-800: #424242; --rz-base-900: #212121; + --rz-base-light: #f5f5f5; + --rz-base-lighter: #ffffff; + --rz-base-dark: #424242; + --rz-base-darker: #212121; --rz-primary: #4340D2; --rz-primary-light: #6966db; --rz-primary-lighter: rgba(67, 64, 210, 0.12); @@ -41,6 +47,11 @@ --rz-danger-lighter: rgba(183, 27, 27, 0.2); --rz-danger-dark: #921616; --rz-danger-darker: #7c1212; + --rz-on-base: #212121; + --rz-on-base-light: #212121; + --rz-on-base-lighter: #212121; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: #4340D2; diff --git a/_content/Radzen.Blazor/css/material.css b/_content/Radzen.Blazor/css/material.css index 7c3d66b..75d28df 100755 --- a/_content/Radzen.Blazor/css/material.css +++ b/_content/Radzen.Blazor/css/material.css @@ -96,7 +96,7 @@ content: ""; flex: auto; height: 1px; - margin-right: 16px; + margin-inline-end: 16px; background-color: var(--rz-base-300); } @@ -177,67 +177,48 @@ background: var(--rz-base-200); } -.rz-datepicker-inline:not(.ng-trigger) table { +.rz-datepicker-inline table { width: 100%; } -.rz-datepicker.rz-popup { - width: 340px !important; -} -.rz-datepicker .rz-datepicker-calendar-container { - padding: 0 0.75rem 0.5rem; -} - -.rz-datepicker-title .rz-dropdown { - min-width: 100px !important; - margin-top: 0.75rem !important; -} -.rz-datepicker-title .rz-dropdown:first-child { - min-width: 140px !important; -} - -.rz-datepicker-calendar td, -.rz-datepicker-calendar th { +.rz-calendar-view td, +.rz-calendar-view th { text-align: center; } -.rz-datepicker-calendar td a.rz-state-default, -.rz-datepicker-calendar td span.rz-state-default, -.rz-datepicker-calendar th a.rz-state-default, -.rz-datepicker-calendar th span.rz-state-default { +.rz-calendar-view td a.rz-state-default, +.rz-calendar-view td span.rz-state-default, +.rz-calendar-view th a.rz-state-default, +.rz-calendar-view th span.rz-state-default { display: inline-block; width: 2.25rem; height: 2.25rem; line-height: 1rem; } -.rz-datepicker-calendar td a.rz-state-default:not(.rz-state-active):hover, -.rz-datepicker-calendar td span.rz-state-default:not(.rz-state-active):hover, -.rz-datepicker-calendar th a.rz-state-default:not(.rz-state-active):hover, -.rz-datepicker-calendar th span.rz-state-default:not(.rz-state-active):hover { +.rz-calendar-view td a.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view td span.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view th a.rz-state-default:not(.rz-state-active):hover, +.rz-calendar-view th span.rz-state-default:not(.rz-state-active):hover { border-radius: 50%; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar th .rz-state-active { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view th .rz-state-active { border-radius: 50%; } .rz-timepicker { flex-wrap: wrap; } -.rz-timepicker .rz-spinner { +.rz-timepicker .rz-numeric { flex: 1; } .rz-timepicker > .rz-button { flex-basis: 100%; } -.rz-calendar .rz-inputtext { - padding-right: 2.5rem !important; -} - -.rz-spinner .rz-spinner-button { +.rz-numeric .rz-numeric-button { box-shadow: none; } -.rz-spinner .rz-spinner-button:hover { +.rz-numeric .rz-numeric-button:hover { box-shadow: none !important; } @@ -256,7 +237,7 @@ } .rz-datatable .rz-col-icon { - border-right: var(--rz-border-base-300); + border-inline-end: var(--rz-border-base-300); } .rz-grid-table-composite { @@ -264,17 +245,17 @@ --rz-grid-header-cell-border: var(--rz-border-base-300); } -.rz-paginator-pages { +.rz-pager-pages { max-height: 3rem; } -.rz-paginator-element { +.rz-pager-element { box-shadow: var(--rz-shadow-0) !important; } -.rz-paginator-element:hover { +.rz-pager-element:hover { box-shadow: var(--rz-shadow-0) !important; } -.rz-paginator-element:active { +.rz-pager-element:active { box-shadow: var(--rz-shadow-0) !important; } @@ -416,8697 +397,3260 @@ background-size: 100%; } -:root { - --blue: #007bff; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; - --red: #dc3545; - --orange: #fd7e14; - --yellow: #ffc107; - --green: #28a745; - --teal: #20c997; - --cyan: #17a2b8; - --white: #fff; - --gray: #6c757d; - --gray-dark: #343a40; - --primary: #4340D2; - --secondary: #e91e63; - --success: #4caf50; - --info: #2196f3; - --warning: #ff9800; - --danger: #f44336; - --light: #eeeeee; - --dark: #343a40; - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --font-family-sans-serif: var(--rz-text-font-family); - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; - } - a:not(.btn) { - text-decoration: underline; - } - abbr[title]::after { - content: " (" attr(title) ")"; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #adb5bd; - page-break-inside: avoid; - } - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } - @page { - size: a3; - } - body { - min-width: 992px !important; - } - .container { - min-width: 992px !important; - } - .navbar { - display: none; - } - .badge { - border: 1px solid #000; - } - .table { - border-collapse: collapse !important; - } - .table td, - .table th { - background-color: #fff !important; - } - .table-bordered th, - .table-bordered td { - border: 1px solid #dee2e6 !important; - } - .table-dark { - color: inherit; - } - .table-dark th, - .table-dark td, - .table-dark thead th, - .table-dark tbody + tbody { - border-color: #dee2e6; - } - .table .thead-dark th { - color: inherit; - border-color: #dee2e6; - } +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Roboto"; + src: url("../fonts/RobotoFlex.woff2") format("woff2 supports variations"), url("../fonts/RobotoFlex.woff2") format("woff2-variations"); + font-weight: 100 1000; } *, *::before, *::after { - box-sizing: border-box; -} - -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -} - -body { - margin: 0; - font-family: var(--rz-text-font-family); - font-size: 1rem; - font-weight: normal; - line-height: 1.5; - color: #616161; - text-align: left; - background-color: #f5f5f5; -} - -[tabindex="-1"]:focus { - outline: 0 !important; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title], -abbr[data-original-title] { - text-decoration: underline; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; - text-decoration-skip-ink: none; -} - -address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: 0.5rem; - margin-left: 0; -} - -blockquote { - margin: 0 0 1rem; -} - -b, -strong { - font-weight: bolder; -} - -small { - font-size: 80%; + box-sizing: inherit; } -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; +.rz-text-title-color { + color: var(--rz-base-900) !important; } -sub { - bottom: -0.25em; +.rz-text-color { + color: var(--rz-base-800) !important; } -sup { - top: -0.5em; +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -a { - color: #e91e63; - text-decoration: none; - background-color: transparent; -} -a:hover { - color: #e91e63; - text-decoration: none; +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):focus { - outline: 0; +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -pre, -code, -kbd, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 1em; +.rz-text-contrast-color { + color: var(--rz-white) !important; } -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -figure { - margin: 0 0 1rem; +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -img { - vertical-align: middle; - border-style: none; +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -svg { - overflow: hidden; - vertical-align: middle; +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -table { - border-collapse: collapse; +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #6c757d; - text-align: left; - caption-side: bottom; +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -th { - text-align: inherit; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -label { - display: inline-block; - margin-bottom: 0.5rem; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -button { - border-radius: 0; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -button, -input { - overflow: visible; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -button, -select { - text-transform: none; +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -select { - word-wrap: normal; +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -button:not(:disabled), -[type=button]:not(:disabled), -[type=reset]:not(:disabled), -[type=submit]:not(:disabled) { - cursor: pointer; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - padding: 0; - border-style: none; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -input[type=radio], -input[type=checkbox] { - box-sizing: border-box; - padding: 0; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -input[type=date], -input[type=time], -input[type=datetime-local], -input[type=month] { - -webkit-appearance: listbox; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -textarea { - overflow: auto; - resize: vertical; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -legend { - display: block; - width: 100%; - max-width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; - white-space: normal; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -progress { - vertical-align: baseline; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; +.rz-display-none { + display: none !important; } -[type=search] { - outline-offset: -2px; - -webkit-appearance: none; +.rz-display-block { + display: block !important; } -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; +.rz-display-inline { + display: inline !important; } -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; +.rz-display-inline-block { + display: inline-block !important; } -output { - display: inline-block; +.rz-display-flex { + display: flex !important; } -summary { - display: list-item; - cursor: pointer; +.rz-display-inline-flex { + display: inline-flex !important; } -template { - display: none; +.rz-display-grid { + display: grid !important; } -[hidden] { - display: none !important; +.rz-display-inline-grid { + display: inline-grid !important; } -.container { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} @media (min-width: 576px) { - .container { - max-width: 540px; + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; } } @media (min-width: 768px) { - .container { - max-width: 720px; + .rz-display-sm-none { + display: none !important; } -} -@media (min-width: 992px) { - .container { - max-width: 960px; + .rz-display-sm-block { + display: block !important; } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; + .rz-display-sm-inline { + display: inline !important; } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; } -.container-fluid { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} - -.row { - display: flex; - flex-wrap: wrap; - margin-right: -1rem; - margin-left: -1rem; -} - -.no-gutters { - margin-right: 0; - margin-left: 0; -} -.no-gutters > .col, -.no-gutters > [class*=col-] { - padding-right: 0; - padding-left: 0; -} - -.col-xl, -.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, -.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, -.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, -.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, -.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { - position: relative; - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.rz-justify-content-stretch { + justify-content: stretch !important; } -.col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.rz-justify-content-center { + justify-content: center !important; } -.col-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; +.rz-justify-content-start { + justify-content: start !important; } -.col-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; +.rz-justify-content-end { + justify-content: end !important; } -.col-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; +.rz-justify-content-flex-start { + justify-content: flex-start !important; } -.col-3 { - flex: 0 0 25%; - max-width: 25%; +.rz-justify-content-flex-end { + justify-content: flex-end !important; } -.col-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; +.rz-justify-content-left { + justify-content: left !important; } -.col-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; +.rz-justify-content-right { + justify-content: right !important; } -.col-6 { - flex: 0 0 50%; - max-width: 50%; +.rz-justify-content-space-between { + justify-content: space-between !important; } -.col-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; +.rz-justify-content-space-around { + justify-content: space-around !important; } -.col-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; } -.col-9 { - flex: 0 0 75%; - max-width: 75%; +.rz-align-items-normal { + align-items: normal !important; } -.col-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; +.rz-align-items-stretch { + align-items: stretch !important; } -.col-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; +.rz-align-items-center { + align-items: center !important; } -.col-12 { - flex: 0 0 100%; - max-width: 100%; +.rz-align-items-start { + align-items: start !important; } -.order-first { - order: -1; +.rz-align-items-end { + align-items: end !important; } -.order-last { - order: 13; +.rz-align-items-flex-start { + align-items: flex-start !important; } -.order-0 { - order: 0; +.rz-align-items-flex-end { + align-items: flex-end !important; } -.order-1 { - order: 1; +.rz-color-white { + color: var(--rz-white) !important; } -.order-2 { - order: 2; +.rz-color-black { + color: var(--rz-black) !important; } -.order-3 { - order: 3; +.rz-color-base { + color: var(--rz-base) !important; } -.order-4 { - order: 4; +.rz-color-base-50 { + color: var(--rz-base-50) !important; } -.order-5 { - order: 5; +.rz-color-base-100 { + color: var(--rz-base-100) !important; } -.order-6 { - order: 6; +.rz-color-base-200 { + color: var(--rz-base-200) !important; } -.order-7 { - order: 7; +.rz-color-base-300 { + color: var(--rz-base-300) !important; } -.order-8 { - order: 8; +.rz-color-base-400 { + color: var(--rz-base-400) !important; } -.order-9 { - order: 9; +.rz-color-base-500 { + color: var(--rz-base-500) !important; } -.order-10 { - order: 10; +.rz-color-base-600 { + color: var(--rz-base-600) !important; } -.order-11 { - order: 11; +.rz-color-base-700 { + color: var(--rz-base-700) !important; } -.order-12 { - order: 12; +.rz-color-base-800 { + color: var(--rz-base-800) !important; } -.offset-1 { - margin-left: 8.3333333333%; +.rz-color-base-900 { + color: var(--rz-base-900) !important; } -.offset-2 { - margin-left: 16.6666666667%; +.rz-color-base-light { + color: var(--rz-base-light) !important; } -.offset-3 { - margin-left: 25%; +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; } -.offset-4 { - margin-left: 33.3333333333%; +.rz-color-base-dark { + color: var(--rz-base-dark) !important; } -.offset-5 { - margin-left: 41.6666666667%; +.rz-color-base-darker { + color: var(--rz-base-darker) !important; } -.offset-6 { - margin-left: 50%; +.rz-color-primary { + color: var(--rz-primary) !important; } -.offset-7 { - margin-left: 58.3333333333%; +.rz-color-primary-light { + color: var(--rz-primary-light) !important; } -.offset-8 { - margin-left: 66.6666666667%; +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; } -.offset-9 { - margin-left: 75%; +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; } -.offset-10 { - margin-left: 83.3333333333%; +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; } -.offset-11 { - margin-left: 91.6666666667%; +.rz-color-secondary { + color: var(--rz-secondary) !important; } -@media (min-width: 576px) { - .col-sm { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-sm-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-sm-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-sm-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-sm-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-sm-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-sm-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-sm-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-sm-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-sm-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-sm-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-sm-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-sm-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - order: -1; - } - .order-sm-last { - order: 13; - } - .order-sm-0 { - order: 0; - } - .order-sm-1 { - order: 1; - } - .order-sm-2 { - order: 2; - } - .order-sm-3 { - order: 3; - } - .order-sm-4 { - order: 4; - } - .order-sm-5 { - order: 5; - } - .order-sm-6 { - order: 6; - } - .order-sm-7 { - order: 7; - } - .order-sm-8 { - order: 8; - } - .order-sm-9 { - order: 9; - } - .order-sm-10 { - order: 10; - } - .order-sm-11 { - order: 11; - } - .order-sm-12 { - order: 12; - } - .offset-sm-0 { - margin-left: 0; - } - .offset-sm-1 { - margin-left: 8.3333333333%; - } - .offset-sm-2 { - margin-left: 16.6666666667%; - } - .offset-sm-3 { - margin-left: 25%; - } - .offset-sm-4 { - margin-left: 33.3333333333%; - } - .offset-sm-5 { - margin-left: 41.6666666667%; - } - .offset-sm-6 { - margin-left: 50%; - } - .offset-sm-7 { - margin-left: 58.3333333333%; - } - .offset-sm-8 { - margin-left: 66.6666666667%; - } - .offset-sm-9 { - margin-left: 75%; - } - .offset-sm-10 { - margin-left: 83.3333333333%; - } - .offset-sm-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 768px) { - .col-md { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-md-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-md-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-md-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-md-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-md-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-md-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-md-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-md-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-md-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-md-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-md-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-md-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - order: -1; - } - .order-md-last { - order: 13; - } - .order-md-0 { - order: 0; - } - .order-md-1 { - order: 1; - } - .order-md-2 { - order: 2; - } - .order-md-3 { - order: 3; - } - .order-md-4 { - order: 4; - } - .order-md-5 { - order: 5; - } - .order-md-6 { - order: 6; - } - .order-md-7 { - order: 7; - } - .order-md-8 { - order: 8; - } - .order-md-9 { - order: 9; - } - .order-md-10 { - order: 10; - } - .order-md-11 { - order: 11; - } - .order-md-12 { - order: 12; - } - .offset-md-0 { - margin-left: 0; - } - .offset-md-1 { - margin-left: 8.3333333333%; - } - .offset-md-2 { - margin-left: 16.6666666667%; - } - .offset-md-3 { - margin-left: 25%; - } - .offset-md-4 { - margin-left: 33.3333333333%; - } - .offset-md-5 { - margin-left: 41.6666666667%; - } - .offset-md-6 { - margin-left: 50%; - } - .offset-md-7 { - margin-left: 58.3333333333%; - } - .offset-md-8 { - margin-left: 66.6666666667%; - } - .offset-md-9 { - margin-left: 75%; - } - .offset-md-10 { - margin-left: 83.3333333333%; - } - .offset-md-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 992px) { - .col-lg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-lg-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-lg-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-lg-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-lg-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-lg-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-lg-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-lg-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-lg-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-lg-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-lg-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-lg-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-lg-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - order: -1; - } - .order-lg-last { - order: 13; - } - .order-lg-0 { - order: 0; - } - .order-lg-1 { - order: 1; - } - .order-lg-2 { - order: 2; - } - .order-lg-3 { - order: 3; - } - .order-lg-4 { - order: 4; - } - .order-lg-5 { - order: 5; - } - .order-lg-6 { - order: 6; - } - .order-lg-7 { - order: 7; - } - .order-lg-8 { - order: 8; - } - .order-lg-9 { - order: 9; - } - .order-lg-10 { - order: 10; - } - .order-lg-11 { - order: 11; - } - .order-lg-12 { - order: 12; - } - .offset-lg-0 { - margin-left: 0; - } - .offset-lg-1 { - margin-left: 8.3333333333%; - } - .offset-lg-2 { - margin-left: 16.6666666667%; - } - .offset-lg-3 { - margin-left: 25%; - } - .offset-lg-4 { - margin-left: 33.3333333333%; - } - .offset-lg-5 { - margin-left: 41.6666666667%; - } - .offset-lg-6 { - margin-left: 50%; - } - .offset-lg-7 { - margin-left: 58.3333333333%; - } - .offset-lg-8 { - margin-left: 66.6666666667%; - } - .offset-lg-9 { - margin-left: 75%; - } - .offset-lg-10 { - margin-left: 83.3333333333%; - } - .offset-lg-11 { - margin-left: 91.6666666667%; - } +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; } -@media (min-width: 1200px) { - .col-xl { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-xl-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-xl-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-xl-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-xl-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-xl-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-xl-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-xl-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-xl-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-xl-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-xl-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-xl-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-xl-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - order: -1; - } - .order-xl-last { - order: 13; - } - .order-xl-0 { - order: 0; - } - .order-xl-1 { - order: 1; - } - .order-xl-2 { - order: 2; - } - .order-xl-3 { - order: 3; - } - .order-xl-4 { - order: 4; - } - .order-xl-5 { - order: 5; - } - .order-xl-6 { - order: 6; - } - .order-xl-7 { - order: 7; - } - .order-xl-8 { - order: 8; - } - .order-xl-9 { - order: 9; - } - .order-xl-10 { - order: 10; - } - .order-xl-11 { - order: 11; - } - .order-xl-12 { - order: 12; - } - .offset-xl-0 { - margin-left: 0; - } - .offset-xl-1 { - margin-left: 8.3333333333%; - } - .offset-xl-2 { - margin-left: 16.6666666667%; - } - .offset-xl-3 { - margin-left: 25%; - } - .offset-xl-4 { - margin-left: 33.3333333333%; - } - .offset-xl-5 { - margin-left: 41.6666666667%; - } - .offset-xl-6 { - margin-left: 50%; - } - .offset-xl-7 { - margin-left: 58.3333333333%; - } - .offset-xl-8 { - margin-left: 66.6666666667%; - } - .offset-xl-9 { - margin-left: 75%; - } - .offset-xl-10 { - margin-left: 83.3333333333%; - } - .offset-xl-11 { - margin-left: 91.6666666667%; - } + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; } -.form-control { - display: block; - width: 100%; - height: 2.5rem; - padding: 0.375rem 0.75rem; - font-size: var(--rz-body-font-size); - font-weight: normal; - line-height: 1.5; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: var(--rz-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; } -@media (prefers-reduced-motion: reduce) { - .form-control { - transition: none; - } + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; } -.form-control::-ms-expand { - background-color: transparent; - border: 0; + +.rz-color-info { + color: var(--rz-info) !important; } -.form-control:focus { - color: #495057; - background-color: #fff; - border-color: #a9a7ea; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(67, 64, 210, 0.25); + +.rz-color-info-light { + color: var(--rz-info-light) !important; } -.form-control::placeholder { - color: var(--rz-text-tertiary-color); - opacity: 1; + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; } -.form-control:disabled, .form-control[readonly] { - background-color: #e9ecef; - opacity: 1; + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; } -select.form-control:focus::-ms-value { - color: #495057; - background-color: #fff; +.rz-color-info-darker { + color: var(--rz-info-darker) !important; } -.form-control-file, -.form-control-range { - display: block; - width: 100%; +.rz-color-success { + color: var(--rz-success) !important; } -.col-form-label { - padding-top: calc(0.375rem + 1px); - padding-bottom: calc(0.375rem + 1px); - margin-bottom: 0; - font-size: inherit; - line-height: 1.5; +.rz-color-success-light { + color: var(--rz-success-light) !important; } -.col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); - font-size: 1.25rem; - line-height: 1.5; +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; } -.col-form-label-sm { - padding-top: calc(0.25rem + 1px); - padding-bottom: calc(0.25rem + 1px); - font-size: 0.875rem; - line-height: 1.5; +.rz-color-success-dark { + color: var(--rz-success-dark) !important; } -.form-control-plaintext { - display: block; - width: 100%; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - margin-bottom: 0; - line-height: 1.5; - color: #616161; - background-color: transparent; - border: solid transparent; - border-width: 1px 0; +.rz-color-success-darker { + color: var(--rz-success-darker) !important; } -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-right: 0; - padding-left: 0; + +.rz-color-warning { + color: var(--rz-warning) !important; } -.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - line-height: 1.5; - border-radius: 0.2rem; +.rz-color-warning-light { + color: var(--rz-warning-light) !important; } -.form-control-lg { - height: calc(1.5em + 1rem + 2px); - padding: 0.5rem 1rem; - font-size: 1.25rem; - line-height: 1.5; - border-radius: 0.3rem; +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; } -select.form-control[size], select.form-control[multiple] { - height: auto; +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; } -textarea.form-control { - height: auto; +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; } -.form-group { - margin-bottom: 1rem; +.rz-color-danger { + color: var(--rz-danger) !important; } -.form-text { - display: block; - margin-top: 0.25rem; +.rz-color-danger-light { + color: var(--rz-danger-light) !important; } -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; } -.form-row > .col, -.form-row > [class*=col-] { - padding-right: 5px; - padding-left: 5px; + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; } -.form-check { - position: relative; - display: block; - padding-left: 1.25rem; +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; } -.form-check-input { - position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; +.rz-color-on-base { + color: var(--rz-on-base) !important; } -.form-check-input:disabled ~ .form-check-label { - color: #6c757d; + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; } -.form-check-label { - margin-bottom: 0; +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; } -.form-check-inline { - display: inline-flex; - align-items: center; - padding-left: 0; - margin-right: 0.75rem; +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; } -.form-check-inline .form-check-input { - position: static; - margin-top: 0; - margin-right: 0.3125rem; - margin-left: 0; + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; } -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #4caf50; +.rz-color-on-primary { + color: var(--rz-on-primary) !important; } -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #fff; - background-color: rgba(76, 175, 80, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; } -.was-validated .form-control:valid, .form-control.is-valid { - border-color: #4caf50; - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234caf50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: center right calc(0.375em + 0.1875rem); - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); -} -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #4caf50; - box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25); -} -.was-validated .form-control:valid ~ .valid-feedback, -.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, -.form-control.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-right: calc(1.5em + 0.75rem); - background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; } -.was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #4caf50; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234caf50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); -} -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #4caf50; - box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25); -} -.was-validated .custom-select:valid ~ .valid-feedback, -.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, -.custom-select.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; } -.was-validated .form-control-file:valid ~ .valid-feedback, -.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, -.form-control-file.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #4caf50; -} -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #4caf50; -} -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #4caf50; -} -.was-validated .custom-control-input:valid ~ .valid-feedback, -.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, -.custom-control-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #6ec071; - background-color: #6ec071; -} -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25); -} -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #4caf50; +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; } -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #4caf50; -} -.was-validated .custom-file-input:valid ~ .valid-feedback, -.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, -.custom-file-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #4caf50; - box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25); +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; } -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #f44336; +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; } -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #fff; - background-color: rgba(244, 67, 54, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-on-info { + color: var(--rz-on-info) !important; } -.was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #f44336; - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f44336' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f44336' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); - background-repeat: no-repeat; - background-position: center right calc(0.375em + 0.1875rem); - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); -} -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #f44336; - box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25); -} -.was-validated .form-control:invalid ~ .invalid-feedback, -.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, -.form-control.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-right: calc(1.5em + 0.75rem); - background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; } -.was-validated .custom-select:invalid, .custom-select.is-invalid { - border-color: #f44336; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f44336' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f44336' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); -} -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - border-color: #f44336; - box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25); -} -.was-validated .custom-select:invalid ~ .invalid-feedback, -.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, -.custom-select.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; } -.was-validated .form-control-file:invalid ~ .invalid-feedback, -.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, -.form-control-file.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #f44336; -} -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-success { + color: var(--rz-on-success) !important; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #f44336; -} -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #f44336; -} -.was-validated .custom-control-input:invalid ~ .invalid-feedback, -.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, -.custom-control-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #f77066; - background-color: #f77066; -} -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25); -} -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #f44336; +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; } -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #f44336; -} -.was-validated .custom-file-input:invalid ~ .invalid-feedback, -.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, -.custom-file-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #f44336; - box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25); +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; } -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -.form-inline .form-check { - width: 100%; -} -@media (min-width: 576px) { - .form-inline label { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0; - } - .form-inline .form-group { - display: flex; - flex: 0 0 auto; - flex-flow: row wrap; - align-items: center; - margin-bottom: 0; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - .form-inline .form-control-plaintext { - display: inline-block; - } - .form-inline .input-group, - .form-inline .custom-select { - width: auto; - } - .form-inline .form-check { - display: flex; - align-items: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-inline .form-check-input { - position: relative; - flex-shrink: 0; - margin-top: 0; - margin-right: 0.25rem; - margin-left: 0; - } - .form-inline .custom-control { - align-items: center; - justify-content: center; - } - .form-inline .custom-control-label { - margin-bottom: 0; - } +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; } -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 0.75rem; - font-weight: 500; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: var(--rz-border-radius); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .badge { - transition: none; - } -} -a.badge:hover, a.badge:focus { - text-decoration: none; +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; } -.badge:empty { - display: none; +.rz-color-on-warning { + color: var(--rz-on-warning) !important; } -.btn .badge { - position: relative; - top: -1px; +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; } -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; } -.badge-primary { - color: #fff; - background-color: #4340D2; -} -a.badge-primary:hover, a.badge-primary:focus { - color: #fff; - background-color: #2d2bb4; -} -a.badge-primary:focus, a.badge-primary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(67, 64, 210, 0.5); +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; } -.badge-secondary { - color: #fff; - background-color: #e91e63; -} -a.badge-secondary:hover, a.badge-secondary:focus { - color: #fff; - background-color: #c1134e; -} -a.badge-secondary:focus, a.badge-secondary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.5); +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; } -.badge-success { - color: #fff; - background-color: #4caf50; -} -a.badge-success:hover, a.badge-success:focus { - color: #fff; - background-color: #3d8b40; -} -a.badge-success:focus, a.badge-success.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.5); +.rz-color-on-danger { + color: var(--rz-on-danger) !important; } -.badge-info { - color: #fff; - background-color: #2196f3; -} -a.badge-info:hover, a.badge-info:focus { - color: #fff; - background-color: #0c7cd5; -} -a.badge-info:focus, a.badge-info.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.5); +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; } -.badge-warning { - color: #212529; - background-color: #ff9800; -} -a.badge-warning:hover, a.badge-warning:focus { - color: #212529; - background-color: #cc7a00; -} -a.badge-warning:focus, a.badge-warning.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.5); +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; } -.badge-danger { - color: #fff; - background-color: #f44336; -} -a.badge-danger:hover, a.badge-danger:focus { - color: #fff; - background-color: #ea1c0d; -} -a.badge-danger:focus, a.badge-danger.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.5); +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; } -.badge-light { - color: #212529; - background-color: #eeeeee; -} -a.badge-light:hover, a.badge-light:focus { - color: #212529; - background-color: #d5d5d5; -} -a.badge-light:focus, a.badge-light.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(238, 238, 238, 0.5); +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; } -.badge-dark { - color: #fff; - background-color: #343a40; -} -a.badge-dark:hover, a.badge-dark:focus { - color: #fff; - background-color: #1d2124; -} -a.badge-dark:focus, a.badge-dark.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); +.rz-color-series-1 { + color: var(--rz-series-1) !important; } -.alert { - position: relative; - padding: 0.75rem 1.25rem; - margin-bottom: 1rem; - border: 1px solid transparent; - border-radius: 4px; +.rz-color-series-2 { + color: var(--rz-series-2) !important; } -.alert-heading { - color: inherit; +.rz-color-series-3 { + color: var(--rz-series-3) !important; } -.alert-link { - font-weight: 700; +.rz-color-series-4 { + color: var(--rz-series-4) !important; } -.alert-dismissible { - padding-right: 4rem; -} -.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; +.rz-color-series-5 { + color: var(--rz-series-5) !important; } -.alert-primary { - color: #23216d; - background-color: #d9d9f6; - border-color: #cacaf2; -} -.alert-primary hr { - border-top-color: #b6b6ed; -} -.alert-primary .alert-link { - color: #161546; +.rz-color-series-6 { + color: var(--rz-series-6) !important; } -.alert-secondary { - color: #791033; - background-color: #fbd2e0; - border-color: #f9c0d3; -} -.alert-secondary hr { - border-top-color: #f7a9c3; -} -.alert-secondary .alert-link { - color: #4c0a20; +.rz-color-series-7 { + color: var(--rz-series-7) !important; } -.alert-success { - color: #285b2a; - background-color: #dbefdc; - border-color: #cde9ce; -} -.alert-success hr { - border-top-color: #bbe1bd; -} -.alert-success .alert-link { - color: #18381a; +.rz-color-series-8 { + color: var(--rz-series-8) !important; } -.alert-info { - color: #114e7e; - background-color: #d3eafd; - border-color: #c1e2fc; -} -.alert-info hr { - border-top-color: #a9d7fb; -} -.alert-info .alert-link { - color: #0b3251; +.rz-color-series-9 { + color: var(--rz-series-9) !important; } -.alert-warning { - color: #854f00; - background-color: #ffeacc; - border-color: #ffe2b8; -} -.alert-warning hr { - border-top-color: #ffd89f; -} -.alert-warning .alert-link { - color: #523100; +.rz-color-series-10 { + color: var(--rz-series-10) !important; } -.alert-danger { - color: #7f231c; - background-color: #fdd9d7; - border-color: #fccac7; -} -.alert-danger hr { - border-top-color: #fbb3af; -} -.alert-danger .alert-link { - color: #551713; +.rz-color-series-11 { + color: var(--rz-series-11) !important; } -.alert-light { - color: #7c7c7c; - background-color: #fcfcfc; - border-color: #fafafa; -} -.alert-light hr { - border-top-color: #ededed; -} -.alert-light .alert-link { - color: #636363; +.rz-color-series-12 { + color: var(--rz-series-12) !important; } -.alert-dark { - color: #1b1e21; - background-color: #d6d8d9; - border-color: #c6c8ca; -} -.alert-dark hr { - border-top-color: #b9bbbe; -} -.alert-dark .alert-link { - color: #040505; +.rz-color-series-13 { + color: var(--rz-series-13) !important; } -.media { - display: flex; - align-items: flex-start; +.rz-color-series-14 { + color: var(--rz-series-14) !important; } -.media-body { - flex: 1; +.rz-color-series-15 { + color: var(--rz-series-15) !important; } -.align-baseline { - vertical-align: baseline !important; +.rz-color-series-16 { + color: var(--rz-series-16) !important; } -.align-top { - vertical-align: top !important; +.rz-color-series-17 { + color: var(--rz-series-17) !important; } -.align-middle { - vertical-align: middle !important; +.rz-color-series-18 { + color: var(--rz-series-18) !important; } -.align-bottom { - vertical-align: bottom !important; +.rz-color-series-19 { + color: var(--rz-series-19) !important; } -.align-text-bottom { - vertical-align: text-bottom !important; +.rz-color-series-20 { + color: var(--rz-series-20) !important; } -.align-text-top { - vertical-align: text-top !important; +.rz-color-series-21 { + color: var(--rz-series-21) !important; } -.bg-primary { - background-color: #4340D2 !important; +.rz-color-series-22 { + color: var(--rz-series-22) !important; } -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #2d2bb4 !important; +.rz-color-series-23 { + color: var(--rz-series-23) !important; } -.bg-secondary { - background-color: #e91e63 !important; +.rz-color-series-24 { + color: var(--rz-series-24) !important; } -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #c1134e !important; +.rz-background-color-white { + background-color: var(--rz-white) !important; } -.bg-success { - background-color: #4caf50 !important; +.rz-background-color-black { + background-color: var(--rz-black) !important; } -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #3d8b40 !important; +.rz-background-color-base { + background-color: var(--rz-base) !important; } -.bg-info { - background-color: #2196f3 !important; +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; } -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #0c7cd5 !important; +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; } -.bg-warning { - background-color: #ff9800 !important; +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; } -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #cc7a00 !important; -} - -.bg-danger { - background-color: #f44336 !important; +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; } -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #ea1c0d !important; +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; } -.bg-light { - background-color: #eeeeee !important; +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; } -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #d5d5d5 !important; +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; } -.bg-dark { - background-color: #343a40 !important; +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; } -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #1d2124 !important; +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; } -.bg-white { - background-color: #fff !important; +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; } -.bg-transparent { - background-color: transparent !important; +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; } -.border { - border: 1px solid #dee2e6 !important; +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; } -.border-top { - border-top: 1px solid #dee2e6 !important; +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; } -.border-right { - border-right: 1px solid #dee2e6 !important; +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; } -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; +.rz-background-color-primary { + background-color: var(--rz-primary) !important; } -.border-left { - border-left: 1px solid #dee2e6 !important; +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; } -.border-0 { - border: 0 !important; +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; } -.border-top-0 { - border-top: 0 !important; +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; } -.border-right-0 { - border-right: 0 !important; +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; } -.border-bottom-0 { - border-bottom: 0 !important; +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; } -.border-left-0 { - border-left: 0 !important; +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; } -.border-primary { - border-color: #4340D2 !important; +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; } -.border-secondary { - border-color: #e91e63 !important; +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; } -.border-success { - border-color: #4caf50 !important; +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; } -.border-info { - border-color: #2196f3 !important; +.rz-background-color-info { + background-color: var(--rz-info) !important; } -.border-warning { - border-color: #ff9800 !important; +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; } -.border-danger { - border-color: #f44336 !important; +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; } -.border-light { - border-color: #eeeeee !important; +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; } -.border-dark { - border-color: #343a40 !important; +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; } -.border-white { - border-color: #fff !important; +.rz-background-color-success { + background-color: var(--rz-success) !important; } -.rounded-sm { - border-radius: 0.2rem !important; +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; } -.rounded { - border-radius: 4px !important; +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; } -.rounded-top { - border-top-left-radius: 4px !important; - border-top-right-radius: 4px !important; +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; } -.rounded-right { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; } -.rounded-bottom { - border-bottom-right-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-warning { + background-color: var(--rz-warning) !important; } -.rounded-left { - border-top-left-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; } -.rounded-lg { - border-radius: 0.3rem !important; +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; } -.rounded-circle { - border-radius: 50% !important; +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; } -.rounded-pill { - border-radius: 50rem !important; +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; } -.rounded-0 { - border-radius: 0 !important; +.rz-background-color-danger { + background-color: var(--rz-danger) !important; } -.clearfix::after { - display: block; - clear: both; - content: ""; +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; } -.d-none { - display: none !important; +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; } -.d-inline { - display: inline !important; +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; } -.d-inline-block { - display: inline-block !important; +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; } -.d-block { - display: block !important; +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; } -.d-table { - display: table !important; +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; } -.d-table-row { - display: table-row !important; +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; } -.d-table-cell { - display: table-cell !important; +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; } -.d-flex { - display: flex !important; +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; } -.d-inline-flex { - display: inline-flex !important; +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; } -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } - .d-sm-inline { - display: inline !important; - } - .d-sm-inline-block { - display: inline-block !important; - } - .d-sm-block { - display: block !important; - } - .d-sm-table { - display: table !important; - } - .d-sm-table-row { - display: table-row !important; - } - .d-sm-table-cell { - display: table-cell !important; - } - .d-sm-flex { - display: flex !important; - } - .d-sm-inline-flex { - display: inline-flex !important; - } -} -@media (min-width: 768px) { - .d-md-none { - display: none !important; - } - .d-md-inline { - display: inline !important; - } - .d-md-inline-block { - display: inline-block !important; - } - .d-md-block { - display: block !important; - } - .d-md-table { - display: table !important; - } - .d-md-table-row { - display: table-row !important; - } - .d-md-table-cell { - display: table-cell !important; - } - .d-md-flex { - display: flex !important; - } - .d-md-inline-flex { - display: inline-flex !important; - } -} -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-inline { - display: inline !important; - } - .d-lg-inline-block { - display: inline-block !important; - } - .d-lg-block { - display: block !important; - } - .d-lg-table { - display: table !important; - } - .d-lg-table-row { - display: table-row !important; - } - .d-lg-table-cell { - display: table-cell !important; - } - .d-lg-flex { - display: flex !important; - } - .d-lg-inline-flex { - display: inline-flex !important; - } -} -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; - } - .d-xl-inline { - display: inline !important; - } - .d-xl-inline-block { - display: inline-block !important; - } - .d-xl-block { - display: block !important; - } - .d-xl-table { - display: table !important; - } - .d-xl-table-row { - display: table-row !important; - } - .d-xl-table-cell { - display: table-cell !important; - } - .d-xl-flex { - display: flex !important; - } - .d-xl-inline-flex { - display: inline-flex !important; - } -} -@media print { - .d-print-none { - display: none !important; - } - .d-print-inline { - display: inline !important; - } - .d-print-inline-block { - display: inline-block !important; - } - .d-print-block { - display: block !important; - } - .d-print-table { - display: table !important; - } - .d-print-table-row { - display: table-row !important; - } - .d-print-table-cell { - display: table-cell !important; - } - .d-print-flex { - display: flex !important; - } - .d-print-inline-flex { - display: inline-flex !important; - } -} -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; -} -.embed-responsive::before { - display: block; - content: ""; -} -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; } -.embed-responsive-21by9::before { - padding-top: 42.8571428571%; +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; } -.embed-responsive-16by9::before { - padding-top: 56.25%; +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; } -.embed-responsive-4by3::before { - padding-top: 75%; +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; } -.embed-responsive-1by1::before { - padding-top: 100%; +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; } -.flex-row { - flex-direction: row !important; +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; } -.flex-column { - flex-direction: column !important; +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; } -.flex-row-reverse { - flex-direction: row-reverse !important; +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; } -.flex-column-reverse { - flex-direction: column-reverse !important; +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; } -.flex-wrap { - flex-wrap: wrap !important; +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; } -.flex-nowrap { - flex-wrap: nowrap !important; +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; } -.flex-wrap-reverse { - flex-wrap: wrap-reverse !important; +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; } -.flex-fill { - flex: 1 1 auto !important; +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; } -.flex-grow-0 { - flex-grow: 0 !important; +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; } -.flex-grow-1 { - flex-grow: 1 !important; +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; } -.flex-shrink-0 { - flex-shrink: 0 !important; +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; } -.flex-shrink-1 { - flex-shrink: 1 !important; +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; } -.justify-content-start { - justify-content: flex-start !important; +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; } -.justify-content-end { - justify-content: flex-end !important; +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; } -.justify-content-center { - justify-content: center !important; +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; } -.justify-content-between { - justify-content: space-between !important; +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; } -.justify-content-around { - justify-content: space-around !important; +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; } -.align-items-start { - align-items: flex-start !important; +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; } -.align-items-end { - align-items: flex-end !important; +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; } -.align-items-center { - align-items: center !important; +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; } -.align-items-baseline { - align-items: baseline !important; +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; } -.align-items-stretch { - align-items: stretch !important; +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; } -.align-content-start { - align-content: flex-start !important; +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; } -.align-content-end { - align-content: flex-end !important; +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; } -.align-content-center { - align-content: center !important; +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; } -.align-content-between { - align-content: space-between !important; +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; } -.align-content-around { - align-content: space-around !important; +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; } -.align-content-stretch { - align-content: stretch !important; +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; } -.align-self-auto { - align-self: auto !important; +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; } -.align-self-start { - align-self: flex-start !important; +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; } -.align-self-end { - align-self: flex-end !important; +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; } -.align-self-center { - align-self: center !important; +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; } -.align-self-baseline { - align-self: baseline !important; +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; } -.align-self-stretch { - align-self: stretch !important; +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; } -@media (min-width: 576px) { - .flex-sm-row { - flex-direction: row !important; - } - .flex-sm-column { - flex-direction: column !important; - } - .flex-sm-row-reverse { - flex-direction: row-reverse !important; - } - .flex-sm-column-reverse { - flex-direction: column-reverse !important; - } - .flex-sm-wrap { - flex-wrap: wrap !important; - } - .flex-sm-nowrap { - flex-wrap: nowrap !important; - } - .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-sm-fill { - flex: 1 1 auto !important; - } - .flex-sm-grow-0 { - flex-grow: 0 !important; - } - .flex-sm-grow-1 { - flex-grow: 1 !important; - } - .flex-sm-shrink-0 { - flex-shrink: 0 !important; - } - .flex-sm-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-sm-start { - justify-content: flex-start !important; - } - .justify-content-sm-end { - justify-content: flex-end !important; - } - .justify-content-sm-center { - justify-content: center !important; - } - .justify-content-sm-between { - justify-content: space-between !important; - } - .justify-content-sm-around { - justify-content: space-around !important; - } - .align-items-sm-start { - align-items: flex-start !important; - } - .align-items-sm-end { - align-items: flex-end !important; - } - .align-items-sm-center { - align-items: center !important; - } - .align-items-sm-baseline { - align-items: baseline !important; - } - .align-items-sm-stretch { - align-items: stretch !important; - } - .align-content-sm-start { - align-content: flex-start !important; - } - .align-content-sm-end { - align-content: flex-end !important; - } - .align-content-sm-center { - align-content: center !important; - } - .align-content-sm-between { - align-content: space-between !important; - } - .align-content-sm-around { - align-content: space-around !important; - } - .align-content-sm-stretch { - align-content: stretch !important; - } - .align-self-sm-auto { - align-self: auto !important; - } - .align-self-sm-start { - align-self: flex-start !important; - } - .align-self-sm-end { - align-self: flex-end !important; - } - .align-self-sm-center { - align-self: center !important; - } - .align-self-sm-baseline { - align-self: baseline !important; - } - .align-self-sm-stretch { - align-self: stretch !important; - } -} -@media (min-width: 768px) { - .flex-md-row { - flex-direction: row !important; - } - .flex-md-column { - flex-direction: column !important; - } - .flex-md-row-reverse { - flex-direction: row-reverse !important; - } - .flex-md-column-reverse { - flex-direction: column-reverse !important; - } - .flex-md-wrap { - flex-wrap: wrap !important; - } - .flex-md-nowrap { - flex-wrap: nowrap !important; - } - .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-md-fill { - flex: 1 1 auto !important; - } - .flex-md-grow-0 { - flex-grow: 0 !important; - } - .flex-md-grow-1 { - flex-grow: 1 !important; - } - .flex-md-shrink-0 { - flex-shrink: 0 !important; - } - .flex-md-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-md-start { - justify-content: flex-start !important; - } - .justify-content-md-end { - justify-content: flex-end !important; - } - .justify-content-md-center { - justify-content: center !important; - } - .justify-content-md-between { - justify-content: space-between !important; - } - .justify-content-md-around { - justify-content: space-around !important; - } - .align-items-md-start { - align-items: flex-start !important; - } - .align-items-md-end { - align-items: flex-end !important; - } - .align-items-md-center { - align-items: center !important; - } - .align-items-md-baseline { - align-items: baseline !important; - } - .align-items-md-stretch { - align-items: stretch !important; - } - .align-content-md-start { - align-content: flex-start !important; - } - .align-content-md-end { - align-content: flex-end !important; - } - .align-content-md-center { - align-content: center !important; - } - .align-content-md-between { - align-content: space-between !important; - } - .align-content-md-around { - align-content: space-around !important; - } - .align-content-md-stretch { - align-content: stretch !important; - } - .align-self-md-auto { - align-self: auto !important; - } - .align-self-md-start { - align-self: flex-start !important; - } - .align-self-md-end { - align-self: flex-end !important; - } - .align-self-md-center { - align-self: center !important; - } - .align-self-md-baseline { - align-self: baseline !important; - } - .align-self-md-stretch { - align-self: stretch !important; - } -} -@media (min-width: 992px) { - .flex-lg-row { - flex-direction: row !important; - } - .flex-lg-column { - flex-direction: column !important; - } - .flex-lg-row-reverse { - flex-direction: row-reverse !important; - } - .flex-lg-column-reverse { - flex-direction: column-reverse !important; - } - .flex-lg-wrap { - flex-wrap: wrap !important; - } - .flex-lg-nowrap { - flex-wrap: nowrap !important; - } - .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-lg-fill { - flex: 1 1 auto !important; - } - .flex-lg-grow-0 { - flex-grow: 0 !important; - } - .flex-lg-grow-1 { - flex-grow: 1 !important; - } - .flex-lg-shrink-0 { - flex-shrink: 0 !important; - } - .flex-lg-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-lg-start { - justify-content: flex-start !important; - } - .justify-content-lg-end { - justify-content: flex-end !important; - } - .justify-content-lg-center { - justify-content: center !important; - } - .justify-content-lg-between { - justify-content: space-between !important; - } - .justify-content-lg-around { - justify-content: space-around !important; - } - .align-items-lg-start { - align-items: flex-start !important; - } - .align-items-lg-end { - align-items: flex-end !important; - } - .align-items-lg-center { - align-items: center !important; - } - .align-items-lg-baseline { - align-items: baseline !important; - } - .align-items-lg-stretch { - align-items: stretch !important; - } - .align-content-lg-start { - align-content: flex-start !important; - } - .align-content-lg-end { - align-content: flex-end !important; - } - .align-content-lg-center { - align-content: center !important; - } - .align-content-lg-between { - align-content: space-between !important; - } - .align-content-lg-around { - align-content: space-around !important; - } - .align-content-lg-stretch { - align-content: stretch !important; - } - .align-self-lg-auto { - align-self: auto !important; - } - .align-self-lg-start { - align-self: flex-start !important; - } - .align-self-lg-end { - align-self: flex-end !important; - } - .align-self-lg-center { - align-self: center !important; - } - .align-self-lg-baseline { - align-self: baseline !important; - } - .align-self-lg-stretch { - align-self: stretch !important; - } -} -@media (min-width: 1200px) { - .flex-xl-row { - flex-direction: row !important; - } - .flex-xl-column { - flex-direction: column !important; - } - .flex-xl-row-reverse { - flex-direction: row-reverse !important; - } - .flex-xl-column-reverse { - flex-direction: column-reverse !important; - } - .flex-xl-wrap { - flex-wrap: wrap !important; - } - .flex-xl-nowrap { - flex-wrap: nowrap !important; - } - .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-xl-fill { - flex: 1 1 auto !important; - } - .flex-xl-grow-0 { - flex-grow: 0 !important; - } - .flex-xl-grow-1 { - flex-grow: 1 !important; - } - .flex-xl-shrink-0 { - flex-shrink: 0 !important; - } - .flex-xl-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-xl-start { - justify-content: flex-start !important; - } - .justify-content-xl-end { - justify-content: flex-end !important; - } - .justify-content-xl-center { - justify-content: center !important; - } - .justify-content-xl-between { - justify-content: space-between !important; - } - .justify-content-xl-around { - justify-content: space-around !important; - } - .align-items-xl-start { - align-items: flex-start !important; - } - .align-items-xl-end { - align-items: flex-end !important; - } - .align-items-xl-center { - align-items: center !important; - } - .align-items-xl-baseline { - align-items: baseline !important; - } - .align-items-xl-stretch { - align-items: stretch !important; - } - .align-content-xl-start { - align-content: flex-start !important; - } - .align-content-xl-end { - align-content: flex-end !important; - } - .align-content-xl-center { - align-content: center !important; - } - .align-content-xl-between { - align-content: space-between !important; - } - .align-content-xl-around { - align-content: space-around !important; - } - .align-content-xl-stretch { - align-content: stretch !important; - } - .align-self-xl-auto { - align-self: auto !important; - } - .align-self-xl-start { - align-self: flex-start !important; - } - .align-self-xl-end { - align-self: flex-end !important; - } - .align-self-xl-center { - align-self: center !important; - } - .align-self-xl-baseline { - align-self: baseline !important; - } - .align-self-xl-stretch { - align-self: stretch !important; - } -} -.float-left { - float: left !important; +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; } -.float-right { - float: right !important; +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; } -.float-none { - float: none !important; +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; } -@media (min-width: 576px) { - .float-sm-left { - float: left !important; - } - .float-sm-right { - float: right !important; - } - .float-sm-none { - float: none !important; - } -} -@media (min-width: 768px) { - .float-md-left { - float: left !important; - } - .float-md-right { - float: right !important; - } - .float-md-none { - float: none !important; - } -} -@media (min-width: 992px) { - .float-lg-left { - float: left !important; - } - .float-lg-right { - float: right !important; - } - .float-lg-none { - float: none !important; - } -} -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; - } - .float-xl-right { - float: right !important; - } - .float-xl-none { - float: none !important; - } -} -.overflow-auto { - overflow: auto !important; +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; } -.overflow-hidden { - overflow: hidden !important; +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; } -.position-static { - position: static !important; +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; } -.position-relative { - position: relative !important; +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; } -.position-absolute { - position: absolute !important; +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; } -.position-fixed { - position: fixed !important; +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; } -.position-sticky { - position: sticky !important; +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; } -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; } -@supports (position: sticky) { - .sticky-top { - position: sticky; - top: 0; - z-index: 1020; - } +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; } -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +.rz-border-color-white { + border-color: var(--rz-white) !important; } -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +.rz-border-color-black { + border-color: var(--rz-black) !important; } -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +.rz-border-color-base { + border-color: var(--rz-base) !important; } -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; } -.shadow-none { - box-shadow: none !important; +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; } -.w-25 { - width: 25% !important; +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; } -.w-50 { - width: 50% !important; +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; } -.w-75 { - width: 75% !important; +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; } -.w-100 { - width: 100% !important; +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; } -.w-auto { - width: auto !important; +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; } -.h-25 { - height: 25% !important; +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; } -.h-50 { - height: 50% !important; +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; } -.h-75 { - height: 75% !important; +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; } -.h-100 { - height: 100% !important; +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; } -.h-auto { - height: auto !important; +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; } -.mw-100 { - max-width: 100% !important; +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; } -.mh-100 { - max-height: 100% !important; +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; } -.min-vw-100 { - min-width: 100vw !important; +.rz-border-color-primary { + border-color: var(--rz-primary) !important; } -.min-vh-100 { - min-height: 100vh !important; +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; } -.vw-100 { - width: 100vw !important; -} - -.vh-100 { - height: 100vh !important; +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; } -.m-0 { - margin: 0 !important; +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; } -.mt-0, -.my-0 { - margin-top: 0 !important; +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; } -.mr-0, -.mx-0 { - margin-right: 0 !important; +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; } -.mb-0, -.my-0 { - margin-bottom: 0 !important; +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; } -.ml-0, -.mx-0 { - margin-left: 0 !important; +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; } -.m-1 { - margin: 0.25rem !important; +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; } -.mt-1, -.my-1 { - margin-top: 0.25rem !important; +.rz-border-color-info { + border-color: var(--rz-info) !important; } -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; } -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; } -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; } -.m-2 { - margin: 0.5rem !important; +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; } -.mt-2, -.my-2 { - margin-top: 0.5rem !important; +.rz-border-color-success { + border-color: var(--rz-success) !important; } -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; } -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; } -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; } -.m-3 { - margin: 1rem !important; +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; } -.mt-3, -.my-3 { - margin-top: 1rem !important; +.rz-border-color-warning { + border-color: var(--rz-warning) !important; } -.mr-3, -.mx-3 { - margin-right: 1rem !important; +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; } -.mb-3, -.my-3 { - margin-bottom: 1rem !important; +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; } -.ml-3, -.mx-3 { - margin-left: 1rem !important; +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; } -.m-4 { - margin: 1.5rem !important; +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; } -.mt-4, -.my-4 { - margin-top: 1.5rem !important; +.rz-border-color-danger { + border-color: var(--rz-danger) !important; } -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; } -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; } -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; } -.m-5 { - margin: 3rem !important; +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; } -.mt-5, -.my-5 { - margin-top: 3rem !important; +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; } -.mr-5, -.mx-5 { - margin-right: 3rem !important; +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; } -.mb-5, -.my-5 { - margin-bottom: 3rem !important; +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; } -.ml-5, -.mx-5 { - margin-left: 3rem !important; +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; } -.p-0 { - padding: 0 !important; +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; } -.pt-0, -.py-0 { - padding-top: 0 !important; +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; } -.pr-0, -.px-0 { - padding-right: 0 !important; +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; } -.pb-0, -.py-0 { - padding-bottom: 0 !important; +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; } -.pl-0, -.px-0 { - padding-left: 0 !important; +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; } -.p-1 { - padding: 0.25rem !important; +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; } -.pt-1, -.py-1 { - padding-top: 0.25rem !important; +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; } -.pr-1, -.px-1 { - padding-right: 0.25rem !important; +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; } -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; } -.pl-1, -.px-1 { - padding-left: 0.25rem !important; +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; } -.p-2 { - padding: 0.5rem !important; +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; } -.pt-2, -.py-2 { - padding-top: 0.5rem !important; +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; } -.pr-2, -.px-2 { - padding-right: 0.5rem !important; +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; } -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; } -.pl-2, -.px-2 { - padding-left: 0.5rem !important; +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; } -.p-3 { - padding: 1rem !important; +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; } -.pt-3, -.py-3 { - padding-top: 1rem !important; +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; } -.pr-3, -.px-3 { - padding-right: 1rem !important; +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; } -.pb-3, -.py-3 { - padding-bottom: 1rem !important; +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; } -.pl-3, -.px-3 { - padding-left: 1rem !important; +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; } -.p-4 { - padding: 1.5rem !important; +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; } -.pr-4, -.px-4 { - padding-right: 1.5rem !important; +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; } -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; } -.pl-4, -.px-4 { - padding-left: 1.5rem !important; +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; } -.p-5 { - padding: 3rem !important; +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; } -.pt-5, -.py-5 { - padding-top: 3rem !important; +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; } -.pr-5, -.px-5 { - padding-right: 3rem !important; +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; } -.pb-5, -.py-5 { - padding-bottom: 3rem !important; +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; } -.pl-5, -.px-5 { - padding-left: 3rem !important; +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; } -.m-n1 { - margin: -0.25rem !important; +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; } -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; } -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; } -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; } -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; } -.m-n2 { - margin: -0.5rem !important; +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; } -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; } -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; } -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; } -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; } -.m-n3 { - margin: -1rem !important; +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; } -.mt-n3, -.my-n3 { - margin-top: -1rem !important; +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; } -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; } -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; } -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; } -.m-n4 { - margin: -1.5rem !important; +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; } -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; } -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; } -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; } -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; } -.m-n5 { - margin: -3rem !important; +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; } -.mt-n5, -.my-n5 { - margin-top: -3rem !important; +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; } -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; } -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; } -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; } -.m-auto { - margin: auto !important; +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; } -.mt-auto, -.my-auto { - margin-top: auto !important; +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; } -.mr-auto, -.mx-auto { - margin-right: auto !important; +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; } -.mb-auto, -.my-auto { - margin-bottom: auto !important; +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; } -.ml-auto, -.mx-auto { - margin-left: auto !important; +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; } -@media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; - } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; - } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; - } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; - } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; - } - .m-sm-1 { - margin: 0.25rem !important; - } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; - } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; - } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; - } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; - } - .m-sm-2 { - margin: 0.5rem !important; - } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; - } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; - } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; - } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; - } - .m-sm-3 { - margin: 1rem !important; - } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; - } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; - } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; - } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; - } - .m-sm-4 { - margin: 1.5rem !important; - } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; - } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; - } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; - } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; - } - .m-sm-5 { - margin: 3rem !important; - } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; - } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; - } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; - } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; - } - .p-sm-0 { - padding: 0 !important; - } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; - } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; - } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; - } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; - } - .p-sm-1 { - padding: 0.25rem !important; - } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; - } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; - } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; - } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; - } - .p-sm-2 { - padding: 0.5rem !important; - } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; - } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; - } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; - } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; - } - .p-sm-3 { - padding: 1rem !important; - } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; - } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; - } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; - } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; - } - .p-sm-4 { - padding: 1.5rem !important; - } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; - } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; - } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; - } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; - } - .p-sm-5 { - padding: 3rem !important; - } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; - } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; - } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; - } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; - } - .m-sm-n1 { - margin: -0.25rem !important; - } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; - } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; - } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; - } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; - } - .m-sm-n2 { - margin: -0.5rem !important; - } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; - } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; - } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; - } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; - } - .m-sm-n3 { - margin: -1rem !important; - } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; - } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; - } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; - } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; - } - .m-sm-n4 { - margin: -1.5rem !important; - } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; - } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; - } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; - } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; - } - .m-sm-n5 { - margin: -3rem !important; - } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; - } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; - } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; - } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; - } - .m-sm-auto { - margin: auto !important; - } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; - } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; - } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; - } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; - } +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; } -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; - } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; - } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; - } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; - } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; - } - .m-md-1 { - margin: 0.25rem !important; - } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; - } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; - } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; - } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; - } - .m-md-2 { - margin: 0.5rem !important; - } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; - } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; - } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; - } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; - } - .m-md-3 { - margin: 1rem !important; - } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; - } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; - } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; - } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; - } - .m-md-4 { - margin: 1.5rem !important; - } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; - } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; - } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; - } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; - } - .m-md-5 { - margin: 3rem !important; - } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; - } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; - } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; - } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; - } - .p-md-0 { - padding: 0 !important; - } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; - } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; - } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; - } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; - } - .p-md-1 { - padding: 0.25rem !important; - } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; - } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; - } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; - } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; - } - .p-md-2 { - padding: 0.5rem !important; - } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; - } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; - } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; - } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; - } - .p-md-3 { - padding: 1rem !important; - } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; - } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; - } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; - } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; - } - .p-md-4 { - padding: 1.5rem !important; - } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; - } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; - } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; - } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; - } - .p-md-5 { - padding: 3rem !important; - } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; - } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; - } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; - } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; - } - .m-md-n1 { - margin: -0.25rem !important; - } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; - } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; - } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; - } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; - } - .m-md-n2 { - margin: -0.5rem !important; - } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; - } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; - } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; - } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; - } - .m-md-n3 { - margin: -1rem !important; - } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; - } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; - } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; - } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; - } - .m-md-n4 { - margin: -1.5rem !important; - } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; - } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; - } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; - } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; - } - .m-md-n5 { - margin: -3rem !important; - } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; - } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; - } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; - } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; - } - .m-md-auto { - margin: auto !important; - } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; - } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; - } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; - } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; - } + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; } -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; - } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; - } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; - } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; - } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; - } - .m-lg-1 { - margin: 0.25rem !important; - } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; - } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; - } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; - } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; - } - .m-lg-2 { - margin: 0.5rem !important; - } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; - } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; - } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; - } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; - } - .m-lg-3 { - margin: 1rem !important; - } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; - } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; - } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; - } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; - } - .m-lg-4 { - margin: 1.5rem !important; - } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; - } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; - } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; - } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; - } - .m-lg-5 { - margin: 3rem !important; - } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; - } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; - } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; - } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; - } - .p-lg-0 { - padding: 0 !important; - } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; - } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; - } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; - } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; - } - .p-lg-1 { - padding: 0.25rem !important; - } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; - } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; - } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; - } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; - } - .p-lg-2 { - padding: 0.5rem !important; - } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; - } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; - } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; - } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; - } - .p-lg-3 { - padding: 1rem !important; - } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; - } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; - } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; - } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; - } - .p-lg-4 { - padding: 1.5rem !important; - } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; - } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; - } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; - } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; - } - .p-lg-5 { - padding: 3rem !important; - } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; - } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; - } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; - } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; - } - .m-lg-n1 { - margin: -0.25rem !important; - } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; - } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; - } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; - } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; - } - .m-lg-n2 { - margin: -0.5rem !important; - } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; - } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; - } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; - } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; - } - .m-lg-n3 { - margin: -1rem !important; - } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; - } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; - } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; - } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; - } - .m-lg-n4 { - margin: -1.5rem !important; - } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; - } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; - } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; - } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; - } - .m-lg-n5 { - margin: -3rem !important; - } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; - } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; - } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; - } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; - } - .m-lg-auto { - margin: auto !important; - } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; - } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; - } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; - } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; - } -} -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; - } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; - } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; - } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; - } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; - } - .m-xl-1 { - margin: 0.25rem !important; - } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; - } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; - } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; - } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; - } - .m-xl-2 { - margin: 0.5rem !important; - } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; - } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; - } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; - } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; - } - .m-xl-3 { - margin: 1rem !important; - } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; - } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; - } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; - } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; - } - .m-xl-4 { - margin: 1.5rem !important; - } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; - } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; - } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; - } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; - } - .m-xl-5 { - margin: 3rem !important; - } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; - } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; - } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; - } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; - } - .p-xl-0 { - padding: 0 !important; - } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; - } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; - } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; - } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; - } - .p-xl-1 { - padding: 0.25rem !important; - } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; - } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; - } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; - } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; - } - .p-xl-2 { - padding: 0.5rem !important; - } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; - } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; - } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; - } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; - } - .p-xl-3 { - padding: 1rem !important; - } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; - } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; - } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; - } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; - } - .p-xl-4 { - padding: 1.5rem !important; - } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; - } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; - } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; - } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; - } - .p-xl-5 { - padding: 3rem !important; - } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; - } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; - } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; - } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; - } - .m-xl-n1 { - margin: -0.25rem !important; - } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; - } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; - } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; - } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; - } - .m-xl-n2 { - margin: -0.5rem !important; - } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; - } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; - } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; - } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; - } - .m-xl-n3 { - margin: -1rem !important; - } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; - } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; - } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; - } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; - } - .m-xl-n4 { - margin: -1.5rem !important; - } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; - } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; - } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; - } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; - } - .m-xl-n5 { - margin: -3rem !important; - } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; - } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; - } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; - } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; - } - .m-xl-auto { - margin: auto !important; - } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; - } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; - } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; - } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; - } -} -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; -} - -.text-justify { - text-align: justify !important; + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; } -.text-wrap { - white-space: normal !important; +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; } -.text-nowrap { - white-space: nowrap !important; +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; } -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; } -.text-left { - text-align: left !important; +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; } -.text-right { - text-align: right !important; +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; } -.text-center { - text-align: center !important; +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; } -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; - } - .text-sm-right { - text-align: right !important; - } - .text-sm-center { - text-align: center !important; - } -} -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; - } - .text-md-right { - text-align: right !important; - } - .text-md-center { - text-align: center !important; - } -} -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; - } - .text-lg-right { - text-align: right !important; - } - .text-lg-center { - text-align: center !important; - } -} -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; - } - .text-xl-right { - text-align: right !important; - } - .text-xl-center { - text-align: center !important; - } -} -.text-lowercase { - text-transform: lowercase !important; +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; } -.text-uppercase { - text-transform: uppercase !important; +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; } -.text-capitalize { - text-transform: capitalize !important; +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; } -.font-weight-light { - font-weight: 300 !important; +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; } -.font-weight-lighter { - font-weight: lighter !important; +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; } -.font-weight-normal { - font-weight: 400 !important; +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; } -.font-weight-bold { - font-weight: 700 !important; +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; } -.font-weight-bolder { - font-weight: bolder !important; +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; } -.font-italic { - font-style: italic !important; +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; } -.text-white { - color: #fff !important; +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; } -.text-primary { - color: #4340D2 !important; +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; } -a.text-primary:hover, a.text-primary:focus { - color: #2826a0 !important; +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; } -.text-secondary { - color: #e91e63 !important; +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; } -a.text-secondary:hover, a.text-secondary:focus { - color: #aa1145 !important; +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; } -.text-success { - color: #4caf50 !important; +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; } -a.text-success:hover, a.text-success:focus { - color: #357a38 !important; +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; } -.text-info { - color: #2196f3 !important; +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; } -a.text-info:hover, a.text-info:focus { - color: #0a6ebd !important; +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; } -.text-warning { - color: #ff9800 !important; +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; } -a.text-warning:hover, a.text-warning:focus { - color: #b36a00 !important; -} - -.text-danger { - color: #f44336 !important; +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; } -a.text-danger:hover, a.text-danger:focus { - color: #d2190b !important; +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; } -.text-light { - color: #eeeeee !important; +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; } -a.text-light:hover, a.text-light:focus { - color: #c8c8c8 !important; +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; } -.text-dark { - color: #343a40 !important; +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; } -a.text-dark:hover, a.text-dark:focus { - color: #121416 !important; +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; } -.text-body { - color: #616161 !important; +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; } -.text-muted { - color: #6c757d !important; +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; } -.text-black-50 { - color: rgba(0, 0, 0, 0.5) !important; +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; } -.text-white-50 { - color: rgba(255, 255, 255, 0.5) !important; +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; } -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; } -.text-decoration-none { - text-decoration: none !important; +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; } -.text-break { - word-break: break-word !important; - overflow-wrap: break-word !important; +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; } -.text-reset { - color: inherit !important; +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; } -.visible { - visibility: visible !important; +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; } -.invisible { - visibility: hidden !important; +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; } -@font-face { - font-family: "Material Icons"; - font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); -} -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 300; - src: url("../fonts/roboto-v30-latin-300.woff") format("woff"); -} -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 400; - src: url("../fonts/roboto-v30-latin-regular.woff") format("woff"); -} -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 500; - src: url("../fonts/roboto-v30-latin-500.woff") format("woff"); -} -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 700; - src: url("../fonts/roboto-v30-latin-700.woff") format("woff"); -} -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #fafafa; - --rz-base-100: #f5f5f5; - --rz-base-200: #eeeeee; - --rz-base-300: #e0e0e0; - --rz-base-400: #bdbdbd; - --rz-base-500: #9e9e9e; - --rz-base-600: #757575; - --rz-base-700: #616161; - --rz-base-800: #424242; - --rz-base-900: #212121; - --rz-primary: #4340D2; - --rz-primary-light: #6966db; - --rz-primary-lighter: rgba(67, 64, 210, 0.12); - --rz-primary-dark: #3633a8; - --rz-primary-darker: #2e2c8f; - --rz-secondary: #e91e63; - --rz-secondary-light: #ed4b82; - --rz-secondary-lighter: rgba(233, 30, 99, 0.12); - --rz-secondary-dark: #ba184f; - --rz-secondary-darker: #9e1443; - --rz-info: #2196f3; - --rz-info-light: #4dabf5; - --rz-info-lighter: rgba(33, 150, 243, 0.2); - --rz-info-dark: #1a78c2; - --rz-info-darker: #1666a5; - --rz-success: #4caf50; - --rz-success-light: #70bf73; - --rz-success-lighter: rgba(76, 175, 80, 0.16); - --rz-success-dark: #3d8c40; - --rz-success-darker: #347736; - --rz-warning: #ff9800; - --rz-warning-light: #ffad33; - --rz-warning-lighter: rgba(255, 152, 0, 0.2); - --rz-warning-dark: #cc7a00; - --rz-warning-darker: #ad6700; - --rz-danger: #f44336; - --rz-danger-light: #f6695e; - --rz-danger-lighter: rgba(244, 67, 54, 0.2); - --rz-danger-dark: #c3362b; - --rz-danger-darker: #a62e25; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #4340D2; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #e91e63; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2196f3; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #4caf50; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #ff9800; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f44336; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #3700b3; - --rz-series-2: #ba68c8; - --rz-series-3: #f06292; - --rz-series-4: #ff8a65; - --rz-series-5: #ffee58; - --rz-series-6: #9ccc65; - --rz-series-7: #26a69a; - --rz-series-8: #4fc3f7; - --rz-series-9: #7f5cce; - --rz-series-10: #ce93d8; - --rz-series-11: #f48fb1; - --rz-series-12: #ffab91; - --rz-series-13: #fff176; - --rz-series-14: #aed581; - --rz-series-15: #4db6ac; - --rz-series-16: #81d4fa; - --rz-series-17: #a58cdd; - --rz-series-18: #e1bee7; - --rz-series-19: #f8bbd0; - --rz-series-20: #ffccbc; - --rz-series-21: #fff59d; - --rz-series-22: #c5e1a5; - --rz-series-23: #80cbc4; - --rz-series-24: #b3e5fc; +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 1rem; - --rz-body-line-height: 1.5; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Roboto, sans-serif; - --rz-icon-size: 1.5rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-primary); +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; } -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-focus: var(--rz-border-width) solid var(--rz-primary); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-300); +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.14); - --rz-shadow-2: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.14); - --rz-shadow-3: 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 3px 3px rgba(0, 0, 0, 0.12), 0px 1px 8px rgba(0, 0, 0, 0.14); - --rz-shadow-4: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); - --rz-shadow-5: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.14); - --rz-shadow-6: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.14); - --rz-shadow-7: 0px 9px 12px rgba(0, 0, 0, 0.14), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 5px 6px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0px 12px 17px rgba(0, 0, 0, 0.14), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 7px 8px rgba(0, 0, 0, 0.14); - --rz-shadow-9: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14); - --rz-shadow-10: 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 11px 15px rgba(0, 0, 0, 0.14); +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; } -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; } -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; } -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; } -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; } -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; } -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; } -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; } -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; } -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; } -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; } -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; } -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; } -.rz-display-none { - display: none !important; +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; } -.rz-display-block { - display: block !important; +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; } -.rz-display-inline { - display: inline !important; +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; } -.rz-display-inline-block { - display: inline-block !important; +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; } -.rz-display-flex { - display: flex !important; +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; } -.rz-display-inline-flex { - display: inline-flex !important; +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; } -.rz-display-grid { - display: grid !important; +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; } -.rz-display-inline-grid { - display: inline-grid !important; +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; } -@media (min-width: 576px) { - .rz-display-xs-none { - display: none !important; - } - .rz-display-xs-block { - display: block !important; - } - .rz-display-xs-inline { - display: inline !important; - } - .rz-display-xs-inline-block { - display: inline-block !important; - } - .rz-display-xs-flex { - display: flex !important; - } - .rz-display-xs-inline-flex { - display: inline-flex !important; - } - .rz-display-xs-grid { - display: grid !important; - } - .rz-display-xs-inline-grid { - display: inline-grid !important; - } +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; } -@media (min-width: 768px) { - .rz-display-sm-none { - display: none !important; - } - .rz-display-sm-block { - display: block !important; - } - .rz-display-sm-inline { - display: inline !important; - } - .rz-display-sm-inline-block { - display: inline-block !important; - } - .rz-display-sm-flex { - display: flex !important; - } - .rz-display-sm-inline-flex { - display: inline-flex !important; - } - .rz-display-sm-grid { - display: grid !important; - } - .rz-display-sm-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1024px) { - .rz-display-md-none { - display: none !important; - } - .rz-display-md-block { - display: block !important; - } - .rz-display-md-inline { - display: inline !important; - } - .rz-display-md-inline-block { - display: inline-block !important; - } - .rz-display-md-flex { - display: flex !important; - } - .rz-display-md-inline-flex { - display: inline-flex !important; - } - .rz-display-md-grid { - display: grid !important; - } - .rz-display-md-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1280px) { - .rz-display-lg-none { - display: none !important; - } - .rz-display-lg-block { - display: block !important; - } - .rz-display-lg-inline { - display: inline !important; - } - .rz-display-lg-inline-block { - display: inline-block !important; - } - .rz-display-lg-flex { - display: flex !important; - } - .rz-display-lg-inline-flex { - display: inline-flex !important; - } - .rz-display-lg-grid { - display: grid !important; - } - .rz-display-lg-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1920px) { - .rz-display-xl-none { - display: none !important; - } - .rz-display-xl-block { - display: block !important; - } - .rz-display-xl-inline { - display: inline !important; - } - .rz-display-xl-inline-block { - display: inline-block !important; - } - .rz-display-xl-flex { - display: flex !important; - } - .rz-display-xl-inline-flex { - display: inline-flex !important; - } - .rz-display-xl-grid { - display: grid !important; - } - .rz-display-xl-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 2560px) { - .rz-display-xx-none { - display: none !important; - } - .rz-display-xx-block { - display: block !important; - } - .rz-display-xx-inline { - display: inline !important; - } - .rz-display-xx-inline-block { - display: inline-block !important; - } - .rz-display-xx-flex { - display: flex !important; - } - .rz-display-xx-inline-flex { - display: inline-flex !important; - } - .rz-display-xx-grid { - display: grid !important; - } - .rz-display-xx-inline-grid { - display: inline-grid !important; - } -} -.rz-justify-content-normal { - justify-content: normal !important; + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; } -.rz-justify-content-stretch { - justify-content: stretch !important; +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; } -.rz-justify-content-center { - justify-content: center !important; +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; } -.rz-justify-content-start { - justify-content: start !important; +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; } -.rz-justify-content-end { - justify-content: end !important; +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; } -.rz-justify-content-flex-start { - justify-content: flex-start !important; +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; } -.rz-justify-content-flex-end { - justify-content: flex-end !important; +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; } -.rz-justify-content-left { - justify-content: left !important; +.rz-ripple { + position: relative; + overflow: hidden; } - -.rz-justify-content-right { - justify-content: right !important; +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; } - -.rz-justify-content-space-between { - justify-content: space-between !important; +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; } -.rz-justify-content-space-around { - justify-content: space-around !important; +body { + margin: 0; } -.rz-justify-content-space-evenly { - justify-content: space-evenly !important; +.rz-m-0 { + margin: 0 !important; } -.rz-align-items-normal { - align-items: normal !important; +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; } -.rz-align-items-stretch { - align-items: stretch !important; +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; } -.rz-align-items-center { - align-items: center !important; +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; } -.rz-align-items-start { - align-items: start !important; +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; } -.rz-align-items-end { - align-items: end !important; +.rz-ms-0 { + margin-inline-start: 0 !important; } -.rz-align-items-flex-start { - align-items: flex-start !important; +.rz-me-0 { + margin-inline-end: 0 !important; } -.rz-align-items-flex-end { - align-items: flex-end !important; +.rz-m-05 { + margin: 0.125rem !important; } -.rz-color-white { - color: var(--rz-white) !important; +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; } -.rz-color-black { - color: var(--rz-black) !important; +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; } -.rz-color-base-50 { - color: var(--rz-base-50) !important; +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; } -.rz-color-base-100 { - color: var(--rz-base-100) !important; +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; } -.rz-color-base-200 { - color: var(--rz-base-200) !important; +.rz-ms-05 { + margin-inline-start: 0.125rem !important; } -.rz-color-base-300 { - color: var(--rz-base-300) !important; +.rz-me-05 { + margin-inline-end: 0.125rem !important; } -.rz-color-base-400 { - color: var(--rz-base-400) !important; +.rz-m-1 { + margin: 0.25rem !important; } -.rz-color-base-500 { - color: var(--rz-base-500) !important; +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; } -.rz-color-base-600 { - color: var(--rz-base-600) !important; +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; } -.rz-color-base-700 { - color: var(--rz-base-700) !important; +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; } -.rz-color-base-800 { - color: var(--rz-base-800) !important; +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; } -.rz-color-base-900 { - color: var(--rz-base-900) !important; +.rz-ms-1 { + margin-inline-start: 0.25rem !important; } -.rz-color-primary { - color: var(--rz-primary) !important; +.rz-me-1 { + margin-inline-end: 0.25rem !important; } -.rz-color-primary-light { - color: var(--rz-primary-light) !important; +.rz-m-2 { + margin: 0.5rem !important; } -.rz-color-primary-lighter { - color: var(--rz-primary-lighter) !important; +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; } -.rz-color-primary-dark { - color: var(--rz-primary-dark) !important; +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; } -.rz-color-primary-darker { - color: var(--rz-primary-darker) !important; +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; } -.rz-color-secondary { - color: var(--rz-secondary) !important; +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; } -.rz-color-secondary-light { - color: var(--rz-secondary-light) !important; +.rz-ms-2 { + margin-inline-start: 0.5rem !important; } -.rz-color-secondary-lighter { - color: var(--rz-secondary-lighter) !important; +.rz-me-2 { + margin-inline-end: 0.5rem !important; } -.rz-color-secondary-dark { - color: var(--rz-secondary-dark) !important; +.rz-m-3 { + margin: 0.75rem !important; } -.rz-color-secondary-darker { - color: var(--rz-secondary-darker) !important; +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; } -.rz-color-info { - color: var(--rz-info) !important; +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; } -.rz-color-info-light { - color: var(--rz-info-light) !important; +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; } -.rz-color-info-lighter { - color: var(--rz-info-lighter) !important; +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; } -.rz-color-info-dark { - color: var(--rz-info-dark) !important; +.rz-ms-3 { + margin-inline-start: 0.75rem !important; } -.rz-color-info-darker { - color: var(--rz-info-darker) !important; +.rz-me-3 { + margin-inline-end: 0.75rem !important; } -.rz-color-success { - color: var(--rz-success) !important; +.rz-m-4 { + margin: 1rem !important; } -.rz-color-success-light { - color: var(--rz-success-light) !important; +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; } -.rz-color-success-lighter { - color: var(--rz-success-lighter) !important; +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; } -.rz-color-success-dark { - color: var(--rz-success-dark) !important; +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; } -.rz-color-success-darker { - color: var(--rz-success-darker) !important; +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; } -.rz-color-warning { - color: var(--rz-warning) !important; +.rz-ms-4 { + margin-inline-start: 1rem !important; } -.rz-color-warning-light { - color: var(--rz-warning-light) !important; +.rz-me-4 { + margin-inline-end: 1rem !important; } -.rz-color-warning-lighter { - color: var(--rz-warning-lighter) !important; +.rz-m-5 { + margin: 1.25rem !important; } -.rz-color-warning-dark { - color: var(--rz-warning-dark) !important; +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; } -.rz-color-warning-darker { - color: var(--rz-warning-darker) !important; +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; } -.rz-color-danger { - color: var(--rz-danger) !important; +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; } -.rz-color-danger-light { - color: var(--rz-danger-light) !important; +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; } -.rz-color-danger-lighter { - color: var(--rz-danger-lighter) !important; +.rz-ms-5 { + margin-inline-start: 1.25rem !important; } -.rz-color-danger-dark { - color: var(--rz-danger-dark) !important; +.rz-me-5 { + margin-inline-end: 1.25rem !important; } -.rz-color-danger-darker { - color: var(--rz-danger-darker) !important; +.rz-m-6 { + margin: 1.5rem !important; } -.rz-color-on-primary { - color: var(--rz-on-primary) !important; +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; } -.rz-color-on-primary-light { - color: var(--rz-on-primary-light) !important; +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; } -.rz-color-on-primary-lighter { - color: var(--rz-on-primary-lighter) !important; +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; } -.rz-color-on-primary-dark { - color: var(--rz-on-primary-dark) !important; +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; } -.rz-color-on-primary-darker { - color: var(--rz-on-primary-darker) !important; +.rz-ms-6 { + margin-inline-start: 1.5rem !important; } -.rz-color-on-secondary { - color: var(--rz-on-secondary) !important; +.rz-me-6 { + margin-inline-end: 1.5rem !important; } -.rz-color-on-secondary-light { - color: var(--rz-on-secondary-light) !important; +.rz-m-7 { + margin: 1.75rem !important; } -.rz-color-on-secondary-lighter { - color: var(--rz-on-secondary-lighter) !important; +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; } -.rz-color-on-secondary-dark { - color: var(--rz-on-secondary-dark) !important; +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; } -.rz-color-on-secondary-darker { - color: var(--rz-on-secondary-darker) !important; +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; } -.rz-color-on-info { - color: var(--rz-on-info) !important; +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; } -.rz-color-on-info-light { - color: var(--rz-on-info-light) !important; +.rz-ms-7 { + margin-inline-start: 1.75rem !important; } -.rz-color-on-info-lighter { - color: var(--rz-on-info-lighter) !important; +.rz-me-7 { + margin-inline-end: 1.75rem !important; } -.rz-color-on-info-dark { - color: var(--rz-on-info-dark) !important; +.rz-m-8 { + margin: 2rem !important; } -.rz-color-on-info-darker { - color: var(--rz-on-info-darker) !important; +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; } -.rz-color-on-success { - color: var(--rz-on-success) !important; +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; } -.rz-color-on-success-light { - color: var(--rz-on-success-light) !important; +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; } -.rz-color-on-success-lighter { - color: var(--rz-on-success-lighter) !important; +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; } -.rz-color-on-success-dark { - color: var(--rz-on-success-dark) !important; +.rz-ms-8 { + margin-inline-start: 2rem !important; } -.rz-color-on-success-darker { - color: var(--rz-on-success-darker) !important; +.rz-me-8 { + margin-inline-end: 2rem !important; } -.rz-color-on-warning { - color: var(--rz-on-warning) !important; +.rz-m-9 { + margin: 2.25rem !important; } -.rz-color-on-warning-light { - color: var(--rz-on-warning-light) !important; +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; } -.rz-color-on-warning-lighter { - color: var(--rz-on-warning-lighter) !important; +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; } -.rz-color-on-warning-dark { - color: var(--rz-on-warning-dark) !important; +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; } -.rz-color-on-warning-darker { - color: var(--rz-on-warning-darker) !important; +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; } -.rz-color-on-danger { - color: var(--rz-on-danger) !important; +.rz-ms-9 { + margin-inline-start: 2.25rem !important; } -.rz-color-on-danger-light { - color: var(--rz-on-danger-light) !important; +.rz-me-9 { + margin-inline-end: 2.25rem !important; } -.rz-color-on-danger-lighter { - color: var(--rz-on-danger-lighter) !important; +.rz-m-10 { + margin: 2.5rem !important; } -.rz-color-on-danger-dark { - color: var(--rz-on-danger-dark) !important; +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; } -.rz-color-on-danger-darker { - color: var(--rz-on-danger-darker) !important; +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; } -.rz-color-series-1 { - color: var(--rz-series-1) !important; +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; } -.rz-color-series-2 { - color: var(--rz-series-2) !important; +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; } -.rz-color-series-3 { - color: var(--rz-series-3) !important; +.rz-ms-10 { + margin-inline-start: 2.5rem !important; } -.rz-color-series-4 { - color: var(--rz-series-4) !important; +.rz-me-10 { + margin-inline-end: 2.5rem !important; } -.rz-color-series-5 { - color: var(--rz-series-5) !important; +.rz-m-11 { + margin: 2.75rem !important; } -.rz-color-series-6 { - color: var(--rz-series-6) !important; +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; } -.rz-color-series-7 { - color: var(--rz-series-7) !important; +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; } -.rz-color-series-8 { - color: var(--rz-series-8) !important; +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; } -.rz-color-series-9 { - color: var(--rz-series-9) !important; +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; } -.rz-color-series-10 { - color: var(--rz-series-10) !important; +.rz-ms-11 { + margin-inline-start: 2.75rem !important; } -.rz-color-series-11 { - color: var(--rz-series-11) !important; +.rz-me-11 { + margin-inline-end: 2.75rem !important; } -.rz-color-series-12 { - color: var(--rz-series-12) !important; +.rz-m-12 { + margin: 3rem !important; } -.rz-color-series-13 { - color: var(--rz-series-13) !important; +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; } -.rz-color-series-14 { - color: var(--rz-series-14) !important; +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; } -.rz-color-series-15 { - color: var(--rz-series-15) !important; +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; } -.rz-color-series-16 { - color: var(--rz-series-16) !important; +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; } -.rz-color-series-17 { - color: var(--rz-series-17) !important; +.rz-ms-12 { + margin-inline-start: 3rem !important; } -.rz-color-series-18 { - color: var(--rz-series-18) !important; +.rz-me-12 { + margin-inline-end: 3rem !important; } -.rz-color-series-19 { - color: var(--rz-series-19) !important; +.rz-p-0 { + padding: 0 !important; } -.rz-color-series-20 { - color: var(--rz-series-20) !important; +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; } -.rz-color-series-21 { - color: var(--rz-series-21) !important; +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; } -.rz-color-series-22 { - color: var(--rz-series-22) !important; +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; } -.rz-color-series-23 { - color: var(--rz-series-23) !important; +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; } -.rz-color-series-24 { - color: var(--rz-series-24) !important; +.rz-ps-0 { + padding-inline-start: 0 !important; } -.rz-background-color-white { - background-color: var(--rz-white) !important; +.rz-pe-0 { + padding-inline-end: 0 !important; } -.rz-background-color-black { - background-color: var(--rz-black) !important; +.rz-p-05 { + padding: 0.125rem !important; } -.rz-background-color-base-50 { - background-color: var(--rz-base-50) !important; +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; } -.rz-background-color-base-100 { - background-color: var(--rz-base-100) !important; +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; } -.rz-background-color-base-200 { - background-color: var(--rz-base-200) !important; +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; } -.rz-background-color-base-300 { - background-color: var(--rz-base-300) !important; +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; } -.rz-background-color-base-400 { - background-color: var(--rz-base-400) !important; +.rz-ps-05 { + padding-inline-start: 0.125rem !important; } -.rz-background-color-base-500 { - background-color: var(--rz-base-500) !important; +.rz-pe-05 { + padding-inline-end: 0.125rem !important; } -.rz-background-color-base-600 { - background-color: var(--rz-base-600) !important; +.rz-p-1 { + padding: 0.25rem !important; } -.rz-background-color-base-700 { - background-color: var(--rz-base-700) !important; +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; } -.rz-background-color-base-800 { - background-color: var(--rz-base-800) !important; +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; } -.rz-background-color-base-900 { - background-color: var(--rz-base-900) !important; +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; } -.rz-background-color-primary { - background-color: var(--rz-primary) !important; +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; } -.rz-background-color-primary-light { - background-color: var(--rz-primary-light) !important; +.rz-ps-1 { + padding-inline-start: 0.25rem !important; } -.rz-background-color-primary-lighter { - background-color: var(--rz-primary-lighter) !important; +.rz-pe-1 { + padding-inline-end: 0.25rem !important; } -.rz-background-color-primary-dark { - background-color: var(--rz-primary-dark) !important; +.rz-p-2 { + padding: 0.5rem !important; } -.rz-background-color-primary-darker { - background-color: var(--rz-primary-darker) !important; +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; } -.rz-background-color-secondary { - background-color: var(--rz-secondary) !important; +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; } -.rz-background-color-secondary-light { - background-color: var(--rz-secondary-light) !important; +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; } -.rz-background-color-secondary-lighter { - background-color: var(--rz-secondary-lighter) !important; +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; } -.rz-background-color-secondary-dark { - background-color: var(--rz-secondary-dark) !important; +.rz-ps-2 { + padding-inline-start: 0.5rem !important; } -.rz-background-color-secondary-darker { - background-color: var(--rz-secondary-darker) !important; +.rz-pe-2 { + padding-inline-end: 0.5rem !important; } -.rz-background-color-info { - background-color: var(--rz-info) !important; +.rz-p-3 { + padding: 0.75rem !important; } -.rz-background-color-info-light { - background-color: var(--rz-info-light) !important; +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; } -.rz-background-color-info-lighter { - background-color: var(--rz-info-lighter) !important; +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; } -.rz-background-color-info-dark { - background-color: var(--rz-info-dark) !important; +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; } -.rz-background-color-info-darker { - background-color: var(--rz-info-darker) !important; +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; } -.rz-background-color-success { - background-color: var(--rz-success) !important; +.rz-ps-3 { + padding-inline-start: 0.75rem !important; } -.rz-background-color-success-light { - background-color: var(--rz-success-light) !important; +.rz-pe-3 { + padding-inline-end: 0.75rem !important; } -.rz-background-color-success-lighter { - background-color: var(--rz-success-lighter) !important; +.rz-p-4 { + padding: 1rem !important; } -.rz-background-color-success-dark { - background-color: var(--rz-success-dark) !important; +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; } -.rz-background-color-success-darker { - background-color: var(--rz-success-darker) !important; +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; } -.rz-background-color-warning { - background-color: var(--rz-warning) !important; +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; } -.rz-background-color-warning-light { - background-color: var(--rz-warning-light) !important; +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; } -.rz-background-color-warning-lighter { - background-color: var(--rz-warning-lighter) !important; +.rz-ps-4 { + padding-inline-start: 1rem !important; } -.rz-background-color-warning-dark { - background-color: var(--rz-warning-dark) !important; +.rz-pe-4 { + padding-inline-end: 1rem !important; } -.rz-background-color-warning-darker { - background-color: var(--rz-warning-darker) !important; +.rz-p-5 { + padding: 1.25rem !important; } -.rz-background-color-danger { - background-color: var(--rz-danger) !important; +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; } -.rz-background-color-danger-light { - background-color: var(--rz-danger-light) !important; +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; } -.rz-background-color-danger-lighter { - background-color: var(--rz-danger-lighter) !important; +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; } -.rz-background-color-danger-dark { - background-color: var(--rz-danger-dark) !important; +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; } -.rz-background-color-danger-darker { - background-color: var(--rz-danger-darker) !important; +.rz-ps-5 { + padding-inline-start: 1.25rem !important; } -.rz-background-color-on-primary { - background-color: var(--rz-on-primary) !important; +.rz-pe-5 { + padding-inline-end: 1.25rem !important; } -.rz-background-color-on-primary-light { - background-color: var(--rz-on-primary-light) !important; +.rz-p-6 { + padding: 1.5rem !important; } -.rz-background-color-on-primary-lighter { - background-color: var(--rz-on-primary-lighter) !important; +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; } -.rz-background-color-on-primary-dark { - background-color: var(--rz-on-primary-dark) !important; +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; } -.rz-background-color-on-primary-darker { - background-color: var(--rz-on-primary-darker) !important; +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; } -.rz-background-color-on-secondary { - background-color: var(--rz-on-secondary) !important; +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; } -.rz-background-color-on-secondary-light { - background-color: var(--rz-on-secondary-light) !important; +.rz-ps-6 { + padding-inline-start: 1.5rem !important; } -.rz-background-color-on-secondary-lighter { - background-color: var(--rz-on-secondary-lighter) !important; +.rz-pe-6 { + padding-inline-end: 1.5rem !important; } -.rz-background-color-on-secondary-dark { - background-color: var(--rz-on-secondary-dark) !important; +.rz-p-7 { + padding: 1.75rem !important; } -.rz-background-color-on-secondary-darker { - background-color: var(--rz-on-secondary-darker) !important; +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; } -.rz-background-color-on-info { - background-color: var(--rz-on-info) !important; +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; } -.rz-background-color-on-info-light { - background-color: var(--rz-on-info-light) !important; +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; } -.rz-background-color-on-info-lighter { - background-color: var(--rz-on-info-lighter) !important; +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; } -.rz-background-color-on-info-dark { - background-color: var(--rz-on-info-dark) !important; +.rz-ps-7 { + padding-inline-start: 1.75rem !important; } -.rz-background-color-on-info-darker { - background-color: var(--rz-on-info-darker) !important; +.rz-pe-7 { + padding-inline-end: 1.75rem !important; } -.rz-background-color-on-success { - background-color: var(--rz-on-success) !important; +.rz-p-8 { + padding: 2rem !important; } -.rz-background-color-on-success-light { - background-color: var(--rz-on-success-light) !important; +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; } -.rz-background-color-on-success-lighter { - background-color: var(--rz-on-success-lighter) !important; +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; } -.rz-background-color-on-success-dark { - background-color: var(--rz-on-success-dark) !important; +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; } -.rz-background-color-on-success-darker { - background-color: var(--rz-on-success-darker) !important; +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; } -.rz-background-color-on-warning { - background-color: var(--rz-on-warning) !important; +.rz-ps-8 { + padding-inline-start: 2rem !important; } -.rz-background-color-on-warning-light { - background-color: var(--rz-on-warning-light) !important; +.rz-pe-8 { + padding-inline-end: 2rem !important; } -.rz-background-color-on-warning-lighter { - background-color: var(--rz-on-warning-lighter) !important; +.rz-p-9 { + padding: 2.25rem !important; } -.rz-background-color-on-warning-dark { - background-color: var(--rz-on-warning-dark) !important; +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; } -.rz-background-color-on-warning-darker { - background-color: var(--rz-on-warning-darker) !important; +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; } -.rz-background-color-on-danger { - background-color: var(--rz-on-danger) !important; +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; } -.rz-background-color-on-danger-light { - background-color: var(--rz-on-danger-light) !important; +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; } -.rz-background-color-on-danger-lighter { - background-color: var(--rz-on-danger-lighter) !important; +.rz-ps-9 { + padding-inline-start: 2.25rem !important; } -.rz-background-color-on-danger-dark { - background-color: var(--rz-on-danger-dark) !important; +.rz-pe-9 { + padding-inline-end: 2.25rem !important; } -.rz-background-color-on-danger-darker { - background-color: var(--rz-on-danger-darker) !important; +.rz-p-10 { + padding: 2.5rem !important; } -.rz-background-color-series-1 { - background-color: var(--rz-series-1) !important; +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; } -.rz-background-color-series-2 { - background-color: var(--rz-series-2) !important; +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; } -.rz-background-color-series-3 { - background-color: var(--rz-series-3) !important; +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; } -.rz-background-color-series-4 { - background-color: var(--rz-series-4) !important; +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; } -.rz-background-color-series-5 { - background-color: var(--rz-series-5) !important; +.rz-ps-10 { + padding-inline-start: 2.5rem !important; } -.rz-background-color-series-6 { - background-color: var(--rz-series-6) !important; +.rz-pe-10 { + padding-inline-end: 2.5rem !important; } -.rz-background-color-series-7 { - background-color: var(--rz-series-7) !important; +.rz-p-11 { + padding: 2.75rem !important; } -.rz-background-color-series-8 { - background-color: var(--rz-series-8) !important; +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; } -.rz-background-color-series-9 { - background-color: var(--rz-series-9) !important; +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; } -.rz-background-color-series-10 { - background-color: var(--rz-series-10) !important; +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; } -.rz-background-color-series-11 { - background-color: var(--rz-series-11) !important; +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; } -.rz-background-color-series-12 { - background-color: var(--rz-series-12) !important; -} - -.rz-background-color-series-13 { - background-color: var(--rz-series-13) !important; -} - -.rz-background-color-series-14 { - background-color: var(--rz-series-14) !important; -} - -.rz-background-color-series-15 { - background-color: var(--rz-series-15) !important; -} - -.rz-background-color-series-16 { - background-color: var(--rz-series-16) !important; -} - -.rz-background-color-series-17 { - background-color: var(--rz-series-17) !important; -} - -.rz-background-color-series-18 { - background-color: var(--rz-series-18) !important; -} - -.rz-background-color-series-19 { - background-color: var(--rz-series-19) !important; -} - -.rz-background-color-series-20 { - background-color: var(--rz-series-20) !important; -} - -.rz-background-color-series-21 { - background-color: var(--rz-series-21) !important; -} - -.rz-background-color-series-22 { - background-color: var(--rz-series-22) !important; -} - -.rz-background-color-series-23 { - background-color: var(--rz-series-23) !important; -} - -.rz-background-color-series-24 { - background-color: var(--rz-series-24) !important; -} - -.rz-border-color-white { - border-color: var(--rz-white) !important; -} - -.rz-border-color-black { - border-color: var(--rz-black) !important; -} - -.rz-border-color-base-50 { - border-color: var(--rz-base-50) !important; -} - -.rz-border-color-base-100 { - border-color: var(--rz-base-100) !important; -} - -.rz-border-color-base-200 { - border-color: var(--rz-base-200) !important; -} - -.rz-border-color-base-300 { - border-color: var(--rz-base-300) !important; -} - -.rz-border-color-base-400 { - border-color: var(--rz-base-400) !important; -} - -.rz-border-color-base-500 { - border-color: var(--rz-base-500) !important; -} - -.rz-border-color-base-600 { - border-color: var(--rz-base-600) !important; -} - -.rz-border-color-base-700 { - border-color: var(--rz-base-700) !important; -} - -.rz-border-color-base-800 { - border-color: var(--rz-base-800) !important; -} - -.rz-border-color-base-900 { - border-color: var(--rz-base-900) !important; -} - -.rz-border-color-primary { - border-color: var(--rz-primary) !important; -} - -.rz-border-color-primary-light { - border-color: var(--rz-primary-light) !important; -} - -.rz-border-color-primary-lighter { - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-color-primary-dark { - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-color-primary-darker { - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-color-secondary { - border-color: var(--rz-secondary) !important; -} - -.rz-border-color-secondary-light { - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-color-secondary-lighter { - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-color-secondary-dark { - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-color-secondary-darker { - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-color-info { - border-color: var(--rz-info) !important; -} - -.rz-border-color-info-light { - border-color: var(--rz-info-light) !important; -} - -.rz-border-color-info-lighter { - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-color-info-dark { - border-color: var(--rz-info-dark) !important; -} - -.rz-border-color-info-darker { - border-color: var(--rz-info-darker) !important; -} - -.rz-border-color-success { - border-color: var(--rz-success) !important; -} - -.rz-border-color-success-light { - border-color: var(--rz-success-light) !important; -} - -.rz-border-color-success-lighter { - border-color: var(--rz-success-lighter) !important; -} - -.rz-border-color-success-dark { - border-color: var(--rz-success-dark) !important; -} - -.rz-border-color-success-darker { - border-color: var(--rz-success-darker) !important; -} - -.rz-border-color-warning { - border-color: var(--rz-warning) !important; -} - -.rz-border-color-warning-light { - border-color: var(--rz-warning-light) !important; +.rz-ps-11 { + padding-inline-start: 2.75rem !important; } -.rz-border-color-warning-lighter { - border-color: var(--rz-warning-lighter) !important; +.rz-pe-11 { + padding-inline-end: 2.75rem !important; } -.rz-border-color-warning-dark { - border-color: var(--rz-warning-dark) !important; +.rz-p-12 { + padding: 3rem !important; } -.rz-border-color-warning-darker { - border-color: var(--rz-warning-darker) !important; +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; } -.rz-border-color-danger { - border-color: var(--rz-danger) !important; +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; } -.rz-border-color-danger-light { - border-color: var(--rz-danger-light) !important; +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; } -.rz-border-color-danger-lighter { - border-color: var(--rz-danger-lighter) !important; +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; } -.rz-border-color-danger-dark { - border-color: var(--rz-danger-dark) !important; +.rz-ps-12 { + padding-inline-start: 3rem !important; } -.rz-border-color-danger-darker { - border-color: var(--rz-danger-darker) !important; +.rz-pe-12 { + padding-inline-end: 3rem !important; } -.rz-border-color-on-primary { - border-color: var(--rz-on-primary) !important; +.rz-m-auto { + margin: auto !important; } -.rz-border-color-on-primary-light { - border-color: var(--rz-on-primary-light) !important; +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; } -.rz-border-color-on-primary-lighter { - border-color: var(--rz-on-primary-lighter) !important; +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; } -.rz-border-color-on-primary-dark { - border-color: var(--rz-on-primary-dark) !important; +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; } -.rz-border-color-on-primary-darker { - border-color: var(--rz-on-primary-darker) !important; +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; } -.rz-border-color-on-secondary { - border-color: var(--rz-on-secondary) !important; +.rz-ms-auto { + margin-inline-start: auto !important; } -.rz-border-color-on-secondary-light { - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-color-on-secondary-lighter { - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-color-on-secondary-dark { - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-color-on-secondary-darker { - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-color-on-info { - border-color: var(--rz-on-info) !important; -} - -.rz-border-color-on-info-light { - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-color-on-info-lighter { - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-color-on-info-dark { - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-color-on-info-darker { - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-color-on-success { - border-color: var(--rz-on-success) !important; -} - -.rz-border-color-on-success-light { - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-color-on-success-lighter { - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-color-on-success-dark { - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-color-on-success-darker { - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-color-on-warning { - border-color: var(--rz-on-warning) !important; -} - -.rz-border-color-on-warning-light { - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-color-on-warning-lighter { - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-color-on-warning-dark { - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-color-on-warning-darker { - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-color-on-danger { - border-color: var(--rz-on-danger) !important; -} - -.rz-border-color-on-danger-light { - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-color-on-danger-lighter { - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-color-on-danger-dark { - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-color-on-danger-darker { - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-color-series-1 { - border-color: var(--rz-series-1) !important; -} - -.rz-border-color-series-2 { - border-color: var(--rz-series-2) !important; -} - -.rz-border-color-series-3 { - border-color: var(--rz-series-3) !important; -} - -.rz-border-color-series-4 { - border-color: var(--rz-series-4) !important; -} - -.rz-border-color-series-5 { - border-color: var(--rz-series-5) !important; -} - -.rz-border-color-series-6 { - border-color: var(--rz-series-6) !important; -} - -.rz-border-color-series-7 { - border-color: var(--rz-series-7) !important; -} - -.rz-border-color-series-8 { - border-color: var(--rz-series-8) !important; -} - -.rz-border-color-series-9 { - border-color: var(--rz-series-9) !important; -} - -.rz-border-color-series-10 { - border-color: var(--rz-series-10) !important; -} - -.rz-border-color-series-11 { - border-color: var(--rz-series-11) !important; -} - -.rz-border-color-series-12 { - border-color: var(--rz-series-12) !important; -} - -.rz-border-color-series-13 { - border-color: var(--rz-series-13) !important; -} - -.rz-border-color-series-14 { - border-color: var(--rz-series-14) !important; -} - -.rz-border-color-series-15 { - border-color: var(--rz-series-15) !important; -} - -.rz-border-color-series-16 { - border-color: var(--rz-series-16) !important; -} - -.rz-border-color-series-17 { - border-color: var(--rz-series-17) !important; -} - -.rz-border-color-series-18 { - border-color: var(--rz-series-18) !important; -} - -.rz-border-color-series-19 { - border-color: var(--rz-series-19) !important; -} - -.rz-border-color-series-20 { - border-color: var(--rz-series-20) !important; -} - -.rz-border-color-series-21 { - border-color: var(--rz-series-21) !important; -} - -.rz-border-color-series-22 { - border-color: var(--rz-series-22) !important; -} - -.rz-border-color-series-23 { - border-color: var(--rz-series-23) !important; -} - -.rz-border-color-series-24 { - border-color: var(--rz-series-24) !important; -} - -.rz-border-white { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-white) !important; -} - -.rz-border-black { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-black) !important; -} - -.rz-border-base-50 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-50) !important; -} - -.rz-border-base-100 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-100) !important; -} - -.rz-border-base-200 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-200) !important; -} - -.rz-border-base-300 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-300) !important; -} - -.rz-border-base-400 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-400) !important; -} - -.rz-border-base-500 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-500) !important; -} - -.rz-border-base-600 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-600) !important; -} - -.rz-border-base-700 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-700) !important; -} - -.rz-border-base-800 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-800) !important; -} - -.rz-border-base-900 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-900) !important; -} - -.rz-border-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary) !important; -} - -.rz-border-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-light) !important; -} - -.rz-border-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary) !important; -} - -.rz-border-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info) !important; -} - -.rz-border-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-light) !important; -} - -.rz-border-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-dark) !important; -} - -.rz-border-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-darker) !important; -} - -.rz-border-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success) !important; -} - -.rz-border-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-light) !important; -} - -.rz-border-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-lighter) !important; -} - -.rz-border-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-dark) !important; -} - -.rz-border-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-darker) !important; -} - -.rz-border-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning) !important; -} - -.rz-border-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-light) !important; -} - -.rz-border-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger) !important; -} - -.rz-border-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-light) !important; -} - -.rz-border-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-on-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary) !important; -} - -.rz-border-on-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-on-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-on-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-on-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-on-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-on-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-on-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-on-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-on-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-on-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info) !important; -} - -.rz-border-on-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-on-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-on-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-on-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-on-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success) !important; -} - -.rz-border-on-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-on-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-on-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-on-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-on-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning) !important; -} - -.rz-border-on-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-on-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-on-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-on-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-on-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger) !important; -} - -.rz-border-on-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-on-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-on-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-on-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-series-1 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-1) !important; -} - -.rz-border-series-2 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-2) !important; -} - -.rz-border-series-3 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-3) !important; -} - -.rz-border-series-4 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-4) !important; -} - -.rz-border-series-5 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-5) !important; -} - -.rz-border-series-6 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-6) !important; -} - -.rz-border-series-7 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-7) !important; -} - -.rz-border-series-8 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-8) !important; -} - -.rz-border-series-9 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-9) !important; -} - -.rz-border-series-10 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-10) !important; -} - -.rz-border-series-11 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-11) !important; -} - -.rz-border-series-12 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-12) !important; -} - -.rz-border-series-13 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-13) !important; -} - -.rz-border-series-14 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-14) !important; -} - -.rz-border-series-15 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-15) !important; -} - -.rz-border-series-16 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-16) !important; -} - -.rz-border-series-17 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-17) !important; -} - -.rz-border-series-18 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-18) !important; -} - -.rz-border-series-19 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-19) !important; -} - -.rz-border-series-20 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-20) !important; -} - -.rz-border-series-21 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-21) !important; -} - -.rz-border-series-22 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-22) !important; -} - -.rz-border-series-23 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-23) !important; -} - -.rz-border-series-24 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-24) !important; -} - -.rz-ripple { - position: relative; - overflow: hidden; -} -.rz-ripple:not(.rz-state-disabled):before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - background-position: center; - background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; - transition: background-size 0.8s, opacity 0.8s; -} -.rz-ripple:not(.rz-state-disabled):active:before { - transition: background-size 0s, opacity 0s; - opacity: 0.32; - background-size: 100%; -} - -.rz-m-0 { - margin: 0 !important; -} - -.rz-my-0, -.rz-mt-0 { - margin-top: 0 !important; -} - -.rz-mx-0, -.rz-mr-0 { - margin-right: 0 !important; -} - -.rz-my-0, -.rz-mb-0 { - margin-bottom: 0 !important; -} - -.rz-mx-0, -.rz-ml-0 { - margin-left: 0 !important; -} - -.rz-ms-0 { - margin-inline-start: 0 !important; -} - -.rz-me-0 { - margin-inline-end: 0 !important; -} - -.rz-m-05 { - margin: 0.125rem !important; -} - -.rz-my-05, -.rz-mt-05 { - margin-top: 0.125rem !important; -} - -.rz-mx-05, -.rz-mr-05 { - margin-right: 0.125rem !important; -} - -.rz-my-05, -.rz-mb-05 { - margin-bottom: 0.125rem !important; -} - -.rz-mx-05, -.rz-ml-05 { - margin-left: 0.125rem !important; -} - -.rz-ms-05 { - margin-inline-start: 0.125rem !important; -} - -.rz-me-05 { - margin-inline-end: 0.125rem !important; -} - -.rz-m-1 { - margin: 0.25rem !important; -} - -.rz-my-1, -.rz-mt-1 { - margin-top: 0.25rem !important; -} - -.rz-mx-1, -.rz-mr-1 { - margin-right: 0.25rem !important; -} - -.rz-my-1, -.rz-mb-1 { - margin-bottom: 0.25rem !important; -} - -.rz-mx-1, -.rz-ml-1 { - margin-left: 0.25rem !important; -} - -.rz-ms-1 { - margin-inline-start: 0.25rem !important; -} - -.rz-me-1 { - margin-inline-end: 0.25rem !important; -} - -.rz-m-2 { - margin: 0.5rem !important; -} - -.rz-my-2, -.rz-mt-2 { - margin-top: 0.5rem !important; -} - -.rz-mx-2, -.rz-mr-2 { - margin-right: 0.5rem !important; -} - -.rz-my-2, -.rz-mb-2 { - margin-bottom: 0.5rem !important; -} - -.rz-mx-2, -.rz-ml-2 { - margin-left: 0.5rem !important; -} - -.rz-ms-2 { - margin-inline-start: 0.5rem !important; -} - -.rz-me-2 { - margin-inline-end: 0.5rem !important; -} - -.rz-m-3 { - margin: 0.75rem !important; -} - -.rz-my-3, -.rz-mt-3 { - margin-top: 0.75rem !important; -} - -.rz-mx-3, -.rz-mr-3 { - margin-right: 0.75rem !important; -} - -.rz-my-3, -.rz-mb-3 { - margin-bottom: 0.75rem !important; -} - -.rz-mx-3, -.rz-ml-3 { - margin-left: 0.75rem !important; -} - -.rz-ms-3 { - margin-inline-start: 0.75rem !important; -} - -.rz-me-3 { - margin-inline-end: 0.75rem !important; -} - -.rz-m-4 { - margin: 1rem !important; -} - -.rz-my-4, -.rz-mt-4 { - margin-top: 1rem !important; -} - -.rz-mx-4, -.rz-mr-4 { - margin-right: 1rem !important; -} - -.rz-my-4, -.rz-mb-4 { - margin-bottom: 1rem !important; -} - -.rz-mx-4, -.rz-ml-4 { - margin-left: 1rem !important; -} - -.rz-ms-4 { - margin-inline-start: 1rem !important; -} - -.rz-me-4 { - margin-inline-end: 1rem !important; -} - -.rz-m-5 { - margin: 1.25rem !important; -} - -.rz-my-5, -.rz-mt-5 { - margin-top: 1.25rem !important; -} - -.rz-mx-5, -.rz-mr-5 { - margin-right: 1.25rem !important; -} - -.rz-my-5, -.rz-mb-5 { - margin-bottom: 1.25rem !important; -} - -.rz-mx-5, -.rz-ml-5 { - margin-left: 1.25rem !important; -} - -.rz-ms-5 { - margin-inline-start: 1.25rem !important; -} - -.rz-me-5 { - margin-inline-end: 1.25rem !important; -} - -.rz-m-6 { - margin: 1.5rem !important; -} - -.rz-my-6, -.rz-mt-6 { - margin-top: 1.5rem !important; -} - -.rz-mx-6, -.rz-mr-6 { - margin-right: 1.5rem !important; -} - -.rz-my-6, -.rz-mb-6 { - margin-bottom: 1.5rem !important; -} - -.rz-mx-6, -.rz-ml-6 { - margin-left: 1.5rem !important; -} - -.rz-ms-6 { - margin-inline-start: 1.5rem !important; -} - -.rz-me-6 { - margin-inline-end: 1.5rem !important; -} - -.rz-m-7 { - margin: 1.75rem !important; -} - -.rz-my-7, -.rz-mt-7 { - margin-top: 1.75rem !important; -} - -.rz-mx-7, -.rz-mr-7 { - margin-right: 1.75rem !important; -} - -.rz-my-7, -.rz-mb-7 { - margin-bottom: 1.75rem !important; -} - -.rz-mx-7, -.rz-ml-7 { - margin-left: 1.75rem !important; -} - -.rz-ms-7 { - margin-inline-start: 1.75rem !important; -} - -.rz-me-7 { - margin-inline-end: 1.75rem !important; -} - -.rz-m-8 { - margin: 2rem !important; -} - -.rz-my-8, -.rz-mt-8 { - margin-top: 2rem !important; -} - -.rz-mx-8, -.rz-mr-8 { - margin-right: 2rem !important; -} - -.rz-my-8, -.rz-mb-8 { - margin-bottom: 2rem !important; -} - -.rz-mx-8, -.rz-ml-8 { - margin-left: 2rem !important; -} - -.rz-ms-8 { - margin-inline-start: 2rem !important; -} - -.rz-me-8 { - margin-inline-end: 2rem !important; -} - -.rz-m-9 { - margin: 2.25rem !important; -} - -.rz-my-9, -.rz-mt-9 { - margin-top: 2.25rem !important; -} - -.rz-mx-9, -.rz-mr-9 { - margin-right: 2.25rem !important; -} - -.rz-my-9, -.rz-mb-9 { - margin-bottom: 2.25rem !important; -} - -.rz-mx-9, -.rz-ml-9 { - margin-left: 2.25rem !important; -} - -.rz-ms-9 { - margin-inline-start: 2.25rem !important; -} - -.rz-me-9 { - margin-inline-end: 2.25rem !important; -} - -.rz-m-10 { - margin: 2.5rem !important; -} - -.rz-my-10, -.rz-mt-10 { - margin-top: 2.5rem !important; -} - -.rz-mx-10, -.rz-mr-10 { - margin-right: 2.5rem !important; -} - -.rz-my-10, -.rz-mb-10 { - margin-bottom: 2.5rem !important; -} - -.rz-mx-10, -.rz-ml-10 { - margin-left: 2.5rem !important; -} - -.rz-ms-10 { - margin-inline-start: 2.5rem !important; -} - -.rz-me-10 { - margin-inline-end: 2.5rem !important; -} - -.rz-m-11 { - margin: 2.75rem !important; -} - -.rz-my-11, -.rz-mt-11 { - margin-top: 2.75rem !important; -} - -.rz-mx-11, -.rz-mr-11 { - margin-right: 2.75rem !important; -} - -.rz-my-11, -.rz-mb-11 { - margin-bottom: 2.75rem !important; -} - -.rz-mx-11, -.rz-ml-11 { - margin-left: 2.75rem !important; -} - -.rz-ms-11 { - margin-inline-start: 2.75rem !important; -} - -.rz-me-11 { - margin-inline-end: 2.75rem !important; -} - -.rz-m-12 { - margin: 3rem !important; -} - -.rz-my-12, -.rz-mt-12 { - margin-top: 3rem !important; -} - -.rz-mx-12, -.rz-mr-12 { - margin-right: 3rem !important; -} - -.rz-my-12, -.rz-mb-12 { - margin-bottom: 3rem !important; -} - -.rz-mx-12, -.rz-ml-12 { - margin-left: 3rem !important; -} - -.rz-ms-12 { - margin-inline-start: 3rem !important; -} - -.rz-me-12 { - margin-inline-end: 3rem !important; -} - -.rz-p-0 { - padding: 0 !important; -} - -.rz-py-0, -.rz-pt-0 { - padding-top: 0 !important; -} - -.rz-px-0, -.rz-pr-0 { - padding-right: 0 !important; -} - -.rz-py-0, -.rz-pb-0 { - padding-bottom: 0 !important; -} - -.rz-px-0, -.rz-pl-0 { - padding-left: 0 !important; -} - -.rz-ps-0 { - padding-inline-start: 0 !important; -} - -.rz-pe-0 { - padding-inline-end: 0 !important; -} - -.rz-p-05 { - padding: 0.125rem !important; -} - -.rz-py-05, -.rz-pt-05 { - padding-top: 0.125rem !important; -} - -.rz-px-05, -.rz-pr-05 { - padding-right: 0.125rem !important; -} - -.rz-py-05, -.rz-pb-05 { - padding-bottom: 0.125rem !important; -} - -.rz-px-05, -.rz-pl-05 { - padding-left: 0.125rem !important; -} - -.rz-ps-05 { - padding-inline-start: 0.125rem !important; -} - -.rz-pe-05 { - padding-inline-end: 0.125rem !important; -} - -.rz-p-1 { - padding: 0.25rem !important; -} - -.rz-py-1, -.rz-pt-1 { - padding-top: 0.25rem !important; -} - -.rz-px-1, -.rz-pr-1 { - padding-right: 0.25rem !important; -} - -.rz-py-1, -.rz-pb-1 { - padding-bottom: 0.25rem !important; -} - -.rz-px-1, -.rz-pl-1 { - padding-left: 0.25rem !important; -} - -.rz-ps-1 { - padding-inline-start: 0.25rem !important; -} - -.rz-pe-1 { - padding-inline-end: 0.25rem !important; -} - -.rz-p-2 { - padding: 0.5rem !important; -} - -.rz-py-2, -.rz-pt-2 { - padding-top: 0.5rem !important; -} - -.rz-px-2, -.rz-pr-2 { - padding-right: 0.5rem !important; -} - -.rz-py-2, -.rz-pb-2 { - padding-bottom: 0.5rem !important; -} - -.rz-px-2, -.rz-pl-2 { - padding-left: 0.5rem !important; -} - -.rz-ps-2 { - padding-inline-start: 0.5rem !important; -} - -.rz-pe-2 { - padding-inline-end: 0.5rem !important; -} - -.rz-p-3 { - padding: 0.75rem !important; -} - -.rz-py-3, -.rz-pt-3 { - padding-top: 0.75rem !important; -} - -.rz-px-3, -.rz-pr-3 { - padding-right: 0.75rem !important; -} - -.rz-py-3, -.rz-pb-3 { - padding-bottom: 0.75rem !important; -} - -.rz-px-3, -.rz-pl-3 { - padding-left: 0.75rem !important; -} - -.rz-ps-3 { - padding-inline-start: 0.75rem !important; -} - -.rz-pe-3 { - padding-inline-end: 0.75rem !important; -} - -.rz-p-4 { - padding: 1rem !important; -} - -.rz-py-4, -.rz-pt-4 { - padding-top: 1rem !important; -} - -.rz-px-4, -.rz-pr-4 { - padding-right: 1rem !important; -} - -.rz-py-4, -.rz-pb-4 { - padding-bottom: 1rem !important; -} - -.rz-px-4, -.rz-pl-4 { - padding-left: 1rem !important; -} - -.rz-ps-4 { - padding-inline-start: 1rem !important; -} - -.rz-pe-4 { - padding-inline-end: 1rem !important; -} - -.rz-p-5 { - padding: 1.25rem !important; -} - -.rz-py-5, -.rz-pt-5 { - padding-top: 1.25rem !important; -} - -.rz-px-5, -.rz-pr-5 { - padding-right: 1.25rem !important; -} - -.rz-py-5, -.rz-pb-5 { - padding-bottom: 1.25rem !important; -} - -.rz-px-5, -.rz-pl-5 { - padding-left: 1.25rem !important; -} - -.rz-ps-5 { - padding-inline-start: 1.25rem !important; -} - -.rz-pe-5 { - padding-inline-end: 1.25rem !important; -} - -.rz-p-6 { - padding: 1.5rem !important; -} - -.rz-py-6, -.rz-pt-6 { - padding-top: 1.5rem !important; -} - -.rz-px-6, -.rz-pr-6 { - padding-right: 1.5rem !important; -} - -.rz-py-6, -.rz-pb-6 { - padding-bottom: 1.5rem !important; -} - -.rz-px-6, -.rz-pl-6 { - padding-left: 1.5rem !important; -} - -.rz-ps-6 { - padding-inline-start: 1.5rem !important; -} - -.rz-pe-6 { - padding-inline-end: 1.5rem !important; -} - -.rz-p-7 { - padding: 1.75rem !important; -} - -.rz-py-7, -.rz-pt-7 { - padding-top: 1.75rem !important; -} - -.rz-px-7, -.rz-pr-7 { - padding-right: 1.75rem !important; -} - -.rz-py-7, -.rz-pb-7 { - padding-bottom: 1.75rem !important; -} - -.rz-px-7, -.rz-pl-7 { - padding-left: 1.75rem !important; -} - -.rz-ps-7 { - padding-inline-start: 1.75rem !important; -} - -.rz-pe-7 { - padding-inline-end: 1.75rem !important; -} - -.rz-p-8 { - padding: 2rem !important; -} - -.rz-py-8, -.rz-pt-8 { - padding-top: 2rem !important; -} - -.rz-px-8, -.rz-pr-8 { - padding-right: 2rem !important; -} - -.rz-py-8, -.rz-pb-8 { - padding-bottom: 2rem !important; -} - -.rz-px-8, -.rz-pl-8 { - padding-left: 2rem !important; -} - -.rz-ps-8 { - padding-inline-start: 2rem !important; -} - -.rz-pe-8 { - padding-inline-end: 2rem !important; -} - -.rz-p-9 { - padding: 2.25rem !important; -} - -.rz-py-9, -.rz-pt-9 { - padding-top: 2.25rem !important; -} - -.rz-px-9, -.rz-pr-9 { - padding-right: 2.25rem !important; -} - -.rz-py-9, -.rz-pb-9 { - padding-bottom: 2.25rem !important; -} - -.rz-px-9, -.rz-pl-9 { - padding-left: 2.25rem !important; -} - -.rz-ps-9 { - padding-inline-start: 2.25rem !important; -} - -.rz-pe-9 { - padding-inline-end: 2.25rem !important; -} - -.rz-p-10 { - padding: 2.5rem !important; -} - -.rz-py-10, -.rz-pt-10 { - padding-top: 2.5rem !important; -} - -.rz-px-10, -.rz-pr-10 { - padding-right: 2.5rem !important; -} - -.rz-py-10, -.rz-pb-10 { - padding-bottom: 2.5rem !important; -} - -.rz-px-10, -.rz-pl-10 { - padding-left: 2.5rem !important; -} - -.rz-ps-10 { - padding-inline-start: 2.5rem !important; -} - -.rz-pe-10 { - padding-inline-end: 2.5rem !important; -} - -.rz-p-11 { - padding: 2.75rem !important; -} - -.rz-py-11, -.rz-pt-11 { - padding-top: 2.75rem !important; -} - -.rz-px-11, -.rz-pr-11 { - padding-right: 2.75rem !important; -} - -.rz-py-11, -.rz-pb-11 { - padding-bottom: 2.75rem !important; -} - -.rz-px-11, -.rz-pl-11 { - padding-left: 2.75rem !important; -} - -.rz-ps-11 { - padding-inline-start: 2.75rem !important; -} - -.rz-pe-11 { - padding-inline-end: 2.75rem !important; -} - -.rz-p-12 { - padding: 3rem !important; -} - -.rz-py-12, -.rz-pt-12 { - padding-top: 3rem !important; -} - -.rz-px-12, -.rz-pr-12 { - padding-right: 3rem !important; -} - -.rz-py-12, -.rz-pb-12 { - padding-bottom: 3rem !important; -} - -.rz-px-12, -.rz-pl-12 { - padding-left: 3rem !important; -} - -.rz-ps-12 { - padding-inline-start: 3rem !important; -} - -.rz-pe-12 { - padding-inline-end: 3rem !important; -} - -.rz-m-auto { - margin: auto !important; -} - -.rz-my-auto, -.rz-mt-auto { - margin-top: auto !important; -} - -.rz-mx-auto, -.rz-mr-auto { - margin-right: auto !important; -} - -.rz-my-auto, -.rz-mb-auto { - margin-bottom: auto !important; -} - -.rz-mx-auto, -.rz-ml-auto { - margin-left: auto !important; -} - -.rz-ms-auto { - margin-inline-start: auto !important; -} - -.rz-me-auto { - margin-inline-end: auto !important; +.rz-me-auto { + margin-inline-end: auto !important; } @media (min-width: 576px) { @@ -13477,7 +8021,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -13486,7 +8031,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -13495,7 +8041,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -13504,7 +8051,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -13513,7 +8061,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -13522,7 +8071,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h1, @@ -13532,7 +8082,8 @@ h1, font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2, @@ -13542,7 +8093,8 @@ h2, font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3, @@ -13552,7 +8104,8 @@ h3, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4, @@ -13562,7 +8115,8 @@ h4, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5, @@ -13572,7 +8126,8 @@ h5, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6, @@ -13582,7 +8137,8 @@ h6, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h1.text-thin, @@ -13621,125 +8177,6 @@ h6.text-thin, font-weight: 300; } -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: normal; - --rz-text-display-h1-font-weight: 100; - --rz-text-display-h1-letter-spacing: -1.5px; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); - --rz-text-display-h2-line-height: normal; - --rz-text-display-h2-font-weight: 100; - --rz-text-display-h2-letter-spacing: -0.5px; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h3-line-height: normal; - --rz-text-display-h3-font-weight: 400; - --rz-text-display-h3-letter-spacing: 0; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); - --rz-text-display-h4-line-height: normal; - --rz-text-display-h4-font-weight: 400; - --rz-text-display-h4-letter-spacing: 0.25px; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h5-line-height: normal; - --rz-text-display-h5-font-weight: 400; - --rz-text-display-h5-letter-spacing: 0; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); - --rz-text-display-h6-line-height: normal; - --rz-text-display-h6-font-weight: 500; - --rz-text-display-h6-letter-spacing: 0.15px; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-h1-line-height: normal; - --rz-text-h1-font-weight: 100; - --rz-text-h1-letter-spacing: -1.5px; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); - --rz-text-h2-line-height: normal; - --rz-text-h2-font-weight: 100; - --rz-text-h2-letter-spacing: -0.5px; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: normal; - --rz-text-h3-font-weight: 400; - --rz-text-h3-letter-spacing: 0; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); - --rz-text-h4-line-height: normal; - --rz-text-h4-font-weight: 400; - --rz-text-h4-letter-spacing: 0.25px; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: normal; - --rz-text-h5-font-weight: 400; - --rz-text-h5-letter-spacing: 0; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); - --rz-text-h6-line-height: normal; - --rz-text-h6-font-weight: 500; - --rz-text-h6-letter-spacing: 0.15px; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.5; - --rz-text-subtitle1-font-weight: 400; - --rz-text-subtitle1-letter-spacing: 0.15px; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.5; - --rz-text-subtitle2-font-weight: 500; - --rz-text-subtitle2-letter-spacing: 0.1px; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.5; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: 0.5px; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.5; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: 0.25px; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: normal; - --rz-text-button-font-weight: 500; - --rz-text-button-letter-spacing: 1.25px; - --rz-text-button-text-transform: uppercase; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; -} - .rz-text-display-h1 { font-family: var(--rz-text-font-family); font-size: var(--rz-text-display-h1-font-size); @@ -13747,7 +8184,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -13757,7 +8195,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -13767,7 +8206,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -13777,7 +8217,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -13787,7 +8228,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -13797,7 +8239,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -13807,7 +8250,8 @@ h6.text-thin, font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -13817,7 +8261,8 @@ h6.text-thin, font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -13827,7 +8272,8 @@ h6.text-thin, font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -13837,7 +8283,8 @@ h6.text-thin, font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -13847,7 +8294,8 @@ h6.text-thin, font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -13857,7 +8305,8 @@ h6.text-thin, font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -13867,7 +8316,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -13877,7 +8327,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -13887,7 +8338,8 @@ h6.text-thin, font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -13897,7 +8349,8 @@ h6.text-thin, font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -13908,7 +8361,8 @@ h6.text-thin, letter-spacing: var(--rz-text-button-letter-spacing); text-transform: var(--rz-text-button-text-transform); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -13918,7 +8372,8 @@ h6.text-thin, font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -13929,7 +8384,8 @@ h6.text-thin, letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -14163,26 +8619,24 @@ p { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } label { - margin-bottom: 0; -} - -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; + margin-block-start: 0; + margin-block-end: 0; } ::selection { @@ -14198,8 +8652,9 @@ label { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -14210,7 +8665,7 @@ label { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -14231,14 +8686,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -14263,6 +8710,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -14286,98 +8750,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: var(--rz-shadow-1); - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: var(--rz-shadow-3); - --rz-button-hover-gradient: none; - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: var(--rz-shadow-3); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-normal); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: var(--rz-shadow-6); - --rz-button-active-gradient: none; - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -14385,18 +8823,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -14421,6 +8847,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -14448,62 +8886,9 @@ p-button[type] { .rz-button.rz-primary.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-primary.rz-variant-flat:focus-visible { - outline-color: var(--rz-primary); -} - -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} .rz-button.rz-secondary { background-color: var(--rz-secondary); @@ -14691,6 +9076,59 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-variant-outlined.rz-primary { background-color: transparent; } @@ -14720,59 +9158,6 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - .rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } @@ -14947,76 +9332,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); -} -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); -} -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -15177,84 +9567,132 @@ p-button[type] { box-shadow: none; } -.rz-paginator-element, .rz-button-lg { - font-size: 1rem; - font-weight: 500; +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-pager-element, .rz-button-lg { padding: 0.75rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3rem; min-width: 3rem; + font-size: 1rem; + font-weight: 500; letter-spacing: 1.25px; text-transform: uppercase; } -.rz-paginator-element .rz-button-box, .rz-button-lg .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-lg .rz-button-box { line-height: 1.5rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-button-lg.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-paginator-element, .rz-button-lg.rz-button-icon-only { +.rz-pager-element, .rz-button-lg.rz-button-icon-only { padding: 0.75rem; } -.rz-paginator-element .rzi, .rz-button-lg .rzi { +.rz-pager-element .rzi, .rz-button-lg .rzi { font-size: 1.5rem; height: 1.5rem; line-height: 1.5rem; width: 1.5rem; } -.rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: 0.875rem; - font-weight: 500; +.rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: 0.875rem; + font-weight: 500; letter-spacing: 1.25px; text-transform: uppercase; } -.rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-md.rz-button-icon-left { padding: 0 1.375rem; } -.rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only, .rz-button-md.rz-paginator-element { +.rz-button-md.rz-button-icon-only, .rz-button-md.rz-pager-element { padding: 0.5rem; } -.rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-button-md .rzi { font-size: 1.25rem; height: 1.25rem; line-height: 1.25rem; width: 1.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: 0.75rem; - font-weight: 500; +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.375rem 0.75rem; height: auto; line-height: 1rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: 0.75rem; + font-weight: 500; letter-spacing: 0.75px; text-transform: uppercase; } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0 1.375rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.375rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: 1rem; height: 1rem; line-height: 1rem; @@ -15262,13 +9700,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 500; padding: 0.25rem 0.5rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 500; letter-spacing: 0; text-transform: uppercase; } @@ -15279,7 +9717,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0 1rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.25rem; } .rz-button-xs .rzi { @@ -15297,19 +9735,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: 10rem; - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 500; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -15351,15 +9778,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -15510,6 +9928,41 @@ p-button[type] { color: var(--rz-on-success-darker); } +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + .rz-variant-outlined.rz-badge-primary { background-color: transparent; } @@ -15534,22 +9987,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} - -.rz-variant-outlined.rz-badge-dark { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} - .rz-variant-outlined.rz-badge-secondary { background-color: transparent; } @@ -15694,6 +10131,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -15713,16 +10190,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -15837,20 +10304,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0.125rem 0.125rem 0.125rem 0.75rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: calc(4 * var(--rz-border-radius)); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -15864,57 +10351,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: var(--rz-body-font-size); - --rz-input-height: 2.5rem; - --rz-input-line-height: 1.5; - --rz-input-padding: 0.4375rem 0.9375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: none; - --rz-input-hover-shadow: none; - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-primary); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: none; - --rz-input-disabled-background-color: var(--rz-base-background-color); - --rz-input-disabled-color: var(--rz-text-disabled-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -15925,26 +10387,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -15963,15 +10428,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-primary); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: none; - --rz-header-color: var(--rz-on-primary); - --rz-header-shadow: var(--rz-shadow-4); -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -15990,14 +10446,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: none; - --rz-footer-color: var(--rz-text-secondary-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -16012,18 +10460,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 300px; - --rz-sidebar-border-right: var(--rz-border-base-200); - --rz-sidebar-background-color: var(--rz-base-background-color); - --rz-sidebar-color: var(--rz-text-color); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -16032,7 +10472,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -16051,17 +10491,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-background-color); - --rz-card-shadow: var(--rz-shadow-1); - --rz-card-border: var(--rz-border-base-300); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -16091,52 +10522,21 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - -.rz-body { - margin: var(--rz-layout-body-margin); - padding: var(--rz-layout-body-padding); - border-radius: var(--rz-layout-body-border-radius); - background-color: var(--rz-layout-body-background-color); -} -.rz-body:only-child { - background-color: transparent; -} -.rz-layout .rz-body { - transform: translateZ(0); -} - -:root { - --rz-accordion-item-padding: 1rem; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: var(--rz-border-base-200); - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-secondary-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.5rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: 500; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.75rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0 0 0.75rem; - --rz-accordion-toggle-icon-order: 1; - --rz-accordion-selected-color: var(--rz-text-title-color); - --rz-accordion-hover-color: var(--rz-text-title-color); - --rz-accordion-content-padding: 1rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: var(--rz-shadow-1); -} - +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -16155,16 +10555,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -16172,20 +10572,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -16195,7 +10596,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "keyboard_arrow_down"; @@ -16204,10 +10605,6 @@ input::placeholder { content: "keyboard_arrow_up"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -16215,34 +10612,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 1rem; - --rz-panel-title-line-height: 1.5rem; - --rz-panel-title-font-weight: 500; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: transparent; - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-text-title-color); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: var(--rz-shadow-1); +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "keyboard_arrow_down"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "keyboard_arrow_up"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -16293,33 +10682,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: none; - --rz-sidebar-toggle-color: var(--rz-on-primary); - --rz-sidebar-toggle-background-color: transparent; - --rz-sidebar-toggle-hover-color: var(--rz-on-primary-light); - --rz-sidebar-toggle-hover-background-color: var(--rz-primary-light); - --rz-sidebar-toggle-hover-border-radius: 50%; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -16353,37 +10728,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: none; - --rz-menu-border-radius: var(--rz-border-radius); - --rz-menu-item-padding: 0.5rem 1rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-text-title-color); - --rz-menu-item-hover-background-color: var(--rz-base-100); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-title-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-text-title-color); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-on-primary); - --rz-menu-top-item-background-color: var(--rz-primary); - --rz-menu-top-item-hover-color: var(--rz-on-primary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-on-primary); - --rz-menu-top-item-icon-color: var(--rz-on-primary); - --rz-menu-top-item-icon-hover-color: var(--rz-on-primary); - --rz-context-menu-padding: 0.5rem 0; - --rz-context-menu-box-shadow: var(--rz-shadow-6); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -16408,7 +10755,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16430,6 +10778,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -16438,7 +10787,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -16451,7 +10801,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -16481,13 +10832,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -16496,7 +10847,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -16508,7 +10860,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16532,16 +10885,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -16558,7 +10911,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -16618,65 +10972,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: calc(var(--rz-body-font-size) * 0.875); - --rz-panel-menu-font-weight: 500; - --rz-panel-menu-color: var(--rz-text-title-color); - --rz-panel-menu-background-color: var(--rz-base-background-color); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.04); - --rz-panel-menu-hover-color: var(--rz-text-title-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.5rem; - --rz-panel-menu-item-padding: 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-200); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter); - --rz-panel-menu-item-background-color: var(--rz-base-background-color); - --rz-panel-menu-item-active-color: var(--rz-on-primary-lighter); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0.5rem; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 0.5rem 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0 0.5rem; - --rz-panel-menu-item-2nd-level-border-radius: var(--rz-border-radius); - --rz-panel-menu-item-2nd-level-offset: 3rem; - --rz-panel-menu-item-2nd-level-font-size: calc(var(--rz-body-font-size) * 0.875); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: var(--rz-text-tertiary-color); - --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-100); - --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-background-color); - --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color); - --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter); - --rz-panel-menu-item-2nd-level-active-color: var(--rz-on-primary-lighter); - --rz-panel-menu-item-2nd-level-active-font-weight: 500; - --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-100); - --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color); - --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter); - --rz-panel-menu-item-3rd-level-active-color: var(--rz-on-primary-lighter); - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: var(--rz-text-tertiary-color); - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 1rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 1rem 0 -2.25rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -16686,10 +10995,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -16701,11 +11011,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -16716,8 +11026,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -16726,7 +11036,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -16739,7 +11050,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -16748,20 +11059,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -16785,67 +11098,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-primary); - --rz-profile-menu-border: none; - --rz-profile-menu-padding: 0.5rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-text-contrast-color); - --rz-profile-menu-item-hover-background-color: var(--rz-base-100); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -16866,19 +11164,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -16898,17 +11199,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2.5rem; - --rz-gravatar-height: 2.5rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -16916,26 +11211,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-tertiary-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.25rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-contrast-color); - --rz-steps-number-background-color: var(--rz-base-500); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -16989,14 +11266,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -17006,7 +11285,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -17029,54 +11309,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.125rem; - --rz-checkbox-height: 1.125rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: 2px; - --rz-checkbox-label-margin: 0 1rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-primary); - --rz-checkbox-checked-hover-background-color: var(--rz-primary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-base-500); - --rz-checkbox-checked-color: var(--rz-on-primary); - --rz-checkbox-checked-shadow: none; - --rz-checkbox-checked-border: var(--rz-border-primary); - --rz-checkbox-checked-hover-border: var(--rz-border-primary); - --rz-checkbox-checked-disabled-border: var(--rz-border-base-500); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -17088,10 +11356,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -17109,11 +11379,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; - cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + cursor: pointer; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -17170,17 +11437,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-primary-lighter); - --rz-switch-box-shadow: var(--rz-shadow-1); - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-primary-lighter); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -17200,10 +11458,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -17225,8 +11483,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.25rem; height: 1.25rem; - left: 0; - margin-top: -0.625rem; + inset-inline-start: 0; + margin-block-start: -0.625rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -17235,7 +11493,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -17247,35 +11505,23 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { transform: translateX(1rem); } -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: 2px; - --rz-radio-label-margin: 0 1rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-base-background-color); - --rz-radio-active-shadow: none; - --rz-radio-checked-background-color: var(--rz-base-background-color); - --rz-radio-checked-hover-background-color: var(--rz-base-background-color); - --rz-radio-checked-hover-shadow: none; - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-primary); - --rz-radio-circle-shadow: none; - --rz-radio-circle-hover-background-color: var(--rz-primary-light); - --rz-radio-icon-width: 0.625rem; - --rz-radio-icon-height: 0.625rem; - --rz-radio-checked-border: var(--rz-border-primary); +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -17287,7 +11533,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -17310,10 +11557,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -17373,26 +11617,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-base-300); - --rz-fieldset-border-radius: var(--rz-border-radius); - --rz-fieldset-padding: 0 1rem 1rem; - --rz-fieldset-legend-color: var(--rz-text-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 1rem 0.5rem; - --rz-fieldset-legend-padding: 0 0.5rem; - --rz-fieldset-toggle-width: 1.5rem; - --rz-fieldset-toggle-margin: 0; - --rz-fieldset-toggle-height: 1.5rem; - --rz-fieldset-toggle-background-color: transparent; - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1.5rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -17421,7 +11650,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -17439,8 +11669,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -17455,36 +11687,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 1rem; - --rz-dropdown-panel-padding: 0 1rem; - --rz-dropdown-items-margin: 0 -1rem; - --rz-dropdown-items-padding: 0.5rem 0; - --rz-dropdown-item-padding: 0.75rem 1rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-base-100); - --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-shadow: none; - --rz-dropdown-item-hover-color: var(--rz-text-title-color); - --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-200); - --rz-dropdown-filter-padding: 1rem 0 0.5rem; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: 2px solid var(--rz-primary); - --rz-dropdown-panel-border: none; - --rz-dropdown-panel-shadow: var(--rz-shadow-4); - --rz-dropdown-chips-padding: 0.4375rem 0.9375rem 0.4375rem 0.4375rem; - --rz-multiselect-checkbox-margin: 0 1rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -17511,15 +11713,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -17527,8 +11730,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -17563,7 +11766,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -17656,28 +11860,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -17694,10 +11902,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -17706,7 +11915,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -17728,24 +11938,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-200); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 1rem 0 0; - --rz-listbox-header-padding: 0.75rem 1rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -17755,7 +11949,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -17798,7 +11993,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -17839,39 +12035,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -17881,9 +12067,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -17897,11 +12080,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -17910,36 +12093,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-primary-lighter); - --rz-slider-border: none; - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 4px; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-primary); - --rz-slider-range-border: none; - --rz-slider-handle-width: 20px; - --rz-slider-handle-height: 20px; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-primary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: 50%; - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-primary); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: 0px 0px 0px 10px var(--rz-primary-lighter); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-300); - --rz-slider-disabled-border: none; - --rz-slider-disabled-range-background-color: var(--rz-base-500); - --rz-slider-disabled-range-border: none; - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-500); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -17966,11 +12121,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -17979,7 +12134,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -18004,19 +12159,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-text-secondary-color); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.5; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-text-disabled-color); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -18074,16 +12218,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -18104,17 +12240,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-base-300); - --rz-selectbar-selected-background-color: var(--rz-primary-lighter); - --rz-selectbar-selected-color: var(--rz-on-primary-lighter); - --rz-selectbar-selected-border: var(--rz-border-base-300); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -18122,7 +12249,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -18130,13 +12257,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -18145,7 +12272,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -18153,13 +12280,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -18168,7 +12295,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -18176,13 +12303,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -18191,7 +12318,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -18199,13 +12326,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -18213,89 +12340,34 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-selectbar-selected-border); } -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.5rem; - --rz-datepicker-trigger-icon-color: var(--rz-text-secondary-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); - --rz-datepicker-panel-border: none; - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: var(--rz-shadow-4); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-background-color); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 3.625rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 0.75rem; - --rz-datepicker-footer-line-height: 3rem; - --rz-datepicker-calendar-padding: 0.625rem 0; - --rz-datepicker-calendar-header-font-size: 0.75rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: 0.875rem; - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-text-title-color); - --rz-datepicker-calendar-hover-background-color: var(--rz-base-100); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-border: none; - --rz-datepicker-calendar-border-radius: 50%; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-text-color); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-text-color); - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 3.5rem; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-background-color); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-base-300); - --rz-timepicker-button-color: var(--rz-text-color); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: var(--rz-border-base-300); -} - -.rz-calendar { +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -18303,9 +12375,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -18343,148 +12415,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -18515,47 +12614,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: var(--rz-body-line-height); - --rz-numeric-input-padding: 0.4375rem 1.25rem 0.4375rem 0.9375rem; - --rz-numeric-button-width: 1rem; - --rz-numeric-button-height: 1rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: transparent; - --rz-numeric-button-disabled-background-color: transparent; - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-text-color); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -18563,9 +12649,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -18573,49 +12659,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); -} - -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -:root { - --rz-upload-button-bar-background-color: var(--rz-base-100); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-200); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-base-200); - --rz-upload-choose-color: var(--rz-text-color); - --rz-upload-choose-hover-background-color: var(--rz-base-200); - --rz-upload-choose-hover-color: var(--rz-text-title-color); - --rz-upload-choose-active-background-color: var(--rz-base-200); - --rz-upload-choose-active-color: var(--rz-text-title-color); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -18702,101 +12769,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-base-300); - --rz-grid-right-cell-border: none; - --rz-grid-bottom-cell-border: var(--rz-border-base-300); - --rz-grid-cell-padding: 0.625rem 1rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: 0.875rem; - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-base-100); - --rz-grid-hover-color: var(--rz-text-title-color); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-primary-lighter); - --rz-grid-selected-color: var(--rz-on-primary-lighter); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: none; - --rz-grid-header-cell-border-bottom: var(--rz-border-base-300); - --rz-grid-header-background-color: var(--rz-base-background-color); - --rz-grid-header-font-size: 0.875rem; - --rz-grid-header-line-height: 1.5rem; - --rz-grid-header-font-weight: 500; - --rz-grid-header-text-transform: none; - --rz-grid-header-color: var(--rz-text-title-color); - --rz-grid-header-cell-padding: 0.75rem 0; - --rz-grid-header-title-padding: 0 0 0 1rem; - --rz-grid-header-sorted-background-color: var(--rz-base-200); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-100); - --rz-grid-filter-background-color: var(--rz-base-background-color); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: none; - --rz-grid-filter-font-size: 0.875rem; - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: 0.875rem; - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: none; - --rz-grid-filter-buttons-background-color: var(--rz-base-background-color); - --rz-grid-clear-filter-button-background-color: var(--rz-base-background-color); - --rz-grid-clear-filter-button-color: var(--rz-text-color); - --rz-grid-clear-filter-button-shadow: none; - --rz-grid-apply-filter-button-background-color: var(--rz-base-background-color); - --rz-grid-apply-filter-button-color: var(--rz-primary); - --rz-grid-apply-filter-button-shadow: none; - --rz-grid-header-filter-icon-margin: 0 1rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1.25rem; - --rz-grid-border: var(--rz-border-base-300); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1.25rem; - --rz-grid-sort-icon-height: 1.25rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: none; - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-50); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.25rem; - --rz-grid-column-resizer-helper-width: 0.125rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-100); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-base-300); - --rz-grid-frozen-cell-background-color: var(--rz-base-background-color); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 1rem; - --rz-grid-group-header-item-background-color: var(--rz-base-200); - --rz-grid-group-header-item-padding: 0.25rem 0.5rem 0.25rem 0.75rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-base-200); - --rz-grid-group-header-item-border-radius: calc(4 * var(--rz-border-radius)); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-disabled-color); - --rz-column-drag-handle-hover-color: var(--rz-text-title-color); - --rz-column-drag-handle-margin: 0; - --rz-column-draggable-shadow: var(--rz-shadow-4); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -18820,10 +12792,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -18867,8 +12843,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -18876,8 +12852,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -18903,11 +12879,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -18927,13 +12904,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -18953,11 +12931,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -18965,11 +12943,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -18983,10 +12961,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -19002,7 +12980,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -19054,7 +13032,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -19064,11 +13042,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -19091,13 +13069,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -19118,21 +13100,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -19144,7 +13126,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -19190,7 +13172,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -19204,14 +13185,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -19313,10 +13294,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -19327,28 +13304,15 @@ a:focus-visible .rz-fieldset-toggler { line-height: calc(1.25rem - var(--rz-border-width) * 2 - 2px); border-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width) - 1px); } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { text-indent: 2.25rem; } } -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); -} - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -19378,31 +13342,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -19461,35 +13403,74 @@ a:focus-visible .rz-fieldset-toggler { display: block; } } -.rz-grid-filter { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 1rem; +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; } -.rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, -.rz-grid-filter .rz-textbox, -.rz-grid-filter .rz-grid-filter-label { - display: block; - width: 100%; +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); } -.rz-grid-filter .rz-grid-filter-label { - font-weight: 600; +.rz-date-filter .rz-datepicker-inline table { + width: 100%; } .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -19498,9 +13479,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -19542,16 +13525,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -19584,7 +13573,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -19635,26 +13624,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -19667,7 +13660,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -19687,7 +13680,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -19695,312 +13688,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: transparent; - --rz-paginator-padding: 0.5rem 1rem; - --rz-paginator-border: none; - --rz-paginator-button-border-radius: 2rem; - --rz-paginator-numeric-button-background-color: transparent; - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: none; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-100); - --rz-paginator-numeric-button-hover-color: var(--rz-text-title-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.75rem 1rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-primary-lighter); - --rz-paginator-numeric-button-selected-color: var(--rz-on-primary-lighter); - --rz-paginator-numeric-button-selected-border: none; - --rz-paginator-numeric-button-selected-padding: 0.75rem 1rem; - --rz-paginator-numeric-button-min-width: 3rem; - --rz-paginator-back-button-background-color: transparent; - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-100); - --rz-paginator-back-button-hover-color: var(--rz-text-title-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: transparent; - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-100); - --rz-paginator-next-button-hover-color: var(--rz-text-title-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: 0.875rem; - --rz-paginator-summary-color: var(--rz-text-tertiary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: var(--rz-shadow-4); - --rz-overlay-border: none; - --rz-overlay-background-color: var(--rz-base-background-color); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -20010,24 +13963,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: transparent; - --rz-tree-node-padding: 0.25rem 0.5rem; - --rz-tree-node-selected-background-color: var(--rz-primary-lighter); - --rz-tree-node-selected-color: var(--rz-on-primary-lighter); - --rz-tree-node-selected-border-radius: var(--rz-border-radius); - --rz-tree-node-margin: 0; - --rz-tree-node-hover-background-color: var(--rz-base-100); - --rz-tree-node-hover-color: var(--rz-text-title-color); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 2rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -20044,12 +13981,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -20058,13 +13995,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "chevron_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "expand_more"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -20074,15 +14017,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -20094,7 +14039,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -20113,25 +14058,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: var(--rz-shadow-1); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-300); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: var(--rz-shadow-0); - --rz-datalist-item-border: var(--rz-border-base-300); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -20150,13 +14081,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -20165,24 +14097,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -20204,7 +14129,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -20215,23 +14141,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -20241,17 +14167,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -20264,70 +14191,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-base-300); - --rz-scheduler-border-color: var(--rz-base-300); - --rz-scheduler-minor-border-color: var(--rz-base-200); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: var(--rz-shadow-0); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-background-color); - --rz-scheduler-toolbar-title-font-size: 1.5rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-base-background-color); - --rz-scheduler-prev-next-button-color: var(--rz-text-color); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: 2rem; - --rz-scheduler-next-button-border-radius: 2rem; - --rz-scheduler-today-button-margin-left: 1rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.875rem; - --rz-scheduler-today-button-text-transform: capitalize; - --rz-scheduler-view-button-border: var(--rz-border-base-300); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); - --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); - --rz-scheduler-view-selected-border-color: var(--rz-base-300); - --rz-scheduler-header-background-color: var(--rz-base-background-color); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: var(--rz-border-base-300); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 0.25rem; - --rz-scheduler-year-slot-title-width: fit-content; - --rz-scheduler-year-slot-title-border-radius: 50%; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -20343,7 +14208,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -20356,12 +14221,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -20371,27 +14236,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -20426,8 +14292,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -20487,16 +14353,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -20513,25 +14379,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -20545,7 +14424,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -20557,24 +14436,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -20584,11 +14463,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -20616,7 +14495,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -20632,7 +14511,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -20640,7 +14519,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -20689,7 +14568,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -20738,7 +14617,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -20784,8 +14663,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20794,15 +14673,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20835,8 +14714,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20845,15 +14724,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20883,35 +14762,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1rem; - --rz-tabs-shadow: none; - --rz-tabs-border: none; - --rz-tabs-border-radius: 0; - --rz-tabs-background-color: transparent; - --rz-tabs-tab-font-size: 0.875rem; - --rz-tabs-tab-line-height: 1.5rem; - --rz-tabs-tab-font-weight: 500; - --rz-tabs-tab-text-transform: uppercase; - --rz-tabs-tab-letter-spacing: 1.25px; - --rz-tabs-tab-padding: 0.75rem 1rem; - --rz-tabs-tab-background-color: transparent; - --rz-tabs-tab-color: var(--rz-text-secondary-color); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-primary); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-200); - --rz-tabs-tab-hover-color: var(--rz-text-title-color); - --rz-tabs-tab-focus-background-color: var(--rz-base-200); - --rz-tabs-tab-focus-color: var(--rz-text-title-color); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -20965,7 +14817,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -21008,7 +14861,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -21028,7 +14881,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -21063,6 +14916,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -21093,21 +14949,13 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-tabs-padding); } -.rz-tabview-left-icon { +.rz-tabview-icon { font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-white); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: 0.875rem; + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -21133,8 +14981,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -21151,8 +14999,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -21182,43 +15030,22 @@ a:focus-visible .rz-fieldset-toggler { margin-left: 0; } -.rz-tooltip .rz-right-tooltip-content:after { - content: " "; - position: absolute; - width: 8px; - height: 8px; - top: 20px; - left: 0; - background-color: inherit; - transform-origin: center; - transform: translate(-50%, -10px) rotate(45deg); - border-bottom: inherit; - border-right: inherit; -} - -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: var(--rz-shadow-9); - --rz-dialog-title-background-color: var(--rz-base-background-color); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 1.5rem 1.5rem 0 1.5rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.5rem; - --rz-dialog-title-font-weight: 500; - --rz-dialog-title-letter-spacing: 0.0125em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-title-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.5rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; } .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -21231,6 +15058,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -21245,37 +15073,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -21287,7 +15133,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -21301,7 +15147,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -21314,42 +15160,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -21382,161 +15201,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); -} - -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); -} - -.rz-dialog-side-titlebar-close { - float: right; -} -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); -} -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; -} -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); -} - -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: var(--rz-white); - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-success); - --rz-notification-success-background-color: var(--rz-success-lighter); - --rz-notification-success-icon-color: var(--rz-success); - --rz-notification-warning-color: var(--rz-warning); - --rz-notification-warning-background-color: var(--rz-warning-lighter); - --rz-notification-warning-icon-color: var(--rz-warning); - --rz-notification-error-color: var(--rz-danger); - --rz-notification-error-background-color: var(--rz-danger-lighter); - --rz-notification-error-icon-color: var(--rz-danger); - --rz-notification-info-color: var(--rz-info); - --rz-notification-info-background-color: var(--rz-info-lighter); - --rz-notification-info-icon-color: var(--rz-info); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } } - -.rz-growl { +.rz-notification { + box-sizing: border-box; position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-growl-item-container { +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-growl-item { +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); border-radius: var(--rz-notification-border-radius); box-shadow: var(--rz-notification-shadow); padding: var(--rz-notification-padding); } - -.rz-growl-message-success .rz-growl-item { +.rz-notification-success .rz-notification-item { color: var(--rz-notification-success-color); background-color: var(--rz-notification-success-background-color); } - -.rz-growl-message-warn .rz-growl-item { +.rz-notification-warn .rz-notification-item { color: var(--rz-notification-warning-color); background-color: var(--rz-notification-warning-background-color); } - -.rz-growl-message-error .rz-growl-item { +.rz-notification-error .rz-notification-item { color: var(--rz-notification-error-color); background-color: var(--rz-notification-error-background-color); } - -.rz-growl-message-info .rz-growl-item { +.rz-notification-info .rz-notification-item { color: var(--rz-notification-info-color); background-color: var(--rz-notification-info-background-color); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-icon-close { - float: right; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close:before { - content: "close"; + +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(244, 67, 54, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -21561,16 +15344,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: rgba(0, 0, 0, 0.12); - --rz-scrollbar-border-radius: 0; - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } body:not(.rz-default-scrollbars)::-webkit-scrollbar, @@ -21619,14 +15394,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: rgba(0, 0, 0, 0.04); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -21656,7 +15425,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -21668,12 +15437,15 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -21683,11 +15455,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: rgba(0, 0, 0, 0.04); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -21697,24 +15464,11 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -21724,14 +15478,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -21743,18 +15491,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -21803,19 +15542,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-primary-lighter); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 0.25rem; - --rz-progressbar-border-radius: 0; - --rz-progressbar-value-background-color: var(--rz-primary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 0; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: square; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -21843,6 +15571,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -21903,6 +15632,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -21914,6 +15646,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -21929,9 +15664,29 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { left: -200%; right: 100%; } - 100%, 60% { - left: 107%; - right: -8%; + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; } } .rz-progressbar-indeterminate .rz-progressbar-circular-value { @@ -21979,48 +15734,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -22084,6 +15797,27 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -22126,6 +15860,69 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-success); } +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + .rz-progressbar-circular-lg { width: 6rem; height: 6rem; @@ -22150,19 +15947,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { font-size: calc(var(--rz-progressbar-font-size) * 0.375); } -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-base-500); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); -} - .rz-chart { + box-sizing: border-box; position: relative; height: 300px; } @@ -22934,6 +16720,10 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -23057,6 +16847,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -23083,24 +16874,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-border-base-300); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary-lighter); - --rz-editor-button-selected-color: var(--rz-on-secondary-lighter); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -23285,30 +17060,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -23385,7 +17136,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -23457,7 +17208,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -23470,7 +17221,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -23485,6 +17236,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -23496,27 +17248,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -23532,15 +17281,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -23552,15 +17299,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-primary); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-primary); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -23582,7 +17322,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23597,7 +17337,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23684,11 +17424,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -23722,8 +17479,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -23731,8 +17498,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -23746,22 +17513,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: 4px; - --rz-alert-message-margin: 0.125rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.125rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -24590,30 +18343,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -24632,16 +18390,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -25017,279 +18772,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -25634,36 +19389,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.5rem 0 0; - --rz-form-field-start-end-padding: 0 0.75rem; - --rz-form-field-filled-height: 3.375rem; - --rz-form-field-filled-padding: 1.4375rem 0.9375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.4375rem 1.25rem 0.4375rem 0.9375rem; - --rz-form-field-filled-background-color: var(--rz-base-200); - --rz-form-field-filled-hover-background-color: var(--rz-base-300); - --rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-200); - --rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-300); - --rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-200); - --rz-form-field-filled-border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0; - --rz-form-field-filled-label-floating-top: 0.5rem; - --rz-form-field-filled-hover-shadow: none; - --rz-form-field-filled-focus-shadow: none; - --rz-form-field-filled-underline-display: block; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0 0.25rem; - --rz-form-field-text-label-padding: 0; - --rz-form-field-label-left: 0.6875rem; - --rz-form-field-label-textarea-top: 0.5rem; - --rz-form-field-label-floating-top: -0.5625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 1rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -25673,11 +19398,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -25686,12 +19412,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -25719,20 +19445,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -25777,33 +19505,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -25820,16 +19551,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -25837,33 +19568,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -25880,27 +19611,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 1rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -26445,23 +20164,1580 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { width: 100%; height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #eeeeee; + --rz-base-50: #fafafa; + --rz-base-100: #f5f5f5; + --rz-base-200: #eeeeee; + --rz-base-300: #e0e0e0; + --rz-base-400: #bdbdbd; + --rz-base-500: #9e9e9e; + --rz-base-600: #757575; + --rz-base-700: #616161; + --rz-base-800: #424242; + --rz-base-900: #212121; + --rz-base-light: #f5f5f5; + --rz-base-lighter: #ffffff; + --rz-base-dark: #757575; + --rz-base-darker: #212121; + --rz-primary: #4340D2; + --rz-primary-light: #6966db; + --rz-primary-lighter: rgba(67, 64, 210, 0.12); + --rz-primary-dark: #3633a8; + --rz-primary-darker: #2e2c8f; + --rz-secondary: #e91e63; + --rz-secondary-light: #ed4b82; + --rz-secondary-lighter: rgba(233, 30, 99, 0.12); + --rz-secondary-dark: #ba184f; + --rz-secondary-darker: #9e1443; + --rz-info: #2196f3; + --rz-info-light: #4dabf5; + --rz-info-lighter: rgba(33, 150, 243, 0.2); + --rz-info-dark: #1a78c2; + --rz-info-darker: #1666a5; + --rz-success: #4caf50; + --rz-success-light: #70bf73; + --rz-success-lighter: rgba(76, 175, 80, 0.16); + --rz-success-dark: #3d8c40; + --rz-success-darker: #347736; + --rz-warning: #ff9800; + --rz-warning-light: #ffad33; + --rz-warning-lighter: rgba(255, 152, 0, 0.2); + --rz-warning-dark: #cc7a00; + --rz-warning-darker: #ad6700; + --rz-danger: #f44336; + --rz-danger-light: #f6695e; + --rz-danger-lighter: rgba(244, 67, 54, 0.2); + --rz-danger-dark: #c3362b; + --rz-danger-darker: #a62e25; + --rz-on-base: #212121; + --rz-on-base-light: #212121; + --rz-on-base-lighter: #212121; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #4340D2; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #e91e63; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2196f3; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #4caf50; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #ff9800; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f44336; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #3700b3; + --rz-series-2: #ba68c8; + --rz-series-3: #f06292; + --rz-series-4: #ff8a65; + --rz-series-5: #ffee58; + --rz-series-6: #9ccc65; + --rz-series-7: #26a69a; + --rz-series-8: #4fc3f7; + --rz-series-9: #7f5cce; + --rz-series-10: #ce93d8; + --rz-series-11: #f48fb1; + --rz-series-12: #ffab91; + --rz-series-13: #fff176; + --rz-series-14: #aed581; + --rz-series-15: #4db6ac; + --rz-series-16: #81d4fa; + --rz-series-17: #a58cdd; + --rz-series-18: #e1bee7; + --rz-series-19: #f8bbd0; + --rz-series-20: #ffccbc; + --rz-series-21: #fff59d; + --rz-series-22: #c5e1a5; + --rz-series-23: #80cbc4; + --rz-series-24: #b3e5fc; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 1rem; + --rz-body-line-height: 1.5; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Roboto, sans-serif; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: normal; + --rz-text-display-h1-font-weight: 400; + --rz-text-display-h1-letter-spacing: -1.5px; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); + --rz-text-display-h2-line-height: normal; + --rz-text-display-h2-font-weight: 400; + --rz-text-display-h2-letter-spacing: -0.5px; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h3-line-height: normal; + --rz-text-display-h3-font-weight: 400; + --rz-text-display-h3-letter-spacing: 0; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); + --rz-text-display-h4-line-height: normal; + --rz-text-display-h4-font-weight: 400; + --rz-text-display-h4-letter-spacing: 0.25px; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h5-line-height: normal; + --rz-text-display-h5-font-weight: 400; + --rz-text-display-h5-letter-spacing: 0; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); + --rz-text-display-h6-line-height: normal; + --rz-text-display-h6-font-weight: 500; + --rz-text-display-h6-letter-spacing: 0.15px; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-h1-line-height: normal; + --rz-text-h1-font-weight: 400; + --rz-text-h1-letter-spacing: -1.5px; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(3rem, 4.167vw, 3.75rem); + --rz-text-h2-line-height: normal; + --rz-text-h2-font-weight: 400; + --rz-text-h2-letter-spacing: -0.5px; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: normal; + --rz-text-h3-font-weight: 400; + --rz-text-h3-letter-spacing: 0; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.361vw, 2.125rem); + --rz-text-h4-line-height: normal; + --rz-text-h4-font-weight: 400; + --rz-text-h4-letter-spacing: 0.25px; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: normal; + --rz-text-h5-font-weight: 400; + --rz-text-h5-letter-spacing: 0; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.389vw, 1.25rem); + --rz-text-h6-line-height: normal; + --rz-text-h6-font-weight: 500; + --rz-text-h6-letter-spacing: 0.15px; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.5; + --rz-text-subtitle1-font-weight: 400; + --rz-text-subtitle1-letter-spacing: 0.15px; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.5; + --rz-text-subtitle2-font-weight: 500; + --rz-text-subtitle2-letter-spacing: 0.1px; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.5; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: 0.5px; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.5; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: 0.25px; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: normal; + --rz-text-button-font-weight: 500; + --rz-text-button-letter-spacing: 1.25px; + --rz-text-button-text-transform: uppercase; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-focus: var(--rz-border-width) solid var(--rz-primary); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-300); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.14); + --rz-shadow-2: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-3: 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 3px 3px rgba(0, 0, 0, 0.12), 0px 1px 8px rgba(0, 0, 0, 0.14); + --rz-shadow-4: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); + --rz-shadow-5: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-6: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.14); + --rz-shadow-7: 0px 9px 12px rgba(0, 0, 0, 0.14), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 5px 6px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0px 12px 17px rgba(0, 0, 0, 0.14), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 7px 8px rgba(0, 0, 0, 0.14); + --rz-shadow-9: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14); + --rz-shadow-10: 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 11px 15px rgba(0, 0, 0, 0.14); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 1rem; + --rz-accordion-item-padding-inline: 1rem; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: var(--rz-border-base-200); + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-secondary-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.5rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: 500; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.75rem; + --rz-accordion-toggle-icon-margin-inline: 0.75rem 0; + --rz-accordion-toggle-icon-order: 1; + --rz-accordion-selected-color: var(--rz-text-title-color); + --rz-accordion-hover-color: var(--rz-text-title-color); + --rz-accordion-content-padding-inline: 1rem; + --rz-accordion-content-padding-block: 1rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: var(--rz-shadow-1); + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.125rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.125rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 500; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: var(--rz-shadow-1); + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: var(--rz-shadow-3); + --rz-button-hover-gradient: none; + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: var(--rz-shadow-3); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-normal); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: var(--rz-shadow-6); + --rz-button-active-gradient: none; + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-background-color); + --rz-card-shadow: var(--rz-shadow-1); + --rz-card-border: var(--rz-border-base-300); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-base-500); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.125rem; + --rz-checkbox-height: 1.125rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: 2px; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-primary); + --rz-checkbox-checked-hover-background-color: var(--rz-primary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-base-500); + --rz-checkbox-checked-color: var(--rz-on-primary); + --rz-checkbox-checked-shadow: none; + --rz-checkbox-checked-border: var(--rz-border-primary); + --rz-checkbox-checked-hover-border: var(--rz-border-primary); + --rz-checkbox-checked-disabled-border: var(--rz-border-base-500); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0.125rem; + --rz-chip-padding-inline: 0.75rem 0.125rem; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: calc(4 * var(--rz-border-radius)); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: var(--rz-shadow-1); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-300); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: var(--rz-shadow-0); + --rz-datalist-item-border: var(--rz-border-base-300); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.5rem; + --rz-datepicker-trigger-icon-color: var(--rz-text-secondary-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); + --rz-datepicker-popup-width: 22rem; + --rz-datepicker-panel-border: none; + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: var(--rz-shadow-4); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-background-color); + --rz-datepicker-header-padding-block: 0.75rem; + --rz-datepicker-header-padding-inline: 0.75rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 0.75rem; + --rz-datepicker-footer-line-height: 3rem; + --rz-datepicker-prev-next-icon-size: 2rem; + --rz-datepicker-prev-next-button-border-radius: 50%; + --rz-datepicker-calendar-padding-block: 0 0.75rem; + --rz-datepicker-calendar-padding-inline: 0.75rem; + --rz-datepicker-calendar-item-padding: 0.625rem 0; + --rz-datepicker-calendar-header-font-size: 0.75rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: 0.875rem; + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-text-title-color); + --rz-datepicker-calendar-hover-background-color: var(--rz-base-100); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-border: none; + --rz-datepicker-calendar-border-radius: 50%; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-text-color); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-text-color); + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8.75rem; + --rz-datepicker-year-dropdown-width: 6rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-background-color); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.75rem; + --rz-timepicker-padding-inline: 0.75rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-text-color); + --rz-timepicker-button-background-color: var(--rz-base-300); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: var(--rz-border-base-300); + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: var(--rz-shadow-9); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 1.5rem 0; + --rz-dialog-title-padding-inline: 1.5rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.5rem; + --rz-dialog-title-font-weight: 500; + --rz-dialog-title-letter-spacing: 0.0125em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-title-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.5rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 1rem; + --rz-dropdown-panel-padding: 0 1rem; + --rz-dropdown-items-margin: 0 -1rem; + --rz-dropdown-items-padding: 0.5rem 0; + --rz-dropdown-item-padding: 0.75rem 1rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-base-100); + --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-shadow: none; + --rz-dropdown-item-hover-color: var(--rz-text-title-color); + --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-200); + --rz-dropdown-filter-padding: 1rem 0 0.5rem; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: 2px solid var(--rz-primary); + --rz-dropdown-panel-border: none; + --rz-dropdown-panel-shadow: var(--rz-shadow-4); + --rz-dropdown-chips-padding-block: 0.4375rem; + --rz-dropdown-chips-padding-inline: 0.4375rem 0.9375rem; + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 1rem; + /* Editor */ + --rz-editor-border: var(--rz-border-base-300); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary-lighter); + --rz-editor-button-selected-color: var(--rz-on-secondary-lighter); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-300); + --rz-fieldset-border-radius: var(--rz-border-radius); + --rz-fieldset-padding: 0 1rem 1rem; + --rz-fieldset-legend-color: var(--rz-text-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0 1rem; + --rz-fieldset-legend-margin-inline: 0.5rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 0.5rem; + --rz-fieldset-toggle-width: 1.5rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0; + --rz-fieldset-toggle-height: 1.5rem; + --rz-fieldset-toggle-background-color: transparent; + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1.5rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: none; + --rz-footer-color: var(--rz-text-secondary-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.5rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: 0.75rem; + --rz-form-field-filled-height: 3.375rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.9375rem; + --rz-form-field-filled-numeric-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-numeric-padding-inline: 0.9375rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-200); + --rz-form-field-filled-hover-background-color: var(--rz-base-300); + --rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-200); + --rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-300); + --rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-200); + --rz-form-field-filled-border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0; + --rz-form-field-filled-label-floating-top: 0.5rem; + --rz-form-field-filled-hover-shadow: none; + --rz-form-field-filled-focus-shadow: none; + --rz-form-field-filled-underline-display: block; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0 0.25rem; + --rz-form-field-text-label-padding: 0; + --rz-form-field-label-inset-inline-start: 0.6875rem; + --rz-form-field-label-textarea-top: 0.5rem; + --rz-form-field-label-floating-top: -0.5625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 1rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(244, 67, 54, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2.5rem; + --rz-gravatar-height: 2.5rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-base-300); + --rz-grid-right-cell-border: none; + --rz-grid-bottom-cell-border: var(--rz-border-base-300); + --rz-grid-cell-padding: 0.625rem 1rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: 0.875rem; + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-base-100); + --rz-grid-hover-color: var(--rz-text-title-color); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-primary-lighter); + --rz-grid-selected-color: var(--rz-on-primary-lighter); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: none; + --rz-grid-header-cell-border-bottom: var(--rz-border-base-300); + --rz-grid-header-background-color: var(--rz-base-background-color); + --rz-grid-header-font-size: 0.875rem; + --rz-grid-header-line-height: 1.5rem; + --rz-grid-header-font-weight: 500; + --rz-grid-header-text-transform: none; + --rz-grid-header-color: var(--rz-text-title-color); + --rz-grid-header-cell-padding: 0.75rem 0; + --rz-grid-header-title-padding-inline: 1rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-200); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-100); + --rz-grid-filter-background-color: var(--rz-base-background-color); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: none; + --rz-grid-filter-font-size: 0.875rem; + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: 0.875rem; + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-background-color); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base-background-color); + --rz-grid-clear-filter-button-color: var(--rz-text-color); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-base-background-color); + --rz-grid-apply-filter-button-color: var(--rz-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 1rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1.25rem; + --rz-grid-border: var(--rz-border-base-300); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1.25rem; + --rz-grid-sort-icon-height: 1.25rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: none; + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-50); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.25rem; + --rz-grid-column-resizer-helper-width: 0.125rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-100); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-base-300); + --rz-grid-frozen-cell-background-color: var(--rz-base-background-color); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 1rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-200); + --rz-grid-group-header-item-padding-block: 0.25rem; + --rz-grid-group-header-item-padding-inline: 0.75rem 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-base-200); + --rz-grid-group-header-item-border-radius: calc(4 * var(--rz-border-radius)); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-disabled-color); + --rz-column-drag-handle-hover-color: var(--rz-text-title-color); + --rz-column-drag-handle-margin-inline: 0; + --rz-column-draggable-shadow: var(--rz-shadow-4); + /* Header */ + --rz-header-background-color: var(--rz-primary); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: none; + --rz-header-color: var(--rz-on-primary); + --rz-header-shadow: var(--rz-shadow-4); + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.5rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 40; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.5rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.9375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: none; + --rz-input-hover-shadow: none; + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 0 0 1px var(--rz-primary); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: none; + --rz-input-disabled-background-color: var(--rz-base-background-color); + --rz-input-disabled-color: var(--rz-text-disabled-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-200); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 1rem; + --rz-listbox-header-padding-block: 0.75rem; + --rz-listbox-header-padding-inline: 1rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: rgba(0, 0, 0, 0.04); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: rgba(0, 0, 0, 0.04); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: none; + --rz-menu-border-radius: var(--rz-border-radius); + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-text-title-color); + --rz-menu-item-hover-background-color: var(--rz-base-100); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-title-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-text-title-color); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-on-primary); + --rz-menu-top-item-background-color: var(--rz-primary); + --rz-menu-top-item-hover-color: var(--rz-on-primary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-on-primary); + --rz-menu-top-item-icon-color: var(--rz-on-primary); + --rz-menu-top-item-icon-hover-color: var(--rz-on-primary); + --rz-context-menu-padding-block: 0.5rem; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: var(--rz-shadow-6); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: var(--rz-white); + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-success); + --rz-notification-success-background-color: var(--rz-success-lighter); + --rz-notification-success-icon-color: var(--rz-success); + --rz-notification-warning-color: var(--rz-warning); + --rz-notification-warning-background-color: var(--rz-warning-lighter); + --rz-notification-warning-icon-color: var(--rz-warning); + --rz-notification-error-color: var(--rz-danger); + --rz-notification-error-background-color: var(--rz-danger-lighter); + --rz-notification-error-icon-color: var(--rz-danger); + --rz-notification-info-color: var(--rz-info); + --rz-notification-info-background-color: var(--rz-info-lighter); + --rz-notification-info-icon-color: var(--rz-info); + /* Numeric */ + --rz-numeric-line-height: var(--rz-body-line-height); + --rz-numeric-input-padding-block: 0.4375rem; + --rz-numeric-input-padding-inline: 0.9375rem 1.25rem; + --rz-numeric-button-width: 1rem; + --rz-numeric-button-height: 1rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: transparent; + --rz-numeric-button-disabled-background-color: transparent; + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-text-color); + /* Overlay */ + --rz-overlay-shadow: var(--rz-shadow-4); + --rz-overlay-border: none; + --rz-overlay-background-color: var(--rz-base-background-color); + /* Pager */ + --rz-pager-background-color: transparent; + --rz-pager-padding: 0.5rem 1rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: none; + --rz-pager-button-border-radius: 2rem; + --rz-pager-numeric-button-background-color: transparent; + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: none; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-100); + --rz-pager-numeric-button-hover-color: var(--rz-text-title-color); + --rz-pager-numeric-button-padding: 0.75rem 1rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-primary-lighter); + --rz-pager-numeric-button-selected-color: var(--rz-on-primary-lighter); + --rz-pager-numeric-button-selected-border: none; + --rz-pager-numeric-button-selected-padding: 0.75rem 1rem; + --rz-pager-numeric-button-min-width: 3rem; + --rz-pager-back-button-background-color: transparent; + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: transparent; + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: 0.875rem; + --rz-pager-summary-color: var(--rz-text-tertiary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: calc(var(--rz-body-font-size) * 0.875); + --rz-panel-menu-font-weight: 500; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.5rem; + --rz-panel-menu-item-padding-block: 1rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-200); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-title-color); + --rz-panel-menu-item-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.04); + --rz-panel-menu-item-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem 0.5rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0.5rem; + --rz-panel-menu-item-2nd-level-border-radius: var(--rz-border-radius); + --rz-panel-menu-item-2nd-level-offset: 3rem; + --rz-panel-menu-item-2nd-level-font-size: calc(var(--rz-body-font-size) * 0.875); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: var(--rz-text-tertiary-color); + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-100); + --rz-panel-menu-item-2nd-level-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-item-2nd-level-active-font-weight: 500; + --rz-panel-menu-item-3rd-level-color: var(--rz-text-tertiary-color); + --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-background-color); + --rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-title-color); + --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-100); + --rz-panel-menu-item-3rd-level-active-color: var(--rz-on-primary-lighter); + --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-primary-lighter); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: var(--rz-text-tertiary-color); + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 1rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -2.25rem 1rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 1rem; + --rz-panel-title-line-height: 1.5rem; + --rz-panel-title-font-weight: 500; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: transparent; + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-text-title-color); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: var(--rz-shadow-1); + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-primary); + --rz-profile-menu-border: none; + --rz-profile-menu-padding-block: 0.5rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-contrast-color); + --rz-profile-menu-item-hover-background-color: var(--rz-base-100); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-primary-lighter); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 0.25rem; + --rz-progressbar-border-radius: 0; + --rz-progressbar-value-background-color: var(--rz-primary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 0; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: square; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: 2px; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-base-background-color); + --rz-radio-active-shadow: none; + --rz-radio-checked-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-shadow: none; + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-primary); + --rz-radio-circle-shadow: none; + --rz-radio-circle-hover-background-color: var(--rz-primary-light); + --rz-radio-icon-width: 0.625rem; + --rz-radio-icon-height: 0.625rem; + --rz-radio-checked-border: var(--rz-border-primary); + /* Rating */ + --rz-rating-color: var(--rz-text-secondary-color); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.5; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-text-disabled-color); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-base-300); + --rz-scheduler-border-color: var(--rz-base-300); + --rz-scheduler-minor-border-color: var(--rz-base-200); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: var(--rz-shadow-0); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-background-color); + --rz-scheduler-toolbar-title-font-size: 1.5rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-base-background-color); + --rz-scheduler-prev-next-button-color: var(--rz-text-color); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: 2rem; + --rz-scheduler-prev-button-border-start-end-radius: 2rem; + --rz-scheduler-prev-button-border-end-start-radius: 2rem; + --rz-scheduler-prev-button-border-end-end-radius: 2rem; + --rz-scheduler-next-button-border-start-start-radius: 2rem; + --rz-scheduler-next-button-border-start-end-radius: 2rem; + --rz-scheduler-next-button-border-end-start-radius: 2rem; + --rz-scheduler-next-button-border-end-end-radius: 2rem; + --rz-scheduler-today-button-margin-inline-start: 1rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.875rem; + --rz-scheduler-today-button-text-transform: capitalize; + --rz-scheduler-view-button-border: var(--rz-border-base-300); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); + --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); + --rz-scheduler-view-selected-border-color: var(--rz-base-300); + --rz-scheduler-header-background-color: var(--rz-base-background-color); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-base-300); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 0.25rem; + --rz-scheduler-year-slot-title-width: fit-content; + --rz-scheduler-year-slot-title-border-radius: 50%; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: rgba(0, 0, 0, 0.12); + --rz-scrollbar-border-radius: 0; + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-base-300); + --rz-selectbar-selected-background-color: var(--rz-primary-lighter); + --rz-selectbar-selected-color: var(--rz-on-primary-lighter); + --rz-selectbar-selected-border: var(--rz-border-base-300); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: none; + --rz-sidebar-toggle-color: var(--rz-on-primary); + --rz-sidebar-toggle-background-color: transparent; + --rz-sidebar-toggle-hover-color: var(--rz-on-primary-light); + --rz-sidebar-toggle-hover-background-color: var(--rz-primary-light); + --rz-sidebar-toggle-hover-border-radius: 50%; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 300px; + --rz-sidebar-border-inline-end: var(--rz-border-base-200); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-text-color); + /* Slider */ + --rz-slider-background-color: var(--rz-primary-lighter); + --rz-slider-border: none; + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 4px; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-primary); + --rz-slider-range-border: none; + --rz-slider-handle-width: 20px; + --rz-slider-handle-height: 20px; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-primary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: 50%; + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-primary); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: 0px 0px 0px 10px var(--rz-primary-lighter); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-300); + --rz-slider-disabled-border: none; + --rz-slider-disabled-range-background-color: var(--rz-base-500); + --rz-slider-disabled-range-border: none; + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-500); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-primary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-primary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ --rz-gap: 1rem; -} - -.rz-picklist-source-wrapper, -.rz-picklist-target-wrapper { - flex: 1; - --rz-gap: 0.5rem; - overflow: hidden; -} -.rz-picklist-source-wrapper .rz-listbox, -.rz-picklist-target-wrapper .rz-listbox { - width: 100%; - height: 100%; -} - -.rz-picklist-buttons.rz-flex-row .rzi { - transform: rotate(90deg); + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-tertiary-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.25rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-contrast-color); + --rz-steps-number-background-color: var(--rz-base-500); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-primary-lighter); + --rz-switch-box-shadow: var(--rz-shadow-1); + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-primary-lighter); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1rem; + --rz-tabs-shadow: none; + --rz-tabs-border: none; + --rz-tabs-border-radius: 0; + --rz-tabs-background-color: transparent; + --rz-tabs-tab-font-size: 0.875rem; + --rz-tabs-tab-line-height: 1.5rem; + --rz-tabs-tab-font-weight: 500; + --rz-tabs-tab-text-transform: uppercase; + --rz-tabs-tab-letter-spacing: 1.25px; + --rz-tabs-tab-padding-block: 0.75rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: transparent; + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-primary); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-200); + --rz-tabs-tab-hover-color: var(--rz-text-title-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-200); + --rz-tabs-tab-focus-color: var(--rz-text-title-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 1rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: transparent; + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.5rem; + --rz-tree-node-selected-background-color: var(--rz-primary-lighter); + --rz-tree-node-selected-color: var(--rz-on-primary-lighter); + --rz-tree-node-selected-border-radius: var(--rz-border-radius); + --rz-tree-node-margin-block: 0; + --rz-tree-node-margin-inline: 0; + --rz-tree-node-hover-background-color: var(--rz-base-100); + --rz-tree-node-hover-color: var(--rz-text-title-color); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 2rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-100); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-200); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-base-200); + --rz-upload-choose-color: var(--rz-text-color); + --rz-upload-choose-hover-background-color: var(--rz-base-200); + --rz-upload-choose-hover-color: var(--rz-text-title-color); + --rz-upload-choose-active-background-color: var(--rz-base-200); + --rz-upload-choose-active-color: var(--rz-text-title-color); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/software-base.css b/_content/Radzen.Blazor/css/software-base.css index 73ed97b..a766b58 100755 --- a/_content/Radzen.Blazor/css/software-base.css +++ b/_content/Radzen.Blazor/css/software-base.css @@ -1,630 +1,174 @@ @charset "UTF-8"; @font-face { - font-family: "Material Icons"; + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); + font-weight: 100 700; } @font-face { font-family: "Source Sans Pro"; - font-weight: 200; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + font-weight: 200 900; } @font-face { font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); +*, +*::before, +*::after { + box-sizing: inherit; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-text-title-color { + color: var(--rz-base-900) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-text-color { + color: var(--rz-base-800) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-text-contrast-color { + color: var(--rz-white) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f6f7fa; - --rz-base-200: #e9edf0; - --rz-base-300: #dadfe2; - --rz-base-400: #c1c9cb; - --rz-base-500: #95a4a8; - --rz-base-600: #77858b; - --rz-base-700: #545e61; - --rz-base-800: #3a474d; - --rz-base-900: #28363c; - --rz-primary: #598087; - --rz-primary-light: #6d8f95; - --rz-primary-lighter: rgba(89, 128, 135, 0.16); - --rz-primary-dark: #52767c; - --rz-primary-darker: #436065; - --rz-secondary: #80a4ab; - --rz-secondary-light: #8fafb5; - --rz-secondary-lighter: rgba(128, 164, 171, 0.2); - --rz-secondary-dark: #76979d; - --rz-secondary-darker: #607b80; - --rz-info: #2cc8c8; - --rz-info-light: #4ed1d1; - --rz-info-lighter: rgba(44, 200, 200, 0.2); - --rz-info-dark: #25a8a8; - --rz-info-darker: #219696; - --rz-success: #5dbf74; - --rz-success-light: #77c98a; - --rz-success-lighter: rgba(93, 191, 116, 0.16); - --rz-success-dark: #4ea061; - --rz-success-darker: #468f57; - --rz-warning: #fac152; - --rz-warning-light: #fbcb6e; - --rz-warning-lighter: rgba(250, 193, 82, 0.2); - --rz-warning-dark: #d2a245; - --rz-warning-darker: #bc913e; - --rz-danger: #f9777f; - --rz-danger-light: #fa8d93; - --rz-danger-lighter: rgba(249, 119, 127, 0.2); - --rz-danger-dark: #d1646b; - --rz-danger-darker: #bb595f; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #598087; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #80a4ab; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2cc8c8; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #5dbf74; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #fac152; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f9777f; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #376df5; - --rz-series-2: #64dfdf; - --rz-series-3: #f68769; - --rz-series-4: #c161e2; - --rz-series-5: #fdd07a; - --rz-series-6: #f8629b; - --rz-series-7: #74d062; - --rz-series-8: #84a7ff; - --rz-series-9: #4d99f9; - --rz-series-10: #8cecec; - --rz-series-11: #fab793; - --rz-series-12: #da88ee; - --rz-series-13: #fee3ab; - --rz-series-14: #fb89c3; - --rz-series-15: #a2e389; - --rz-series-16: #b5caff; - --rz-series-17: #1750f3; - --rz-series-18: #46d7d7; - --rz-series-19: #f46e4c; - --rz-series-20: #b343db; - --rz-series-21: #fdc55f; - --rz-series-22: #f64485; - --rz-series-23: #58c544; - --rz-series-24: #6a93ff; + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-primary); +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); -} - -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-display-none { + display: none !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-display-block { + display: block !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-display-inline { + display: inline !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-display-inline-block { + display: inline-block !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-display-flex { + display: flex !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-display-inline-flex { + display: inline-flex !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-display-grid { + display: grid !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); -} - -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; -} - -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; -} - -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; -} - -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; -} - -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; -} - -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; -} - -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; -} - -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; -} - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; -} - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; -} - -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; -} - -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; -} - -.rz-display-none { - display: none !important; -} - -.rz-display-block { - display: block !important; -} - -.rz-display-inline { - display: inline !important; -} - -.rz-display-inline-block { - display: inline-block !important; -} - -.rz-display-flex { - display: flex !important; -} - -.rz-display-inline-flex { - display: inline-flex !important; -} - -.rz-display-grid { - display: grid !important; -} - -.rz-display-inline-grid { - display: inline-grid !important; +.rz-display-inline-grid { + display: inline-grid !important; } @media (min-width: 576px) { @@ -867,6 +411,10 @@ $rz-shadow-10: none !default; */ color: var(--rz-black) !important; } +.rz-color-base { + color: var(--rz-base) !important; +} + .rz-color-base-50 { color: var(--rz-base-50) !important; } @@ -907,6 +455,22 @@ $rz-shadow-10: none !default; */ color: var(--rz-base-900) !important; } +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + .rz-color-primary { color: var(--rz-primary) !important; } @@ -1027,6 +591,26 @@ $rz-shadow-10: none !default; */ color: var(--rz-danger-darker) !important; } +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + .rz-color-on-primary { color: var(--rz-on-primary) !important; } @@ -1251,6 +835,10 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-black) !important; } +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + .rz-background-color-base-50 { background-color: var(--rz-base-50) !important; } @@ -1291,6 +879,22 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-base-900) !important; } +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + .rz-background-color-primary { background-color: var(--rz-primary) !important; } @@ -1411,6 +1015,26 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-danger-darker) !important; } +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + .rz-background-color-on-primary { background-color: var(--rz-on-primary) !important; } @@ -1635,6 +1259,10 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + .rz-border-color-base-50 { border-color: var(--rz-base-50) !important; } @@ -1675,6 +1303,22 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + .rz-border-color-primary { border-color: var(--rz-primary) !important; } @@ -1795,6 +1439,26 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-color-on-primary { border-color: var(--rz-on-primary) !important; } @@ -2023,6 +1687,12 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + .rz-border-base-50 { border-width: var(--rz-border-width); border-style: solid; @@ -2083,6 +1753,30 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + .rz-border-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2263,6 +1957,36 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-on-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2606,6 +2330,10 @@ $rz-shadow-10: none !default; */ background-size: 100%; } +body { + margin: 0; +} + .rz-m-0 { margin: 0 !important; } @@ -7902,7 +7630,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -7911,7 +7640,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -7920,7 +7650,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -7929,7 +7660,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -7938,7 +7670,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -7947,125 +7680,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } .rz-text-display-h1 { @@ -8075,7 +7691,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -8085,7 +7702,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -8095,7 +7713,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -8105,7 +7724,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -8115,7 +7735,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -8125,7 +7746,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -8135,7 +7757,8 @@ h6.rz-heading { font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -8145,7 +7768,8 @@ h6.rz-heading { font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -8155,7 +7779,8 @@ h6.rz-heading { font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -8165,7 +7790,8 @@ h6.rz-heading { font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -8175,7 +7801,8 @@ h6.rz-heading { font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -8185,7 +7812,8 @@ h6.rz-heading { font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -8195,7 +7823,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -8205,7 +7834,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -8215,7 +7845,8 @@ h6.rz-heading { font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -8225,7 +7856,8 @@ h6.rz-heading { font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -8235,7 +7867,8 @@ h6.rz-heading { font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -8245,7 +7878,8 @@ h6.rz-heading { font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -8256,7 +7890,8 @@ h6.rz-heading { letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -8475,24 +8110,21 @@ h6.rz-heading { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; -} - .rz-layout ::selection { background-color: var(--rz-text-selection-background-color); color: var(--rz-text-selection-color); @@ -8501,8 +8133,9 @@ h6.rz-heading { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -8513,7 +8146,7 @@ h6.rz-heading { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -8534,14 +8167,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -8566,6 +8191,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -8589,98 +8231,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -8688,18 +8304,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -8724,6 +8328,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -8755,59 +8371,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -8994,6 +8557,59 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-variant-outlined.rz-primary { background-color: transparent; } @@ -9023,73 +8639,20 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { +.rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); } -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); } - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-secondary { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); - color: var(--rz-secondary-light); -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); - color: var(--rz-secondary-light); -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); - color: var(--rz-secondary); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); } .rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); @@ -9250,76 +8813,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); -} -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); } -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -9480,15 +9048,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -9497,7 +9113,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -9507,51 +9123,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -9559,13 +9175,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -9574,7 +9190,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -9592,19 +9208,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 600; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -9646,15 +9251,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -9805,44 +9401,63 @@ p-button[type] { color: var(--rz-on-success-darker); } -.rz-variant-outlined.rz-badge-primary { - background-color: transparent; +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); - color: var(--rz-primary-lighter); +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); } -.rz-variant-outlined.rz-badge-primary.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); - color: var(--rz-primary-light); +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); } -.rz-variant-outlined.rz-badge-primary.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); - color: var(--rz-primary); +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); } -.rz-variant-outlined.rz-badge-primary.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); - color: var(--rz-primary-dark); +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); } -.rz-variant-outlined.rz-badge-primary.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); - color: var(--rz-primary-darker); +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); } -.rz-variant-outlined.rz-badge-dark { +.rz-variant-outlined.rz-badge-primary { background-color: transparent; } -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); } .rz-variant-outlined.rz-badge-secondary { @@ -9989,6 +9604,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -10008,16 +9663,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -10132,20 +9777,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -10159,57 +9824,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: var(--rz-body-font-size); - --rz-input-height: 2.25rem; - --rz-input-line-height: var(--rz-body-line-height); - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-disabled-background-color: var(--rz-base-100); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: var(--rz-transition-all), width 0, height 0; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -10220,26 +9860,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -10258,15 +9901,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-base-200); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: none; -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -10285,14 +9919,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: var(--rz-border-base-200); - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -10307,18 +9933,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-normal); - --rz-sidebar-background-color: var(--rz-base-800); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -10327,7 +9945,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -10346,17 +9964,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-100); - --rz-card-shadow: var(--rz-shadow-2); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -10386,13 +9995,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -10406,32 +10008,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-secondary); - --rz-accordion-hover-color: var(--rz-secondary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -10450,16 +10028,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -10467,20 +10045,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -10490,7 +10069,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -10499,10 +10078,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -10510,34 +10085,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: var(--rz-base-200); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-secondary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -10588,33 +10155,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-200); - --rz-sidebar-toggle-color: var(--rz-base-900); - --rz-sidebar-toggle-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-secondary); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -10648,37 +10201,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: var(--rz-border-normal); - --rz-menu-border-radius: 2px; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-hover-background-color: var(--rz-secondary-light); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-secondary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-secondary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-secondary); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -10703,7 +10228,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10725,6 +10251,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -10733,7 +10260,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -10746,7 +10274,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -10776,13 +10305,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -10791,7 +10320,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -10803,7 +10333,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10827,16 +10358,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -10853,7 +10384,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -10913,65 +10445,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: var(--rz-text-contrast-color); - --rz-panel-menu-background-color: var(--rz-base-800); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.3); - --rz-panel-menu-hover-color: var(--rz-text-contrast-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-900); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-base-900); - --rz-panel-menu-item-background-color: var(--rz-base-900); - --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: inherit; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -10981,10 +10468,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -10996,11 +10484,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -11011,8 +10499,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -11021,7 +10509,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -11034,7 +10523,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -11043,20 +10532,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -11080,67 +10571,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-200); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-secondary); - --rz-profile-menu-item-hover-background-color: var(--rz-secondary); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -11161,19 +10637,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -11193,17 +10672,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -11211,26 +10684,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-200); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -11284,14 +10739,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -11301,7 +10758,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -11324,54 +10782,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: inherit; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-secondary); - --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); - --rz-checkbox-checked-color: var(--rz-on-secondary); - --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -11383,10 +10829,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -11405,10 +10853,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11465,17 +10910,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-secondary); - --rz-switch-box-shadow: none; - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -11495,10 +10931,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -11520,8 +10956,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -11530,7 +10966,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -11542,35 +10978,23 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { transform: translateX(1.2rem); } -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-secondary); - --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-radio-checked-background-color: var(--rz-secondary); - --rz-radio-checked-hover-background-color: var(--rz-secondary-light); - --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-base-background-color); - --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); - --rz-radio-circle-hover-background-color: var(--rz-base-100); - --rz-radio-icon-width: 0.5rem; - --rz-radio-icon-height: 0.5rem; - --rz-radio-checked-border: var(--rz-input-border); +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -11582,7 +11006,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -11605,10 +11030,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11668,26 +11090,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-normal); - --rz-fieldset-border-radius: 0; - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-tertiary-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-200); - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -11716,7 +11123,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -11734,8 +11142,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -11750,36 +11160,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); - --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); - --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); - --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); - --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); - --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-100); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -11806,15 +11186,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -11822,8 +11203,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -11858,7 +11239,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -11951,28 +11333,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -11989,10 +11375,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -12001,7 +11388,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -12023,24 +11411,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -12050,7 +11422,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -12093,7 +11466,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -12134,39 +11508,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -12176,9 +11540,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -12192,11 +11553,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -12205,36 +11566,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-background-color); - --rz-slider-border: var(--rz-border-normal); - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-secondary-lighter); - --rz-slider-range-border: var(--rz-border-secondary-light); - --rz-slider-handle-width: 0.75rem; - --rz-slider-handle-height: 1.5rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-secondary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-secondary-light); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-100); - --rz-slider-disabled-range-border: var(--rz-border-normal); - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-300); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -12261,11 +11594,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -12274,7 +11607,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -12299,19 +11632,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-secondary); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.3; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-secondary); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -12369,16 +11691,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -12399,17 +11713,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-secondary); - --rz-selectbar-selected-color: var(--rz-on-secondary); - --rz-selectbar-selected-border: var(--rz-border-secondary); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -12417,7 +11722,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12425,13 +11730,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12440,7 +11745,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12448,13 +11753,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12463,7 +11768,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12471,13 +11776,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12486,7 +11791,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12494,13 +11799,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12508,89 +11813,34 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-selectbar-selected-border); } -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-200); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); - --rz-datepicker-calendar-border: var(--rz-border-base-100); - --rz-datepicker-calendar-border-radius: 0; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-secondary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: none; - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-200); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-secondary); - --rz-timepicker-button-color: var(--rz-on-secondary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; -} - -.rz-calendar { +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -12598,9 +11848,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -12638,148 +11888,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -12810,47 +12087,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-secondary); - --rz-numeric-button-disabled-background-color: var(--rz-base-300); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-on-secondary); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -12858,9 +12122,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -12868,49 +12132,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); -} - -:root { - --rz-upload-button-bar-background-color: var(--rz-base-200); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-300); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary); - --rz-upload-choose-color: var(--rz-on-secondary); - --rz-upload-choose-hover-background-color: var(--rz-secondary); - --rz-upload-choose-hover-color: var(--rz-on-secondary); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -12997,101 +12242,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-secondary-lighter); - --rz-grid-hover-color: var(--rz-on-secondary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-secondary-dark); - --rz-grid-selected-color: var(--rz-on-secondary-dark); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: none; - --rz-grid-header-background-color: var(--rz-base-200); - --rz-grid-header-font-size: 0.75rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: uppercase; - --rz-grid-header-color: var(--rz-text-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-300); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-200); - --rz-grid-filter-background-color: var(--rz-base-100); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: var(--rz-border-normal); - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-base-200); - --rz-grid-clear-filter-button-background-color: var(--rz-secondary); - --rz-grid-clear-filter-button-color: var(--rz-on-secondary); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: var(--rz-border-normal); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-100); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-background-color); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-200); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-color); - --rz-column-drag-handle-hover-color: var(--rz-text-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -13115,10 +12265,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -13162,8 +12316,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -13171,8 +12325,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -13198,11 +12352,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -13222,13 +12377,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -13248,11 +12404,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -13260,11 +12416,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -13278,10 +12434,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -13297,7 +12453,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -13349,7 +12505,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -13359,11 +12515,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -13386,13 +12542,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -13413,21 +12573,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -13439,7 +12599,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -13485,7 +12645,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -13499,14 +12658,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -13608,10 +12767,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -13625,28 +12780,15 @@ a:focus-visible .rz-fieldset-toggler { border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-end-end-radius: 0; } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { text-indent: 2.25rem; } } -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); -} - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -13676,31 +12818,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -13766,7 +12886,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -13776,18 +12896,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -13796,9 +12955,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -13840,16 +13001,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -13882,7 +13049,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -13933,26 +13100,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -13965,7 +13136,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -13985,7 +13156,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -13993,312 +13164,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: var(--rz-base-background-color); - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: var(--rz-border-normal); - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-base-background-color); - --rz-paginator-numeric-button-selected-color: var(--rz-primary); - --rz-paginator-numeric-button-selected-border: var(--rz-border-base-200); - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-200); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-200); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-200); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-200); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-secondary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-100); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -14308,24 +13439,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-secondary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-secondary-light); - --rz-tree-node-hover-color: var(--rz-on-secondary-light); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -14342,12 +13457,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -14356,13 +13471,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -14372,15 +13493,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -14392,7 +13515,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -14411,25 +13534,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-200); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-item-border: var(--rz-border-base-200); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -14448,13 +13557,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -14463,24 +13573,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -14502,7 +13605,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -14513,23 +13617,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -14539,17 +13643,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -14562,70 +13667,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-300); - --rz-scheduler-minor-border-color: var(--rz-base-200); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-200); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); - --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-secondary); - --rz-scheduler-view-selected-background-color: var(--rz-secondary); - --rz-scheduler-view-selected-border-color: var(--rz-secondary); - --rz-scheduler-header-background-color: var(--rz-base-200); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: var(--rz-border-normal); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -14641,7 +13684,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -14654,12 +13697,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -14669,27 +13712,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -14724,8 +13768,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -14785,16 +13829,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -14811,25 +13855,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -14843,7 +13900,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -14855,24 +13912,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -14882,11 +13939,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -14914,7 +13971,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -14930,7 +13987,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -14938,7 +13995,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -14987,7 +14044,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -15036,7 +14093,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -15082,8 +14139,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15092,15 +14149,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15133,8 +14190,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15143,15 +14200,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15181,35 +14238,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-tabs-border: var(--rz-border-base-200); - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-200); - --rz-tabs-tab-color: var(--rz-secondary); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); - --rz-tabs-tab-hover-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -15263,7 +14293,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -15306,7 +14337,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -15326,7 +14357,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -15361,6 +14392,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -15391,21 +14425,13 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-tabs-padding); } -.rz-tabview-left-icon { +.rz-tabview-icon { font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: var(--rz-body-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -15431,8 +14457,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15449,8 +14475,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15494,29 +14520,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-100); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 0.6875rem 1.25rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.875rem; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -15529,6 +14534,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -15543,37 +14549,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -15585,7 +14609,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -15599,7 +14623,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -15612,42 +14636,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -15680,161 +14677,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-dialog-side-titlebar-close { - float: right; +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); } -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); } -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); } -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); } -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); -} - -.rz-growl { - position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; -} - -.rz-growl-item-container { - background-color: var(--rz-notification-container-background-color); -} - -.rz-growl-item { - border-radius: var(--rz-notification-border-radius); - box-shadow: var(--rz-notification-shadow); - padding: var(--rz-notification-padding); -} - -.rz-growl-message-success .rz-growl-item { - color: var(--rz-notification-success-color); - background-color: var(--rz-notification-success-background-color); -} - -.rz-growl-message-warn .rz-growl-item { - color: var(--rz-notification-warning-color); - background-color: var(--rz-notification-warning-background-color); -} - -.rz-growl-message-error .rz-growl-item { - color: var(--rz-notification-error-color); - background-color: var(--rz-notification-error-background-color); -} - -.rz-growl-message-info .rz-growl-item { - color: var(--rz-notification-info-color); - background-color: var(--rz-notification-info-background-color); -} - -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close { - float: right; -} -.rz-growl-icon-close:before { - content: "close"; +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1.5rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -15859,16 +14820,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: var(--rz-secondary); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } .rz-layout::-webkit-scrollbar, @@ -15897,14 +14850,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-100); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -15934,7 +14881,7 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -15946,12 +14893,15 @@ a:focus-visible .rz-fieldset-toggler { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -15961,11 +14911,6 @@ a:focus-visible .rz-fieldset-toggler { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -15975,24 +14920,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -16002,14 +14934,8 @@ a:focus-visible .rz-fieldset-toggler { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -16021,18 +14947,9 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -16081,19 +14998,8 @@ a:focus-visible .rz-fieldset-toggler { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-200); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-secondary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -16121,6 +15027,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -16181,6 +15088,9 @@ a:focus-visible .rz-fieldset-toggler { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -16192,6 +15102,9 @@ a:focus-visible .rz-fieldset-toggler { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -16212,6 +15125,26 @@ a:focus-visible .rz-fieldset-toggler { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -16257,48 +15190,6 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -16362,6 +15253,27 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -16404,57 +15316,109 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-success); } -.rz-progressbar-circular-lg { - width: 6rem; - height: 6rem; - font-size: calc(var(--rz-progressbar-font-size) * 1.25); +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); } -.rz-progressbar-circular-md { - width: 3rem; - height: 3rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.75); +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); } - -.rz-progressbar-circular-sm { - width: 2rem; - height: 2rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.5); +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); } -.rz-progressbar-circular-xs { - width: 1.25rem; - height: 1.25rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.375); +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); } - -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); } - -.rz-chart { - position: relative; - height: 300px; +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); } -.rz-area-series { - fill-opacity: 0.8; +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); } -.rz-scheme-pastel .rz-series-0 { - fill: var(--rz-series-1); - stroke: var(--rz-series-1); +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); } -.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { - border: 1px solid var(--rz-series-1); +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); } .rz-scheme-pastel .rz-series-item-0 { fill: var(--rz-series-1); @@ -17212,6 +16176,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -17335,6 +16303,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -17361,24 +16330,8 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary); - --rz-editor-button-selected-color: var(--rz-on-secondary); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -17563,30 +16516,6 @@ a:focus-visible .rz-fieldset-toggler { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -17663,7 +16592,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -17735,7 +16664,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -17748,7 +16677,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -17763,6 +16692,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -17774,27 +16704,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -17810,15 +16737,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -17830,15 +16755,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-secondary); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-secondary); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -17860,7 +16778,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17875,7 +16793,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17962,11 +16880,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -18000,8 +16935,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -18009,8 +16954,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -18024,22 +16969,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: var(--rz-border-radius); - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -18868,30 +17799,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -18910,16 +17846,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -19295,279 +18228,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -19912,36 +18845,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-100); - --rz-form-field-filled-hover-background-color: var(--rz-base-200); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: none; - --rz-form-field-focus-shadow: none; - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -19951,11 +18854,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -19964,12 +18868,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -19997,20 +18901,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -20055,33 +18961,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -20098,16 +19007,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -20115,33 +19024,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -20158,27 +19067,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -20723,6 +19620,7 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; width: 100%; height: 100%; --rz-gap: 1rem; @@ -20742,4 +19640,1559 @@ button.rz-colorpicker-trigger .rzi:before { .rz-picklist-buttons.rz-flex-row .rzi { transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #dadfe2; + --rz-base-50: #ffffff; + --rz-base-100: #f6f7fa; + --rz-base-200: #e9edf0; + --rz-base-300: #dadfe2; + --rz-base-400: #c1c9cb; + --rz-base-500: #95a4a8; + --rz-base-600: #77858b; + --rz-base-700: #545e61; + --rz-base-800: #3a474d; + --rz-base-900: #28363c; + --rz-base-light: #e9edf0; + --rz-base-lighter: #ffffff; + --rz-base-dark: #77858b; + --rz-base-darker: #28363c; + --rz-primary: #598087; + --rz-primary-light: #6d8f95; + --rz-primary-lighter: rgba(89, 128, 135, 0.16); + --rz-primary-dark: #52767c; + --rz-primary-darker: #436065; + --rz-secondary: #80a4ab; + --rz-secondary-light: #8fafb5; + --rz-secondary-lighter: rgba(128, 164, 171, 0.2); + --rz-secondary-dark: #76979d; + --rz-secondary-darker: #607b80; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #28363c; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #598087; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #80a4ab; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-100); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-200); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-item-border: var(--rz-border-base-200); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-200); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-100); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-200); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-100); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-100); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-normal); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-200); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-200); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-100); + --rz-form-field-filled-hover-background-color: var(--rz-base-200); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-200); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-300); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-200); + --rz-grid-filter-background-color: var(--rz-base-100); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-100); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-100); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-background-color); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-200); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-color); + --rz-column-drag-handle-hover-color: var(--rz-text-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-200); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-100); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-100); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-300); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-100); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-200); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-200); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-background-color); + --rz-pager-numeric-button-selected-color: var(--rz-primary); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-200); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-200); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-200); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-200); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-secondary); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-200); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-300); + --rz-scheduler-minor-border-color: var(--rz-base-200); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-200); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-200); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-secondary); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-200); + --rz-sidebar-toggle-color: var(--rz-base-900); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-normal); + --rz-sidebar-background-color: var(--rz-base-800); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-lighter); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-100); + --rz-slider-disabled-range-border: var(--rz-border-normal); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-300); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-200); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: var(--rz-border-base-200); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-200); + --rz-tabs-tab-color: var(--rz-secondary); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); + --rz-tabs-tab-hover-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-200); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/software-dark-base.css b/_content/Radzen.Blazor/css/software-dark-base.css new file mode 100755 index 0000000..e88979a --- /dev/null +++ b/_content/Radzen.Blazor/css/software-dark-base.css @@ -0,0 +1,21202 @@ +@charset "UTF-8"; +.rz-slot-minor { + border-top: 1px dotted var(--rz-scheduler-minor-border-color) !important; +} + +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +.rz-text-title-color { + color: var(--rz-base-50) !important; +} + +.rz-text-color { + color: var(--rz-base-100) !important; +} + +.rz-text-secondary-color { + color: var(--rz-base-300) !important; +} + +.rz-text-tertiary-color { + color: var(--rz-base-400) !important; +} + +.rz-text-disabled-color { + color: var(--rz-base-600) !important; +} + +.rz-text-contrast-color { + color: var(--rz-white) !important; +} + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; +} + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; +} + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; +} + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; +} + +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; +} + +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; +} + +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; +} + +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; +} + +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; +} + +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; +} + +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; +} + +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; +} + +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; +} + +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; +} + +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; +} + +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; +} + +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; +} + +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; +} + +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; +} + +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; +} + +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; +} + +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; +} + +.rz-display-none { + display: none !important; +} + +.rz-display-block { + display: block !important; +} + +.rz-display-inline { + display: inline !important; +} + +.rz-display-inline-block { + display: inline-block !important; +} + +.rz-display-flex { + display: flex !important; +} + +.rz-display-inline-flex { + display: inline-flex !important; +} + +.rz-display-grid { + display: grid !important; +} + +.rz-display-inline-grid { + display: inline-grid !important; +} + +@media (min-width: 576px) { + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 768px) { + .rz-display-sm-none { + display: none !important; + } + .rz-display-sm-block { + display: block !important; + } + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} + +.rz-justify-content-stretch { + justify-content: stretch !important; +} + +.rz-justify-content-center { + justify-content: center !important; +} + +.rz-justify-content-start { + justify-content: start !important; +} + +.rz-justify-content-end { + justify-content: end !important; +} + +.rz-justify-content-flex-start { + justify-content: flex-start !important; +} + +.rz-justify-content-flex-end { + justify-content: flex-end !important; +} + +.rz-justify-content-left { + justify-content: left !important; +} + +.rz-justify-content-right { + justify-content: right !important; +} + +.rz-justify-content-space-between { + justify-content: space-between !important; +} + +.rz-justify-content-space-around { + justify-content: space-around !important; +} + +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.rz-align-items-normal { + align-items: normal !important; +} + +.rz-align-items-stretch { + align-items: stretch !important; +} + +.rz-align-items-center { + align-items: center !important; +} + +.rz-align-items-start { + align-items: start !important; +} + +.rz-align-items-end { + align-items: end !important; +} + +.rz-align-items-flex-start { + align-items: flex-start !important; +} + +.rz-align-items-flex-end { + align-items: flex-end !important; +} + +.rz-color-white { + color: var(--rz-white) !important; +} + +.rz-color-black { + color: var(--rz-black) !important; +} + +.rz-color-base { + color: var(--rz-base) !important; +} + +.rz-color-base-50 { + color: var(--rz-base-50) !important; +} + +.rz-color-base-100 { + color: var(--rz-base-100) !important; +} + +.rz-color-base-200 { + color: var(--rz-base-200) !important; +} + +.rz-color-base-300 { + color: var(--rz-base-300) !important; +} + +.rz-color-base-400 { + color: var(--rz-base-400) !important; +} + +.rz-color-base-500 { + color: var(--rz-base-500) !important; +} + +.rz-color-base-600 { + color: var(--rz-base-600) !important; +} + +.rz-color-base-700 { + color: var(--rz-base-700) !important; +} + +.rz-color-base-800 { + color: var(--rz-base-800) !important; +} + +.rz-color-base-900 { + color: var(--rz-base-900) !important; +} + +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + +.rz-color-primary { + color: var(--rz-primary) !important; +} + +.rz-color-primary-light { + color: var(--rz-primary-light) !important; +} + +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; +} + +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; +} + +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; +} + +.rz-color-secondary { + color: var(--rz-secondary) !important; +} + +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; +} + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; +} + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; +} + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; +} + +.rz-color-info { + color: var(--rz-info) !important; +} + +.rz-color-info-light { + color: var(--rz-info-light) !important; +} + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; +} + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; +} + +.rz-color-info-darker { + color: var(--rz-info-darker) !important; +} + +.rz-color-success { + color: var(--rz-success) !important; +} + +.rz-color-success-light { + color: var(--rz-success-light) !important; +} + +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; +} + +.rz-color-success-dark { + color: var(--rz-success-dark) !important; +} + +.rz-color-success-darker { + color: var(--rz-success-darker) !important; +} + +.rz-color-warning { + color: var(--rz-warning) !important; +} + +.rz-color-warning-light { + color: var(--rz-warning-light) !important; +} + +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; +} + +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; +} + +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; +} + +.rz-color-danger { + color: var(--rz-danger) !important; +} + +.rz-color-danger-light { + color: var(--rz-danger-light) !important; +} + +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; +} + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; +} + +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; +} + +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + +.rz-color-on-primary { + color: var(--rz-on-primary) !important; +} + +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; +} + +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; +} + +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; +} + +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; +} + +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; +} + +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; +} + +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; +} + +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; +} + +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; +} + +.rz-color-on-info { + color: var(--rz-on-info) !important; +} + +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; +} + +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; +} + +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; +} + +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; +} + +.rz-color-on-success { + color: var(--rz-on-success) !important; +} + +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; +} + +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; +} + +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; +} + +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; +} + +.rz-color-on-warning { + color: var(--rz-on-warning) !important; +} + +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; +} + +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; +} + +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; +} + +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; +} + +.rz-color-on-danger { + color: var(--rz-on-danger) !important; +} + +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; +} + +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; +} + +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; +} + +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; +} + +.rz-color-series-1 { + color: var(--rz-series-1) !important; +} + +.rz-color-series-2 { + color: var(--rz-series-2) !important; +} + +.rz-color-series-3 { + color: var(--rz-series-3) !important; +} + +.rz-color-series-4 { + color: var(--rz-series-4) !important; +} + +.rz-color-series-5 { + color: var(--rz-series-5) !important; +} + +.rz-color-series-6 { + color: var(--rz-series-6) !important; +} + +.rz-color-series-7 { + color: var(--rz-series-7) !important; +} + +.rz-color-series-8 { + color: var(--rz-series-8) !important; +} + +.rz-color-series-9 { + color: var(--rz-series-9) !important; +} + +.rz-color-series-10 { + color: var(--rz-series-10) !important; +} + +.rz-color-series-11 { + color: var(--rz-series-11) !important; +} + +.rz-color-series-12 { + color: var(--rz-series-12) !important; +} + +.rz-color-series-13 { + color: var(--rz-series-13) !important; +} + +.rz-color-series-14 { + color: var(--rz-series-14) !important; +} + +.rz-color-series-15 { + color: var(--rz-series-15) !important; +} + +.rz-color-series-16 { + color: var(--rz-series-16) !important; +} + +.rz-color-series-17 { + color: var(--rz-series-17) !important; +} + +.rz-color-series-18 { + color: var(--rz-series-18) !important; +} + +.rz-color-series-19 { + color: var(--rz-series-19) !important; +} + +.rz-color-series-20 { + color: var(--rz-series-20) !important; +} + +.rz-color-series-21 { + color: var(--rz-series-21) !important; +} + +.rz-color-series-22 { + color: var(--rz-series-22) !important; +} + +.rz-color-series-23 { + color: var(--rz-series-23) !important; +} + +.rz-color-series-24 { + color: var(--rz-series-24) !important; +} + +.rz-background-color-white { + background-color: var(--rz-white) !important; +} + +.rz-background-color-black { + background-color: var(--rz-black) !important; +} + +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; +} + +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; +} + +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; +} + +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; +} + +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; +} + +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; +} + +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; +} + +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; +} + +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; +} + +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; +} + +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + +.rz-background-color-primary { + background-color: var(--rz-primary) !important; +} + +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; +} + +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; +} + +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; +} + +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; +} + +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; +} + +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; +} + +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; +} + +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; +} + +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; +} + +.rz-background-color-info { + background-color: var(--rz-info) !important; +} + +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; +} + +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; +} + +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; +} + +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; +} + +.rz-background-color-success { + background-color: var(--rz-success) !important; +} + +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; +} + +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; +} + +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; +} + +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; +} + +.rz-background-color-warning { + background-color: var(--rz-warning) !important; +} + +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; +} + +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; +} + +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; +} + +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; +} + +.rz-background-color-danger { + background-color: var(--rz-danger) !important; +} + +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; +} + +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; +} + +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; +} + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; +} + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; +} + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; +} + +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; +} + +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; +} + +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; +} + +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; +} + +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; +} + +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; +} + +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; +} + +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; +} + +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; +} + +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; +} + +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; +} + +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; +} + +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; +} + +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; +} + +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; +} + +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; +} + +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; +} + +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; +} + +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; +} + +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; +} + +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; +} + +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; +} + +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; +} + +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; +} + +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; +} + +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; +} + +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; +} + +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; +} + +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; +} + +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; +} + +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; +} + +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; +} + +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; +} + +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; +} + +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; +} + +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; +} + +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; +} + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; +} + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; +} + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; +} + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; +} + +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; +} + +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; +} + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; +} + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; +} + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; +} + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; +} + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; +} + +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; +} + +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; +} + +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; +} + +.rz-border-color-white { + border-color: var(--rz-white) !important; +} + +.rz-border-color-black { + border-color: var(--rz-black) !important; +} + +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; +} + +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; +} + +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; +} + +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; +} + +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; +} + +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; +} + +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; +} + +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; +} + +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; +} + +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; +} + +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + +.rz-border-color-primary { + border-color: var(--rz-primary) !important; +} + +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; +} + +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; +} + +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-color-info { + border-color: var(--rz-info) !important; +} + +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; +} + +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; +} + +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; +} + +.rz-border-color-success { + border-color: var(--rz-success) !important; +} + +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; +} + +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; +} + +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; +} + +.rz-border-color-warning { + border-color: var(--rz-warning) !important; +} + +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; +} + +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-color-danger { + border-color: var(--rz-danger) !important; +} + +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; +} + +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; +} + +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; +} + +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; +} + +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; +} + +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; +} + +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; +} + +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; +} + +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; +} + +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; +} + +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; +} + +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; +} + +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; +} + +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; +} + +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; +} + +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; +} + +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; +} + +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; +} + +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; +} + +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; +} + +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; +} + +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; +} + +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; +} + +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; +} + +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; +} + +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; +} + +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; +} + +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; +} + +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; +} + +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; +} + +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; +} + +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; +} + +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; +} + +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; +} + +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; +} + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; +} + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; +} + +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; +} + +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; +} + +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; +} + +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; +} + +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; +} + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; +} + +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; +} + +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; +} + +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; +} + +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; +} + +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; +} + +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; +} + +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; +} + +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; +} + +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; +} + +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; +} + +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; +} + +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} + +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; +} + +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; +} + +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; +} + +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; +} + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; +} + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; +} + +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; +} + +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; +} + +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; +} + +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; +} + +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; +} + +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; +} + +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; +} + +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; +} + +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; +} + +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; +} + +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; +} + +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; +} + +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; +} + +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; +} + +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; +} + +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; +} + +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; +} + +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; +} + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; +} + +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; +} + +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; +} + +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; +} + +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; +} + +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; +} + +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; +} + +.rz-ripple { + position: relative; + overflow: hidden; +} +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +body { + margin: 0; +} + +.rz-m-0 { + margin: 0 !important; +} + +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; +} + +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; +} + +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; +} + +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; +} + +.rz-ms-0 { + margin-inline-start: 0 !important; +} + +.rz-me-0 { + margin-inline-end: 0 !important; +} + +.rz-m-05 { + margin: 0.125rem !important; +} + +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; +} + +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; +} + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; +} + +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; +} + +.rz-ms-05 { + margin-inline-start: 0.125rem !important; +} + +.rz-me-05 { + margin-inline-end: 0.125rem !important; +} + +.rz-m-1 { + margin: 0.25rem !important; +} + +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; +} + +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; +} + +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; +} + +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; +} + +.rz-ms-1 { + margin-inline-start: 0.25rem !important; +} + +.rz-me-1 { + margin-inline-end: 0.25rem !important; +} + +.rz-m-2 { + margin: 0.5rem !important; +} + +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; +} + +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; +} + +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; +} + +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; +} + +.rz-ms-2 { + margin-inline-start: 0.5rem !important; +} + +.rz-me-2 { + margin-inline-end: 0.5rem !important; +} + +.rz-m-3 { + margin: 0.75rem !important; +} + +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; +} + +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; +} + +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; +} + +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; +} + +.rz-ms-3 { + margin-inline-start: 0.75rem !important; +} + +.rz-me-3 { + margin-inline-end: 0.75rem !important; +} + +.rz-m-4 { + margin: 1rem !important; +} + +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; +} + +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; +} + +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; +} + +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; +} + +.rz-ms-4 { + margin-inline-start: 1rem !important; +} + +.rz-me-4 { + margin-inline-end: 1rem !important; +} + +.rz-m-5 { + margin: 1.25rem !important; +} + +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; +} + +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; +} + +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; +} + +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; +} + +.rz-ms-5 { + margin-inline-start: 1.25rem !important; +} + +.rz-me-5 { + margin-inline-end: 1.25rem !important; +} + +.rz-m-6 { + margin: 1.5rem !important; +} + +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; +} + +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; +} + +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; +} + +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; +} + +.rz-ms-6 { + margin-inline-start: 1.5rem !important; +} + +.rz-me-6 { + margin-inline-end: 1.5rem !important; +} + +.rz-m-7 { + margin: 1.75rem !important; +} + +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; +} + +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; +} + +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; +} + +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; +} + +.rz-ms-7 { + margin-inline-start: 1.75rem !important; +} + +.rz-me-7 { + margin-inline-end: 1.75rem !important; +} + +.rz-m-8 { + margin: 2rem !important; +} + +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; +} + +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; +} + +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; +} + +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; +} + +.rz-ms-8 { + margin-inline-start: 2rem !important; +} + +.rz-me-8 { + margin-inline-end: 2rem !important; +} + +.rz-m-9 { + margin: 2.25rem !important; +} + +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; +} + +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; +} + +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; +} + +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; +} + +.rz-ms-9 { + margin-inline-start: 2.25rem !important; +} + +.rz-me-9 { + margin-inline-end: 2.25rem !important; +} + +.rz-m-10 { + margin: 2.5rem !important; +} + +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; +} + +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; +} + +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; +} + +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; +} + +.rz-ms-10 { + margin-inline-start: 2.5rem !important; +} + +.rz-me-10 { + margin-inline-end: 2.5rem !important; +} + +.rz-m-11 { + margin: 2.75rem !important; +} + +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; +} + +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; +} + +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; +} + +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; +} + +.rz-ms-11 { + margin-inline-start: 2.75rem !important; +} + +.rz-me-11 { + margin-inline-end: 2.75rem !important; +} + +.rz-m-12 { + margin: 3rem !important; +} + +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; +} + +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; +} + +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; +} + +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; +} + +.rz-ms-12 { + margin-inline-start: 3rem !important; +} + +.rz-me-12 { + margin-inline-end: 3rem !important; +} + +.rz-p-0 { + padding: 0 !important; +} + +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; +} + +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; +} + +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; +} + +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; +} + +.rz-ps-0 { + padding-inline-start: 0 !important; +} + +.rz-pe-0 { + padding-inline-end: 0 !important; +} + +.rz-p-05 { + padding: 0.125rem !important; +} + +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; +} + +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; +} + +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; +} + +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; +} + +.rz-ps-05 { + padding-inline-start: 0.125rem !important; +} + +.rz-pe-05 { + padding-inline-end: 0.125rem !important; +} + +.rz-p-1 { + padding: 0.25rem !important; +} + +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; +} + +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; +} + +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; +} + +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; +} + +.rz-ps-1 { + padding-inline-start: 0.25rem !important; +} + +.rz-pe-1 { + padding-inline-end: 0.25rem !important; +} + +.rz-p-2 { + padding: 0.5rem !important; +} + +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; +} + +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; +} + +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; +} + +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; +} + +.rz-ps-2 { + padding-inline-start: 0.5rem !important; +} + +.rz-pe-2 { + padding-inline-end: 0.5rem !important; +} + +.rz-p-3 { + padding: 0.75rem !important; +} + +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; +} + +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; +} + +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; +} + +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; +} + +.rz-ps-3 { + padding-inline-start: 0.75rem !important; +} + +.rz-pe-3 { + padding-inline-end: 0.75rem !important; +} + +.rz-p-4 { + padding: 1rem !important; +} + +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; +} + +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; +} + +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; +} + +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; +} + +.rz-ps-4 { + padding-inline-start: 1rem !important; +} + +.rz-pe-4 { + padding-inline-end: 1rem !important; +} + +.rz-p-5 { + padding: 1.25rem !important; +} + +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; +} + +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; +} + +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; +} + +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; +} + +.rz-ps-5 { + padding-inline-start: 1.25rem !important; +} + +.rz-pe-5 { + padding-inline-end: 1.25rem !important; +} + +.rz-p-6 { + padding: 1.5rem !important; +} + +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; +} + +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; +} + +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; +} + +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; +} + +.rz-ps-6 { + padding-inline-start: 1.5rem !important; +} + +.rz-pe-6 { + padding-inline-end: 1.5rem !important; +} + +.rz-p-7 { + padding: 1.75rem !important; +} + +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; +} + +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; +} + +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; +} + +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; +} + +.rz-ps-7 { + padding-inline-start: 1.75rem !important; +} + +.rz-pe-7 { + padding-inline-end: 1.75rem !important; +} + +.rz-p-8 { + padding: 2rem !important; +} + +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; +} + +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; +} + +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; +} + +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; +} + +.rz-ps-8 { + padding-inline-start: 2rem !important; +} + +.rz-pe-8 { + padding-inline-end: 2rem !important; +} + +.rz-p-9 { + padding: 2.25rem !important; +} + +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; +} + +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; +} + +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; +} + +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; +} + +.rz-ps-9 { + padding-inline-start: 2.25rem !important; +} + +.rz-pe-9 { + padding-inline-end: 2.25rem !important; +} + +.rz-p-10 { + padding: 2.5rem !important; +} + +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; +} + +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; +} + +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; +} + +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; +} + +.rz-ps-10 { + padding-inline-start: 2.5rem !important; +} + +.rz-pe-10 { + padding-inline-end: 2.5rem !important; +} + +.rz-p-11 { + padding: 2.75rem !important; +} + +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; +} + +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; +} + +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; +} + +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; +} + +.rz-ps-11 { + padding-inline-start: 2.75rem !important; +} + +.rz-pe-11 { + padding-inline-end: 2.75rem !important; +} + +.rz-p-12 { + padding: 3rem !important; +} + +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; +} + +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; +} + +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; +} + +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; +} + +.rz-ps-12 { + padding-inline-start: 3rem !important; +} + +.rz-pe-12 { + padding-inline-end: 3rem !important; +} + +.rz-m-auto { + margin: auto !important; +} + +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; +} + +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; +} + +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; +} + +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; +} + +.rz-ms-auto { + margin-inline-start: auto !important; +} + +.rz-me-auto { + margin-inline-end: auto !important; +} + +@media (min-width: 576px) { + .rz-m-xs-0 { + margin: 0 !important; + } + .rz-my-xs-0, + .rz-mt-xs-0 { + margin-top: 0 !important; + } + .rz-mx-xs-0, + .rz-mr-xs-0 { + margin-right: 0 !important; + } + .rz-my-xs-0, + .rz-mb-xs-0 { + margin-bottom: 0 !important; + } + .rz-mx-xs-0, + .rz-ml-xs-0 { + margin-left: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-end: 0 !important; + } + .rz-m-xs-05 { + margin: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mt-xs-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-mr-xs-05 { + margin-right: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mb-xs-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-ml-xs-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xs-1 { + margin: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mt-xs-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-mr-xs-1 { + margin-right: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mb-xs-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-ml-xs-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xs-2 { + margin: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mt-xs-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-mr-xs-2 { + margin-right: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mb-xs-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-ml-xs-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xs-3 { + margin: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mt-xs-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-mr-xs-3 { + margin-right: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mb-xs-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-ml-xs-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xs-4 { + margin: 1rem !important; + } + .rz-my-xs-4, + .rz-mt-xs-4 { + margin-top: 1rem !important; + } + .rz-mx-xs-4, + .rz-mr-xs-4 { + margin-right: 1rem !important; + } + .rz-my-xs-4, + .rz-mb-xs-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xs-4, + .rz-ml-xs-4 { + margin-left: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xs-5 { + margin: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mt-xs-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-mr-xs-5 { + margin-right: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mb-xs-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-ml-xs-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xs-6 { + margin: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mt-xs-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-mr-xs-6 { + margin-right: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mb-xs-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-ml-xs-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xs-7 { + margin: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mt-xs-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-mr-xs-7 { + margin-right: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mb-xs-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-ml-xs-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xs-8 { + margin: 2rem !important; + } + .rz-my-xs-8, + .rz-mt-xs-8 { + margin-top: 2rem !important; + } + .rz-mx-xs-8, + .rz-mr-xs-8 { + margin-right: 2rem !important; + } + .rz-my-xs-8, + .rz-mb-xs-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xs-8, + .rz-ml-xs-8 { + margin-left: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xs-9 { + margin: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mt-xs-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-mr-xs-9 { + margin-right: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mb-xs-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-ml-xs-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xs-10 { + margin: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mt-xs-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-mr-xs-10 { + margin-right: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mb-xs-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-ml-xs-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xs-11 { + margin: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mt-xs-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-mr-xs-11 { + margin-right: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mb-xs-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-ml-xs-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xs-12 { + margin: 3rem !important; + } + .rz-my-xs-12, + .rz-mt-xs-12 { + margin-top: 3rem !important; + } + .rz-mx-xs-12, + .rz-mr-xs-12 { + margin-right: 3rem !important; + } + .rz-my-xs-12, + .rz-mb-xs-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xs-12, + .rz-ml-xs-12 { + margin-left: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xs-0 { + padding: 0 !important; + } + .rz-py-xs-0, + .rz-pt-xs-0 { + padding-top: 0 !important; + } + .rz-px-xs-0, + .rz-pr-xs-0 { + padding-right: 0 !important; + } + .rz-py-xs-0, + .rz-pb-xs-0 { + padding-bottom: 0 !important; + } + .rz-px-xs-0, + .rz-pl-xs-0 { + padding-left: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-end: 0 !important; + } + .rz-p-xs-05 { + padding: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pt-xs-05 { + padding-top: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pr-xs-05 { + padding-right: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pb-xs-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pl-xs-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xs-1 { + padding: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pt-xs-1 { + padding-top: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pr-xs-1 { + padding-right: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pb-xs-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pl-xs-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xs-2 { + padding: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pt-xs-2 { + padding-top: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pr-xs-2 { + padding-right: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pb-xs-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pl-xs-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xs-3 { + padding: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pt-xs-3 { + padding-top: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pr-xs-3 { + padding-right: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pb-xs-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pl-xs-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xs-4 { + padding: 1rem !important; + } + .rz-py-xs-4, + .rz-pt-xs-4 { + padding-top: 1rem !important; + } + .rz-px-xs-4, + .rz-pr-xs-4 { + padding-right: 1rem !important; + } + .rz-py-xs-4, + .rz-pb-xs-4 { + padding-bottom: 1rem !important; + } + .rz-px-xs-4, + .rz-pl-xs-4 { + padding-left: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xs-5 { + padding: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pt-xs-5 { + padding-top: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pr-xs-5 { + padding-right: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pb-xs-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pl-xs-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xs-6 { + padding: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pt-xs-6 { + padding-top: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pr-xs-6 { + padding-right: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pb-xs-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pl-xs-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xs-7 { + padding: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pt-xs-7 { + padding-top: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pr-xs-7 { + padding-right: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pb-xs-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pl-xs-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xs-8 { + padding: 2rem !important; + } + .rz-py-xs-8, + .rz-pt-xs-8 { + padding-top: 2rem !important; + } + .rz-px-xs-8, + .rz-pr-xs-8 { + padding-right: 2rem !important; + } + .rz-py-xs-8, + .rz-pb-xs-8 { + padding-bottom: 2rem !important; + } + .rz-px-xs-8, + .rz-pl-xs-8 { + padding-left: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xs-9 { + padding: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pt-xs-9 { + padding-top: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pr-xs-9 { + padding-right: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pb-xs-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pl-xs-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xs-10 { + padding: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pt-xs-10 { + padding-top: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pr-xs-10 { + padding-right: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pb-xs-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pl-xs-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xs-11 { + padding: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pt-xs-11 { + padding-top: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pr-xs-11 { + padding-right: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pb-xs-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pl-xs-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xs-12 { + padding: 3rem !important; + } + .rz-py-xs-12, + .rz-pt-xs-12 { + padding-top: 3rem !important; + } + .rz-px-xs-12, + .rz-pr-xs-12 { + padding-right: 3rem !important; + } + .rz-py-xs-12, + .rz-pb-xs-12 { + padding-bottom: 3rem !important; + } + .rz-px-xs-12, + .rz-pl-xs-12 { + padding-left: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xs-auto { + margin: auto !important; + } + .rz-my-xs-auto, + .rz-mt-xs-auto { + margin-top: auto !important; + } + .rz-mx-xs-auto, + .rz-mr-xs-auto { + margin-right: auto !important; + } + .rz-my-xs-auto, + .rz-mb-xs-auto { + margin-bottom: auto !important; + } + .rz-mx-xs-auto, + .rz-ml-xs-auto { + margin-left: auto !important; + } + .rz-ms-xs-auto { + margin-inline-start: auto !important; + } + .rz-me-xs-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 768px) { + .rz-m-sm-0 { + margin: 0 !important; + } + .rz-my-sm-0, + .rz-mt-sm-0 { + margin-top: 0 !important; + } + .rz-mx-sm-0, + .rz-mr-sm-0 { + margin-right: 0 !important; + } + .rz-my-sm-0, + .rz-mb-sm-0 { + margin-bottom: 0 !important; + } + .rz-mx-sm-0, + .rz-ml-sm-0 { + margin-left: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-start: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-end: 0 !important; + } + .rz-m-sm-05 { + margin: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mt-sm-05 { + margin-top: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-mr-sm-05 { + margin-right: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mb-sm-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-ml-sm-05 { + margin-left: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-sm-1 { + margin: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mt-sm-1 { + margin-top: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-mr-sm-1 { + margin-right: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-ml-sm-1 { + margin-left: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-sm-2 { + margin: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mt-sm-2 { + margin-top: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-mr-sm-2 { + margin-right: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-ml-sm-2 { + margin-left: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-sm-3 { + margin: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mt-sm-3 { + margin-top: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-mr-sm-3 { + margin-right: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mb-sm-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-ml-sm-3 { + margin-left: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-sm-4 { + margin: 1rem !important; + } + .rz-my-sm-4, + .rz-mt-sm-4 { + margin-top: 1rem !important; + } + .rz-mx-sm-4, + .rz-mr-sm-4 { + margin-right: 1rem !important; + } + .rz-my-sm-4, + .rz-mb-sm-4 { + margin-bottom: 1rem !important; + } + .rz-mx-sm-4, + .rz-ml-sm-4 { + margin-left: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-end: 1rem !important; + } + .rz-m-sm-5 { + margin: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mt-sm-5 { + margin-top: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-mr-sm-5 { + margin-right: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mb-sm-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-ml-sm-5 { + margin-left: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-sm-6 { + margin: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mt-sm-6 { + margin-top: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-mr-sm-6 { + margin-right: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mb-sm-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-ml-sm-6 { + margin-left: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-sm-7 { + margin: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mt-sm-7 { + margin-top: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-mr-sm-7 { + margin-right: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mb-sm-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-ml-sm-7 { + margin-left: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-sm-8 { + margin: 2rem !important; + } + .rz-my-sm-8, + .rz-mt-sm-8 { + margin-top: 2rem !important; + } + .rz-mx-sm-8, + .rz-mr-sm-8 { + margin-right: 2rem !important; + } + .rz-my-sm-8, + .rz-mb-sm-8 { + margin-bottom: 2rem !important; + } + .rz-mx-sm-8, + .rz-ml-sm-8 { + margin-left: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-end: 2rem !important; + } + .rz-m-sm-9 { + margin: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mt-sm-9 { + margin-top: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-mr-sm-9 { + margin-right: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mb-sm-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-ml-sm-9 { + margin-left: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-sm-10 { + margin: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mt-sm-10 { + margin-top: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-mr-sm-10 { + margin-right: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mb-sm-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-ml-sm-10 { + margin-left: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-sm-11 { + margin: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mt-sm-11 { + margin-top: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-mr-sm-11 { + margin-right: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mb-sm-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-ml-sm-11 { + margin-left: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-sm-12 { + margin: 3rem !important; + } + .rz-my-sm-12, + .rz-mt-sm-12 { + margin-top: 3rem !important; + } + .rz-mx-sm-12, + .rz-mr-sm-12 { + margin-right: 3rem !important; + } + .rz-my-sm-12, + .rz-mb-sm-12 { + margin-bottom: 3rem !important; + } + .rz-mx-sm-12, + .rz-ml-sm-12 { + margin-left: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-end: 3rem !important; + } + .rz-p-sm-0 { + padding: 0 !important; + } + .rz-py-sm-0, + .rz-pt-sm-0 { + padding-top: 0 !important; + } + .rz-px-sm-0, + .rz-pr-sm-0 { + padding-right: 0 !important; + } + .rz-py-sm-0, + .rz-pb-sm-0 { + padding-bottom: 0 !important; + } + .rz-px-sm-0, + .rz-pl-sm-0 { + padding-left: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-start: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-end: 0 !important; + } + .rz-p-sm-05 { + padding: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pt-sm-05 { + padding-top: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pr-sm-05 { + padding-right: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pb-sm-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pl-sm-05 { + padding-left: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-sm-1 { + padding: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pt-sm-1 { + padding-top: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pr-sm-1 { + padding-right: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pl-sm-1 { + padding-left: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-sm-2 { + padding: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pt-sm-2 { + padding-top: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pr-sm-2 { + padding-right: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pl-sm-2 { + padding-left: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-sm-3 { + padding: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pt-sm-3 { + padding-top: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pr-sm-3 { + padding-right: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pb-sm-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pl-sm-3 { + padding-left: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-sm-4 { + padding: 1rem !important; + } + .rz-py-sm-4, + .rz-pt-sm-4 { + padding-top: 1rem !important; + } + .rz-px-sm-4, + .rz-pr-sm-4 { + padding-right: 1rem !important; + } + .rz-py-sm-4, + .rz-pb-sm-4 { + padding-bottom: 1rem !important; + } + .rz-px-sm-4, + .rz-pl-sm-4 { + padding-left: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-end: 1rem !important; + } + .rz-p-sm-5 { + padding: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pt-sm-5 { + padding-top: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pr-sm-5 { + padding-right: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pb-sm-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pl-sm-5 { + padding-left: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-sm-6 { + padding: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pt-sm-6 { + padding-top: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pr-sm-6 { + padding-right: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pb-sm-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pl-sm-6 { + padding-left: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-sm-7 { + padding: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pt-sm-7 { + padding-top: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pr-sm-7 { + padding-right: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pb-sm-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pl-sm-7 { + padding-left: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-sm-8 { + padding: 2rem !important; + } + .rz-py-sm-8, + .rz-pt-sm-8 { + padding-top: 2rem !important; + } + .rz-px-sm-8, + .rz-pr-sm-8 { + padding-right: 2rem !important; + } + .rz-py-sm-8, + .rz-pb-sm-8 { + padding-bottom: 2rem !important; + } + .rz-px-sm-8, + .rz-pl-sm-8 { + padding-left: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-end: 2rem !important; + } + .rz-p-sm-9 { + padding: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pt-sm-9 { + padding-top: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pr-sm-9 { + padding-right: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pb-sm-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pl-sm-9 { + padding-left: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-sm-10 { + padding: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pt-sm-10 { + padding-top: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pr-sm-10 { + padding-right: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pb-sm-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pl-sm-10 { + padding-left: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-sm-11 { + padding: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pt-sm-11 { + padding-top: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pr-sm-11 { + padding-right: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pb-sm-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pl-sm-11 { + padding-left: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-sm-12 { + padding: 3rem !important; + } + .rz-py-sm-12, + .rz-pt-sm-12 { + padding-top: 3rem !important; + } + .rz-px-sm-12, + .rz-pr-sm-12 { + padding-right: 3rem !important; + } + .rz-py-sm-12, + .rz-pb-sm-12 { + padding-bottom: 3rem !important; + } + .rz-px-sm-12, + .rz-pl-sm-12 { + padding-left: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-end: 3rem !important; + } + .rz-m-sm-auto { + margin: auto !important; + } + .rz-my-sm-auto, + .rz-mt-sm-auto { + margin-top: auto !important; + } + .rz-mx-sm-auto, + .rz-mr-sm-auto { + margin-right: auto !important; + } + .rz-my-sm-auto, + .rz-mb-sm-auto { + margin-bottom: auto !important; + } + .rz-mx-sm-auto, + .rz-ml-sm-auto { + margin-left: auto !important; + } + .rz-ms-sm-auto { + margin-inline-start: auto !important; + } + .rz-me-sm-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1024px) { + .rz-m-md-0 { + margin: 0 !important; + } + .rz-my-md-0, + .rz-mt-md-0 { + margin-top: 0 !important; + } + .rz-mx-md-0, + .rz-mr-md-0 { + margin-right: 0 !important; + } + .rz-my-md-0, + .rz-mb-md-0 { + margin-bottom: 0 !important; + } + .rz-mx-md-0, + .rz-ml-md-0 { + margin-left: 0 !important; + } + .rz-ms-md-0 { + margin-inline-start: 0 !important; + } + .rz-ms-md-0 { + margin-inline-end: 0 !important; + } + .rz-m-md-05 { + margin: 0.125rem !important; + } + .rz-my-md-05, + .rz-mt-md-05 { + margin-top: 0.125rem !important; + } + .rz-mx-md-05, + .rz-mr-md-05 { + margin-right: 0.125rem !important; + } + .rz-my-md-05, + .rz-mb-md-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-md-05, + .rz-ml-md-05 { + margin-left: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-md-1 { + margin: 0.25rem !important; + } + .rz-my-md-1, + .rz-mt-md-1 { + margin-top: 0.25rem !important; + } + .rz-mx-md-1, + .rz-mr-md-1 { + margin-right: 0.25rem !important; + } + .rz-my-md-1, + .rz-mb-md-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-md-1, + .rz-ml-md-1 { + margin-left: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-md-2 { + margin: 0.5rem !important; + } + .rz-my-md-2, + .rz-mt-md-2 { + margin-top: 0.5rem !important; + } + .rz-mx-md-2, + .rz-mr-md-2 { + margin-right: 0.5rem !important; + } + .rz-my-md-2, + .rz-mb-md-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-md-2, + .rz-ml-md-2 { + margin-left: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-md-3 { + margin: 0.75rem !important; + } + .rz-my-md-3, + .rz-mt-md-3 { + margin-top: 0.75rem !important; + } + .rz-mx-md-3, + .rz-mr-md-3 { + margin-right: 0.75rem !important; + } + .rz-my-md-3, + .rz-mb-md-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-md-3, + .rz-ml-md-3 { + margin-left: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-md-4 { + margin: 1rem !important; + } + .rz-my-md-4, + .rz-mt-md-4 { + margin-top: 1rem !important; + } + .rz-mx-md-4, + .rz-mr-md-4 { + margin-right: 1rem !important; + } + .rz-my-md-4, + .rz-mb-md-4 { + margin-bottom: 1rem !important; + } + .rz-mx-md-4, + .rz-ml-md-4 { + margin-left: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-end: 1rem !important; + } + .rz-m-md-5 { + margin: 1.25rem !important; + } + .rz-my-md-5, + .rz-mt-md-5 { + margin-top: 1.25rem !important; + } + .rz-mx-md-5, + .rz-mr-md-5 { + margin-right: 1.25rem !important; + } + .rz-my-md-5, + .rz-mb-md-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-md-5, + .rz-ml-md-5 { + margin-left: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-md-6 { + margin: 1.5rem !important; + } + .rz-my-md-6, + .rz-mt-md-6 { + margin-top: 1.5rem !important; + } + .rz-mx-md-6, + .rz-mr-md-6 { + margin-right: 1.5rem !important; + } + .rz-my-md-6, + .rz-mb-md-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-md-6, + .rz-ml-md-6 { + margin-left: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-md-7 { + margin: 1.75rem !important; + } + .rz-my-md-7, + .rz-mt-md-7 { + margin-top: 1.75rem !important; + } + .rz-mx-md-7, + .rz-mr-md-7 { + margin-right: 1.75rem !important; + } + .rz-my-md-7, + .rz-mb-md-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-md-7, + .rz-ml-md-7 { + margin-left: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-md-8 { + margin: 2rem !important; + } + .rz-my-md-8, + .rz-mt-md-8 { + margin-top: 2rem !important; + } + .rz-mx-md-8, + .rz-mr-md-8 { + margin-right: 2rem !important; + } + .rz-my-md-8, + .rz-mb-md-8 { + margin-bottom: 2rem !important; + } + .rz-mx-md-8, + .rz-ml-md-8 { + margin-left: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-end: 2rem !important; + } + .rz-m-md-9 { + margin: 2.25rem !important; + } + .rz-my-md-9, + .rz-mt-md-9 { + margin-top: 2.25rem !important; + } + .rz-mx-md-9, + .rz-mr-md-9 { + margin-right: 2.25rem !important; + } + .rz-my-md-9, + .rz-mb-md-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-md-9, + .rz-ml-md-9 { + margin-left: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-md-10 { + margin: 2.5rem !important; + } + .rz-my-md-10, + .rz-mt-md-10 { + margin-top: 2.5rem !important; + } + .rz-mx-md-10, + .rz-mr-md-10 { + margin-right: 2.5rem !important; + } + .rz-my-md-10, + .rz-mb-md-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-md-10, + .rz-ml-md-10 { + margin-left: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-md-11 { + margin: 2.75rem !important; + } + .rz-my-md-11, + .rz-mt-md-11 { + margin-top: 2.75rem !important; + } + .rz-mx-md-11, + .rz-mr-md-11 { + margin-right: 2.75rem !important; + } + .rz-my-md-11, + .rz-mb-md-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-md-11, + .rz-ml-md-11 { + margin-left: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-md-12 { + margin: 3rem !important; + } + .rz-my-md-12, + .rz-mt-md-12 { + margin-top: 3rem !important; + } + .rz-mx-md-12, + .rz-mr-md-12 { + margin-right: 3rem !important; + } + .rz-my-md-12, + .rz-mb-md-12 { + margin-bottom: 3rem !important; + } + .rz-mx-md-12, + .rz-ml-md-12 { + margin-left: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-end: 3rem !important; + } + .rz-p-md-0 { + padding: 0 !important; + } + .rz-py-md-0, + .rz-pt-md-0 { + padding-top: 0 !important; + } + .rz-px-md-0, + .rz-pr-md-0 { + padding-right: 0 !important; + } + .rz-py-md-0, + .rz-pb-md-0 { + padding-bottom: 0 !important; + } + .rz-px-md-0, + .rz-pl-md-0 { + padding-left: 0 !important; + } + .rz-ps-md-0 { + padding-inline-start: 0 !important; + } + .rz-ps-md-0 { + padding-inline-end: 0 !important; + } + .rz-p-md-05 { + padding: 0.125rem !important; + } + .rz-py-md-05, + .rz-pt-md-05 { + padding-top: 0.125rem !important; + } + .rz-px-md-05, + .rz-pr-md-05 { + padding-right: 0.125rem !important; + } + .rz-py-md-05, + .rz-pb-md-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-md-05, + .rz-pl-md-05 { + padding-left: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-md-1 { + padding: 0.25rem !important; + } + .rz-py-md-1, + .rz-pt-md-1 { + padding-top: 0.25rem !important; + } + .rz-px-md-1, + .rz-pr-md-1 { + padding-right: 0.25rem !important; + } + .rz-py-md-1, + .rz-pb-md-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-md-1, + .rz-pl-md-1 { + padding-left: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-md-2 { + padding: 0.5rem !important; + } + .rz-py-md-2, + .rz-pt-md-2 { + padding-top: 0.5rem !important; + } + .rz-px-md-2, + .rz-pr-md-2 { + padding-right: 0.5rem !important; + } + .rz-py-md-2, + .rz-pb-md-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-md-2, + .rz-pl-md-2 { + padding-left: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-md-3 { + padding: 0.75rem !important; + } + .rz-py-md-3, + .rz-pt-md-3 { + padding-top: 0.75rem !important; + } + .rz-px-md-3, + .rz-pr-md-3 { + padding-right: 0.75rem !important; + } + .rz-py-md-3, + .rz-pb-md-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-md-3, + .rz-pl-md-3 { + padding-left: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-md-4 { + padding: 1rem !important; + } + .rz-py-md-4, + .rz-pt-md-4 { + padding-top: 1rem !important; + } + .rz-px-md-4, + .rz-pr-md-4 { + padding-right: 1rem !important; + } + .rz-py-md-4, + .rz-pb-md-4 { + padding-bottom: 1rem !important; + } + .rz-px-md-4, + .rz-pl-md-4 { + padding-left: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-end: 1rem !important; + } + .rz-p-md-5 { + padding: 1.25rem !important; + } + .rz-py-md-5, + .rz-pt-md-5 { + padding-top: 1.25rem !important; + } + .rz-px-md-5, + .rz-pr-md-5 { + padding-right: 1.25rem !important; + } + .rz-py-md-5, + .rz-pb-md-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-md-5, + .rz-pl-md-5 { + padding-left: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-md-6 { + padding: 1.5rem !important; + } + .rz-py-md-6, + .rz-pt-md-6 { + padding-top: 1.5rem !important; + } + .rz-px-md-6, + .rz-pr-md-6 { + padding-right: 1.5rem !important; + } + .rz-py-md-6, + .rz-pb-md-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-md-6, + .rz-pl-md-6 { + padding-left: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-md-7 { + padding: 1.75rem !important; + } + .rz-py-md-7, + .rz-pt-md-7 { + padding-top: 1.75rem !important; + } + .rz-px-md-7, + .rz-pr-md-7 { + padding-right: 1.75rem !important; + } + .rz-py-md-7, + .rz-pb-md-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-md-7, + .rz-pl-md-7 { + padding-left: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-md-8 { + padding: 2rem !important; + } + .rz-py-md-8, + .rz-pt-md-8 { + padding-top: 2rem !important; + } + .rz-px-md-8, + .rz-pr-md-8 { + padding-right: 2rem !important; + } + .rz-py-md-8, + .rz-pb-md-8 { + padding-bottom: 2rem !important; + } + .rz-px-md-8, + .rz-pl-md-8 { + padding-left: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-end: 2rem !important; + } + .rz-p-md-9 { + padding: 2.25rem !important; + } + .rz-py-md-9, + .rz-pt-md-9 { + padding-top: 2.25rem !important; + } + .rz-px-md-9, + .rz-pr-md-9 { + padding-right: 2.25rem !important; + } + .rz-py-md-9, + .rz-pb-md-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-md-9, + .rz-pl-md-9 { + padding-left: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-md-10 { + padding: 2.5rem !important; + } + .rz-py-md-10, + .rz-pt-md-10 { + padding-top: 2.5rem !important; + } + .rz-px-md-10, + .rz-pr-md-10 { + padding-right: 2.5rem !important; + } + .rz-py-md-10, + .rz-pb-md-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-md-10, + .rz-pl-md-10 { + padding-left: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-md-11 { + padding: 2.75rem !important; + } + .rz-py-md-11, + .rz-pt-md-11 { + padding-top: 2.75rem !important; + } + .rz-px-md-11, + .rz-pr-md-11 { + padding-right: 2.75rem !important; + } + .rz-py-md-11, + .rz-pb-md-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-md-11, + .rz-pl-md-11 { + padding-left: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-md-12 { + padding: 3rem !important; + } + .rz-py-md-12, + .rz-pt-md-12 { + padding-top: 3rem !important; + } + .rz-px-md-12, + .rz-pr-md-12 { + padding-right: 3rem !important; + } + .rz-py-md-12, + .rz-pb-md-12 { + padding-bottom: 3rem !important; + } + .rz-px-md-12, + .rz-pl-md-12 { + padding-left: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-end: 3rem !important; + } + .rz-m-md-auto { + margin: auto !important; + } + .rz-my-md-auto, + .rz-mt-md-auto { + margin-top: auto !important; + } + .rz-mx-md-auto, + .rz-mr-md-auto { + margin-right: auto !important; + } + .rz-my-md-auto, + .rz-mb-md-auto { + margin-bottom: auto !important; + } + .rz-mx-md-auto, + .rz-ml-md-auto { + margin-left: auto !important; + } + .rz-ms-md-auto { + margin-inline-start: auto !important; + } + .rz-me-md-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1280px) { + .rz-m-lg-0 { + margin: 0 !important; + } + .rz-my-lg-0, + .rz-mt-lg-0 { + margin-top: 0 !important; + } + .rz-mx-lg-0, + .rz-mr-lg-0 { + margin-right: 0 !important; + } + .rz-my-lg-0, + .rz-mb-lg-0 { + margin-bottom: 0 !important; + } + .rz-mx-lg-0, + .rz-ml-lg-0 { + margin-left: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-start: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-end: 0 !important; + } + .rz-m-lg-05 { + margin: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mt-lg-05 { + margin-top: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-mr-lg-05 { + margin-right: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mb-lg-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-ml-lg-05 { + margin-left: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-lg-1 { + margin: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mt-lg-1 { + margin-top: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-mr-lg-1 { + margin-right: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-ml-lg-1 { + margin-left: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-lg-2 { + margin: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mt-lg-2 { + margin-top: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-mr-lg-2 { + margin-right: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-ml-lg-2 { + margin-left: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-lg-3 { + margin: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mt-lg-3 { + margin-top: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-mr-lg-3 { + margin-right: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mb-lg-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-ml-lg-3 { + margin-left: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-lg-4 { + margin: 1rem !important; + } + .rz-my-lg-4, + .rz-mt-lg-4 { + margin-top: 1rem !important; + } + .rz-mx-lg-4, + .rz-mr-lg-4 { + margin-right: 1rem !important; + } + .rz-my-lg-4, + .rz-mb-lg-4 { + margin-bottom: 1rem !important; + } + .rz-mx-lg-4, + .rz-ml-lg-4 { + margin-left: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-end: 1rem !important; + } + .rz-m-lg-5 { + margin: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mt-lg-5 { + margin-top: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-mr-lg-5 { + margin-right: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mb-lg-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-ml-lg-5 { + margin-left: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-lg-6 { + margin: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mt-lg-6 { + margin-top: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-mr-lg-6 { + margin-right: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mb-lg-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-ml-lg-6 { + margin-left: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-lg-7 { + margin: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mt-lg-7 { + margin-top: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-mr-lg-7 { + margin-right: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mb-lg-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-ml-lg-7 { + margin-left: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-lg-8 { + margin: 2rem !important; + } + .rz-my-lg-8, + .rz-mt-lg-8 { + margin-top: 2rem !important; + } + .rz-mx-lg-8, + .rz-mr-lg-8 { + margin-right: 2rem !important; + } + .rz-my-lg-8, + .rz-mb-lg-8 { + margin-bottom: 2rem !important; + } + .rz-mx-lg-8, + .rz-ml-lg-8 { + margin-left: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-end: 2rem !important; + } + .rz-m-lg-9 { + margin: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mt-lg-9 { + margin-top: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-mr-lg-9 { + margin-right: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mb-lg-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-ml-lg-9 { + margin-left: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-lg-10 { + margin: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mt-lg-10 { + margin-top: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-mr-lg-10 { + margin-right: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mb-lg-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-ml-lg-10 { + margin-left: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-lg-11 { + margin: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mt-lg-11 { + margin-top: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-mr-lg-11 { + margin-right: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mb-lg-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-ml-lg-11 { + margin-left: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-lg-12 { + margin: 3rem !important; + } + .rz-my-lg-12, + .rz-mt-lg-12 { + margin-top: 3rem !important; + } + .rz-mx-lg-12, + .rz-mr-lg-12 { + margin-right: 3rem !important; + } + .rz-my-lg-12, + .rz-mb-lg-12 { + margin-bottom: 3rem !important; + } + .rz-mx-lg-12, + .rz-ml-lg-12 { + margin-left: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-end: 3rem !important; + } + .rz-p-lg-0 { + padding: 0 !important; + } + .rz-py-lg-0, + .rz-pt-lg-0 { + padding-top: 0 !important; + } + .rz-px-lg-0, + .rz-pr-lg-0 { + padding-right: 0 !important; + } + .rz-py-lg-0, + .rz-pb-lg-0 { + padding-bottom: 0 !important; + } + .rz-px-lg-0, + .rz-pl-lg-0 { + padding-left: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-start: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-end: 0 !important; + } + .rz-p-lg-05 { + padding: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pt-lg-05 { + padding-top: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pr-lg-05 { + padding-right: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pb-lg-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pl-lg-05 { + padding-left: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-lg-1 { + padding: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pt-lg-1 { + padding-top: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pr-lg-1 { + padding-right: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pl-lg-1 { + padding-left: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-lg-2 { + padding: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pt-lg-2 { + padding-top: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pr-lg-2 { + padding-right: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pl-lg-2 { + padding-left: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-lg-3 { + padding: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pt-lg-3 { + padding-top: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pr-lg-3 { + padding-right: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pb-lg-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pl-lg-3 { + padding-left: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-lg-4 { + padding: 1rem !important; + } + .rz-py-lg-4, + .rz-pt-lg-4 { + padding-top: 1rem !important; + } + .rz-px-lg-4, + .rz-pr-lg-4 { + padding-right: 1rem !important; + } + .rz-py-lg-4, + .rz-pb-lg-4 { + padding-bottom: 1rem !important; + } + .rz-px-lg-4, + .rz-pl-lg-4 { + padding-left: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-end: 1rem !important; + } + .rz-p-lg-5 { + padding: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pt-lg-5 { + padding-top: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pr-lg-5 { + padding-right: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pb-lg-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pl-lg-5 { + padding-left: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-lg-6 { + padding: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pt-lg-6 { + padding-top: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pr-lg-6 { + padding-right: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pb-lg-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pl-lg-6 { + padding-left: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-lg-7 { + padding: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pt-lg-7 { + padding-top: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pr-lg-7 { + padding-right: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pb-lg-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pl-lg-7 { + padding-left: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-lg-8 { + padding: 2rem !important; + } + .rz-py-lg-8, + .rz-pt-lg-8 { + padding-top: 2rem !important; + } + .rz-px-lg-8, + .rz-pr-lg-8 { + padding-right: 2rem !important; + } + .rz-py-lg-8, + .rz-pb-lg-8 { + padding-bottom: 2rem !important; + } + .rz-px-lg-8, + .rz-pl-lg-8 { + padding-left: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-end: 2rem !important; + } + .rz-p-lg-9 { + padding: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pt-lg-9 { + padding-top: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pr-lg-9 { + padding-right: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pb-lg-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pl-lg-9 { + padding-left: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-lg-10 { + padding: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pt-lg-10 { + padding-top: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pr-lg-10 { + padding-right: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pb-lg-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pl-lg-10 { + padding-left: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-lg-11 { + padding: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pt-lg-11 { + padding-top: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pr-lg-11 { + padding-right: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pb-lg-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pl-lg-11 { + padding-left: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-lg-12 { + padding: 3rem !important; + } + .rz-py-lg-12, + .rz-pt-lg-12 { + padding-top: 3rem !important; + } + .rz-px-lg-12, + .rz-pr-lg-12 { + padding-right: 3rem !important; + } + .rz-py-lg-12, + .rz-pb-lg-12 { + padding-bottom: 3rem !important; + } + .rz-px-lg-12, + .rz-pl-lg-12 { + padding-left: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-end: 3rem !important; + } + .rz-m-lg-auto { + margin: auto !important; + } + .rz-my-lg-auto, + .rz-mt-lg-auto { + margin-top: auto !important; + } + .rz-mx-lg-auto, + .rz-mr-lg-auto { + margin-right: auto !important; + } + .rz-my-lg-auto, + .rz-mb-lg-auto { + margin-bottom: auto !important; + } + .rz-mx-lg-auto, + .rz-ml-lg-auto { + margin-left: auto !important; + } + .rz-ms-lg-auto { + margin-inline-start: auto !important; + } + .rz-me-lg-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1920px) { + .rz-m-xl-0 { + margin: 0 !important; + } + .rz-my-xl-0, + .rz-mt-xl-0 { + margin-top: 0 !important; + } + .rz-mx-xl-0, + .rz-mr-xl-0 { + margin-right: 0 !important; + } + .rz-my-xl-0, + .rz-mb-xl-0 { + margin-bottom: 0 !important; + } + .rz-mx-xl-0, + .rz-ml-xl-0 { + margin-left: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-end: 0 !important; + } + .rz-m-xl-05 { + margin: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mt-xl-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-mr-xl-05 { + margin-right: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mb-xl-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-ml-xl-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xl-1 { + margin: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mt-xl-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-mr-xl-1 { + margin-right: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-ml-xl-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xl-2 { + margin: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mt-xl-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-mr-xl-2 { + margin-right: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-ml-xl-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xl-3 { + margin: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mt-xl-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-mr-xl-3 { + margin-right: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mb-xl-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-ml-xl-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xl-4 { + margin: 1rem !important; + } + .rz-my-xl-4, + .rz-mt-xl-4 { + margin-top: 1rem !important; + } + .rz-mx-xl-4, + .rz-mr-xl-4 { + margin-right: 1rem !important; + } + .rz-my-xl-4, + .rz-mb-xl-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xl-4, + .rz-ml-xl-4 { + margin-left: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xl-5 { + margin: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mt-xl-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-mr-xl-5 { + margin-right: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mb-xl-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-ml-xl-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xl-6 { + margin: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mt-xl-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-mr-xl-6 { + margin-right: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mb-xl-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-ml-xl-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xl-7 { + margin: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mt-xl-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-mr-xl-7 { + margin-right: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mb-xl-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-ml-xl-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xl-8 { + margin: 2rem !important; + } + .rz-my-xl-8, + .rz-mt-xl-8 { + margin-top: 2rem !important; + } + .rz-mx-xl-8, + .rz-mr-xl-8 { + margin-right: 2rem !important; + } + .rz-my-xl-8, + .rz-mb-xl-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xl-8, + .rz-ml-xl-8 { + margin-left: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xl-9 { + margin: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mt-xl-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-mr-xl-9 { + margin-right: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mb-xl-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-ml-xl-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xl-10 { + margin: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mt-xl-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-mr-xl-10 { + margin-right: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mb-xl-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-ml-xl-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xl-11 { + margin: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mt-xl-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-mr-xl-11 { + margin-right: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mb-xl-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-ml-xl-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xl-12 { + margin: 3rem !important; + } + .rz-my-xl-12, + .rz-mt-xl-12 { + margin-top: 3rem !important; + } + .rz-mx-xl-12, + .rz-mr-xl-12 { + margin-right: 3rem !important; + } + .rz-my-xl-12, + .rz-mb-xl-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xl-12, + .rz-ml-xl-12 { + margin-left: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xl-0 { + padding: 0 !important; + } + .rz-py-xl-0, + .rz-pt-xl-0 { + padding-top: 0 !important; + } + .rz-px-xl-0, + .rz-pr-xl-0 { + padding-right: 0 !important; + } + .rz-py-xl-0, + .rz-pb-xl-0 { + padding-bottom: 0 !important; + } + .rz-px-xl-0, + .rz-pl-xl-0 { + padding-left: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-end: 0 !important; + } + .rz-p-xl-05 { + padding: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pt-xl-05 { + padding-top: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pr-xl-05 { + padding-right: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pb-xl-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pl-xl-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xl-1 { + padding: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pt-xl-1 { + padding-top: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pr-xl-1 { + padding-right: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pl-xl-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xl-2 { + padding: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pt-xl-2 { + padding-top: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pr-xl-2 { + padding-right: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pl-xl-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xl-3 { + padding: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pt-xl-3 { + padding-top: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pr-xl-3 { + padding-right: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pb-xl-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pl-xl-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xl-4 { + padding: 1rem !important; + } + .rz-py-xl-4, + .rz-pt-xl-4 { + padding-top: 1rem !important; + } + .rz-px-xl-4, + .rz-pr-xl-4 { + padding-right: 1rem !important; + } + .rz-py-xl-4, + .rz-pb-xl-4 { + padding-bottom: 1rem !important; + } + .rz-px-xl-4, + .rz-pl-xl-4 { + padding-left: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xl-5 { + padding: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pt-xl-5 { + padding-top: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pr-xl-5 { + padding-right: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pb-xl-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pl-xl-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xl-6 { + padding: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pt-xl-6 { + padding-top: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pr-xl-6 { + padding-right: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pb-xl-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pl-xl-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xl-7 { + padding: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pt-xl-7 { + padding-top: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pr-xl-7 { + padding-right: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pb-xl-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pl-xl-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xl-8 { + padding: 2rem !important; + } + .rz-py-xl-8, + .rz-pt-xl-8 { + padding-top: 2rem !important; + } + .rz-px-xl-8, + .rz-pr-xl-8 { + padding-right: 2rem !important; + } + .rz-py-xl-8, + .rz-pb-xl-8 { + padding-bottom: 2rem !important; + } + .rz-px-xl-8, + .rz-pl-xl-8 { + padding-left: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xl-9 { + padding: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pt-xl-9 { + padding-top: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pr-xl-9 { + padding-right: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pb-xl-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pl-xl-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xl-10 { + padding: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pt-xl-10 { + padding-top: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pr-xl-10 { + padding-right: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pb-xl-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pl-xl-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xl-11 { + padding: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pt-xl-11 { + padding-top: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pr-xl-11 { + padding-right: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pb-xl-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pl-xl-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xl-12 { + padding: 3rem !important; + } + .rz-py-xl-12, + .rz-pt-xl-12 { + padding-top: 3rem !important; + } + .rz-px-xl-12, + .rz-pr-xl-12 { + padding-right: 3rem !important; + } + .rz-py-xl-12, + .rz-pb-xl-12 { + padding-bottom: 3rem !important; + } + .rz-px-xl-12, + .rz-pl-xl-12 { + padding-left: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xl-auto { + margin: auto !important; + } + .rz-my-xl-auto, + .rz-mt-xl-auto { + margin-top: auto !important; + } + .rz-mx-xl-auto, + .rz-mr-xl-auto { + margin-right: auto !important; + } + .rz-my-xl-auto, + .rz-mb-xl-auto { + margin-bottom: auto !important; + } + .rz-mx-xl-auto, + .rz-ml-xl-auto { + margin-left: auto !important; + } + .rz-ms-xl-auto { + margin-inline-start: auto !important; + } + .rz-me-xl-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 2560px) { + .rz-m-xx-0 { + margin: 0 !important; + } + .rz-my-xx-0, + .rz-mt-xx-0 { + margin-top: 0 !important; + } + .rz-mx-xx-0, + .rz-mr-xx-0 { + margin-right: 0 !important; + } + .rz-my-xx-0, + .rz-mb-xx-0 { + margin-bottom: 0 !important; + } + .rz-mx-xx-0, + .rz-ml-xx-0 { + margin-left: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-end: 0 !important; + } + .rz-m-xx-05 { + margin: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mt-xx-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-mr-xx-05 { + margin-right: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mb-xx-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-ml-xx-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xx-1 { + margin: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mt-xx-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-mr-xx-1 { + margin-right: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mb-xx-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-ml-xx-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xx-2 { + margin: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mt-xx-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-mr-xx-2 { + margin-right: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mb-xx-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-ml-xx-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xx-3 { + margin: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mt-xx-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-mr-xx-3 { + margin-right: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mb-xx-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-ml-xx-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xx-4 { + margin: 1rem !important; + } + .rz-my-xx-4, + .rz-mt-xx-4 { + margin-top: 1rem !important; + } + .rz-mx-xx-4, + .rz-mr-xx-4 { + margin-right: 1rem !important; + } + .rz-my-xx-4, + .rz-mb-xx-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xx-4, + .rz-ml-xx-4 { + margin-left: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xx-5 { + margin: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mt-xx-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-mr-xx-5 { + margin-right: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mb-xx-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-ml-xx-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xx-6 { + margin: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mt-xx-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-mr-xx-6 { + margin-right: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mb-xx-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-ml-xx-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xx-7 { + margin: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mt-xx-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-mr-xx-7 { + margin-right: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mb-xx-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-ml-xx-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xx-8 { + margin: 2rem !important; + } + .rz-my-xx-8, + .rz-mt-xx-8 { + margin-top: 2rem !important; + } + .rz-mx-xx-8, + .rz-mr-xx-8 { + margin-right: 2rem !important; + } + .rz-my-xx-8, + .rz-mb-xx-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xx-8, + .rz-ml-xx-8 { + margin-left: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xx-9 { + margin: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mt-xx-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-mr-xx-9 { + margin-right: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mb-xx-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-ml-xx-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xx-10 { + margin: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mt-xx-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-mr-xx-10 { + margin-right: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mb-xx-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-ml-xx-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xx-11 { + margin: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mt-xx-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-mr-xx-11 { + margin-right: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mb-xx-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-ml-xx-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xx-12 { + margin: 3rem !important; + } + .rz-my-xx-12, + .rz-mt-xx-12 { + margin-top: 3rem !important; + } + .rz-mx-xx-12, + .rz-mr-xx-12 { + margin-right: 3rem !important; + } + .rz-my-xx-12, + .rz-mb-xx-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xx-12, + .rz-ml-xx-12 { + margin-left: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xx-0 { + padding: 0 !important; + } + .rz-py-xx-0, + .rz-pt-xx-0 { + padding-top: 0 !important; + } + .rz-px-xx-0, + .rz-pr-xx-0 { + padding-right: 0 !important; + } + .rz-py-xx-0, + .rz-pb-xx-0 { + padding-bottom: 0 !important; + } + .rz-px-xx-0, + .rz-pl-xx-0 { + padding-left: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-end: 0 !important; + } + .rz-p-xx-05 { + padding: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pt-xx-05 { + padding-top: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pr-xx-05 { + padding-right: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pb-xx-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pl-xx-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xx-1 { + padding: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pt-xx-1 { + padding-top: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pr-xx-1 { + padding-right: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pb-xx-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pl-xx-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xx-2 { + padding: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pt-xx-2 { + padding-top: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pr-xx-2 { + padding-right: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pb-xx-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pl-xx-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xx-3 { + padding: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pt-xx-3 { + padding-top: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pr-xx-3 { + padding-right: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pb-xx-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pl-xx-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xx-4 { + padding: 1rem !important; + } + .rz-py-xx-4, + .rz-pt-xx-4 { + padding-top: 1rem !important; + } + .rz-px-xx-4, + .rz-pr-xx-4 { + padding-right: 1rem !important; + } + .rz-py-xx-4, + .rz-pb-xx-4 { + padding-bottom: 1rem !important; + } + .rz-px-xx-4, + .rz-pl-xx-4 { + padding-left: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xx-5 { + padding: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pt-xx-5 { + padding-top: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pr-xx-5 { + padding-right: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pb-xx-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pl-xx-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xx-6 { + padding: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pt-xx-6 { + padding-top: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pr-xx-6 { + padding-right: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pb-xx-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pl-xx-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xx-7 { + padding: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pt-xx-7 { + padding-top: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pr-xx-7 { + padding-right: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pb-xx-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pl-xx-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xx-8 { + padding: 2rem !important; + } + .rz-py-xx-8, + .rz-pt-xx-8 { + padding-top: 2rem !important; + } + .rz-px-xx-8, + .rz-pr-xx-8 { + padding-right: 2rem !important; + } + .rz-py-xx-8, + .rz-pb-xx-8 { + padding-bottom: 2rem !important; + } + .rz-px-xx-8, + .rz-pl-xx-8 { + padding-left: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xx-9 { + padding: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pt-xx-9 { + padding-top: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pr-xx-9 { + padding-right: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pb-xx-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pl-xx-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xx-10 { + padding: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pt-xx-10 { + padding-top: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pr-xx-10 { + padding-right: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pb-xx-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pl-xx-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xx-11 { + padding: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pt-xx-11 { + padding-top: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pr-xx-11 { + padding-right: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pb-xx-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pl-xx-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xx-12 { + padding: 3rem !important; + } + .rz-py-xx-12, + .rz-pt-xx-12 { + padding-top: 3rem !important; + } + .rz-px-xx-12, + .rz-pr-xx-12 { + padding-right: 3rem !important; + } + .rz-py-xx-12, + .rz-pb-xx-12 { + padding-bottom: 3rem !important; + } + .rz-px-xx-12, + .rz-pl-xx-12 { + padding-left: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xx-auto { + margin: auto !important; + } + .rz-my-xx-auto, + .rz-mt-xx-auto { + margin-top: auto !important; + } + .rz-mx-xx-auto, + .rz-mr-xx-auto { + margin-right: auto !important; + } + .rz-my-xx-auto, + .rz-mb-xx-auto { + margin-bottom: auto !important; + } + .rz-mx-xx-auto, + .rz-ml-xx-auto { + margin-left: auto !important; + } + .rz-ms-xx-auto { + margin-inline-start: auto !important; + } + .rz-me-xx-auto { + margin-inline-end: auto !important; + } +} +h1.rz-heading { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2.rz-heading { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3.rz-heading { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4.rz-heading { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5.rz-heading { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +.rz-text-display-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h1-font-size); + line-height: var(--rz-text-display-h1-line-height); + font-weight: var(--rz-text-display-h1-font-weight); + letter-spacing: var(--rz-text-display-h1-letter-spacing); + color: var(--rz-text-display-h1-color); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); +} + +.rz-text-display-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h2-font-size); + line-height: var(--rz-text-display-h2-line-height); + font-weight: var(--rz-text-display-h2-font-weight); + letter-spacing: var(--rz-text-display-h2-letter-spacing); + color: var(--rz-text-display-h2-color); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); +} + +.rz-text-display-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h3-font-size); + line-height: var(--rz-text-display-h3-line-height); + font-weight: var(--rz-text-display-h3-font-weight); + letter-spacing: var(--rz-text-display-h3-letter-spacing); + color: var(--rz-text-display-h3-color); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); +} + +.rz-text-display-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h4-font-size); + line-height: var(--rz-text-display-h4-line-height); + font-weight: var(--rz-text-display-h4-font-weight); + letter-spacing: var(--rz-text-display-h4-letter-spacing); + color: var(--rz-text-display-h4-color); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); +} + +.rz-text-display-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h5-font-size); + line-height: var(--rz-text-display-h5-line-height); + font-weight: var(--rz-text-display-h5-font-weight); + letter-spacing: var(--rz-text-display-h5-letter-spacing); + color: var(--rz-text-display-h5-color); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); +} + +.rz-text-display-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h6-font-size); + line-height: var(--rz-text-display-h6-line-height); + font-weight: var(--rz-text-display-h6-font-weight); + letter-spacing: var(--rz-text-display-h6-letter-spacing); + color: var(--rz-text-display-h6-color); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); +} + +.rz-text-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h1-font-size); + line-height: var(--rz-text-h1-line-height); + font-weight: var(--rz-text-h1-font-weight); + letter-spacing: var(--rz-text-h1-letter-spacing); + color: var(--rz-text-h1-color); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); +} + +.rz-text-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h2-font-size); + line-height: var(--rz-text-h2-line-height); + font-weight: var(--rz-text-h2-font-weight); + letter-spacing: var(--rz-text-h2-letter-spacing); + color: var(--rz-text-h2-color); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); +} + +.rz-text-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h3-font-size); + line-height: var(--rz-text-h3-line-height); + font-weight: var(--rz-text-h3-font-weight); + letter-spacing: var(--rz-text-h3-letter-spacing); + color: var(--rz-text-h3-color); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); +} + +.rz-text-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h4-font-size); + line-height: var(--rz-text-h4-line-height); + font-weight: var(--rz-text-h4-font-weight); + letter-spacing: var(--rz-text-h4-letter-spacing); + color: var(--rz-text-h4-color); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); +} + +.rz-text-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h5-font-size); + line-height: var(--rz-text-h5-line-height); + font-weight: var(--rz-text-h5-font-weight); + letter-spacing: var(--rz-text-h5-letter-spacing); + color: var(--rz-text-h5-color); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); +} + +.rz-text-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-text-h6-color); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); +} + +.rz-text-subtitle1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle1-font-size); + line-height: var(--rz-text-subtitle1-line-height); + font-weight: var(--rz-text-subtitle1-font-weight); + letter-spacing: var(--rz-text-subtitle1-letter-spacing); + color: var(--rz-text-subtitle1-color); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); +} + +.rz-text-subtitle2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle2-font-size); + line-height: var(--rz-text-subtitle2-line-height); + font-weight: var(--rz-text-subtitle2-font-weight); + letter-spacing: var(--rz-text-subtitle2-letter-spacing); + color: var(--rz-text-subtitle2-color); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); +} + +.rz-text-body1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body1-font-size); + line-height: var(--rz-text-body1-line-height); + font-weight: var(--rz-text-body1-font-weight); + letter-spacing: var(--rz-text-body1-letter-spacing); + color: var(--rz-text-body1-color); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); +} + +.rz-text-body2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body2-font-size); + line-height: var(--rz-text-body2-line-height); + font-weight: var(--rz-text-body2-font-weight); + letter-spacing: var(--rz-text-body2-letter-spacing); + color: var(--rz-text-body2-color); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); +} + +.rz-text-button { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-button-font-size); + line-height: var(--rz-text-button-line-height); + font-weight: var(--rz-text-button-font-weight); + letter-spacing: var(--rz-text-button-letter-spacing); + color: var(--rz-text-button-color); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); +} + +.rz-text-caption { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-caption-font-size); + line-height: var(--rz-text-caption-line-height); + font-weight: var(--rz-text-caption-font-weight); + letter-spacing: var(--rz-text-caption-letter-spacing); + color: var(--rz-text-caption-color); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); +} + +.rz-text-overline { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-overline-font-size); + line-height: var(--rz-text-overline-line-height); + font-weight: var(--rz-text-overline-font-weight); + letter-spacing: var(--rz-text-overline-letter-spacing); + text-transform: var(--rz-text-overline-text-transform); + color: var(--rz-text-overline-color); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); +} + +.rz-text-align-start { + text-align: start; +} + +.rz-text-align-end { + text-align: end; +} + +.rz-text-align-left { + text-align: left; +} + +.rz-text-align-right { + text-align: right; +} + +.rz-text-align-center { + text-align: center; +} + +.rz-text-align-justify { + text-align: justify; +} + +.rz-text-align-justify-all { + text-align: justify-all; +} + +.rz-text-align-match-parent { + text-align: match-parent; +} + +@media (min-width: 576px) { + .rz-text-align-xs-start { + text-align: start !important; + } + .rz-text-align-xs-end { + text-align: end !important; + } + .rz-text-align-xs-left { + text-align: left !important; + } + .rz-text-align-xs-right { + text-align: right !important; + } + .rz-text-align-xs-center { + text-align: center !important; + } + .rz-text-align-xs-justify { + text-align: justify !important; + } + .rz-text-align-xs-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xs-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 768px) { + .rz-text-align-sm-start { + text-align: start !important; + } + .rz-text-align-sm-end { + text-align: end !important; + } + .rz-text-align-sm-left { + text-align: left !important; + } + .rz-text-align-sm-right { + text-align: right !important; + } + .rz-text-align-sm-center { + text-align: center !important; + } + .rz-text-align-sm-justify { + text-align: justify !important; + } + .rz-text-align-sm-justify-all { + text-align: justify-all !important; + } + .rz-text-align-sm-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1024px) { + .rz-text-align-md-start { + text-align: start !important; + } + .rz-text-align-md-end { + text-align: end !important; + } + .rz-text-align-md-left { + text-align: left !important; + } + .rz-text-align-md-right { + text-align: right !important; + } + .rz-text-align-md-center { + text-align: center !important; + } + .rz-text-align-md-justify { + text-align: justify !important; + } + .rz-text-align-md-justify-all { + text-align: justify-all !important; + } + .rz-text-align-md-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1280px) { + .rz-text-align-lg-start { + text-align: start !important; + } + .rz-text-align-lg-end { + text-align: end !important; + } + .rz-text-align-lg-left { + text-align: left !important; + } + .rz-text-align-lg-right { + text-align: right !important; + } + .rz-text-align-lg-center { + text-align: center !important; + } + .rz-text-align-lg-justify { + text-align: justify !important; + } + .rz-text-align-lg-justify-all { + text-align: justify-all !important; + } + .rz-text-align-lg-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1920px) { + .rz-text-align-xl-start { + text-align: start !important; + } + .rz-text-align-xl-end { + text-align: end !important; + } + .rz-text-align-xl-left { + text-align: left !important; + } + .rz-text-align-xl-right { + text-align: right !important; + } + .rz-text-align-xl-center { + text-align: center !important; + } + .rz-text-align-xl-justify { + text-align: justify !important; + } + .rz-text-align-xl-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xl-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 2560px) { + .rz-text-align-xx-start { + text-align: start !important; + } + .rz-text-align-xx-end { + text-align: end !important; + } + .rz-text-align-xx-left { + text-align: left !important; + } + .rz-text-align-xx-right { + text-align: right !important; + } + .rz-text-align-xx-center { + text-align: center !important; + } + .rz-text-align-xx-justify { + text-align: justify !important; + } + .rz-text-align-xx-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xx-match-parent { + text-align: match-parent !important; + } +} +.rz-text-wrap { + white-space: normal !important; +} + +.rz-text-nowrap { + white-space: nowrap !important; +} + +.rz-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rz-text-capitalize { + text-transform: capitalize; +} + +.rz-text-uppercase { + text-transform: uppercase; +} + +.rz-text-lowercase { + text-transform: lowercase; +} + +.rz-label { + vertical-align: middle; + margin-block-start: 0; + margin-block-end: 0; +} + +.rz-form .row .rz-label { + min-height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; + border-top: var(--rz-input-border); + border-bottom: var(--rz-input-border); + border-color: transparent; +} + +.rz-layout ::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; + font-family: var(--rz-icon-font-family); + font-weight: var(--rz-icon-weight, inherit); + font-style: normal; + font-size: var(--rz-icon-size); + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: "liga"; +} + +i.rzi { + display: inline-flex; + justify-content: center; + align-items: center; +} + +.rzi-primary { + color: var(--rz-primary); +} + +.rzi-secondary { + color: var(--rz-secondary); +} + +.rzi-info { + color: var(--rz-info); +} + +.rzi-warning { + color: var(--rz-warning); +} + +.rzi-error { + color: var(--rz-danger); +} + +.rzi-danger { + color: var(--rz-danger); +} + +.rzi-success { + color: var(--rz-success); +} + +.rzi-base { + color: var(--rz-base-700); +} + +.rzi-light { + color: var(--rz-base-700); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + +.rz-helper-hidden-accessible { + opacity: 0; + height: 0; +} +.rz-helper-hidden-accessible input { + height: 0; + padding: 0; + margin: 0; + border: 0; +} + +.rz-helper-hidden { + display: none; +} + +.rz-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; +} + +.rz-pager-element, .rz-button { + box-sizing: border-box; + display: inline-block; + margin: 0; + color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; + border: none; + border-radius: var(--rz-button-border-radius); + outline: none; + box-shadow: var(--rz-button-shadow); + font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); + text-decoration: none; + transition: var(--rz-button-transition); + -webkit-appearance: none; +} +.rz-pager-element:focus, .rz-button:focus { + outline: var(--rz-outline-normal); +} +.rz-pager-element:focus-visible, .rz-button:focus-visible { + outline: var(--rz-button-focus-outline); + outline-offset: var(--rz-button-focus-outline-offset); +} +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { + cursor: pointer; +} +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { + text-decoration: none; + background-image: var(--rz-button-hover-gradient); + background-size: var(--rz-button-hover-background-size); + box-shadow: var(--rz-button-hover-shadow); +} +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { + text-decoration: none; + background-image: var(--rz-button-focus-gradient); + background-size: var(--rz-button-focus-background-size); + box-shadow: var(--rz-button-focus-shadow); +} +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { + text-decoration: none; + background-image: var(--rz-button-active-gradient); + background-size: var(--rz-button-active-background-size); + box-shadow: var(--rz-button-active-shadow); +} +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { + opacity: var(--rz-button-disabled-opacity); + cursor: initial; +} +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { + opacity: var(--rz-button-empty-opacity); + cursor: initial; +} +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: var(--rz-button-vertical-align); + line-height: var(--rz-button-line-height); +} +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { + vertical-align: var(--rz-button-vertical-align); +} +.rz-pager-element .rzi, .rz-button .rzi { + vertical-align: var(--rz-button-vertical-align); +} + +.rz-button.rz-primary:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-button.rz-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-button.rz-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-button.rz-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} +.rz-button.rz-primary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-button.rz-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-button.rz-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-button.rz-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} +.rz-button.rz-secondary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-secondary.rz-variant-flat:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-button.rz-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-button.rz-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-button.rz-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} +.rz-button.rz-info.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-info.rz-variant-flat:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-button.rz-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-button.rz-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-button.rz-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} +.rz-button.rz-warning.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-warning.rz-variant-flat:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-button.rz-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-button.rz-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-button.rz-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-button.rz-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} +.rz-button.rz-error.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-error.rz-variant-flat:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-button.rz-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-button.rz-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-secondary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-info { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} +.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-warning { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-error { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} +.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-danger { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-success { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} +.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-base { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-light { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-dark { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; +} + +.rz-button.rz-variant-text.rz-primary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-secondary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-info { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-button.rz-variant-text.rz-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-button.rz-variant-text.rz-info.rz-shade-default { + color: var(--rz-info); +} +.rz-button.rz-variant-text.rz-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-button.rz-variant-text.rz-info.rz-shade-darker { + color: var(--rz-info-darker); +} +.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-warning { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-error { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-button.rz-variant-text.rz-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-button.rz-variant-text.rz-error.rz-shade-default { + color: var(--rz-error); +} +.rz-button.rz-variant-text.rz-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-button.rz-variant-text.rz-error.rz-shade-darker { + color: var(--rz-error-darker); +} +.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-danger { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-success { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-button.rz-variant-text.rz-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-button.rz-variant-text.rz-success.rz-shade-default { + color: var(--rz-success); +} +.rz-button.rz-variant-text.rz-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-button.rz-variant-text.rz-success.rz-shade-darker { + color: var(--rz-success-darker); +} +.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-text-contrast-color); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button-lg { + padding: 0.875rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3.25rem; + min-width: 3.25rem; + border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; +} +.rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { + padding: 0.875rem; +} +.rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-pager-element, .rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; +} +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { + padding: 0.5rem 1rem 0.5rem 0.5rem; +} +.rz-pager-element, .rz-button-md.rz-button-icon-only { + padding: 0.5rem; +} +.rz-pager-element .rzi, .rz-button-md .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { + padding: 0.25rem 0.75rem; + height: auto; + line-height: 1.25rem; + min-height: 1.75rem; + min-width: 1.75rem; + font-size: var(--rz-body-font-size); +} +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { + padding: 0.25rem 0.75rem 0.25rem 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { + padding: 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-button-xs { + padding: 0.125rem 0.25rem; + height: auto; + line-height: 1rem; + min-height: 1.25rem; + min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; +} +.rz-button-xs .rz-button-box { + line-height: 1rem; + gap: 0.125rem; +} +.rz-button-xs.rz-button-icon-left { + padding: 0.125rem 0.5rem 0.125rem 0.125rem; +} +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { + padding: 0.125rem; +} +.rz-button-xs .rzi { + font-size: calc(0.8 * var(--rz-icon-size)); + line-height: calc(0.8 * var(--rz-icon-size)); + width: calc(0.8 * var(--rz-icon-size)); + height: calc(0.8 * var(--rz-icon-size)); +} + +@keyframes button-icon-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.rz-badge { + box-sizing: border-box; + color: var(--rz-text-contrast-color); + display: inline-block; + padding: var(--rz-badge-padding); + font-size: var(--rz-badge-font-size); + font-weight: var(--rz-badge-font-weight); + line-height: var(--rz-badge-line-height); + text-align: center; + text-transform: var(--rz-badge-text-transform); + white-space: nowrap; + border-radius: var(--rz-badge-border-radius); + letter-spacing: var(--rz-badge-letter-spacing); +} +.rz-button .rz-badge { + vertical-align: top; +} + +.rz-badge-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-badge-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-badge-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-badge-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} + +.rz-badge-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-badge-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-badge-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-badge-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} + +.rz-badge-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-badge-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-badge-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-badge-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} + +.rz-badge-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-badge-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-badge-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-badge-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} + +.rz-badge-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-badge-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-badge-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-badge-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-badge-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} + +.rz-badge-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-badge-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-badge-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-badge-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} + +.rz-badge-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-badge-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-badge-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-badge-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} + +.rz-badge-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-variant-outlined.rz-badge-primary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} + +.rz-variant-outlined.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-lighter); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} + +.rz-variant-outlined.rz-badge-info { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-lighter); +} +.rz-variant-outlined.rz-badge-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-variant-outlined.rz-badge-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-variant-outlined.rz-badge-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-variant-outlined.rz-badge-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} + +.rz-variant-outlined.rz-badge-warning { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-lighter); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} + +.rz-variant-outlined.rz-badge-error { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-lighter); +} +.rz-variant-outlined.rz-badge-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-variant-outlined.rz-badge-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-variant-outlined.rz-badge-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-variant-outlined.rz-badge-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} + +.rz-variant-outlined.rz-badge-danger { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-lighter); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} + +.rz-variant-outlined.rz-badge-success { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-lighter); +} +.rz-variant-outlined.rz-badge-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-variant-outlined.rz-badge-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-variant-outlined.rz-badge-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-variant-outlined.rz-badge-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} + +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-700); + color: var(--rz-base-700); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + +.rz-variant-text.rz-badge-primary { + background-color: transparent; +} +.rz-variant-text.rz-badge-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-variant-text.rz-badge-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-variant-text.rz-badge-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-variant-text.rz-badge-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-variant-text.rz-badge-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} + +.rz-variant-text.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-text.rz-badge-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-variant-text.rz-badge-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-variant-text.rz-badge-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-variant-text.rz-badge-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-variant-text.rz-badge-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} + +.rz-variant-text.rz-badge-info { + background-color: transparent; +} +.rz-variant-text.rz-badge-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-variant-text.rz-badge-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-variant-text.rz-badge-info.rz-shade-default { + color: var(--rz-info); +} +.rz-variant-text.rz-badge-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-variant-text.rz-badge-info.rz-shade-darker { + color: var(--rz-info-darker); +} + +.rz-variant-text.rz-badge-warning { + background-color: transparent; +} +.rz-variant-text.rz-badge-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-variant-text.rz-badge-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-variant-text.rz-badge-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-variant-text.rz-badge-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-variant-text.rz-badge-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} + +.rz-variant-text.rz-badge-error { + background-color: transparent; +} +.rz-variant-text.rz-badge-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-variant-text.rz-badge-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-variant-text.rz-badge-error.rz-shade-default { + color: var(--rz-error); +} +.rz-variant-text.rz-badge-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-variant-text.rz-badge-error.rz-shade-darker { + color: var(--rz-error-darker); +} + +.rz-variant-text.rz-badge-danger { + background-color: transparent; +} +.rz-variant-text.rz-badge-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-variant-text.rz-badge-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-variant-text.rz-badge-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-variant-text.rz-badge-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-variant-text.rz-badge-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} + +.rz-variant-text.rz-badge-success { + background-color: transparent; +} +.rz-variant-text.rz-badge-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-variant-text.rz-badge-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-variant-text.rz-badge-success.rz-shade-default { + color: var(--rz-success); +} +.rz-variant-text.rz-badge-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-variant-text.rz-badge-success.rz-shade-darker { + color: var(--rz-success-darker); +} + +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-700); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + +.rz-badge-pill { + border-radius: var(--rz-badge-pill-border-radius); + padding: var(--rz-badge-pill-padding); +} + +.rz-dropzone { + user-select: none; +} + +.rz-dropzone-item { + user-select: none; + cursor: grab; +} + +.rz-dragging { + cursor: grabbing; +} + +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { + box-shadow: var(--rz-input-hover-shadow); + border: var(--rz-input-hover-border); +} + +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { + box-shadow: var(--rz-input-focus-shadow); + border: var(--rz-input-focus-border); + outline: var(--rz-input-focus-outline); + outline-offset: var(--rz-input-focus-outline-offset); +} + +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { + background-color: var(--rz-input-disabled-background-color); + color: var(--rz-input-disabled-color); + border: none; +} + +input { + color: var(--rz-input-value-color); + font-size: var(--rz-input-font-size); +} +input::placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); +} + +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + color: var(--rz-input-value-color); + font-family: inherit; + font-size: var(--rz-input-font-size); + transition: var(--rz-input-transition); + outline: none; +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + box-shadow: none; + background-color: transparent; + outline: none; + border: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus-within { + border: none; + box-shadow: none; +} + +.rz-header { + background-color: var(--rz-header-background-color); + min-height: var(--rz-header-min-height); + border-bottom: var(--rz-header-border); + color: var(--rz-header-color); + box-shadow: var(--rz-header-shadow); +} +.rz-header.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--rz-header-z); +} +.rz-header a { + text-decoration: none; +} + +.rz-footer { + padding: var(--rz-footer-padding); + border-top: var(--rz-footer-border); + background-color: var(--rz-footer-background-color); + color: var(--rz-footer-color); +} +.rz-footer.fixed { + position: fixed; + z-index: var(--rz-footer-z); + bottom: 0; + left: 0; + right: 0; +} + +.rz-sidebar { + background-color: var(--rz-sidebar-background-color); + color: var(--rz-sidebar-color); + border-inline-end: var(--rz-sidebar-border-inline-end); + position: fixed; + overflow: auto; + left: 0; + top: 0; + bottom: 0; + z-index: var(--rz-sidebar-z); + width: var(--rz-sidebar-width); + opacity: 1; + transition: width var(--rz-transition), opacity var(--rz-transition); +} + +@media (max-width: 768px) { + .rz-sidebar-responsive { + width: 0; + opacity: 0; + } +} +.rz-sidebar-expanded { + width: var(--rz-sidebar-width); + opacity: 1; +} + +.rz-sidebar-collapsed { + width: 0 !important; + opacity: 0; +} + +.rz-card { + box-sizing: border-box; + padding: var(--rz-card-padding); + border-radius: var(--rz-card-border-radius); + background-color: var(--rz-card-background-color); +} +.rz-card.rz-variant-filled { + box-shadow: var(--rz-card-shadow); +} +.rz-card.rz-variant-flat { + background-color: var(--rz-card-flat-background-color); +} +.rz-card.rz-variant-outlined { + background: transparent; + border: var(--rz-card-border); +} +.rz-card.rz-variant-text { + background: transparent; +} +.rz-card h1, +.rz-card h2, +.rz-card h3, +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + +.rz-accordion { + box-sizing: border-box; + border-radius: var(--rz-accordion-border-radius); + box-shadow: var(--rz-accordion-shadow); +} +.rz-accordion > div:first-child { + border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; +} +.rz-accordion > div:last-child, .rz-accordion > div:last-child > div { + border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); +} +.rz-accordion > div:only-child { + border-radius: var(--rz-accordion-border-radius); +} +.rz-accordion:focus { + outline: var(--rz-outline-normal); +} +.rz-accordion:focus-visible { + outline: var(--rz-accordion-item-focus-outline); +} +.rz-accordion .rz-accordion-header { + background-color: var(--rz-accordion-item-background-color); + margin: var(--rz-accordion-item-margin); +} +.rz-accordion .rz-accordion-header:not(:first-child) { + border-top: var(--rz-accordion-item-border); +} +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); + color: var(--rz-accordion-item-color); + line-height: var(--rz-accordion-item-line-height); + text-decoration: none; + display: flex; + align-items: center; + font-size: var(--rz-accordion-item-font-size); + font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; +} +.rz-accordion .rz-accordion-header > a:hover { + color: var(--rz-accordion-hover-color); +} +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { + flex-grow: 1; +} +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { + outline: var(--rz-accordion-item-focus-outline); + outline-offset: var(--rz-accordion-item-focus-outline-offset); +} +.rz-accordion .rz-accordion-header .rzi { + font-size: var(--rz-accordion-icon-font-size); + margin-inline: var(--rz-accordion-icon-margin-inline); +} + +.rz-accordion-toggle-icon { + width: var(--rz-accordion-icon-width); + height: var(--rz-accordion-icon-height); + font-size: var(--rz-accordion-icon-font-size); + order: var(--rz-accordion-toggle-icon-order); +} +.rz-accordion-toggle-icon.rzi { + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); +} +.rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_right"; +} +.rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-accordion-content-wrapper-overflown { + overflow: hidden; +} + +.rz-accordion-content { + font-size: var(--rz-accordion-content-font-size); + background-color: var(--rz-accordion-item-background-color); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); +} + +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); + background: var(--rz-panel-background-color); + border-radius: var(--rz-panel-border-radius); + box-shadow: var(--rz-panel-shadow); +} + +.rz-panel-titlebar { + display: flex; + justify-content: space-between; +} + +.rz-panel-content { + margin: var(--rz-panel-content-margin); +} + +.rz-panel-content-wrapper[aria-hidden=true] { + display: none; +} + +.rz-panel-title { + line-height: var(--rz-panel-title-line-height); + font-weight: var(--rz-panel-title-font-weight); +} + +.rz-panel-titlebar-toggler { + width: var(--rz-panel-toggle-icon-width); + height: var(--rz-panel-toggle-icon-height); + font-size: var(--rz-panel-toggle-icon-font-size); + border-radius: var(--rz-panel-toggle-icon-border-radius); + background-color: var(--rz-panel-toggle-icon-background-color); + color: inherit; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} +.rz-panel-titlebar-toggler:hover { + text-decoration: none; + color: var(--rz-panel-hover-color); +} +.rz-panel-titlebar-toggler:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-titlebar-toggler:focus-visible { + outline: var(--rz-panel-toggle-icon-focus-outline); + outline-offset: var(--rz-panel-toggle-icon-focus-outline-offset); +} +.rz-panel-titlebar-toggler .rzi-minus:before { + content: "remove"; +} +.rz-panel-titlebar-toggler .rzi-plus:before { + content: "add"; +} + +.rz-sidebar-toggle { + appearance: none; + cursor: pointer; + border: none; + padding: var(--rz-sidebar-toggle-padding); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); + background-color: var(--rz-sidebar-toggle-background-color); + color: var(--rz-sidebar-toggle-color); +} +.rz-justify-content-flex-end .rz-sidebar-toggle { + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; +} +.rz-sidebar-toggle:focus { + outline: none; +} +.rz-sidebar-toggle:focus-visible { + outline: var(--rz-sidebar-toggle-focus-outline); + outline-offset: var(--rz-sidebar-toggle-focus-outline-offset); +} +.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover { + color: var(--rz-sidebar-toggle-hover-color); + background: var(--rz-sidebar-toggle-hover-background-color); + border-radius: var(--rz-sidebar-toggle-hover-border-radius); +} +.rz-sidebar-toggle .rzi { + width: var(--rz-sidebar-toggle-icon-width); + height: var(--rz-sidebar-toggle-icon-height); + font-size: var(--rz-sidebar-toggle-icon-width); +} + +.rz-navigation-item-link { + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.rz-navigation-item-link:hover { + text-decoration: none; +} + +.rz-navigation-item-text { + flex: auto; +} + +.rz-context-menu { + box-sizing: border-box; +} +.rz-context-menu .rz-menu { + flex-direction: column; +} + +.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { + box-shadow: var(--rz-context-menu-box-shadow); + border: var(--rz-menu-border); + border-radius: var(--rz-menu-border-radius); +} + +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + align-items: stretch; + background-color: var(--rz-menu-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + background-color: var(--rz-menu-top-item-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-top-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-top-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-top-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu):focus { + outline: var(--rz-outline-normal); +} +.rz-menu:not(.rz-profile-menu):focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-menu-item-focus-outline); + outline-offset: var(--rz-menu-item-focus-outline-offset); +} +.rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-end: -2px; + height: 1px; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: var(--rz-menu-top-item-selected-color); + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item { + position: relative; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + margin: 0; + min-width: 100%; + box-shadow: var(--rz-context-menu-box-shadow); + z-index: 3; + border-radius: var(--rz-menu-border-radius); + background-color: var(--rz-menu-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu { + position: static; + box-shadow: none; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + margin-inline-start: var(--rz-menu-item-offset); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); +} +.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { + margin-inline: var(--rz-menu-item-icon-margin-inline); +} + +.rz-navigation-item-wrapper, +.rz-navigation-item-link, +.rz-navigation-item-text { + transition: var(--rz-menu-item-transition); +} + +li.rz-navigation-item.rz-state-disabled { + opacity: var(--rz-menu-item-disabled-opacity); + cursor: initial; + pointer-events: none; +} + +.rz-menu-toggle-item { + display: none; + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); + justify-content: end; + align-items: center; + width: 100%; + height: 100%; +} + +.rz-menu-toggle { + appearance: none; + background-color: transparent; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: var(--rz-menu-top-item-color); +} +.rz-menu-toggle:hover { + background-color: transparent; + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu-toggle:active { + background-color: transparent; + color: var(--rz-menu-top-item-color); +} +.rz-context-menu .rz-menu-toggle { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu-toggle:hover { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu-toggle:active { + color: var(--rz-menu-item-color); +} + +@media (max-width: 768px) { + .rz-menu:not(.rz-profile-menu).rz-menu-closed .rz-navigation-item { + display: none; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle .rzi { + margin: 0; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open { + display: block; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-item { + background-color: inherit; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-menu { + position: static; + box-shadow: none; + border-radius: 0; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item { + display: flex; + } + .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active:before { + display: none !important; + } +} +.rz-panel-menu { + box-sizing: border-box; + list-style: none; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; + overflow: auto; + font-size: var(--rz-panel-menu-font-size); + font-weight: var(--rz-panel-menu-font-weight); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ +} +.rz-panel-menu:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-panel-menu-focus-outline); + outline-offset: var(--rz-panel-menu-focus-outline-offset); +} +.rz-panel-menu > .rz-navigation-item { + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); +} +.rz-panel-menu .rz-navigation-item { + border-block-end: var(--rz-panel-menu-item-border); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper { + position: relative; + line-height: var(--rz-panel-menu-item-line-height); + transition: var(--rz-panel-menu-item-transition); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-active-background-color); + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-active:before, +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-start: 0; + inset-block-end: 0; + width: 4px; + background-color: var(--rz-panel-menu-item-active-indicator); +} +.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); + color: inherit; + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu a.rz-navigation-item-link { + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu .rz-navigation-item-text { + flex: auto; +} +.rz-panel-menu .rz-navigation-item-icon-children { + margin-inline-start: auto; + font-size: var(--rz-panel-menu-toggle-icon-font-size); + opacity: var(--rz-panel-menu-toggle-icon-opacity); + z-index: 1; +} +.rz-panel-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-height); + width: var(--rz-panel-menu-icon-width); + color: var(--rz-panel-menu-icon-color); + margin-inline: var(--rz-panel-menu-icon-margin-inline); + font-size: var(--rz-panel-menu-icon-font-size); + transition: var(--rz-panel-menu-item-transition); +} +.rz-panel-menu .rz-navigation-menu { + list-style: none; + padding: 0; + margin-block-end: 0; + overflow: hidden; + /* Third level items */ +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); + border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color); + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-2nd-level-active-background-color); + color: var(--rz-panel-menu-item-2nd-level-active-color); + font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-active-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-2nd-level-icon-size); + width: var(--rz-panel-menu-icon-2nd-level-icon-size); + font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu { + margin: 0; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); + color: var(--rz-panel-menu-item-3rd-level-active-color); +} + +ul.rz-profile-menu { + box-sizing: border-box; + list-style: none; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); + display: inline-block; + background-color: var(--rz-profile-menu-top-item-background-color); + border-inline-start: var(--rz-profile-menu-border); + position: relative; + z-index: 3; +} +ul.rz-profile-menu:focus { + outline: var(--rz-outline-normal); +} +ul.rz-profile-menu:focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +ul.rz-profile-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-profile-menu-item-focus-outline); + outline-offset: var(--rz-profile-menu-item-focus-outline-offset); +} +ul.rz-profile-menu .rz-navigation-item-icon-children { + color: var(--rz-profile-menu-toggle-button-color); +} +ul.rz-profile-menu .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + border-radius: var(--rz-profile-menu-border-radius); + background-color: var(--rz-profile-menu-background-color); + box-shadow: var(--rz-context-menu-box-shadow); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; + min-width: 100%; + white-space: nowrap; +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-profile-menu-item-hover-background-color); + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link, +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text { + color: var(--rz-menu-item-color); +} +ul.rz-profile-menu .rz-navigation-menu .rzi { + width: var(--rz-profile-menu-item-icon-width); + height: var(--rz-profile-menu-item-icon-height); + font-size: var(--rz-profile-menu-item-icon-font-size); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); +} + +.rz-gravatar { + box-sizing: border-box; + width: var(--rz-gravatar-width); + height: var(--rz-gravatar-height); + display: inline-block; + border-radius: var(--rz-gravatar-border-radius); + box-shadow: var(--rz-gravatar-box-shadow); +} + +.rz-steps { + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.rz-steps .rz-widget-content { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.rz-steps ul { + list-style: none; + padding: 0; +} +.rz-steps .rz-menuitem-link { + display: inline-flex; + align-items: center; + color: var(--rz-steps-color); + cursor: pointer; + text-decoration: none; +} +.rz-steps .rz-menuitem-link:hover { + text-decoration: none; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps .rz-state-disabled .rz-menuitem-link { + color: var(--rz-text-disabled-color); + cursor: default; +} +.rz-steps .rz-state-disabled .rz-menuitem-link:hover { + color: var(--rz-text-disabled-color) !important; +} +.rz-steps .rz-state-highlight .rz-steps-title { + color: var(--rz-steps-title-selected-color); +} +.rz-steps .rz-state-highlight .rz-steps-number { + background: var(--rz-steps-number-selected-background); + color: var(--rz-steps-number-selected-color); +} + +.rz-steps-item { + display: inline-block; +} +.rz-steps-item:focus { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible .rz-steps-number { + outline: var(--rz-steps-number-focus-outline); + outline-offset: var(--rz-steps-number-focus-outline-offset); +} + +.rz-steps-title { + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); +} + +.rz-steps-number { + text-align: center; + line-height: var(--rz-steps-number-line-height); + color: var(--rz-steps-number-color); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); + width: var(--rz-steps-number-width); + height: var(--rz-steps-number-height); + background-color: var(--rz-steps-number-background-color); + border-radius: var(--rz-steps-number-border-radius); +} + +.rz-steps-buttons { + display: flex; + justify-content: space-between; + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); +} + +.rz-steps-next, +.rz-steps-prev { + display: inline-flex; + align-items: center; + color: var(--rz-steps-button-color) !important; + text-decoration: none; +} +.rz-steps-next:not(.rz-state-disabled):hover, +.rz-steps-prev:not(.rz-state-disabled):hover { + cursor: pointer; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps-next:hover, +.rz-steps-prev:hover { + text-decoration: none; +} +.rz-steps-next.rz-state-disabled, +.rz-steps-prev.rz-state-disabled { + opacity: 0.5 !important; +} + +.rz-steps-prev .rzi:before { + content: "navigate_before"; +} + +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; +} + +.rz-checkbox-list-vertical { + box-sizing: border-box; +} +.rz-checkbox-list-vertical .rz-checkbox { + display: flex; + align-items: center; + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); + cursor: pointer; +} + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} +.rz-checkbox-list-horizontal .rz-checkbox { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-checkbox { + cursor: initial; +} + +.rz-chkbox-label, +.rz-chkbox-template { + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); +} + +.rz-chkbox { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + width: var(--rz-checkbox-width); + min-width: var(--rz-checkbox-width); + height: var(--rz-checkbox-height); +} +.rz-chkbox:focus { + outline: var(--rz-outline-normal); +} +.rz-chkbox:focus-visible .rz-chkbox-box { + outline: var(--rz-checkbox-focus-outline); + outline-offset: var(--rz-checkbox-focus-outline-offset); +} + +.rz-chkbox-box { + position: absolute; + cursor: pointer; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: var(--rz-input-border); + border-width: var(--rz-checkbox-border-width); + border-radius: var(--rz-checkbox-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-chkbox-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-checkbox-border-width); +} +.rz-chkbox-box.rz-state-disabled { + cursor: initial; + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-checkbox-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-chkbox-box .rzi { + width: var(--rz-checkbox-icon-width); + height: var(--rz-checkbox-icon-height); + font-size: var(--rz-checkbox-icon-font-size); + color: var(--rz-checkbox-checked-color); + vertical-align: middle; + background-color: var(--rz-checkbox-checked-icon-background-color); + border-radius: var(--rz-checkbox-checked-icon-border-radius); +} +.rz-chkbox-box .rzi-check:before { + content: "check"; +} +.rz-chkbox-box .rzi-times { + width: var(--rz-checkbox-tri-icon-width); + height: var(--rz-checkbox-tri-icon-height); + font-size: var(--rz-checkbox-tri-icon-font-size); +} +.rz-chkbox-box .rzi-times:before { + content: "remove"; +} +.rz-chkbox-box.rz-state-active { + background-color: var(--rz-checkbox-checked-background-color); + border: var(--rz-checkbox-checked-border); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-checkbox-checked-hover-background-color); + border: var(--rz-checkbox-checked-hover-border); +} +.rz-chkbox-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-checkbox-checked-disabled-background-color); + border: var(--rz-checkbox-checked-disabled-border); + opacity: 0.5; +} + +.rz-switch { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + width: 3rem; + min-width: 3rem; + height: 1.8rem; + border-radius: calc(5 * var(--rz-border-radius)); +} +.rz-switch:focus { + outline: var(--rz-outline-normal); +} +.rz-switch:focus-visible { + outline: var(--rz-switch-focus-outline); + outline-offset: var(--rz-switch-focus-outline-offset); +} + +.rz-switch-circle { + position: absolute; + cursor: pointer; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; +} + +.rz-switch-circle.rz-disabled { + opacity: 0.5; + cursor: initial; +} + +.rz-switch .rz-switch-circle { + background: var(--rz-switch-background-color); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: calc(5 * var(--rz-border-radius)); +} + +.rz-switch.rz-switch-checked .rz-switch-circle { + background: var(--rz-switch-checked-background-color); +} + +.rz-switch .rz-switch-circle:before { + background: var(--rz-switch-circle-background-color); + width: 1.26rem; + height: 1.26rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; + border-radius: calc(5 * var(--rz-border-radius) - 3px); + transition: transform 0.2s linear; + box-shadow: var(--rz-switch-box-shadow); +} + +.rz-switch-circle:before { + position: absolute; + content: ""; + inset-block-start: 50%; +} + +.rz-switch-circle.rz-disabled:before { + box-shadow: none; +} + +.rz-switch.rz-switch-checked .rz-switch-circle:before { + background: var(--rz-switch-checked-circle-background-color); + transform: translateX(1.2rem); +} + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); +} + +.rz-radio-button-list-vertical { + box-sizing: border-box; +} +.rz-radio-button-list-vertical .rz-radio-btn { + display: flex; + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); + align-items: center; +} + +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} +.rz-radio-button-list-horizontal .rz-radio-btn { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-radiobutton { + cursor: initial; +} + +.rz-radiobutton-label, +.rz-radiobutton-template { + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); +} + +.rz-radiobutton { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + width: var(--rz-radio-width); + height: var(--rz-radio-height); + border-radius: var(--rz-radio-border-radius); +} +.rz-radiobutton:focus { + outline: var(--rz-outline-normal); +} +.rz-radiobutton:focus-visible { + outline: var(--rz-radio-focus-outline); + outline-offset: var(--rz-radio-focus-outline-offset); +} + +.rz-radiobutton-box { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + width: inherit; + border: var(--rz-input-border); + border-width: var(--rz-radio-border-width); + border-radius: var(--rz-radio-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box:active:not(.rz-state-disabled) { + background-color: var(--rz-radio-active-background-color); + box-shadow: var(--rz-radio-active-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-disabled { + cursor: initial; + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-radio-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-radiobutton-box .rzi { + width: var(--rz-radio-icon-width); + height: var(--rz-radio-icon-height); + color: var(--rz-radio-checked-color); +} +.rz-radiobutton-box .rzi-circle-on { + border-radius: var(--rz-radio-border-radius); + vertical-align: middle; + background-color: var(--rz-radio-circle-background-color); + box-shadow: var(--rz-radio-circle-shadow); +} +.rz-radiobutton-box .rzi-circle-on:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-circle-hover-background-color); +} +.rz-radiobutton-box.rz-state-active { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-checked-hover-background-color); + border: var(--rz-radio-checked-border); + box-shadow: var(--rz-radio-checked-hover-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); + opacity: 0.5; +} + +.rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; + border: var(--rz-fieldset-border); + border-radius: var(--rz-fieldset-border-radius); +} + +.rz-fieldset-content { + padding: var(--rz-fieldset-padding); +} + +.rz-fieldset-content-wrapper { + overflow: hidden; +} + +.rz-fieldset-legend-text { + vertical-align: middle; +} + +.rz-fieldset-toggler { + vertical-align: middle; + width: var(--rz-fieldset-toggle-width); + height: var(--rz-fieldset-toggle-height); + background-color: var(--rz-fieldset-toggle-background-color); + color: var(--rz-fieldset-toggle-color); + border: var(--rz-fieldset-toggle-border); +} +.rz-fieldset-toggler.rzi { + text-align: center; + font-size: var(--rz-fieldset-toggle-font-size); + line-height: var(--rz-fieldset-toggle-height); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); +} +.rz-fieldset-toggler.rzi-minus:before { + content: "remove"; +} +.rz-fieldset-toggler.rzi-plus:before { + content: "add"; +} +a:focus .rz-fieldset-toggler { + outline: var(--rz-outline-normal); +} +a:focus-visible .rz-fieldset-toggler { + outline: var(--rz-fieldset-toggle-focus-outline); + outline-offset: var(--rz-fieldset-toggle-focus-outline-offset); +} + +.rz-fieldset-legend { + float: none; + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); + width: auto; + color: var(--rz-fieldset-legend-color); + font-size: var(--rz-fieldset-legend-font-size); +} +.rz-fieldset-legend a { + display: inline-flex; + align-items: center; + color: inherit; + text-decoration: none; +} +.rz-fieldset-legend a:focus { + outline: var(--rz-outline-normal); +} + +.rz-multiselect, .rz-dropdown { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + position: relative; + overflow: hidden; + text-align: start; +} +.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-dropdown.rz-dropdown-open { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect.rz-state-focus { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect-trigger, .rz-dropdown-trigger { + position: absolute; + display: flex; + align-items: center; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; +} +.rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { + width: var(--rz-dropdown-trigger-icon-width); + height: var(--rz-dropdown-trigger-icon-height); + font-size: var(--rz-dropdown-trigger-icon-height); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); +} +.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-dropdown-clear-icon { + position: absolute; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; + height: 100%; + display: flex; + align-items: center; + font-size: var(--rz-dropdown-trigger-icon-height); + opacity: 0.4; +} +.rz-dropdown-clear-icon:before { + content: "close"; +} +.rz-dropdown-clear-icon:hover { + opacity: 1; +} +.rz-state-disabled > .rz-dropdown-clear-icon { + display: none; +} + +.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel { + position: absolute; + background-color: var(--rz-dropdown-open-background-color); + border-radius: var(--rz-input-border-radius); + border: var(--rz-dropdown-panel-border); + box-shadow: var(--rz-dropdown-panel-shadow); +} + +.rz-dropdown-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} + +.rz-multiselect-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} +.rz-multiselect-panel .rz-chkbox { + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); +} + +.rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { + list-style: none; + padding: var(--rz-dropdown-items-padding); + margin: 0; +} +.rz-autocomplete-items li, .rz-multiselect-items li, .rz-dropdown-items li { + /* The 'No results found' item has no CSS class */ +} + +.rz-dropdown-items-wrapper, +.rz-multiselect-items-wrapper { + overflow: auto; + margin: var(--rz-dropdown-items-margin); + border-radius: var(--rz-input-border-radius); +} + +.rz-multiselect-items-wrapper { + overflow: auto; +} + +.rz-dropdown-filter-container { + padding: var(--rz-dropdown-filter-padding); + border-bottom: var(--rz-dropdown-filter-border); +} + +.rz-multiselect-filter-container .rz-inputtext, .rz-dropdown-filter { + background-color: transparent; + color: var(--rz-text-color); +} + +.rz-multiselect-header { + display: flex; + align-items: center; + padding: var(--rz-dropdown-item-padding); + margin: var(--rz-dropdown-items-margin); +} + +.rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-autocomplete-items li, .rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item { + padding: var(--rz-dropdown-item-padding); + transition: var(--rz-dropdown-item-transition); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover, .rz-dropdown-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-state-disabled.rz-menuitem, .rz-state-disabled.rz-autocomplete-list-item, .rz-state-disabled.rz-multiselect-item, .rz-autocomplete-items li.rz-state-disabled, .rz-dropdown-items li.rz-state-disabled, .rz-multiselect-items li.rz-state-disabled, .rz-dropdown-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} +.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} + +.rz-multiselect-close { + display: none; +} + +.rz-multiselect-filter-container { + flex: auto; + border-bottom: var(--rz-dropdown-filter-border); +} +.rz-multiselect-filter-container .rz-inputtext { + padding: 0; +} + +.rz-multiselect-item { + display: flex; + align-items: center; +} + +.rz-multiselect-item-content { + flex: 1; +} + +.rz-multiselect-label-container, +.rz-dropdown-label { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); + margin: 0; +} + +.rz-dropdown-chips { + height: inherit; + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); +} +.rz-dropdown-chips .rz-dropdown-chips-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-inline-end: 3rem; +} +.rz-dropdown-chips .rz-chip { + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: var(--rz-chip-gap); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); + color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); + border-radius: var(--rz-chip-border-radius); +} +.rz-dropdown-chips .rz-chip .rz-chip-text { + font-size: var(--rz-chip-font-size); +} +.rz-dropdown-chips .rz-chip .rz-button { + border-radius: var(--rz-chip-border-radius); + box-shadow: none; + align-self: stretch; +} +.rz-dropdown-chips .rz-chip .rzi { + vertical-align: middle; + font-size: 1rem; +} + +.rz-clear .rz-multiselect-label-container, +.rz-clear .rz-dropdown-label { + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); +} + +.rz-autocomplete { + box-sizing: border-box; + display: inline-block; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + background-color: var(--rz-input-background-color); + transition: var(--rz-input-transition); + overflow: hidden; +} +.rz-autocomplete-input { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + background-color: transparent; + color: var(--rz-input-value-color); + box-shadow: var(--rz-input-shadow); + border: none; + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + width: 100%; + transition: var(--rz-input-transition); +} +.rz-autocomplete-input:focus { + outline: none; +} +.rz-autocomplete-input:disabled { + border: none; +} + +.rz-autocomplete-panel { + overflow: auto; + box-sizing: content-box; +} + +.rz-listbox { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + overflow: hidden; + background-color: var(--rz-listbox-background-color); + border: var(--rz-listbox-border); + border-radius: var(--rz-listbox-border-radius); + text-align: start; +} +.rz-listbox .rz-chkbox { + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); +} +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-listbox:focus, .rz-listbox:focus-within { + outline: var(--rz-outline-normal); + border: var(--rz-listbox-focus-border); + box-shadow: var(--rz-listbox-focus-shadow); +} + +.rz-listbox-list { + margin: 0; + padding: 0; +} + +.rz-listbox-item { + cursor: default; + padding: var(--rz-listbox-item-padding); + margin: var(--rz-listbox-item-margin); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-listbox-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-listbox-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-listbox-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} + +.rz-listbox-header { + display: flex; + align-items: center; + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); + border-bottom: var(--rz-listbox-filter-border); +} + +.rz-listbox-list-wrapper { + flex: auto; + overflow: auto; + padding: var(--rz-listbox-padding); +} + +.rz-listbox-filter-container, .rz-dropdown-filter-container, .rz-multiselect-filter-container { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.rz-listbox-filter-container .rz-inputtext, .rz-dropdown-filter-container .rz-inputtext, .rz-multiselect-filter-container .rz-inputtext { + flex: auto; + width: 0; + border: none; + line-height: var(--rz-input-line-height); +} +.rz-listbox-filter-container .rz-inputtext:focus, .rz-dropdown-filter-container .rz-inputtext:focus, .rz-multiselect-filter-container .rz-inputtext:focus { + outline: none; +} +.rz-listbox-filter-container .rzi-search, .rz-dropdown-filter-container .rzi-search, .rz-multiselect-filter-container .rzi-search { + width: var(--rz-listbox-header-icon-width); + height: var(--rz-listbox-header-icon-height); + line-height: var(--rz-listbox-header-icon-height); + font-size: var(--rz-listbox-header-icon-height); +} +.rz-listbox-filter-container .rzi-search:before, .rz-dropdown-filter-container .rzi-search:before, .rz-multiselect-filter-container .rzi-search:before { + content: "search"; +} + +.rz-listbox-filter-container { + flex: auto; +} +.rz-listbox-filter-container .rz-inputtext { + background-color: transparent; +} + +.rz-splitbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { + display: none; +} +.rz-splitbutton .rz-button.rz-splitbutton-menubutton { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { + flex: auto; + overflow: hidden; + text-overflow: ellipsis; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.rz-splitbutton-menu { + display: none; + position: absolute; + min-width: var(--rz-splitbutton-menu-min-width); + box-shadow: var(--rz-splitbutton-menu-shadow); +} + +.rz-menu-list { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-menuitem .rz-menuitem-link { + color: inherit; + display: block; + text-decoration: none; +} +.rz-menuitem .rz-menuitem-link:hover { + text-decoration: none; +} +.rz-menuitem .rz-menuitem-icon { + vertical-align: top; +} + +.rz-splitbutton-menubutton { + margin-inline-start: 1px; +} +.rz-splitbutton-menubutton.rz-variant-outlined { + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); +} +.rz-splitbutton-menubutton .rz-button-text { + display: none; +} +.rz-splitbutton-menubutton .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-slider { + box-sizing: border-box; + position: relative; + display: inline-block; + border: var(--rz-slider-border); + border-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-background-color); +} +.rz-slider.rz-state-disabled { + background-color: var(--rz-slider-disabled-background-color); + border: var(--rz-slider-disabled-border); +} +.rz-slider.rz-state-disabled .rz-slider-range { + background-color: var(--rz-slider-disabled-range-background-color); + border: var(--rz-slider-disabled-range-border); +} +.rz-slider.rz-state-disabled .rz-slider-handle { + background-color: var(--rz-slider-disabled-handle-background-color); + border: var(--rz-slider-disabled-handle-border); +} + +.rz-slider-horizontal { + height: var(--rz-slider-horizontal-height); + width: var(--rz-slider-horizontal-width); +} + +.rz-slider-range { + position: absolute; + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-range-background-color); + border: var(--rz-slider-range-border); +} + +.rz-slider-handle { + position: absolute; + transform: translateY(-50%); + top: 50%; + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); + background-color: var(--rz-slider-handle-background-color); + border: var(--rz-slider-handle-border); + border-radius: var(--rz-slider-handle-border-radius); + box-shadow: var(--rz-slider-handle-shadow); + width: var(--rz-slider-handle-width); + height: var(--rz-slider-handle-height); + transition: var(--rz-slider-handle-transition); +} + +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active { + background-color: var(--rz-slider-handle-hover-background-color); + box-shadow: var(--rz-slider-handle-hover-shadow); + border: var(--rz-slider-handle-hover-border); + cursor: pointer; + outline: none; +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus { + outline: var(--rz-outline-normal); +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus-visible { + outline: var(--rz-slider-handle-focus-outline); + outline-offset: var(--rz-slider-handle-focus-outline-offset); +} + +.rz-rating { + box-sizing: border-box; + display: inline-flex; + font-size: var(--rz-rating-font-size); + height: 1em; +} +.rz-rating.rz-state-disabled .rzi { + opacity: var(--rz-rating-disabled-opacity); + color: var(--rz-rating-disabled-color); +} +.rz-rating a { + width: 1em; + height: 1em; + text-decoration: none; + cursor: default; + outline: none; +} +.rz-rating .rzi { + color: var(--rz-rating-color); + font-size: 1em; +} +.rz-rating .rzi-ban { + color: var(--rz-rating-ban-icon-color); +} +.rz-rating .rzi-ban:before { + content: "highlight_off"; +} +.rz-rating .rzi-star-o { + opacity: var(--rz-rating-opacity); +} +.rz-rating .rzi-star-o:before { + content: "star_border"; +} +.rz-rating .rzi-star { + color: var(--rz-rating-selected-color); +} +.rz-rating .rzi-star:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover { + cursor: pointer; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-ban { + color: var(--rz-rating-selected-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-ban { + color: var(--rz-rating-focus-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o:before { + content: "star"; +} + +.rz-security-code { + box-sizing: border-box; + display: inline-flex; +} + +.rz-security-code-wrapper { + flex: 1; + --rz-gap: 0.5rem; +} + +.rz-security-code-input { + text-align: center; + min-width: var(--rz-security-code-input-min-width); + min-height: var(--rz-security-code-input-min-height); + width: 100%; + height: 100%; + padding: var(--rz-security-code-input-padding); + font-size: var(--rz-security-code-input-font-size); + font-weight: var(--rz-security-code-input-font-weight); + line-height: var(--rz-security-code-input-line-height); +} + +.rz-selectbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-selectbutton .rz-button:focus-visible { + z-index: 1; +} + +.rz-selectbutton .rz-button.rz-button-xs { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-xs:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-sm { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { + display: inline-block; + position: relative; +} +.rz-datepicker .rz-readonly { + cursor: pointer; +} +.rz-datepicker > .rz-inputtext { + width: 100%; + line-height: var(--rz-datepicker-line-height); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); +} +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { + box-shadow: none; + color: var(--rz-datepicker-trigger-icon-hover-color); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} + +.rz-datepicker-inline { + background-color: var(--rz-datepicker-panel-background-color); + border: var(--rz-input-border); +} + +.rz-datepicker-trigger { + box-shadow: none; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 0.625rem; + transform: translateY(-50%); + background-color: transparent; + padding: 0; + vertical-align: text-top; + color: var(--rz-datepicker-trigger-icon-color); + width: var(--rz-datepicker-trigger-icon-width); + height: var(--rz-datepicker-trigger-icon-height); + font-size: var(--rz-datepicker-trigger-icon-height); +} +.rz-datepicker-trigger.rz-state-disabled { + border: none; + box-shadow: none; + cursor: initial; + opacity: 1; + color: var(--rz-input-disabled-color); +} +.rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active), .rz-datepicker-trigger:not(.rz-state-disabled):hover:active { + background-color: transparent; +} +.rz-datepicker-trigger:not(.rz-state-disabled):active { + box-shadow: none !important; + background-image: none !important; +} +.rz-datepicker-trigger .rzi-calendar, +.rz-datepicker-trigger .rzi-time { + font-size: inherit; + vertical-align: top; +} +.rz-datepicker-trigger .rzi-calendar:before { + content: "calendar_today"; +} +.rz-datepicker-trigger .rzi-time:before { + content: "schedule"; +} +.rz-datepicker-trigger .rz-button-text { + display: none; +} + +.rz-datepicker-popup-container { + box-sizing: content-box; + position: absolute; + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); + box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); +} + +.rz-datepicker-inline-container { + position: static; + white-space: nowrap; +} +.rz-datepicker-inline-container .rz-calendar { + display: inline-block; +} + +.rz-datepicker-footer { + position: relative; + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--rz-datepicker-header-background-color); + border-bottom: var(--rz-datepicker-header-border); + color: var(--rz-datepicker-header-color); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); +} + +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); +} +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { + color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); +} +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); +} + +.rz-calendar-prev { + order: 1; +} +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { + content: "chevron_right"; +} + +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { + outline: var(--rz-outline-normal); +} +.rz-calendar-view-container:focus-visible { + outline: var(--rz-datepicker-focus-outline); + outline-offset: var(--rz-datepicker-focus-outline-offset); +} + +.rz-calendar-view { + table-layout: fixed; + border-collapse: collapse; +} +.rz-calendar-view th { + font-weight: normal; + font-size: var(--rz-datepicker-calendar-header-font-size); + text-transform: var(--rz-datepicker-calendar-header-text-transform); + color: var(--rz-datepicker-calendar-header-color); + padding: var(--rz-datepicker-calendar-item-padding); + text-align: center; +} +.rz-calendar-view td { + text-align: center; + border-top: var(--rz-datepicker-calendar-border); + padding: 0; +} +.rz-calendar-view td .rz-state-default { + display: block; + padding: var(--rz-datepicker-calendar-item-padding); + color: var(--rz-datepicker-calendar-color); + font-size: var(--rz-datepicker-calendar-font-size); + border-radius: var(--rz-datepicker-calendar-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-calendar-view td .rz-state-default.rz-calendar-today { + color: var(--rz-datepicker-calendar-today-color); + background-color: var(--rz-datepicker-calendar-today-background-color); + box-shadow: var(--rz-datepicker-calendar-today-box-shadow); + border-radius: var(--rz-datepicker-calendar-today-border-radius); +} +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { + text-decoration: none; + color: var(--rz-datepicker-calendar-hover-color); + background-color: var(--rz-datepicker-calendar-hover-background-color); + cursor: pointer; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { + color: var(--rz-datepicker-calendar-selected-color); + background-color: var(--rz-datepicker-calendar-selected-background-color); + padding: var(--rz-datepicker-calendar-item-padding); + box-shadow: none; +} +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { + color: var(--rz-datepicker-calendar-selected-hover-color); + background-color: var(--rz-datepicker-calendar-selected-hover-background-color); +} +.rz-calendar-view .rz-state-disabled { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-other-month { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-week-number { + opacity: 0.5; +} + +/* Time Picker Styles */ +.rz-timepicker { + display: flex; + align-items: center; + justify-content: center; + gap: var(--rz-timepicker-gap); + border-top: var(--rz-datepicker-calendar-border); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); + color: var(--rz-timepicker-color); +} +.rz-timepicker .rzi-chevron-up:before { + content: "expand_less"; +} +.rz-timepicker .rzi-chevron-down:before { + content: "expand_more"; +} +.rz-timepicker .rz-separator { + color: var(--rz-timepicker-separator-color); +} +.rz-timepicker .rz-separator a { + display: none; +} +.rz-timepicker .rz-button-md { + padding: var(--rz-timepicker-button-padding); + text-transform: uppercase; +} + +.rz-hour-picker, +.rz-minute-picker, +.rz-second-picker { + background-color: var(--rz-timepicker-background-color); + width: 4rem; +} + +.rz-ampm-picker a { + text-decoration: none; +} + +.rz-numeric { + display: inline-block; + position: relative; + padding: 0px; +} +.rz-numeric input[type=number], +.rz-numeric input[type=text] { + -moz-appearance: textfield; + width: 100%; + height: 100%; + border: none; + background-color: transparent; + line-height: var(--rz-numeric-line-height); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); + outline: none; +} +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.rz-numeric.rz-state-disabled .rz-numeric-button { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); +} +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); + background-image: none; + box-shadow: none; + cursor: initial; +} + +.rz-numeric-button { + position: absolute; + inset-inline-end: var(--rz-numeric-button-offset); + padding: 0; + width: var(--rz-numeric-button-width); + height: var(--rz-numeric-button-height); + border-radius: var(--rz-numeric-button-border-radius); + background-color: var(--rz-numeric-button-background-color); + color: var(--rz-numeric-button-color); +} +.rz-numeric-button:hover { + background-color: var(--rz-numeric-button-background-color); +} +.rz-numeric-button .rzi { + font-size: var(--rz-numeric-button-height); + vertical-align: top; +} +.rz-numeric-button .rzi-caret-up:before { + content: "expand_less"; +} +.rz-numeric-button .rzi-caret-down:before { + content: "expand_more"; +} + +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); +} + +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); +} + +.rz-fileupload { + box-sizing: border-box; + display: inline-block; +} +.rz-fileupload .rz-button { + vertical-align: middle; + -webkit-appearance: none !important; +} + +.rz-fileupload-choose { + position: relative; + display: inline-block; + overflow: hidden; + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose input[type=file] { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + min-height: 100%; + cursor: pointer; +} +.rz-fileupload-choose.rz-state-disabled input[type=file] { + cursor: default; +} +.rz-fileupload-choose:not(.rz-state-disabled) { + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):active { + background-color: var(--rz-upload-choose-active-background-color); + color: var(--rz-upload-choose-active-color); +} + +.rz-fileupload-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.rz-fileupload-row > div { + margin: var(--rz-upload-files-margin); +} +.rz-fileupload-row .rz-button-text { + display: none; +} +.rz-fileupload-row .rz-button { + background-color: var(--rz-upload-files-remove-background-color); + color: var(--rz-upload-files-remove-color); +} +.rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash { + display: block; +} +.rz-fileupload-row .rz-button .rzi-close:before, +.rz-fileupload-row .rz-button .rzi-times:before, +.rz-fileupload-row .rz-button .rz-icon-trash:before { + content: "close"; +} + +.rz-fileupload-buttonbar { + position: relative; + background-color: var(--rz-upload-button-bar-background-color); + padding: var(--rz-upload-button-bar-padding); + border-radius: var(--rz-upload-button-bar-border-radius); +} +.rz-fileupload-buttonbar .rz-button:nth-child(3) { + float: right; + background-color: var(--rz-upload-cancel-background-color); + color: var(--rz-upload-cancel-color); +} + +.rz-fileupload-files { + background-color: var(--rz-upload-files-background-color); + padding: var(--rz-upload-files-padding); +} + +.rz-datatable { + position: relative; + box-shadow: var(--rz-grid-shadow); + border: var(--rz-grid-cell-border); + border-radius: var(--rz-grid-border-radius); + background-color: var(--rz-grid-background-color); + overflow: hidden; +} +.rz-datatable:focus { + outline: var(--rz-outline-normal); +} +.rz-datatable:focus-visible { + outline: var(--rz-grid-focus-outline); + outline-offset: var(--rz-grid-focus-outline-offset); +} +.rz-datatable .rz-col-icon { + text-align: center; + vertical-align: middle; + width: var(--rz-grid-column-icon-width); + padding: var(--rz-grid-column-icon-padding); +} +.rz-datatable .rzi-chevron-circle-right { + vertical-align: top; + /* Right-to-left arrow icons */ +} +.rz-datatable .rzi-chevron-circle-right:before { + content: "arrow_right"; +} +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} +.rz-datatable .rzi-chevron-circle-down { + vertical-align: top; +} +.rz-datatable .rzi-chevron-circle-down:before { + content: "arrow_drop_down"; +} +.rz-datatable.rz-has-template > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view > .rz-datatable-scrollable-body > .rz-datatable-scrollable-table-wrapper > table > .rz-datatable-scrollable-colgroup col:first-child { + width: var(--rz-grid-column-icon-width); +} + +.rz-unselectable-text { + user-select: none; +} + +.rz-datatable-tablewrapper > table, +.rz-datatable-scrollable-header-box > table, +.rz-datatable-scrollable-table-wrapper > table, +.rz-datatable-scrollable-footer-box > table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +.rz-resizable-column { + position: relative; +} + +.rz-datatable-reorder-indicator-up { + position: absolute; +} +.rz-datatable-reorder-indicator-up:before { + content: "arrow_drop_down"; +} + +.rz-datatable-reorder-indicator-down { + position: absolute; +} +.rz-datatable-reorder-indicator-down:before { + content: "arrow_drop_up"; +} + +.rz-column-resizer { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + cursor: col-resize; + width: var(--rz-grid-column-resizer-width); +} +.rz-column-resizer:after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + width: var(--rz-grid-column-resizer-helper-width); + background-color: transparent; +} +.rz-column-resizer:hover:after, .rz-column-resizer:active:after { + background-color: var(--rz-grid-column-resizer-helper-background-color); +} + +.rz-rowgroup-header .fa, +.rz-row-toggler { + color: var(--rz-grid-cell-color); +} + +.rz-datatable-scrollable-footer { + background-color: var(--rz-grid-header-background-color); + border-top: var(--rz-grid-cell-border); +} + +.rz-datatable-thead th, +.rz-grid-table thead th { + background-color: var(--rz-grid-header-background-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: inherit; + border-bottom: var(--rz-grid-header-cell-border-bottom); +} +.rz-datatable-thead th:not(:last-child), +.rz-grid-table thead th:not(:last-child) { + border-inline-end: var(--rz-grid-header-cell-border); +} +.rz-datatable-thead th > div:not(.rz-cell-filter), +.rz-grid-table thead th > div:not(.rz-cell-filter) { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + outline: none; + padding: var(--rz-grid-header-cell-padding); +} +.rz-datatable-thead th.rz-state-focused, +.rz-grid-table thead th.rz-state-focused { + outline: var(--rz-grid-cell-focus-outline); + outline-offset: var(--rz-grid-cell-focus-outline-offset); +} +.rz-datatable-thead th .rz-column-title, +.rz-grid-table thead th .rz-column-title { + display: inline-flex; + flex: auto; + align-items: center; + gap: 0.25rem; + width: 100%; + font-size: var(--rz-grid-header-font-size); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding-inline: var(--rz-grid-header-title-padding-inline); + font-weight: var(--rz-grid-header-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content, +.rz-grid-table thead th .rz-column-title-content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content:has(.rz-chkbox), +.rz-grid-table thead th .rz-column-title-content:has(.rz-chkbox) { + overflow: visible; +} +.rz-datatable-thead th.rz-text-align-center .rz-column-title, +.rz-grid-table thead th.rz-text-align-center .rz-column-title { + justify-content: center; + padding-inline-start: 0; +} +.rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th.rz-text-align-right .rz-column-title, +.rz-grid-table thead th.rz-text-align-right .rz-column-title { + justify-content: right; +} +.rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th .rz-column-drag + .rz-column-title, +.rz-grid-table thead th .rz-column-drag + .rz-column-title { + padding-inline-start: 0; +} + +.rz-datatable-tfoot td, .rz-grid-table tfoot td { + background-color: var(--rz-grid-foot-background-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + color: var(--rz-grid-foot-cell-color); + padding: var(--rz-grid-cell-padding); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} + +.rz-datatable-scrollable-header { + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-datatable-scrollable-body { + overflow: auto; + border-top: none; + flex: auto; + border-bottom-right-radius: var(--rz-border-radius); + border-bottom-left-radius: var(--rz-border-radius); +} + +.rz-has-pager .rz-datatable-scrollable-body { + border-radius: 0; +} + +.rz-sortable-column { + cursor: pointer; +} +.rz-sortable-column:focus { + outline: none; +} +.rz-sortable-column.rz-state-active { + background-color: var(--rz-grid-header-sorted-background-color); +} +.rz-sortable-column > div:hover .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { + color: var(--rz-grid-sort-icon-color); +} +.rz-sortable-column .rzi-grid-sort { + width: var(--rz-grid-sort-icon-width); + height: var(--rz-grid-sort-icon-height); + font-size: var(--rz-grid-sort-icon-height); + text-align: left; +} +.rz-sortable-column .rzi-sort { + color: transparent; +} +.rz-sortable-column .rzi-sort:before { + content: "sort"; +} +.rz-sortable-column .rzi-sort-asc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-asc:before { + content: "arrow_drop_up"; +} +.rz-sortable-column .rzi-sort-desc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-desc:before { + content: "arrow_drop_down"; +} + +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td { + background-color: var(--rz-grid-stripe-background-color); +} +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td { + background-color: var(--rz-grid-stripe-odd-background-color); +} + +.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th { + border-bottom: var(--rz-grid-header-cell-border); +} +.rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { + border-inline-end: var(--rz-grid-header-cell-border); +} + +.rz-datatable-data td, +.rz-grid-table td { + padding: var(--rz-grid-cell-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-data td:not(:last-child), +.rz-grid-table td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td.rz-composite-cell, +.rz-grid-table td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td .rz-cell-data, +.rz-grid-table td .rz-cell-data { + color: var(--rz-grid-cell-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rz-datatable-data td .rz-cell-data:has(.rz-chkbox), .rz-datatable-data td .rz-cell-data:has(.rz-button), +.rz-grid-table td .rz-cell-data:has(.rz-chkbox), +.rz-grid-table td .rz-cell-data:has(.rz-button) { + overflow: visible; +} +.rz-datatable-data td .rz-cell-toggle, +.rz-grid-table td .rz-cell-toggle { + display: flex; + align-items: center; + gap: 0.25rem; +} +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} +.rz-datatable-data tr td:first-child, +.rz-grid-table tr td:first-child { + border-inline-start: none; +} +.rz-datatable-data tr td:last-child:not(.rz-composite-cell), +.rz-grid-table tr td:last-child:not(.rz-composite-cell) { + border-inline-end: none; +} +.rz-datatable-data tr:first-child > td, +.rz-grid-table tr:first-child > td { + border-top: none; +} +.rz-datatable-data tr:last-child > td, +.rz-grid-table tr:last-child > td { + border-bottom: none; +} + +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { + border-bottom: none; + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td { + border-bottom: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} + +.rz-datatable-reflow tbody td > .rz-column-title { + display: none; +} + +.rz-datatable-scrollable { + display: flex; + flex-direction: column; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper { + height: 0; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view { + height: 0; +} + +.rz-datatable-scrollable-wrapper { + display: flex; + flex-direction: column; + flex: auto; +} + +.rz-datatable-scrollable-view { + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; +} + +.rz-datatable-header { + background-color: var(--rz-grid-toolbar-background-color); + padding: var(--rz-grid-header-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-header .rzi-plus { + font-size: var(--rz-grid-cell-font-size); +} +.rz-datatable-header .rzi-plus:before { + content: "add"; +} + +.rz-cell-filter { + padding: var(--rz-grid-filter-padding); + margin: var(--rz-grid-filter-margin); + border-top: var(--rz-grid-filter-border); + font-size: var(--rz-grid-filter-font-size); + font-weight: normal; +} +.rz-cell-filter .rz-cell-filter-label { + display: flex; + flex: auto; + align-items: center; +} +.rz-cell-filter .rz-cell-filter-label > .rzi { + width: var(--rz-grid-filter-icon-width); + height: var(--rz-grid-filter-icon-height); + font-size: var(--rz-grid-filter-icon-font-size); + margin-inline: var(--rz-grid-filter-icon-margin-inline); + color: var(--rz-grid-filter-color); +} +.rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { + margin-inline-start: auto; +} +.rz-cell-filter .rz-cell-filter-label .rz-current-filter { + margin-inline-start: 0.5rem; +} + +.rz-selectable tbody tr.rz-data-row td, +.rz-selectable tbody tr.rz-data-row .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:after { + content: ""; + position: absolute; + inset: 0; + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:before { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:after { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > .rzi { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > th.rz-state-focused { + color: var(--rz-grid-cell-focus-color) !important; +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > .rzi { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-disabled { + opacity: 0.5; + pointer-events: none; +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { + color: var(--rz-grid-hover-color); +} + +.rz-cell-filter-content { + display: flex; + flex: auto; + align-items: center; + color: var(--rz-grid-filter-color); + min-height: 1.375rem; + container-type: inline-size; + container-name: rz-cell-filter-content; +} + +@container rz-cell-filter-content (max-width: 200px) { + .rz-cell-filter-content .rz-filter-button .rzi { + display: none; + } + .rz-cell-filter-content .rz-filter-button { + position: absolute; + z-index: 1; + min-height: 0; + inset-inline-start: calc(var(--rz-border-width)); + height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + max-height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + line-height: calc(1.25rem - var(--rz-border-width) * 2); + border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-start-end-radius: 0; + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } +} +.rz-expanded-row > td { + border-bottom: none; + background-color: var(--rz-grid-hover-background-color); +} +.rz-expanded-row > td .rz-cell-data, +.rz-expanded-row > td .rz-row-toggler { + color: var(--rz-grid-hover-color); +} + +.rz-expanded-row-template { + background-color: var(--rz-grid-detail-template-background-color); + padding: var(--rz-grid-detail-template-padding); + border: var(--rz-grid-detail-template-border); + border-radius: var(--rz-grid-detail-template-border-radius); +} + +.rz-expanded-row-content > td { + padding-top: 0; + background-color: var(--rz-grid-detail-template-background-color); +} + +.rz-rowgroup-header a:hover { + text-decoration: none; +} +.rz-rowgroup-header td { + border-top: var(--rz-grid-border); + border-bottom: var(--rz-grid-border); +} + +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; +} + +.rz-datatable-loading-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--rz-grid-loading-indicator-color); + z-index: 2; +} +.rz-datatable-loading-content .rzi-circle-o-notch { + animation: rotation 0.5s linear infinite; + font-size: 2rem; +} +.rz-datatable-loading-content .rzi-circle-o-notch:before { + content: "refresh"; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@media (max-width: 768px) { + .rz-datatable-reflow .rz-data-grid-data > table, + .rz-datatable-reflow .rz-datatable-tablewrapper > table, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table { + table-layout: auto; + display: block; + } + .rz-datatable-reflow .rz-data-grid-data > table > tbody, + .rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody { + display: block; + } + .rz-datatable-reflow thead th { + display: none; + } + .rz-datatable-reflow .rz-data-row { + display: block; + } + .rz-datatable-reflow .rz-data-row > td { + display: block; + width: 100% !important; + text-align: left !important; + border: none; + } + .rz-datatable-reflow .rz-data-row > td .rz-column-title { + display: block; + } +} +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + +.rz-grid-filter-buttons { + display: flex; + justify-content: space-between; + padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} + +.rz-grid-filter-icon { + justify-self: flex-end; + color: var(--rz-grid-filter-color); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); + font-size: var(--rz-grid-header-filter-icon-font-size); + transition: var(--rz-grid-state-transition); + font-weight: 400; +} +.rz-grid-filter-icon:hover { + cursor: pointer; + color: var(--rz-grid-header-filter-icon-hover-color); +} + +.rz-grid-filter-active { + color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; +} + +.rz-data-grid { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.rz-data-grid-data { + overflow: auto; + flex: 1; + box-shadow: var(--rz-grid-data-border-shadow); +} + +.rz-grid-table td, .rz-grid-table th { + padding: var(--rz-grid-cell-padding); +} + +.rz-grid-table thead { + position: sticky; + top: 0; + z-index: 2; +} +.rz-grid-table thead th { + position: sticky; + top: 0; + z-index: 1; +} + +.rz-grid-table-fixed { + table-layout: fixed; +} +.rz-grid-table-fixed .rz-frozen-cell { + position: -webkit-sticky; + position: sticky; +} +.rz-grid-table-fixed .rz-frozen-cell-left, +.rz-grid-table-fixed .rz-frozen-cell-right, +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + background: var(--rz-grid-frozen-cell-background-color); + z-index: 1; +} +.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} + +.rz-grid-table tfoot, .rz-grid-table tfoot td { + position: sticky; + bottom: 0; + z-index: 1; +} + +.rz-grid-table { + width: 100%; + position: relative; + border-collapse: separate; + border-spacing: 0; +} +.rz-grid-table th { + white-space: nowrap; + overflow: hidden; +} +.rz-grid-table td { + white-space: nowrap; + overflow: hidden; +} + +.rz-grid-table tbody > div { + display: table-row; +} + +.rz-column-drag { + cursor: grab; + font-size: inherit; + color: var(--rz-column-drag-handle-color); + transition: var(--rz-grid-state-transition); + margin-inline: var(--rz-column-drag-handle-margin-inline); +} +.rz-column-drag:after { + content: "more_vert"; +} +.rz-column-drag:hover { + color: var(--rz-column-drag-handle-hover-color); +} +.rz-column-drag:active { + color: var(--rz-column-drag-handle-hover-color); + cursor: grabbing; +} + +.rz-column-draggable { + background-color: var(--rz-grid-header-background-color); + border-radius: var(--rz-border-radius); + box-shadow: var(--rz-column-draggable-shadow); + padding: 0; + display: flex; + align-items: center; +} +.rz-column-draggable > div { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + outline: none; + padding: 0; +} +.rz-column-draggable .rz-column-drag { + max-width: 1rem; +} +.rz-column-draggable .rz-column-title { + display: inline-flex; + flex: auto; + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-column-draggable .rz-grid-filter-icon { + display: none; +} + +.rz-group-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-group-header-items { + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); +} + +.rz-group-header-item { + display: flex; + align-items: center; + color: var(--rz-grid-group-header-item-color); + background-color: var(--rz-grid-group-header-item-background-color); + border: var(--rz-grid-group-header-item-border); + border-radius: var(--rz-grid-group-header-item-border-radius); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); + width: fit-content; + float: left; +} +.rz-group-header-item .rz-dialog-titlebar-close { + display: flex; + align-items: center; + text-decoration: none; +} + +.rz-group-header-item-title { + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); +} + +.rz-group-header-drop { + font-size: var(--rz-body-font-size); + color: var(--rz-text-tertiary-color); + height: fit-content; +} + +.rz-column-picker { + display: flex; +} + +.rz-filter-menu-symbol { + width: 1.75rem; + display: inline-block; +} + +.rz-filter-button { + flex: none; + margin-inline-end: 0.5rem; +} + +.rz-data-grid.rz-density-compact { + --rz-grid-cell-line-height: 1rem; + --rz-grid-cell-padding: 0.25rem 0.5rem; + --rz-grid-header-cell-padding: 0.25rem 0; + --rz-grid-header-padding: 0.25rem 1rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-filter-padding: 0.25rem 0.5rem; + --rz-grid-group-header-padding: 0.25rem; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; + --rz-dialog-close-font-size: 1rem; +} + +.rz-pager { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--rz-pager-gap); + flex-wrap: wrap; + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ +} +.rz-pager:focus { + outline: var(--rz-outline-normal); +} +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-pager.rz-align-right { + justify-content: right; +} +.rz-pager.rz-align-left { + justify-content: left; +} +.rz-pager.rz-align-center { + justify-content: center; +} +.rz-pager .rzi-step-backward:before { + content: "first_page"; +} +.rz-pager .rzi-caret-left:before { + content: "navigate_before"; +} +.rz-pager .rzi-caret-right:before { + content: "navigate_next"; +} +.rz-pager .rzi-step-forward:before { + content: "last_page"; +} +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { + order: 2; + width: var(--rz-pager-dropdown-width); + overflow: visible; +} +.rz-pager .rz-pagesize-text { + order: 2; + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); +} + +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); +} + +.rz-pager-bottom { + border-top: var(--rz-pager-border); +} + +.rz-pager-pages { + display: inline-flex; + gap: var(--rz-pager-gap); + margin: 0 0.5rem; +} + +.rz-pager-element { + letter-spacing: 0; +} + +.rz-align-center .rz-pager-first { + margin-inline-start: auto; +} + +.rz-pager-prev { + margin-inline-end: auto; +} +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; +} + +.rz-pager-next { + margin-inline-start: auto; +} +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; +} + +.rz-align-center .rz-pager-last { + margin-inline-end: auto; +} + +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-element:hover { + text-decoration: none; +} + +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-page { + display: inline-block; + min-width: var(--rz-pager-numeric-button-min-width); + text-align: center; + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { + margin-right: auto; +} +.rz-align-left .rz-pager-summary { + order: 2; + margin-left: auto; + padding: 0; +} +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} + +@media (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +@container rz-lookup-panel (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; +} +.rz-overlaypanel { + position: absolute; + overflow: hidden; + box-shadow: var(--rz-overlay-shadow); + border: var(--rz-overlay-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-overlay-background-color); +} + +.rz-tree { + box-sizing: border-box; + display: inline-block; + overflow: auto; +} +.rz-tree:focus { + outline: var(--rz-outline-normal); +} +.rz-tree:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} + +.rz-tree .rz-treenode.rz-treenode-leaf > .rz-treenode-content > .rz-tree-toggler { + visibility: hidden; +} + +.rz-treenode { + padding-inline-start: var(--rz-tree-node-toggle-width); +} + +.rz-tree-toggler { + cursor: pointer; + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); + width: var(--rz-tree-node-toggle-width); + height: 1.5rem; + font-size: var(--rz-icon-size); + line-height: 1.5rem; + text-align: center; + color: var(--rz-tree-node-toggle-color); + transition: var(--rz-tree-transition); +} +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} +.rz-tree-toggler.rzi-caret-right:before { + content: "arrow_right"; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); +} +.rz-tree-toggler.rzi-caret-down:before { + content: "arrow_drop_down"; + margin-inline-start: -0.125rem; +} +.rz-tree-toggler:hover { + color: var(--rz-tree-node-toggle-hover-color); +} + +.rz-treenode-content { + display: flex; + align-items: center; + cursor: pointer; + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); +} +.rz-treenode-content .rz-treenode-label { + display: flex; + align-items: center; + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); +} +.rz-treenode-content .rz-treenode-label .rzi:first-child { + margin-inline-end: 0.25rem; +} +.rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { + outline: var(--rz-tree-node-focus-outline); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} +.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { + background-color: var(--rz-tree-node-hover-background-color); + color: var(--rz-tree-node-hover-color); + border-radius: var(--rz-tree-node-selected-border-radius); +} +.rz-treenode-content .rz-chkbox { + margin-inline-end: 0.25rem; +} + +.rz-tree-container, +.rz-treenode-children { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-treenode-label { + transition: var(--rz-tree-transition); +} +.rz-treenode-content-selected .rz-treenode-label { + border-radius: var(--rz-tree-node-selected-border-radius); + color: var(--rz-tree-node-selected-color); + background-color: var(--rz-tree-node-selected-background-color); +} + +.rz-datalist, +.rz-datagrid { + background-color: var(--rz-datalist-background-color); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); + box-shadow: var(--rz-datalist-shadow); + border: var(--rz-datalist-border); +} + +.rz-g > div, .rz-datalist-data > li { + border-radius: var(--rz-datalist-border-radius); + border: var(--rz-datalist-item-border); + box-shadow: var(--rz-datalist-item-shadow); + padding: var(--rz-datalist-item-padding); + background-color: var(--rz-datalist-item-background-color); +} + +.rz-datalist-data { + list-style: none; + padding: var(--rz-datalist-padding); + margin: 0; +} +.rz-datalist-data > li { + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} +.rz-datalist-data > li:first-child { + margin-block-start: 0; +} +.rz-datalist-data > li:last-child { + margin-block-end: 0; +} + +.rz-g { + display: flex; + flex-wrap: wrap; +} +.rz-g > div { + flex: auto; + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} + +.rz-datalist-content { + box-sizing: border-box; + position: relative; +} + +.rz-datafilter { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + column-gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-selectbutton { + display: inline-flex; +} +.rz-datafilter .rz-datafilter-group { + position: relative; + margin: 0.25rem 0 0; + padding: 0; + flex-basis: 100%; +} +.rz-datafilter .rz-datafilter-group .rz-datafilter-group { + margin: 0; +} +.rz-datafilter .rz-datafilter-item { + position: relative; + list-style: none; + margin: 0; + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-datafilter-item:before { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item:after { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item .rz-multiselect, +.rz-datafilter .rz-datafilter-item .rz-dropdown { + flex: 10rem 1; +} +.rz-datafilter .rz-datafilter-group-item:after { + height: calc(var(--rz-input-height) / 2); +} +.rz-datafilter .rz-datafilter-bar { + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; +} +.rz-datafilter .rz-datafilter-bar:before { + display: none; +} +.rz-datafilter .rz-datafilter-bar:after { + height: calc(var(--rz-input-height) / 2); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); +} +.rz-datafilter .rz-datafilter-bar .rz-splitbutton { + margin-block-start: 0.3125rem; +} +.rz-datafilter .rz-datafilter-editor { + flex: 10rem 4; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear { + color: var(--rz-text-secondary-color); + opacity: 0.5; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear:hover { + opacity: 1; +} + +.rz-scheduler { + box-sizing: border-box; + container-name: scheduler; + container-type: inline-size; + display: flex; + height: 400px; + flex-direction: column; + border-radius: var(--rz-scheduler-border-radius); + border: 1px solid var(--rz-scheduler-border-color); + box-shadow: var(--rz-scheduler-shadow); + color: var(--rz-scheduler-color); + background: var(--rz-scheduler-background-color); + overflow: hidden; + background-clip: border-box; +} +.rz-scheduler a.rz-event-list-btn { + position: absolute; + padding-inline-start: 0.25rem; + color: var(--rz-scheduler-event-list-button-color); + font-size: var(--rz-scheduler-event-list-button-font-size); +} +.rz-scheduler a.rz-event-list-btn:hover { + cursor: pointer; + color: var(--rz-scheduler-event-list-button-color); + text-decoration: underline; +} + +.rz-slot { + display: flex; + height: 1.5em; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} + +.rz-slot-title { + text-align: end; + font-size: var(--rz-scheduler-slot-title-font-size); + padding: var(--rz-scheduler-slot-title-padding); +} + +.rz-slot-hours { + flex: 0 0 5rem; +} +.rz-slot-hours .rz-slot-header { + height: 1.5rem; + text-align: end; + font-size: var(--rz-scheduler-header-font-size); + padding: 0 0.25rem; + border-inline-end: 1px solid var(--rz-scheduler-border-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.rz-slot-minor { + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); +} + +.rz-day-view .rz-slot, +.rz-slots:first-child .rz-slot { + border-inline-start: none; +} + +.rz-event { + position: absolute; + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); + cursor: pointer; +} + +.rz-event-content { + background: var(--rz-scheduler-event-background-color); + border-radius: var(--rz-scheduler-border-radius); + color: var(--rz-scheduler-event-color); + height: 100%; + padding: var(--rz-scheduler-event-content-padding); + font-size: var(--rz-scheduler-event-font-size); + line-height: var(--rz-scheduler-event-line-height); + overflow: hidden; +} + +.rz-events { + position: relative; +} + +.rz-scheduler-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--rz-scheduler-toolbar-padding); + background: var(--rz-scheduler-toolbar-background-color); +} +.rz-scheduler-nav .rz-scheduler-nav-title { + display: flex; + align-self: center; + font-size: var(--rz-scheduler-toolbar-title-font-size); + font-weight: var(--rz-scheduler-toolbar-title-font-weight); + color: var(--rz-scheduler-toolbar-title-color); +} + +.rz-view-header { + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); + background-color: var(--rz-scheduler-header-background-color); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); + display: flex; +} +.rz-view-header .rz-slot-header { + flex: 1; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rz-view-header .rz-slot-hour-header { + flex: 0 0 5rem; +} + +.rz-view { + display: flex; + flex-direction: column; + flex: 1; +} + +.rz-view-content { + flex: auto; + display: flex; + overflow: auto; + height: 0; +} +.rz-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-slot:has(.rz-state-focused) { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-slots { + flex: 1; + font-size: 1rem; +} + +.rz-scheduler-nav-views { + display: flex; +} +.rz-scheduler-nav-views .rz-button.rz-primary { + background: var(--rz-scheduler-view-button-background-color); + color: var(--rz-scheduler-view-button-color); + border: var(--rz-scheduler-view-button-border); + border-radius: 0; + border-inline-end: none; +} +.rz-scheduler-nav-views .rz-button.rz-primary:first-child { + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); +} +.rz-scheduler-nav-views .rz-button.rz-primary:last-child { + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); +} +.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { + background-color: var(--rz-scheduler-view-selected-background-color); + border-color: var(--rz-scheduler-view-selected-border-color); + color: var(--rz-scheduler-view-selected-color); +} +.rz-scheduler-nav-views .rz-button.rz-primary:focus-visible { + z-index: 1; +} + +.rz-scheduler-nav-prev-next { + display: flex; +} +.rz-scheduler-nav-prev-next .rz-button { + background-color: var(--rz-scheduler-prev-next-button-background-color); + color: var(--rz-scheduler-prev-next-button-color); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); + font-size: var(--rz-scheduler-prev-next-button-font-size); +} +.rz-scheduler-nav-prev-next .rz-button.rz-today { + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); + padding: var(--rz-scheduler-today-button-padding); + font-size: var(--rz-scheduler-today-button-font-size); + text-transform: var(--rz-scheduler-today-button-text-transform); +} +.rz-scheduler-nav-prev-next .rz-button.rz-prev { + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button.rz-next { + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button:focus-visible { + z-index: 1; +} + +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + +.rz-event-list .rz-event { + position: static; +} + +.rz-week { + flex: 1; + font-size: 1rem; +} +.rz-week .rz-slots { + display: flex; + height: 100%; +} +.rz-week:first-child .rz-slot { + border-block-start: none; +} + +.rz-month { + flex: 1; + font-size: 1rem; +} +.rz-month .rz-slots { + display: flex; + height: 100%; +} +.rz-month:nth-child(2) .rz-slot { + border-block-start: none; +} +.rz-month .rz-slot { + flex: 1; + height: 100%; + display: flex; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child { + position: sticky; + z-index: 9998; + inset-inline-start: 0; + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child .rz-slot-header { + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-month .rz-slot:nth-child(2) { + border-inline-start: none; +} + +.rz-day-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-day-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-week-view-content { + flex: 1; + display: flex; +} +.rz-week-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-week-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-slots.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-week-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-week-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-month-view .rz-view-content { + flex: 1; + flex-direction: column; +} +.rz-month-view .rz-slot { + flex: 1; + height: 100%; +} +.rz-month-view .rz-slot:first-child { + border-inline-start: none; +} + +.rz-planner-view { + overflow: auto; +} +.rz-planner-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 2.25rem; + z-index: 9999; +} +.rz-planner-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-planner-view .rz-month .rz-slot:first-child .rz-slot-header { + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +.rz-planner-view .rz-month .rz-slot:last-child { + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); +} +.rz-planner-view .rz-month .rz-slot:last-child .rz-slot-header { + writing-mode: vertical-rl; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-planner-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-planner-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-timeline-view { + flex: auto; + overflow: auto; + flex-wrap: wrap; + flex-direction: unset; +} +.rz-timeline-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 36px; + z-index: 9999; +} +.rz-timeline-view .rz-view-header .rz-slot-header { + min-width: var(--rz-scheduler-timeline-slot-width); + flex: 0 0 auto; +} +.rz-timeline-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-timeline-view .rz-month { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slots { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slot { + width: var(--rz-scheduler-timeline-slot-width); + height: var(--rz-scheduler-timeline-slot-height); +} +.rz-timeline-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-timeline-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-year-view { + overflow: auto; + padding: var(--rz-scheduler-year-padding); + --rz-gap: var(--rz-scheduler-year-padding); +} +.rz-year-view .rz-flex-column, +.rz-year-view .rz-week { + min-width: fit-content; +} +.rz-year-view .rz-slot { + flex: 1; + border-block-start: none; + justify-content: center; + height: initial; + padding: var(--rz-scheduler-year-slot-padding); + cursor: pointer; +} +.rz-year-view .rz-slot .rz-slot-title { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-align: center; + width: var(--rz-scheduler-year-slot-title-width); + min-width: 2rem; + min-height: 2rem; + border-radius: var(--rz-scheduler-year-slot-title-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-year-view .rz-slot .rz-slot-title.rz-other-month { + opacity: 0.5; +} +.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments { + color: var(--rz-scheduler-event-color); + background-color: var(--rz-scheduler-event-background-color); +} +.rz-year-view .rz-slot .rz-slot-title.rz-state-focused { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} +.rz-year-view .rz-slot:hover .rz-slot-title:not(.rz-has-appointments) { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} + +.rz-year-month:focus { + outline: var(--rz-outline-normal); +} +.rz-year-month:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); + border-radius: var(--rz-border-radius); +} + +@container scheduler (width < 640px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@container scheduler (width < 1400px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +@media (max-width: 576px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@media (max-width: 1399px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +.rz-tabview { + box-sizing: border-box; + display: flex; +} +.rz-tabview:focus { + outline: var(--rz-outline-normal); +} +.rz-tabview:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-tabview:focus-visible .rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + outline: var(--rz-tabs-tab-focus-outline); + outline-offset: var(--rz-tabs-tab-focus-outline-offset); +} +.rz-tabview.rz-tabview-top { + flex-direction: column; +} +.rz-tabview.rz-tabview-top-right { + flex-direction: column; +} +.rz-tabview.rz-tabview-bottom { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-bottom-right { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-left { + flex-direction: row; +} +.rz-tabview.rz-tabview-right { + flex-direction: row-reverse; +} + +.rz-tabview-nav { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} +.rz-tabview-nav li { + border: var(--rz-tabs-border); + background-color: var(--rz-tabs-tab-background-color); + color: var(--rz-tabs-tab-color); + transition: var(--rz-tabs-transition); +} +.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-hover-background-color); + color: var(--rz-tabs-tab-hover-color); +} +.rz-tabview-nav li a, +.rz-tabview-nav li a:not([href]):not([class]) { + display: flex; + align-items: center; + color: inherit; + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); + font-size: var(--rz-tabs-tab-font-size); + line-height: var(--rz-tabs-tab-line-height); + font-weight: var(--rz-tabs-tab-font-weight); + text-transform: var(--rz-tabs-tab-text-transform); + letter-spacing: var(--rz-tabs-tab-letter-spacing); + text-decoration: none; + cursor: pointer; +} +.rz-tabview-nav li a:hover, +.rz-tabview-nav li a:not([href]):not([class]):hover { + text-decoration: none; +} +.rz-tabview-nav li.rz-state-disabled { + opacity: 0.5; +} +.rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-focus-background-color); + border-color: var(--rz-tabs-tab-focus-background-color); + color: var(--rz-tabs-tab-focus-color); +} +.rz-tabview-nav .rz-tabview-selected { + background-color: var(--rz-tabs-tab-selected-background-color); + color: var(--rz-tabs-tab-selected-color); + position: relative; +} +.rz-tabview-top > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-top > .rz-tabview-nav li { + border-top-width: 2px; + border-bottom-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-bottom-color: var(--rz-tabs-background-color); + margin-bottom: -1px; + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-bottom > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-bottom > .rz-tabview-nav li { + border-bottom-width: 2px; + border-top-color: var(--rz-tabs-tab-background-color); + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-top-color: var(--rz-tabs-background-color); + margin-top: -1px; + padding-top: 1px; + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-left > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-left > .rz-tabview-nav li { + border-left-width: 2px; + border-right-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} +.rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-right-color: var(--rz-tabs-background-color); + margin-right: -1px; + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-right > .rz-tabview-nav li { + border-right-width: 2px; + border-left-color: var(--rz-tabs-tab-background-color); + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-left-color: var(--rz-tabs-background-color); + margin-left: -1px; + padding-left: 1px; + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} + +.rz-tabview-panels { + background-color: var(--rz-tabs-background-color); + border: var(--rz-tabs-border); + box-shadow: var(--rz-tabs-shadow); + flex: 1; + overflow: auto; +} +.rz-tabview-top > .rz-tabview-panels { + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-left > .rz-tabview-panels { + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .rz-tabview-panels { + flex: auto; + } +} +.rz-tabview-panel { + padding: var(--rz-tabs-padding); +} + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); +} + +.rz-tooltip { + box-sizing: border-box; + position: absolute; + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-tooltip-content { + background: var(--rz-tooltip-background-color); + color: var(--rz-tooltip-color); + box-shadow: var(--rz-tooltip-shadow); + padding: var(--rz-tooltip-padding); + border-radius: var(--rz-tooltip-border-radius); + font-size: var(--rz-tooltip-font-size); + white-space: nowrap; +} + +.rz-tooltip .rz-top-tooltip-content { + margin-bottom: 16px; +} + +.rz-tooltip .rz-top-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-end: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-bottom-tooltip-content { + margin-top: -8px; +} + +.rz-tooltip .rz-bottom-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-start: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-left-tooltip-content { + margin-right: 8px; +} + +.rz-tooltip .rz-left-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + right: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-right-tooltip-content { + margin-left: 0; +} + +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-dialog-wrapper { + box-sizing: border-box; + display: flex; + position: fixed; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + z-index: var(--rz-dialog-zindex); + align-items: center; + justify-content: center; +} + +.rz-dialog { + box-sizing: border-box; + position: absolute; + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 150px; + max-height: 100%; + min-height: 150px; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); +} + +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); + font-size: var(--rz-dialog-title-font-size); + line-height: var(--rz-dialog-title-line-height); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); +} + +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; + font-weight: var(--rz-dialog-title-font-weight); + letter-spacing: var(--rz-dialog-title-letter-spacing); + color: var(--rz-dialog-title-color); + user-select: none; +} + +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { + font-size: var(--rz-dialog-close-font-size); + color: var(--rz-dialog-close-color); + vertical-align: var(--rz-dialog-close-vertical-align); +} +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { + content: "close"; +} +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { + color: var(--rz-dialog-close-hover-color); +} + +.rz-dialog-content, +.rz-dialog-side-content { + flex: 0 1 auto; + padding: var(--rz-dialog-content-padding); + overflow: auto; +} + +.rz-dialog-confirm, .rz-dialog-alert { + max-width: 400px; + margin: 0.75rem; +} + +.rz-dialog-confirm-message, .rz-dialog-alert-message { + margin-block-end: 1.5rem; +} + +.rz-dialog-confirm-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.rz-dialog-confirm-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-alert-buttons { + text-align: end; + gap: 0.5rem; +} +.rz-dialog-alert-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-mask { + position: fixed; + z-index: var(--rz-dialog-mask-zindex); + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--rz-dialog-mask-background-color); + opacity: 0.5; +} + +.no-scroll { + overflow: hidden; + padding-inline-end: 15px; +} + +.rz-dialog-side-position-right { + right: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-left { + left: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-top { + top: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +.rz-dialog-side-position-bottom { + bottom: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; +} + +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; +} + +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); +} +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); +} +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); +} +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); +} + +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); +} + +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.rz-notification-title { + font-weight: bold; +} + +.rz-notification-icon { + margin: var(--rz-notification-icon-margin); +} +.rz-notification-icon.rzi-check { + color: var(--rz-notification-success-icon-color); +} +.rz-notification-icon.rzi-check:before { + content: "check"; +} +.rz-notification-icon.rzi-exclamation-triangle { + color: var(--rz-notification-warning-icon-color); +} +.rz-notification-icon.rzi-exclamation-triangle:before { + content: "warning"; +} +.rz-notification-icon.rzi-info-circle { + color: var(--rz-notification-info-icon-color); +} +.rz-notification-icon.rzi-info-circle:before { + content: "info"; +} +.rz-notification-icon.rzi-times { + color: var(--rz-notification-error-icon-color); +} +.rz-notification-icon.rzi-times:before { + content: "error"; +} + +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; +} + +.rz-form { + box-sizing: border-box; +} + +.rz-message { + box-sizing: border-box; +} + +.rz-messages-error { + display: inline-block; + color: var(--rz-form-error-color); + font-size: var(--rz-form-error-font-size); + padding: var(--rz-validator-text-padding); +} + +.rz-message-popup { + position: absolute; + background-color: var(--rz-validator-background-color); + transform: var(--rz-validator-transform); + box-shadow: var(--rz-validator-shadow); + padding: var(--rz-validator-padding); + border-radius: var(--rz-border-radius); + color: var(--rz-validator-color); + pointer-events: none; +} +.rz-message-popup:before { + content: ""; + border: var(--rz-validator-pointer-size) solid transparent; + border-bottom-color: var(--rz-validator-background-color); + position: absolute; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); +} + +.rz-layout::-webkit-scrollbar, +.rz-layout ::-webkit-scrollbar, +.rz-scrollbars::-webkit-scrollbar, +.rz-scrollbars ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-thumb, +.rz-layout ::-webkit-scrollbar-thumb, +.rz-scrollbars::-webkit-scrollbar-thumb, +.rz-scrollbars ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-corner, +.rz-layout ::-webkit-scrollbar-corner, +.rz-scrollbars::-webkit-scrollbar-corner, +.rz-scrollbars ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-login { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rz-login .rz-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.rz-login .rz-form .rz-form-row { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} +.rz-login .rz-form .rz-form-row .rz-label { + flex: 1 8rem; +} +.rz-login .rz-form .rz-form-row .rz-form-input-wrapper { + flex: 3 14rem; +} +.rz-login .rz-form .rz-form-row .rz-textbox { + display: block; + width: 100%; +} +.rz-login .rz-form .rz-form-row .rz-textbox.invalid { + border: var(--rz-border-danger); +} +.rz-login .rz-form .rz-form-row .rz-switch { + margin-inline-end: 0.5rem; +} +.rz-login .rz-form .rz-messages-error { + position: absolute; +} +.rz-login .rz-register { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: var(--rz-login-register-background-color); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); + border-radius: var(--rz-border-radius); +} +.rz-login .rz-register .rz-button { + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); +} +.rz-login .rz-login-buttons { + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.rz-lookup-panel { + background-color: var(--rz-lookup-panel-background-color); + padding: var(--rz-lookup-panel-padding); + container-type: inline-size; + container-name: rz-lookup-panel; +} + +.rz-lookup-search { + display: flex; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); +} +.rz-lookup-search input { + flex: auto; +} + +.ssrsviewer { + display: flex; +} +.ssrsviewer iframe { + flex: auto; +} + +.rz-map { + box-sizing: border-box; + height: var(--rz-map-height); + padding: var(--rz-map-padding); + background-color: var(--rz-map-background-color); + box-shadow: var(--rz-map-shadow); + border-radius: var(--rz-border-radius); +} + +.rz-map-container { + height: 100%; +} + +.rz-gauge, +.rz-arc-gauge { + box-sizing: border-box; + position: relative; + display: inline-block; + width: 300px; + height: 300px; +} + +.rz-gauge .rz-line, +.rz-gauge .rz-tick { + stroke: var(--rz-gauge-scale-color); +} +.rz-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-scale-label-color); +} + +.rz-arc-gauge .rz-line, +.rz-arc-gauge .rz-tick { + stroke: var(--rz-gauge-arc-scale-color); +} +.rz-arc-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-arc-scale-label-color); +} + +.rz-gauge-value { + position: absolute; + transform: translateX(-50%); + padding: 0.5rem; +} + +.rz-arc-gauge-value { + position: absolute; + transform: translate(-50%, -50%); + padding: 0.5rem; +} + +.rz-gauge-pointer { + fill: var(--rz-gauge-pointer-color); +} + +.rz-arc-gauge-scale-value { + fill: var(--rz-gauge-arc-value-color); +} + +.rz-arc-gauge-scale { + fill: var(--rz-gauge-arc-scale-color); +} + +.rz-progressbar { + box-sizing: border-box; + border-radius: var(--rz-progressbar-border-radius); + height: var(--rz-progressbar-height); + position: relative; + background-color: var(--rz-progressbar-background-color); + text-align: center; + display: flex; + align-items: center; +} + +.rz-progressbar-value { + border-radius: var(--rz-progressbar-border-radius); + position: absolute; + background-color: var(--rz-progressbar-value-background-color); + height: 100%; + width: 100%; + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-label { + position: relative; + width: 100%; + text-align: center; + font-size: var(--rz-progressbar-font-size); + line-height: var(--rz-progressbar-font-size); +} + +.rz-progressbar-circular { + box-sizing: border-box; + position: relative; +} + +.rz-progressbar-circular-viewbox { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.rz-progressbar-circular-label { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +.rz-progressbar-circular-background { + stroke: var(--rz-progressbar-background-color); + stroke-width: var(--rz-progressbar-circular-stroke-width); +} + +.rz-progressbar-circular-value { + stroke-linecap: var(--rz-progressbar-circular-value-endpoint); + stroke-width: var(--rz-progressbar-circular-value-stroke-width); + stroke: var(--rz-progressbar-value-background-color); + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-determinate .rz-progressbar-circular-value { + stroke-dasharray: 100; + transform: rotate(-0.25turn); +} + +.rz-progressbar-indeterminate { + overflow: hidden; +} +.rz-progressbar-indeterminate .rz-progressbar-value { + background-color: transparent; +} +.rz-progressbar-indeterminate .rz-progressbar-value:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} +.rz-progressbar-indeterminate .rz-progressbar-value:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; + animation-delay: 1.15s; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} +@keyframes rz-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 100%, 60% { + left: 100%; + right: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} +.rz-progressbar-indeterminate .rz-progressbar-circular-value { + animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + transform-origin: 0 0; +} +@keyframes rz-progressbar-circular-indeterminate-anim-rotate { + 100% { + transform: rotate(1turn); + } +} +@keyframes rz-progressbar-circular-indeterminate-anim-dash { + 0% { + stroke-dasharray: 1, 100; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -28; + } + 100% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -99; + } +} + +.rz-progressbar.rz-progressbar-primary { + color: var(--rz-on-primary); +} + +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value { + background-color: var(--rz-primary); +} +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:before { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:after { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); +} + +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); +} +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:before { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:after { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar.rz-progressbar-info { + color: var(--rz-on-info); +} + +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-value { + background-color: var(--rz-info); +} +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:before { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:after { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar.rz-progressbar-warning { + color: var(--rz-on-warning); +} + +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-value { + background-color: var(--rz-warning); +} +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:before { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:after { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-danger { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-success { + color: var(--rz-on-success); +} + +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value { + background-color: var(--rz-success); +} +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:before { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:after { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} + +.rz-scheme-pastel .rz-series-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} + +.rz-scheme-pastel .rz-series-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} + +.rz-scheme-pastel .rz-series-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} + +.rz-scheme-pastel .rz-series-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} + +.rz-scheme-pastel .rz-series-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} + +.rz-scheme-pastel .rz-series-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} + +.rz-scheme-pastel .rz-series-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} + +.rz-scheme-pastel .rz-series-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} + +.rz-scheme-pastel .rz-series-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-9-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} + +.rz-scheme-pastel .rz-series-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-10-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} + +.rz-scheme-pastel .rz-series-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-11-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} + +.rz-scheme-pastel .rz-series-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-12-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} + +.rz-scheme-pastel .rz-series-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-13-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} + +.rz-scheme-pastel .rz-series-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-14-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} + +.rz-scheme-pastel .rz-series-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-15-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} + +.rz-scheme-pastel .rz-series-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-16-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} + +.rz-scheme-pastel .rz-series-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-17-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} + +.rz-scheme-pastel .rz-series-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-18-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} + +.rz-scheme-pastel .rz-series-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-19-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} + +.rz-scheme-pastel .rz-series-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-20-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} + +.rz-scheme-pastel .rz-series-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-21-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} + +.rz-scheme-pastel .rz-series-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-22-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} + +.rz-scheme-pastel .rz-series-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-23-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} + +.rz-scheme-palette .rz-series-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} +.rz-scheme-palette .rz-series-item-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} + +.rz-scheme-palette .rz-series-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} + +.rz-scheme-palette .rz-series-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #665191; +} +.rz-scheme-palette .rz-series-item-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #665191; +} + +.rz-scheme-palette .rz-series-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #a05195; +} +.rz-scheme-palette .rz-series-item-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #a05195; +} + +.rz-scheme-palette .rz-series-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #d45087; +} +.rz-scheme-palette .rz-series-item-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #d45087; +} + +.rz-scheme-palette .rz-series-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} + +.rz-scheme-palette .rz-series-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} + +.rz-scheme-palette .rz-series-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} +.rz-scheme-palette .rz-series-item-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} + +.rz-scheme-monochrome .rz-series-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} + +.rz-scheme-monochrome .rz-series-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #296080; +} +.rz-scheme-monochrome .rz-series-item-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #296080; +} + +.rz-scheme-monochrome .rz-series-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #437594; +} +.rz-scheme-monochrome .rz-series-item-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #437594; +} + +.rz-scheme-monochrome .rz-series-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} + +.rz-scheme-monochrome .rz-series-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} + +.rz-scheme-monochrome .rz-series-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} + +.rz-scheme-monochrome .rz-series-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} + +.rz-scheme-monochrome .rz-series-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} + +.rz-scheme-divergent .rz-series-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #00876c; +} +.rz-scheme-divergent .rz-series-item-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #00876c; +} + +.rz-scheme-divergent .rz-series-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} + +.rz-scheme-divergent .rz-series-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} + +.rz-scheme-divergent .rz-series-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} + +.rz-scheme-divergent .rz-series-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} + +.rz-scheme-divergent .rz-series-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} + +.rz-scheme-divergent .rz-series-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} + +.rz-scheme-divergent .rz-series-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #e27076; +} +.rz-scheme-divergent .rz-series-item-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #e27076; +} + +.rz-scheme-divergent .rz-series-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} + +.rz-marker { + stroke: var(--rz-chart-marker-stroke); +} + +.rz-area-series .rz-marker { + fill-opacity: 1; +} + +.rz-axis { + stroke: var(--rz-chart-axis-color); + font-size: var(--rz-chart-axis-font-size); +} + +.rz-axis .rz-grid-line { + stroke: var(--rz-chart-axis-color); +} + +.rz-tick-text { + stroke: none; + fill: var(--rz-chart-axis-label-color); +} + +.rz-series-data-label { + fill: var(--rz-chart-axis-label-color); +} + +.rz-value-axis .rz-tick-text { + text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; +} + +.rz-category-axis .rz-tick-text { + text-anchor: middle; +} + +.rz-axis .rz-axis-title { + stroke: none; + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-title { + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-content { + height: 100%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rz-legend { + position: absolute; + display: flex; + font-size: var(--rz-chart-legend-font-size); +} + +.rz-legend-right { + right: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-left { + left: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-top { + top: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-bottom { + bottom: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-items { + padding: 0; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; +} + +.rz-legend-item { + display: flex; + align-items: center; + gap: 4px; + margin: 4px; + cursor: pointer; +} +.rz-legend-item:focus { + outline: var(--rz-outline-normal); +} +.rz-legend-item:focus-visible { + outline: var(--rz-chart-legend-focus-outline); + outline-offset: var(--rz-chart-legend-focus-outline-offset); + border-radius: var(--rz-border-radius); +} + +.rz-legend-top .rz-legend-item, +.rz-legend-bottom .rz-legend-item { + display: inline-flex; +} + +.rz-chart-tooltip { + position: absolute; + transform: translate(-50%, -100%); + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-chart-tooltip-content { + background: var(--rz-chart-tooltip-background); + color: var(--rz-chart-tooltip-color); + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + padding: 0.25rem 0.5rem; + border-radius: var(--rz-border-radius); + white-space: nowrap; +} + +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content { + margin-bottom: 15px; +} +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + left: 50%; + bottom: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -11px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-link { + box-sizing: border-box; + color: var(--rz-link-color); + text-decoration: none; + cursor: pointer; +} +.rz-link .rz-link-text { + text-decoration: var(--rz-link-text-decoration); +} +.rz-link .rzi { + font-size: inherit; + vertical-align: middle; +} +.rz-link:hover, .rz-link:focus { + color: var(--rz-link-hover-color); + text-decoration: none; +} +.rz-link:hover .rz-link-text, .rz-link:focus .rz-link-text { + text-decoration: var(--rz-link-hover-text-decoration); +} +.rz-link:focus-visible { + outline: var(--rz-link-focus-outline); +} + +.rz-state-highlight .link { + color: var(--rz-text-contrast-color); +} + +.rz-html-editor { + box-sizing: border-box; + display: flex; + flex-direction: column; + border-radius: var(--rz-editor-border-radius); + border: var(--rz-editor-border); + overflow: hidden; +} +.rz-html-editor:focus-within { + outline: var(--rz-editor-focus-outline); + outline-offset: var(--rz-editor-focus-outline-offset); +} + +.rz-html-editor-content { + flex: 1; + overflow: auto; + padding: 0.5rem; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-source.rz-textarea { + --rz-input-hover-shadow: none; + --rz-input-border: none; + --rz-input-hover-border: none; + --rz-input-focus-shadow: none; + --rz-input-focus-border: none; + flex: 1; + padding: 0.5rem; + overflow: auto; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-toolbar { + border-bottom: var(--rz-editor-border); + display: flex; + line-height: 1rem; + flex-wrap: wrap; + background-color: var(--rz-editor-toolbar-background-color); +} +.rz-html-editor-toolbar .rzi { + font-size: 1rem; +} +.rz-html-editor-toolbar > * { + margin: var(--rz-editor-toolbar-item-margin); +} + +.rz-html-editor-colorpicker { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger { + color: inherit; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} +.rz-html-editor-colorpicker .rz-colorpicker-value { + display: none; +} +.rz-html-editor-colorpicker .rz-colorpicker { + border: none; + box-shadow: none; + padding: 0; + height: auto; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} + +.rz-html-editor-color { + border: none; + display: flex; + flex-direction: column; + background: inherit; + color: inherit; + appearance: none; + padding: 0; + position: relative; +} +.rz-html-editor-color:disabled { + color: var(--rz-input-disabled-color); +} + +.rz-html-editor-color-value { + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; +} + +.rz-html-editor-button { + color: var(--rz-editor-button-color); + appearance: none; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-button.rz-selected { + background-color: var(--rz-editor-button-selected-background-color); + color: var(--rz-editor-button-selected-color); + border-radius: var(--rz-editor-border-radius); +} +.rz-html-editor-button:disabled { + color: var(--rz-editor-button-disabled-color); +} + +.rz-html-editor-dropdown { + display: inline-flex; + padding: var(--rz-editor-button-padding); + align-items: center; + cursor: pointer; +} +.rz-html-editor-dropdown.rz-disabled { + color: var(--rz-input-disabled-color); + cursor: default; +} + +.rz-html-editor-dropdown-item { + cursor: default; + font-size: var(--rz-dropdown-item-font-size); + padding: var(--rz-dropdown-item-padding); + white-space: nowrap; +} +.rz-html-editor-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-html-editor-dropdown-item.rz-selected { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); +} + +.rz-html-editor-dropdown-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: inherit; + background-color: inherit; +} +.rz-html-editor-dropdown-trigger .rzi:before { + content: "arrow_drop_down"; +} + +.rz-html-editor-dropdown-items { + display: none; +} + +.rz-html-editor-dialog-item { + margin-bottom: 1rem; +} +.rz-html-editor-dialog-item label:first-child { + display: block; +} + +.rz-html-editor-dialog-buttons { + text-align: right; +} + +.rz-html-editor-separator { + width: 1px; + background-color: var(--rz-editor-separator-background-color); +} + +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; +} +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} + +.rz-colorpicker { + display: inline-flex; + align-items: center; + cursor: pointer; +} +.rz-colorpicker.rz-state-disabled { + cursor: default; +} + +button.rz-colorpicker-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: var(--rz-text-color); + background-color: inherit; + outline: none; +} +button.rz-colorpicker-trigger .rzi { + font-size: var(--rz-icon-size); +} +button.rz-colorpicker-trigger .rzi:before { + content: "arrow_drop_down"; +} +.rz-state-disabled button.rz-colorpicker-trigger { + color: var(--rz-input-disabled-color); +} + +.rz-colorpicker-popup { + display: none; + position: absolute; + border: var(--rz-colorpicker-panel-border); + background-color: var(--rz-colorpicker-panel-background-color); + box-shadow: var(--rz-colorpicker-panel-shadow); + min-width: 200px; + max-width: var(--rz-colorpicker-panel-max-width); + padding: var(--rz-colorpicker-panel-padding); + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-value { + flex: 1; + border-radius: var(--rz-colorpicker-value-border-radius); + border: var(--rz-colorpicker-panel-border); + min-width: 20px; + min-height: 20px; +} + +.rz-saturation-picker { + height: var(--rz-colorpicker-saturation-height); + position: relative; + touch-action: none; + border-radius: var(--rz-border-radius); +} +.rz-saturation-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-saturation-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-saturation-white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} + +.rz-saturation-black, +.rz-saturation-white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--rz-border-radius); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); +} + +.rz-saturation-black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} + +.rz-saturation-handle { + position: absolute; + width: var(--rz-colorpicker-handle-size); + height: var(--rz-colorpicker-handle-size); + border: var(--rz-colorpicker-handle-border); + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-hue-picker { + margin-bottom: 8px; + touch-action: none; + position: relative; + background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-hue-picker:active { + cursor: none; +} +.rz-hue-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-hue-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-alpha-picker { + touch-action: none; + position: relative; + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-alpha-picker:active { + cursor: none; +} +.rz-alpha-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-alpha-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-hue-handle, +.rz-alpha-handle { + position: absolute; + height: 100%; + width: 8px; + border: var(--rz-colorpicker-handle-border); + border-radius: calc(var(--rz-border-radius) / 2); + transform: translateX(-50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-colorpicker-preview-area { + display: flex; +} + +.rz-hue-and-alpha { + flex: 1; + padding-inline-end: 8px; +} + +.rz-alpha-picker:before, +.rz-colorpicker-preview:before { + position: absolute; + z-index: -1; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--rz-border-radius); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); + background-size: 8px 8px; + background-position: 0 0, 0 4px, 4px -4px, -4px 0px; +} + +.rz-colorpicker-preview { + position: relative; + width: 32px; + height: 32px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-rgba { + display: flex; + gap: 4px; +} + +.rz-color-box { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + color: var(--rz-colorpicker-input-labels-color); + font-size: 0.75rem; + text-transform: uppercase; +} +.rz-color-box .rz-textbox { + width: 80px; + margin-inline-end: 4px; + padding: var(--rz-colorpicker-hex-input-padding); + height: var(--rz-colorpicker-hex-input-height); +} +.rz-color-box .rz-numeric { + padding: var(--rz-colorpicker-rgba-input-padding); + height: var(--rz-colorpicker-rgba-input-height); +} +.rz-color-box .rz-numeric .rz-numeric-input { + padding: 0; + outline: none; +} +.rz-color-box .rz-numeric button { + display: none; +} +.rz-color-box .rz-numeric button:hover { + display: initial; +} + +.rz-colorpicker-button { + justify-content: flex-end; + display: flex; +} + +.rz-colorpicker-section:not(:last-child) { + margin-bottom: 8px; +} + +.rz-colorpicker-colors { + display: flex; + flex-wrap: wrap; + gap: var(--rz-colorpicker-items-gap); +} + +.rz-colorpicker-item { + width: var(--rz-colorpicker-item-size); + height: var(--rz-colorpicker-item-size); + border-radius: var(--rz-colorpicker-item-border-radius); + box-shadow: var(--rz-colorpicker-item-shadow); + cursor: pointer; +} +.rz-colorpicker-item:focus { + outline: var(--rz-outline-normal); +} +.rz-colorpicker-item:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-splitter { + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 100%; +} +.rz-splitter > .rz-splitter-bar { + flex: 0 0 auto; + position: relative; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--rz-splitter-bar-color); + background-color: var(--rz-splitter-bar-background-color); + opacity: 0.4; + user-select: none; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color); + border-radius: 1px; +} +.rz-splitter > .rz-splitter-bar > .rz-expand { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar-resizable:hover { + background-color: var(--rz-splitter-bar-background-color); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active { + background-color: var(--rz-splitter-bar-background-color-active); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-expand, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-collapse { + color: var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:disabled { + opacity: 0.2; +} +.rz-splitter-horizontal { + flex-direction: row; +} +.rz-splitter-horizontal > .rz-splitter-bar { + flex-direction: column; + width: 8px; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_left"; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-resize { + height: 16px; + margin: 2px 0; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before { + content: "arrow_right"; +} +.rz-splitter-horizontal > .rz-splitter-bar-resizable:hover { + cursor: col-resize; +} +.rz-splitter-vertical { + flex-direction: column; +} +.rz-splitter-vertical > .rz-splitter-bar { + flex-direction: row; + height: 8px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_drop_up"; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-resize { + width: 16px; + margin: 0 2px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-expand:before { + content: "arrow_drop_down"; +} +.rz-splitter-vertical > .rz-splitter-bar-resizable:hover { + cursor: row-resize; +} +.rz-splitter-pane { + overflow: hidden; + position: relative; + flex: 0 0 auto; +} +.rz-splitter-pane-collapsed { + flex: 0 1 0% !important; + overflow: hidden !important; + display: block !important; +} +.rz-splitter-pane-lastresizable { + flex: 1 1 auto; +} + +.rz-splitter-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* RadzenLayout styles */ +.rz-layout { + box-sizing: border-box; + height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; + background-color: var(--rz-layout-background-color); +} +.rz-layout .rz-body { + grid-area: rz-body; + overflow: auto; +} +.rz-layout .rz-sidebar { + grid-area: rz-sidebar; + position: static; +} +.rz-layout .rz-header { + grid-area: rz-header; + z-index: 2; +} +.rz-layout .rz-footer { + grid-area: rz-footer; +} + +@media (max-width: 768px) { + body:has(> .rz-layout) { + overflow-x: hidden; + } + .rz-header, + .rz-footer, + .rz-body { + width: 100vw; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } +} +.rz-breadcrumb { + box-sizing: border-box; + display: flex; + align-items: center; +} + +.rz-breadcrumb-item + .rz-breadcrumb-item::before { + content: "»"; + display: inline-block; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + font-size: 1rem; + line-height: 1.25rem; +} + +.rz-breadcrumb-item { + display: inline-flex; + align-items: center; +} +.rz-breadcrumb-item .rz-link { + display: inline-flex; + align-items: center; +} + +.rz-alert { + box-sizing: border-box; + display: flex; + align-items: flex-start; + gap: var(--rz-alert-gap); + margin: var(--rz-alert-margin); + padding: var(--rz-alert-padding); + width: 100%; + border-radius: var(--rz-alert-border-radius); + background-color: var(--rz-alert-background-color); + color: var(--rz-alert-color); +} +.rz-alert-lg { + --rz-alert-gap: 1.5rem; + --rz-alert-margin: 1.5rem 0; + --rz-alert-padding: 1.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-md { + --rz-alert-gap: 1rem; + --rz-alert-margin: 1rem 0; + --rz-alert-padding: 1rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-sm { + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 0.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-xs { + --rz-alert-gap: 0.25rem; + --rz-alert-margin: 0.25rem 0; + --rz-alert-padding: 0.25rem; + --rz-alert-message-margin: 0; + --rz-alert-icon-margin: 0; +} +.rz-alert .rz-alert-item { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-alert-gap); +} +.rz-alert .rz-alert-icon { + color: var(--rz-alert-icon-color); + margin: var(--rz-alert-icon-margin); + font-size: var(--rz-alert-icon-size); +} +.rz-alert .rz-alert-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + margin: var(--rz-alert-message-margin); +} +.rz-alert .rz-alert-title { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-alert-title-color); + margin-bottom: var(--rz-text-h6-margin-bottom); +} +.rz-alert.rz-variant-filled { + box-shadow: var(--rz-alert-box-shadow); +} +.rz-alert.rz-variant-text { + --rz-alert-padding: 0; + --rz-alert-background-color: transparent; + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0; +} +.rz-alert.rz-variant-text .rz-alert-item { + flex: unset; +} +.rz-alert.rz-variant-text .rz-alert-message { + flex-direction: row; +} +.rz-alert.rz-variant-text .rz-alert-title { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + margin-bottom: 0; + margin-right: 0.5rem; +} +.rz-alert.rz-primary { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-primary-lighter); + --rz-alert-color: var(--rz-on-primary-lighter); + --rz-alert-title-color: var(--rz-on-primary-lighter); + --rz-alert-icon-color: var(--rz-on-primary-lighter); +} +.rz-alert.rz-primary.rz-shade-light { + --rz-alert-background-color: var(--rz-primary-light); + --rz-alert-color: var(--rz-on-primary-light); + --rz-alert-title-color: var(--rz-on-primary-light); + --rz-alert-icon-color: var(--rz-on-primary-light); +} +.rz-alert.rz-primary.rz-shade-default { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-dark { + --rz-alert-background-color: var(--rz-primary-dark); + --rz-alert-color: var(--rz-on-primary-dark); + --rz-alert-title-color: var(--rz-on-primary-dark); + --rz-alert-icon-color: var(--rz-on-primary-dark); +} +.rz-alert.rz-primary.rz-shade-darker { + --rz-alert-background-color: var(--rz-primary-darker); + --rz-alert-color: var(--rz-on-primary-darker); + --rz-alert-title-color: var(--rz-on-primary-darker); + --rz-alert-icon-color: var(--rz-on-primary-darker); +} +.rz-alert.rz-variant-outlined.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + --rz-alert-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-variant-text.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-default { + --rz-alert-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-lighter { + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-light { + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-dark { + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-darker { + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-secondary { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-on-secondary-lighter); + --rz-alert-title-color: var(--rz-on-secondary-lighter); + --rz-alert-icon-color: var(--rz-on-secondary-lighter); +} +.rz-alert.rz-secondary.rz-shade-light { + --rz-alert-background-color: var(--rz-secondary-light); + --rz-alert-color: var(--rz-on-secondary-light); + --rz-alert-title-color: var(--rz-on-secondary-light); + --rz-alert-icon-color: var(--rz-on-secondary-light); +} +.rz-alert.rz-secondary.rz-shade-default { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-dark { + --rz-alert-background-color: var(--rz-secondary-dark); + --rz-alert-color: var(--rz-on-secondary-dark); + --rz-alert-title-color: var(--rz-on-secondary-dark); + --rz-alert-icon-color: var(--rz-on-secondary-dark); +} +.rz-alert.rz-secondary.rz-shade-darker { + --rz-alert-background-color: var(--rz-secondary-darker); + --rz-alert-color: var(--rz-on-secondary-darker); + --rz-alert-title-color: var(--rz-on-secondary-darker); + --rz-alert-icon-color: var(--rz-on-secondary-darker); +} +.rz-alert.rz-variant-outlined.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + --rz-alert-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-variant-text.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-default { + --rz-alert-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-lighter { + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-light { + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-dark { + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-darker { + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-info { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-lighter { + --rz-alert-background-color: var(--rz-info-lighter); + --rz-alert-color: var(--rz-on-info-lighter); + --rz-alert-title-color: var(--rz-on-info-lighter); + --rz-alert-icon-color: var(--rz-on-info-lighter); +} +.rz-alert.rz-info.rz-shade-light { + --rz-alert-background-color: var(--rz-info-light); + --rz-alert-color: var(--rz-on-info-light); + --rz-alert-title-color: var(--rz-on-info-light); + --rz-alert-icon-color: var(--rz-on-info-light); +} +.rz-alert.rz-info.rz-shade-default { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-dark { + --rz-alert-background-color: var(--rz-info-dark); + --rz-alert-color: var(--rz-on-info-dark); + --rz-alert-title-color: var(--rz-on-info-dark); + --rz-alert-icon-color: var(--rz-on-info-dark); +} +.rz-alert.rz-info.rz-shade-darker { + --rz-alert-background-color: var(--rz-info-darker); + --rz-alert-color: var(--rz-on-info-darker); + --rz-alert-title-color: var(--rz-on-info-darker); + --rz-alert-icon-color: var(--rz-on-info-darker); +} +.rz-alert.rz-variant-outlined.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + --rz-alert-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-variant-text.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-info.rz-shade-default { + --rz-alert-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-lighter { + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-light { + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-dark { + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-darker { + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-warning { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-lighter { + --rz-alert-background-color: var(--rz-warning-lighter); + --rz-alert-color: var(--rz-on-warning-lighter); + --rz-alert-title-color: var(--rz-on-warning-lighter); + --rz-alert-icon-color: var(--rz-on-warning-lighter); +} +.rz-alert.rz-warning.rz-shade-light { + --rz-alert-background-color: var(--rz-warning-light); + --rz-alert-color: var(--rz-on-warning-light); + --rz-alert-title-color: var(--rz-on-warning-light); + --rz-alert-icon-color: var(--rz-on-warning-light); +} +.rz-alert.rz-warning.rz-shade-default { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-dark { + --rz-alert-background-color: var(--rz-warning-dark); + --rz-alert-color: var(--rz-on-warning-dark); + --rz-alert-title-color: var(--rz-on-warning-dark); + --rz-alert-icon-color: var(--rz-on-warning-dark); +} +.rz-alert.rz-warning.rz-shade-darker { + --rz-alert-background-color: var(--rz-warning-darker); + --rz-alert-color: var(--rz-on-warning-darker); + --rz-alert-title-color: var(--rz-on-warning-darker); + --rz-alert-icon-color: var(--rz-on-warning-darker); +} +.rz-alert.rz-variant-outlined.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + --rz-alert-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-variant-text.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-default { + --rz-alert-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-lighter { + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-light { + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-dark { + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-darker { + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-error { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-error.rz-shade-lighter { + --rz-alert-background-color: var(--rz-error-lighter); + --rz-alert-color: var(--rz-on-error-lighter); + --rz-alert-title-color: var(--rz-on-error-lighter); + --rz-alert-icon-color: var(--rz-on-error-lighter); +} +.rz-alert.rz-error.rz-shade-light { + --rz-alert-background-color: var(--rz-error-light); + --rz-alert-color: var(--rz-on-error-light); + --rz-alert-title-color: var(--rz-on-error-light); + --rz-alert-icon-color: var(--rz-on-error-light); +} +.rz-alert.rz-error.rz-shade-default { + --rz-alert-background-color: var(--rz-error); + --rz-alert-color: var(--rz-on-error); + --rz-alert-title-color: var(--rz-on-error); + --rz-alert-icon-color: var(--rz-on-error); +} +.rz-alert.rz-error.rz-shade-dark { + --rz-alert-background-color: var(--rz-error-dark); + --rz-alert-color: var(--rz-on-error-dark); + --rz-alert-title-color: var(--rz-on-error-dark); + --rz-alert-icon-color: var(--rz-on-error-dark); +} +.rz-alert.rz-error.rz-shade-darker { + --rz-alert-background-color: var(--rz-error-darker); + --rz-alert-color: var(--rz-on-error-darker); + --rz-alert-title-color: var(--rz-on-error-darker); + --rz-alert-icon-color: var(--rz-on-error-darker); +} +.rz-alert.rz-variant-outlined.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-variant-text.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-error.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-lighter { + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-light { + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-dark { + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-darker { + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-danger { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-lighter { + --rz-alert-background-color: var(--rz-danger-lighter); + --rz-alert-color: var(--rz-on-danger-lighter); + --rz-alert-title-color: var(--rz-on-danger-lighter); + --rz-alert-icon-color: var(--rz-on-danger-lighter); +} +.rz-alert.rz-danger.rz-shade-light { + --rz-alert-background-color: var(--rz-danger-light); + --rz-alert-color: var(--rz-on-danger-light); + --rz-alert-title-color: var(--rz-on-danger-light); + --rz-alert-icon-color: var(--rz-on-danger-light); +} +.rz-alert.rz-danger.rz-shade-default { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-dark { + --rz-alert-background-color: var(--rz-danger-dark); + --rz-alert-color: var(--rz-on-danger-dark); + --rz-alert-title-color: var(--rz-on-danger-dark); + --rz-alert-icon-color: var(--rz-on-danger-dark); +} +.rz-alert.rz-danger.rz-shade-darker { + --rz-alert-background-color: var(--rz-danger-darker); + --rz-alert-color: var(--rz-on-danger-darker); + --rz-alert-title-color: var(--rz-on-danger-darker); + --rz-alert-icon-color: var(--rz-on-danger-darker); +} +.rz-alert.rz-variant-outlined.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-variant-text.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-lighter { + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-light { + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-dark { + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-darker { + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-success { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-lighter { + --rz-alert-background-color: var(--rz-success-lighter); + --rz-alert-color: var(--rz-on-success-lighter); + --rz-alert-title-color: var(--rz-on-success-lighter); + --rz-alert-icon-color: var(--rz-on-success-lighter); +} +.rz-alert.rz-success.rz-shade-light { + --rz-alert-background-color: var(--rz-success-light); + --rz-alert-color: var(--rz-on-success-light); + --rz-alert-title-color: var(--rz-on-success-light); + --rz-alert-icon-color: var(--rz-on-success-light); +} +.rz-alert.rz-success.rz-shade-default { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-dark { + --rz-alert-background-color: var(--rz-success-dark); + --rz-alert-color: var(--rz-on-success-dark); + --rz-alert-title-color: var(--rz-on-success-dark); + --rz-alert-icon-color: var(--rz-on-success-dark); +} +.rz-alert.rz-success.rz-shade-darker { + --rz-alert-background-color: var(--rz-success-darker); + --rz-alert-color: var(--rz-on-success-darker); + --rz-alert-title-color: var(--rz-on-success-darker); + --rz-alert-icon-color: var(--rz-on-success-darker); +} +.rz-alert.rz-variant-outlined.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + --rz-alert-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-variant-text.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-success.rz-shade-default { + --rz-alert-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-lighter { + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-light { + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-dark { + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-darker { + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-base { + --rz-alert-background-color: var(--rz-base-700); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-base { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-base { + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-light { + --rz-alert-background-color: var(--rz-base-700); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-light { + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-dark { + --rz-alert-background-color: var(--rz-base-900); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-dark { + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} + +@keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +@-webkit-keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +.rz-button.rz-speech-to-text-button-recording { + -webkit-animation: mic-blink 2s linear infinite; + -moz-animation: mic-blink 2s linear infinite; + animation: mic-blink 2s linear infinite; +} + +.rz-flex-row { + flex-direction: row !important; +} + +.rz-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.rz-flex-column { + flex-direction: column !important; +} + +.rz-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.rz-stack { + box-sizing: border-box; + gap: var(--rz-gap); +} + +.rz-row { + box-sizing: border-box; + flex-wrap: wrap; + gap: var(--rz-gap); + row-gap: var(--rz-row-gap); +} + +.rz-row > [class^=rz-col] { + flex: 1 0 0%; +} + +.rz-row > [class*=rz-col-] { + flex: 0 0 auto; + width: 100%; +} + +.rz-row > .rz-col-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); +} + +.rz-row > .rz-col-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-row > .rz-col-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-row > .rz-col-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-row > .rz-col-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-row > .rz-col-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-row > .rz-col-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-row > .rz-col-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-row > .rz-col-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-row > .rz-col-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-row > .rz-col-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-row > .rz-col-12 { + max-width: 100%; + flex-basis: 100%; +} + +@media (min-width: 576px) { + .rz-row > .rz-col-xs-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xs-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 768px) { + .rz-row > .rz-col-sm-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-sm-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1024px) { + .rz-row > .rz-col-md-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-md-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-md-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-md-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-md-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-md-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-md-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-md-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-md-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-md-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-md-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-md-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1280px) { + .rz-row > .rz-col-lg-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-lg-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1920px) { + .rz-row > .rz-col-xl-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xl-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 2560px) { + .rz-row > .rz-col-xx-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xx-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-12 { + max-width: 100%; + flex-basis: 100%; + } +} +.rz-offset-0 { + margin-inline-start: 0; +} + +.rz-offset-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-offset-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-offset-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-offset-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-offset-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-offset-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-offset-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-offset-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-offset-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-offset-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-offset-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); +} + +@media (min-width: 576px) { + .rz-offset-xs-0 { + margin-inline-start: 0; + } + .rz-offset-xs-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xs-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xs-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xs-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xs-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xs-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xs-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xs-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xs-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xs-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xs-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 768px) { + .rz-offset-sm-0 { + margin-inline-start: 0; + } + .rz-offset-sm-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-sm-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-sm-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-sm-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-sm-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-sm-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-sm-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-sm-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-sm-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-sm-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-sm-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1024px) { + .rz-offset-md-0 { + margin-inline-start: 0; + } + .rz-offset-md-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-md-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-md-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-md-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-md-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-md-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-md-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-md-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-md-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-md-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-md-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1280px) { + .rz-offset-lg-0 { + margin-inline-start: 0; + } + .rz-offset-lg-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-lg-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-lg-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-lg-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-lg-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-lg-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-lg-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-lg-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-lg-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-lg-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-lg-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1920px) { + .rz-offset-xl-0 { + margin-inline-start: 0; + } + .rz-offset-xl-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xl-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xl-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xl-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xl-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xl-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xl-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xl-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xl-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xl-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xl-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 2560px) { + .rz-offset-xx-0 { + margin-inline-start: 0; + } + .rz-offset-xx-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xx-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xx-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xx-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xx-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xx-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xx-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xx-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xx-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xx-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xx-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +.rz-order-first { + order: -1 !important; +} + +.rz-order-last { + order: 13 !important; +} + +.rz-order-0 { + order: 0 !important; +} + +.rz-order-1 { + order: 1 !important; +} + +.rz-order-2 { + order: 2 !important; +} + +.rz-order-3 { + order: 3 !important; +} + +.rz-order-4 { + order: 4 !important; +} + +.rz-order-5 { + order: 5 !important; +} + +.rz-order-6 { + order: 6 !important; +} + +.rz-order-7 { + order: 7 !important; +} + +.rz-order-8 { + order: 8 !important; +} + +.rz-order-9 { + order: 9 !important; +} + +.rz-order-10 { + order: 10 !important; +} + +.rz-order-11 { + order: 11 !important; +} + +.rz-order-12 { + order: 12 !important; +} + +@media (min-width: 576px) { + .rz-order-xs-first { + order: -1 !important; + } + .rz-order-xs-last { + order: 13 !important; + } + .rz-order-xs-0 { + order: 0 !important; + } + .rz-order-xs-1 { + order: 1 !important; + } + .rz-order-xs-2 { + order: 2 !important; + } + .rz-order-xs-3 { + order: 3 !important; + } + .rz-order-xs-4 { + order: 4 !important; + } + .rz-order-xs-5 { + order: 5 !important; + } + .rz-order-xs-6 { + order: 6 !important; + } + .rz-order-xs-7 { + order: 7 !important; + } + .rz-order-xs-8 { + order: 8 !important; + } + .rz-order-xs-9 { + order: 9 !important; + } + .rz-order-xs-10 { + order: 10 !important; + } + .rz-order-xs-11 { + order: 11 !important; + } + .rz-order-xs-12 { + order: 12 !important; + } +} +@media (min-width: 768px) { + .rz-order-sm-first { + order: -1 !important; + } + .rz-order-sm-last { + order: 13 !important; + } + .rz-order-sm-0 { + order: 0 !important; + } + .rz-order-sm-1 { + order: 1 !important; + } + .rz-order-sm-2 { + order: 2 !important; + } + .rz-order-sm-3 { + order: 3 !important; + } + .rz-order-sm-4 { + order: 4 !important; + } + .rz-order-sm-5 { + order: 5 !important; + } + .rz-order-sm-6 { + order: 6 !important; + } + .rz-order-sm-7 { + order: 7 !important; + } + .rz-order-sm-8 { + order: 8 !important; + } + .rz-order-sm-9 { + order: 9 !important; + } + .rz-order-sm-10 { + order: 10 !important; + } + .rz-order-sm-11 { + order: 11 !important; + } + .rz-order-sm-12 { + order: 12 !important; + } +} +@media (min-width: 1024px) { + .rz-order-md-first { + order: -1 !important; + } + .rz-order-md-last { + order: 13 !important; + } + .rz-order-md-0 { + order: 0 !important; + } + .rz-order-md-1 { + order: 1 !important; + } + .rz-order-md-2 { + order: 2 !important; + } + .rz-order-md-3 { + order: 3 !important; + } + .rz-order-md-4 { + order: 4 !important; + } + .rz-order-md-5 { + order: 5 !important; + } + .rz-order-md-6 { + order: 6 !important; + } + .rz-order-md-7 { + order: 7 !important; + } + .rz-order-md-8 { + order: 8 !important; + } + .rz-order-md-9 { + order: 9 !important; + } + .rz-order-md-10 { + order: 10 !important; + } + .rz-order-md-11 { + order: 11 !important; + } + .rz-order-md-12 { + order: 12 !important; + } +} +@media (min-width: 1280px) { + .rz-order-lg-first { + order: -1 !important; + } + .rz-order-lg-last { + order: 13 !important; + } + .rz-order-lg-0 { + order: 0 !important; + } + .rz-order-lg-1 { + order: 1 !important; + } + .rz-order-lg-2 { + order: 2 !important; + } + .rz-order-lg-3 { + order: 3 !important; + } + .rz-order-lg-4 { + order: 4 !important; + } + .rz-order-lg-5 { + order: 5 !important; + } + .rz-order-lg-6 { + order: 6 !important; + } + .rz-order-lg-7 { + order: 7 !important; + } + .rz-order-lg-8 { + order: 8 !important; + } + .rz-order-lg-9 { + order: 9 !important; + } + .rz-order-lg-10 { + order: 10 !important; + } + .rz-order-lg-11 { + order: 11 !important; + } + .rz-order-lg-12 { + order: 12 !important; + } +} +@media (min-width: 1920px) { + .rz-order-xl-first { + order: -1 !important; + } + .rz-order-xl-last { + order: 13 !important; + } + .rz-order-xl-0 { + order: 0 !important; + } + .rz-order-xl-1 { + order: 1 !important; + } + .rz-order-xl-2 { + order: 2 !important; + } + .rz-order-xl-3 { + order: 3 !important; + } + .rz-order-xl-4 { + order: 4 !important; + } + .rz-order-xl-5 { + order: 5 !important; + } + .rz-order-xl-6 { + order: 6 !important; + } + .rz-order-xl-7 { + order: 7 !important; + } + .rz-order-xl-8 { + order: 8 !important; + } + .rz-order-xl-9 { + order: 9 !important; + } + .rz-order-xl-10 { + order: 10 !important; + } + .rz-order-xl-11 { + order: 11 !important; + } + .rz-order-xl-12 { + order: 12 !important; + } +} +@media (min-width: 2560px) { + .rz-order-xx-first { + order: -1 !important; + } + .rz-order-xx-last { + order: 13 !important; + } + .rz-order-xx-0 { + order: 0 !important; + } + .rz-order-xx-1 { + order: 1 !important; + } + .rz-order-xx-2 { + order: 2 !important; + } + .rz-order-xx-3 { + order: 3 !important; + } + .rz-order-xx-4 { + order: 4 !important; + } + .rz-order-xx-5 { + order: 5 !important; + } + .rz-order-xx-6 { + order: 6 !important; + } + .rz-order-xx-7 { + order: 7 !important; + } + .rz-order-xx-8 { + order: 8 !important; + } + .rz-order-xx-9 { + order: 9 !important; + } + .rz-order-xx-10 { + order: 10 !important; + } + .rz-order-xx-11 { + order: 11 !important; + } + .rz-order-xx-12 { + order: 12 !important; + } +} +.rz-form-field-helper { + padding: var(--rz-form-field-helper-padding); +} + +.rz-form-field-content { + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); + box-shadow: var(--rz-form-field-shadow); + transition: var(--rz-input-transition); +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + flex: 1; +} +.rz-form-field-content .rz-form-field-start, +.rz-form-field-content .rz-form-field-end { + display: flex; + flex: 0; + align-items: center; + white-space: nowrap; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); +} + +.rz-form-field { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + vertical-align: top; +} +.rz-form-field:hover .rz-form-field-content { + box-shadow: var(--rz-form-field-hover-shadow); +} +.rz-form-field.rz-state-focused .rz-form-field-content { + box-shadow: var(--rz-form-field-focus-shadow); +} +.rz-form-field.rz-state-disabled .rz-form-field-content { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); +} +.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content { + border: var(--rz-input-disabled-border); +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled { + color: var(--rz-input-disabled-color); + opacity: 1; +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled::placeholder, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +.rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { + margin: 0; + --rz-input-height: var(--rz-form-field-filled-height); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); + --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); + box-shadow: var(--rz-input-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { + top: calc(var(--rz-numeric-button-offset) + 1rem); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end { + padding-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-textarea, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-textarea { + margin-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-datepicker-trigger, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-datepicker-trigger { + top: calc(50% + 0.4375rem); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-input-hover-border); + box-shadow: var(--rz-input-hover-shadow); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content { + border: var(--rz-input-focus-border); + box-shadow: var(--rz-input-focus-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content { + border: var(--rz-form-field-filled-border); + border-radius: var(--rz-form-field-filled-border-radius); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-filled .rz-form-field-content:after { + display: var(--rz-form-field-filled-underline-display); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-form-field-filled-hover-border); + box-shadow: var(--rz-form-field-filled-hover-shadow); + background-color: var(--rz-form-field-filled-hover-background-color); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused .rz-form-field-content, .rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused:hover .rz-form-field-content { + border: var(--rz-form-field-filled-focus-border); + box-shadow: var(--rz-form-field-filled-focus-shadow); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-text .rz-form-field-content { + border-color: transparent; + box-shadow: none; + --rz-input-background-color: transparent; + --rz-input-border-radius: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; + --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); +} +.rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { + padding: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-start { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-end { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { + content: ""; + position: absolute; + z-index: 1; + inset-inline-start: 50%; + inset-inline-end: 50%; + bottom: calc(-1 * var(--rz-border-width)); + height: calc(var(--rz-border-width) + 1px); + border: var(--rz-input-focus-border); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { + content: ""; + position: absolute; + inset: calc(-1 * var(--rz-border-width)); + top: auto; + height: var(--rz-border-width); + border-bottom: var(--rz-input-border); +} +.rz-form-field.rz-variant-filled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-hover-border); +} +.rz-form-field.rz-variant-filled.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-filled.rz-state-disabled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-disabled-border); +} +.rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); + border: var(--rz-input-focus-border); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); +} +.rz-form-field .rz-numeric-button { + display: none; +} +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { + display: block; +} + +.rz-form-field-label { + position: absolute; + pointer-events: none; + padding: var(--rz-form-field-label-padding); + inset-block-start: 50%; + inset-inline-end: auto; + border-radius: var(--rz-border-radius); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); + max-width: calc(100% - 1.5rem); + transform: translate(0, -50%); + background-color: transparent; + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); +} +.rz-state-disabled .rz-form-field-content > .rz-form-field-label { + color: var(--rz-input-disabled-color) !important; +} +.rz-form-field-label:last-child { + inset-inline-end: 1.5rem; +} +.rz-textarea ~ .rz-form-field-label { + inset-block-start: var(--rz-form-field-label-textarea-top); + transform: translate(0, 0); +} +.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { + transform: translate(0, 0.625rem); +} +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; + transform: translate(0, 0); + color: var(--rz-input-placeholder-color); + background-color: var(--rz-form-field-label-floating-background-color); + font-size: 0.75rem; + line-height: 1rem; + max-width: calc(100% - 1.5rem); +} +.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + background-color: inherit !important; +} +.invalid ~ .rz-form-field-label { + color: var(--rz-danger) !important; +} +.rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} + +.rz-timeline { + box-sizing: border-box; + display: flex; +} +.rz-timeline.rz-timeline-column { + flex-direction: column; +} +.rz-timeline.rz-timeline-column .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row { + flex-direction: row; +} +.rz-timeline.rz-timeline-row .rz-timeline-item { + flex-direction: column; + justify-content: end; + width: 100%; +} +.rz-timeline.rz-timeline-row.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: column-reverse; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse .rz-timeline-item { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column; + justify-content: end; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item { + flex-direction: column; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-end { + display: none; +} + +.rz-timeline-item { + display: flex; + padding: var(--rz-timeline-item-padding); + position: relative; +} +.rz-timeline-align-items-center .rz-timeline-item { + align-items: center; +} +.rz-timeline-align-items-normal .rz-timeline-item { + align-items: normal; +} +.rz-timeline-align-items-start .rz-timeline-item { + align-items: start; +} +.rz-timeline-align-items-end .rz-timeline-item { + align-items: end; +} +.rz-timeline-align-items-stretch .rz-timeline-item { + align-items: stretch; +} +.rz-timeline-item:before { + content: ""; + position: absolute; + background-color: var(--rz-timeline-line-color); +} +.rz-timeline-column .rz-timeline-item:before { + width: var(--rz-timeline-line-width); + top: 0; + bottom: 0; + left: calc(50% - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline-column .rz-timeline-item:first-child:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-top-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + top: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column .rz-timeline-item:last-child:before { + bottom: calc(50% - var(--rz-timeline-line-width) / 2); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + bottom: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + bottom: auto; + left: 0; + right: 0; + height: var(--rz-timeline-line-width); +} +.rz-timeline-row .rz-timeline-item:first-child:before { + left: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + left: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:last-child:before { + right: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-right-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + right: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} + +.rz-timeline-content-start { + text-align: center; +} +.rz-timeline-column .rz-timeline-content-start { + flex: 1 1 auto; + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-content-end { + flex: 1 1 auto; + text-align: center; +} +.rz-timeline-column .rz-timeline-content-end { + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} +.rz-timeline-row .rz-timeline-content-end { + max-height: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-axis { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 var(--rz-timeline-axis-size); +} +.rz-timeline-column .rz-timeline-axis { + width: var(--rz-timeline-axis-size); +} +.rz-timeline-row .rz-timeline-axis { + height: var(--rz-timeline-axis-size); +} + +.rz-timeline-point { + position: relative; + display: flex; + flex: 0 1 var(--rz-timeline-point-size); + align-items: center; + justify-content: center; + height: var(--rz-timeline-point-size); + width: var(--rz-timeline-point-size); + border: var(--rz-timeline-point-border); + border-radius: var(--rz-timeline-point-border-radius); + background-color: var(--rz-timeline-point-background-color); + color: var(--rz-timeline-point-color); +} + +.rz-timeline-point-outlined { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border-color: var(--rz-timeline-point-background-color); +} + +.rz-timeline-point-flat { + border: 0; +} + +.rz-timeline-point-text { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border: 0; +} + +.rz-timeline-point-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} + +.rz-timeline-point-outlined.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); + border-color: var(--rz-primary); +} + +.rz-timeline-point-text.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); +} + +.rz-timeline-point-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} + +.rz-timeline-point-outlined.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); + border-color: var(--rz-secondary); +} + +.rz-timeline-point-text.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); +} + +.rz-timeline-point-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} + +.rz-timeline-point-outlined.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); + border-color: var(--rz-info); +} + +.rz-timeline-point-text.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); +} + +.rz-timeline-point-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} + +.rz-timeline-point-outlined.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); + border-color: var(--rz-warning); +} + +.rz-timeline-point-text.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); +} + +.rz-timeline-point-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} + +.rz-timeline-point-outlined.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); + border-color: var(--rz-success); +} + +.rz-timeline-point-text.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); +} + +.rz-timeline-point-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); + border-color: var(--rz-base-700); +} + +.rz-timeline-point-text.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); +} + +.rz-timeline-point-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); + border-color: var(--rz-base-700); +} + +.rz-timeline-point-text.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); +} + +.rz-timeline-point-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); + border-color: var(--rz-base-900); +} + +.rz-timeline-point-text.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); +} + +.rz-timeline-axis-lg { + --rz-timeline-point-size: 3rem; +} +.rz-timeline-axis-lg .rzi { + font-size: 2rem; +} + +.rz-timeline-axis-md { + --rz-timeline-point-size: 1.5rem; +} +.rz-timeline-axis-md .rzi { + font-size: 1rem; +} + +.rz-timeline-axis-sm { + --rz-timeline-point-size: 1rem; +} +.rz-timeline-axis-sm .rzi { + font-size: 0.625rem; +} + +.rz-timeline-axis-xs { + --rz-timeline-point-size: 0.75rem; +} +.rz-timeline-axis-xs .rzi { + font-size: 0.5rem; +} + +.rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { + width: 100%; + height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #505f65; + --rz-base-50: #ffffff; + --rz-base-100: #f5f8f9; + --rz-base-200: #e9eef0; + --rz-base-300: #dae0e2; + --rz-base-400: #c1c8cb; + --rz-base-500: #95a2a8; + --rz-base-600: #77858b; + --rz-base-700: #505f65; + --rz-base-800: #3a474d; + --rz-base-900: #28363c; + --rz-base-light: #c1c9cb; + --rz-base-lighter: #ffffff; + --rz-base-dark: #3a474d; + --rz-base-darker: #28363c; + --rz-primary: #598087; + --rz-primary-light: #6d8f95; + --rz-primary-lighter: rgba(89, 128, 135, 0.16); + --rz-primary-dark: #52767c; + --rz-primary-darker: #436065; + --rz-secondary: #80a4ab; + --rz-secondary-light: #8fafb5; + --rz-secondary-lighter: rgba(128, 164, 171, 0.2); + --rz-secondary-dark: #76979d; + --rz-secondary-darker: #607b80; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #ffffff; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #598087; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #80a4ab; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-100); + --rz-text-secondary-color: var(--rz-base-300); + --rz-text-tertiary-color: var(--rz-base-400); + --rz-text-disabled-color: var(--rz-base-600); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-700); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-600); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-700); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-700); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-datalist-item-border: none; + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-800); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-700); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-900); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-700); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-700); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-700); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-700); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-700); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-700); + --rz-form-field-filled-hover-background-color: var(--rz-base-700); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-900); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-secondary-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-800); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-900); + --rz-grid-filter-background-color: var(--rz-base-800); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-800); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-700); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-900); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-700); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-900); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-800); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-700); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-700); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-background-color); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-700); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-700); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-900); + --rz-pager-numeric-button-selected-color: var(--rz-text-contrast-color); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-900); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-700); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-700); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-700); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-900); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-700); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-700); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-900); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-700); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: none; + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-900); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-secondary); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-700); + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: var(--rz-base-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-900); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-dark); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-700); + --rz-slider-disabled-range-border: var(--rz-border-base-700); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-700); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-700); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 0.8; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-700); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-700); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: none; + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-700); + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-800); + --rz-tabs-tab-hover-color: var(--rz-text-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-600); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-600); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: 0; + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-700); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/software-dark-wcag.css b/_content/Radzen.Blazor/css/software-dark-wcag.css new file mode 100755 index 0000000..00d21c8 --- /dev/null +++ b/_content/Radzen.Blazor/css/software-dark-wcag.css @@ -0,0 +1,87 @@ +:root, +.rz-software-dark { + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #505f65; + --rz-base-50: #ffffff; + --rz-base-100: #f5f8f9; + --rz-base-200: #e9eef0; + --rz-base-300: #dae0e2; + --rz-base-400: #c1c8cb; + --rz-base-500: #95a2a8; + --rz-base-600: #77858b; + --rz-base-700: #505f65; + --rz-base-800: #3a474d; + --rz-base-900: #28363c; + --rz-base-light: #c1c9cb; + --rz-base-lighter: #ffffff; + --rz-base-dark: #3a474d; + --rz-base-darker: #28363c; + --rz-primary: #08697d; + --rz-primary-light: #267b8d; + --rz-primary-lighter: rgba(8, 105, 125, 0.16); + --rz-primary-dark: #076173; + --rz-primary-darker: #064f5e; + --rz-secondary: #53666a; + --rz-secondary-light: #68787c; + --rz-secondary-lighter: rgba(83, 102, 106, 0.2); + --rz-secondary-dark: #4c5e62; + --rz-secondary-darker: #3e4d50; + --rz-info: #00619e; + --rz-info-light: #297aae; + --rz-info-lighter: rgba(0, 97, 158, 0.2); + --rz-info-dark: #005185; + --rz-info-darker: #004977; + --rz-success: #006b15; + --rz-success-light: #29833a; + --rz-success-lighter: rgba(0, 107, 21, 0.16); + --rz-success-dark: #005a12; + --rz-success-darker: #005010; + --rz-warning: #ffab2e; + --rz-warning-light: #ffb84f; + --rz-warning-lighter: rgba(255, 171, 46, 0.2); + --rz-warning-dark: #d69027; + --rz-warning-darker: #bf8023; + --rz-danger: #bd0039; + --rz-danger-light: #c82959; + --rz-danger-lighter: rgba(189, 0, 57, 0.2); + --rz-danger-dark: #9f0030; + --rz-danger-darker: #8e002b; + --rz-on-base: #ffffff; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #08697d; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #53666a; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #00619e; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #006b15; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #000000; + --rz-on-warning-light: #000000; + --rz-on-warning-lighter: #ffab2e; + --rz-on-warning-dark: #000000; + --rz-on-warning-darker: #000000; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #bd0039; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-link-color: #62c2d5; + --rz-link-hover-color: #82cfde; +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/software-dark.css b/_content/Radzen.Blazor/css/software-dark.css new file mode 100755 index 0000000..c28ffc2 --- /dev/null +++ b/_content/Radzen.Blazor/css/software-dark.css @@ -0,0 +1,21349 @@ +@charset "UTF-8"; +.rz-slot-minor { + border-top: 1px dotted var(--rz-scheduler-minor-border-color) !important; +} + +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +.rz-text-title-color { + color: var(--rz-base-50) !important; +} + +.rz-text-color { + color: var(--rz-base-100) !important; +} + +.rz-text-secondary-color { + color: var(--rz-base-300) !important; +} + +.rz-text-tertiary-color { + color: var(--rz-base-400) !important; +} + +.rz-text-disabled-color { + color: var(--rz-base-600) !important; +} + +.rz-text-contrast-color { + color: var(--rz-white) !important; +} + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; +} + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; +} + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; +} + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; +} + +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; +} + +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; +} + +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; +} + +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; +} + +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; +} + +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; +} + +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; +} + +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; +} + +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; +} + +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; +} + +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; +} + +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; +} + +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; +} + +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; +} + +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; +} + +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; +} + +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; +} + +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; +} + +.rz-display-none { + display: none !important; +} + +.rz-display-block { + display: block !important; +} + +.rz-display-inline { + display: inline !important; +} + +.rz-display-inline-block { + display: inline-block !important; +} + +.rz-display-flex { + display: flex !important; +} + +.rz-display-inline-flex { + display: inline-flex !important; +} + +.rz-display-grid { + display: grid !important; +} + +.rz-display-inline-grid { + display: inline-grid !important; +} + +@media (min-width: 576px) { + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 768px) { + .rz-display-sm-none { + display: none !important; + } + .rz-display-sm-block { + display: block !important; + } + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} + +.rz-justify-content-stretch { + justify-content: stretch !important; +} + +.rz-justify-content-center { + justify-content: center !important; +} + +.rz-justify-content-start { + justify-content: start !important; +} + +.rz-justify-content-end { + justify-content: end !important; +} + +.rz-justify-content-flex-start { + justify-content: flex-start !important; +} + +.rz-justify-content-flex-end { + justify-content: flex-end !important; +} + +.rz-justify-content-left { + justify-content: left !important; +} + +.rz-justify-content-right { + justify-content: right !important; +} + +.rz-justify-content-space-between { + justify-content: space-between !important; +} + +.rz-justify-content-space-around { + justify-content: space-around !important; +} + +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.rz-align-items-normal { + align-items: normal !important; +} + +.rz-align-items-stretch { + align-items: stretch !important; +} + +.rz-align-items-center { + align-items: center !important; +} + +.rz-align-items-start { + align-items: start !important; +} + +.rz-align-items-end { + align-items: end !important; +} + +.rz-align-items-flex-start { + align-items: flex-start !important; +} + +.rz-align-items-flex-end { + align-items: flex-end !important; +} + +.rz-color-white { + color: var(--rz-white) !important; +} + +.rz-color-black { + color: var(--rz-black) !important; +} + +.rz-color-base { + color: var(--rz-base) !important; +} + +.rz-color-base-50 { + color: var(--rz-base-50) !important; +} + +.rz-color-base-100 { + color: var(--rz-base-100) !important; +} + +.rz-color-base-200 { + color: var(--rz-base-200) !important; +} + +.rz-color-base-300 { + color: var(--rz-base-300) !important; +} + +.rz-color-base-400 { + color: var(--rz-base-400) !important; +} + +.rz-color-base-500 { + color: var(--rz-base-500) !important; +} + +.rz-color-base-600 { + color: var(--rz-base-600) !important; +} + +.rz-color-base-700 { + color: var(--rz-base-700) !important; +} + +.rz-color-base-800 { + color: var(--rz-base-800) !important; +} + +.rz-color-base-900 { + color: var(--rz-base-900) !important; +} + +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + +.rz-color-primary { + color: var(--rz-primary) !important; +} + +.rz-color-primary-light { + color: var(--rz-primary-light) !important; +} + +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; +} + +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; +} + +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; +} + +.rz-color-secondary { + color: var(--rz-secondary) !important; +} + +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; +} + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; +} + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; +} + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; +} + +.rz-color-info { + color: var(--rz-info) !important; +} + +.rz-color-info-light { + color: var(--rz-info-light) !important; +} + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; +} + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; +} + +.rz-color-info-darker { + color: var(--rz-info-darker) !important; +} + +.rz-color-success { + color: var(--rz-success) !important; +} + +.rz-color-success-light { + color: var(--rz-success-light) !important; +} + +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; +} + +.rz-color-success-dark { + color: var(--rz-success-dark) !important; +} + +.rz-color-success-darker { + color: var(--rz-success-darker) !important; +} + +.rz-color-warning { + color: var(--rz-warning) !important; +} + +.rz-color-warning-light { + color: var(--rz-warning-light) !important; +} + +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; +} + +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; +} + +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; +} + +.rz-color-danger { + color: var(--rz-danger) !important; +} + +.rz-color-danger-light { + color: var(--rz-danger-light) !important; +} + +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; +} + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; +} + +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; +} + +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + +.rz-color-on-primary { + color: var(--rz-on-primary) !important; +} + +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; +} + +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; +} + +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; +} + +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; +} + +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; +} + +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; +} + +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; +} + +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; +} + +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; +} + +.rz-color-on-info { + color: var(--rz-on-info) !important; +} + +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; +} + +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; +} + +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; +} + +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; +} + +.rz-color-on-success { + color: var(--rz-on-success) !important; +} + +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; +} + +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; +} + +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; +} + +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; +} + +.rz-color-on-warning { + color: var(--rz-on-warning) !important; +} + +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; +} + +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; +} + +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; +} + +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; +} + +.rz-color-on-danger { + color: var(--rz-on-danger) !important; +} + +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; +} + +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; +} + +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; +} + +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; +} + +.rz-color-series-1 { + color: var(--rz-series-1) !important; +} + +.rz-color-series-2 { + color: var(--rz-series-2) !important; +} + +.rz-color-series-3 { + color: var(--rz-series-3) !important; +} + +.rz-color-series-4 { + color: var(--rz-series-4) !important; +} + +.rz-color-series-5 { + color: var(--rz-series-5) !important; +} + +.rz-color-series-6 { + color: var(--rz-series-6) !important; +} + +.rz-color-series-7 { + color: var(--rz-series-7) !important; +} + +.rz-color-series-8 { + color: var(--rz-series-8) !important; +} + +.rz-color-series-9 { + color: var(--rz-series-9) !important; +} + +.rz-color-series-10 { + color: var(--rz-series-10) !important; +} + +.rz-color-series-11 { + color: var(--rz-series-11) !important; +} + +.rz-color-series-12 { + color: var(--rz-series-12) !important; +} + +.rz-color-series-13 { + color: var(--rz-series-13) !important; +} + +.rz-color-series-14 { + color: var(--rz-series-14) !important; +} + +.rz-color-series-15 { + color: var(--rz-series-15) !important; +} + +.rz-color-series-16 { + color: var(--rz-series-16) !important; +} + +.rz-color-series-17 { + color: var(--rz-series-17) !important; +} + +.rz-color-series-18 { + color: var(--rz-series-18) !important; +} + +.rz-color-series-19 { + color: var(--rz-series-19) !important; +} + +.rz-color-series-20 { + color: var(--rz-series-20) !important; +} + +.rz-color-series-21 { + color: var(--rz-series-21) !important; +} + +.rz-color-series-22 { + color: var(--rz-series-22) !important; +} + +.rz-color-series-23 { + color: var(--rz-series-23) !important; +} + +.rz-color-series-24 { + color: var(--rz-series-24) !important; +} + +.rz-background-color-white { + background-color: var(--rz-white) !important; +} + +.rz-background-color-black { + background-color: var(--rz-black) !important; +} + +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; +} + +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; +} + +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; +} + +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; +} + +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; +} + +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; +} + +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; +} + +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; +} + +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; +} + +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; +} + +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + +.rz-background-color-primary { + background-color: var(--rz-primary) !important; +} + +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; +} + +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; +} + +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; +} + +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; +} + +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; +} + +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; +} + +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; +} + +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; +} + +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; +} + +.rz-background-color-info { + background-color: var(--rz-info) !important; +} + +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; +} + +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; +} + +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; +} + +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; +} + +.rz-background-color-success { + background-color: var(--rz-success) !important; +} + +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; +} + +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; +} + +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; +} + +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; +} + +.rz-background-color-warning { + background-color: var(--rz-warning) !important; +} + +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; +} + +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; +} + +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; +} + +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; +} + +.rz-background-color-danger { + background-color: var(--rz-danger) !important; +} + +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; +} + +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; +} + +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; +} + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; +} + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; +} + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; +} + +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; +} + +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; +} + +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; +} + +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; +} + +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; +} + +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; +} + +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; +} + +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; +} + +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; +} + +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; +} + +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; +} + +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; +} + +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; +} + +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; +} + +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; +} + +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; +} + +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; +} + +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; +} + +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; +} + +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; +} + +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; +} + +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; +} + +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; +} + +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; +} + +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; +} + +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; +} + +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; +} + +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; +} + +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; +} + +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; +} + +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; +} + +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; +} + +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; +} + +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; +} + +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; +} + +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; +} + +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; +} + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; +} + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; +} + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; +} + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; +} + +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; +} + +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; +} + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; +} + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; +} + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; +} + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; +} + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; +} + +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; +} + +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; +} + +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; +} + +.rz-border-color-white { + border-color: var(--rz-white) !important; +} + +.rz-border-color-black { + border-color: var(--rz-black) !important; +} + +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; +} + +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; +} + +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; +} + +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; +} + +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; +} + +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; +} + +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; +} + +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; +} + +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; +} + +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; +} + +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + +.rz-border-color-primary { + border-color: var(--rz-primary) !important; +} + +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; +} + +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; +} + +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-color-info { + border-color: var(--rz-info) !important; +} + +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; +} + +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; +} + +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; +} + +.rz-border-color-success { + border-color: var(--rz-success) !important; +} + +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; +} + +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; +} + +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; +} + +.rz-border-color-warning { + border-color: var(--rz-warning) !important; +} + +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; +} + +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-color-danger { + border-color: var(--rz-danger) !important; +} + +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; +} + +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; +} + +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; +} + +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; +} + +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; +} + +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; +} + +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; +} + +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; +} + +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; +} + +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; +} + +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; +} + +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; +} + +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; +} + +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; +} + +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; +} + +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; +} + +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; +} + +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; +} + +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; +} + +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; +} + +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; +} + +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; +} + +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; +} + +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; +} + +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; +} + +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; +} + +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; +} + +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; +} + +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; +} + +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; +} + +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; +} + +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; +} + +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; +} + +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; +} + +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; +} + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; +} + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; +} + +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; +} + +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; +} + +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; +} + +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; +} + +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; +} + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; +} + +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; +} + +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; +} + +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; +} + +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; +} + +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; +} + +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; +} + +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; +} + +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; +} + +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; +} + +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; +} + +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; +} + +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} + +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; +} + +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; +} + +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; +} + +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; +} + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; +} + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; +} + +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; +} + +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; +} + +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; +} + +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; +} + +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; +} + +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; +} + +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; +} + +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; +} + +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; +} + +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; +} + +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; +} + +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; +} + +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; +} + +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; +} + +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; +} + +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; +} + +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; +} + +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; +} + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; +} + +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; +} + +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; +} + +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; +} + +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; +} + +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; +} + +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; +} + +.rz-ripple { + position: relative; + overflow: hidden; +} +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +body { + margin: 0; +} + +.rz-m-0 { + margin: 0 !important; +} + +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; +} + +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; +} + +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; +} + +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; +} + +.rz-ms-0 { + margin-inline-start: 0 !important; +} + +.rz-me-0 { + margin-inline-end: 0 !important; +} + +.rz-m-05 { + margin: 0.125rem !important; +} + +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; +} + +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; +} + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; +} + +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; +} + +.rz-ms-05 { + margin-inline-start: 0.125rem !important; +} + +.rz-me-05 { + margin-inline-end: 0.125rem !important; +} + +.rz-m-1 { + margin: 0.25rem !important; +} + +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; +} + +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; +} + +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; +} + +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; +} + +.rz-ms-1 { + margin-inline-start: 0.25rem !important; +} + +.rz-me-1 { + margin-inline-end: 0.25rem !important; +} + +.rz-m-2 { + margin: 0.5rem !important; +} + +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; +} + +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; +} + +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; +} + +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; +} + +.rz-ms-2 { + margin-inline-start: 0.5rem !important; +} + +.rz-me-2 { + margin-inline-end: 0.5rem !important; +} + +.rz-m-3 { + margin: 0.75rem !important; +} + +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; +} + +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; +} + +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; +} + +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; +} + +.rz-ms-3 { + margin-inline-start: 0.75rem !important; +} + +.rz-me-3 { + margin-inline-end: 0.75rem !important; +} + +.rz-m-4 { + margin: 1rem !important; +} + +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; +} + +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; +} + +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; +} + +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; +} + +.rz-ms-4 { + margin-inline-start: 1rem !important; +} + +.rz-me-4 { + margin-inline-end: 1rem !important; +} + +.rz-m-5 { + margin: 1.25rem !important; +} + +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; +} + +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; +} + +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; +} + +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; +} + +.rz-ms-5 { + margin-inline-start: 1.25rem !important; +} + +.rz-me-5 { + margin-inline-end: 1.25rem !important; +} + +.rz-m-6 { + margin: 1.5rem !important; +} + +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; +} + +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; +} + +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; +} + +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; +} + +.rz-ms-6 { + margin-inline-start: 1.5rem !important; +} + +.rz-me-6 { + margin-inline-end: 1.5rem !important; +} + +.rz-m-7 { + margin: 1.75rem !important; +} + +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; +} + +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; +} + +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; +} + +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; +} + +.rz-ms-7 { + margin-inline-start: 1.75rem !important; +} + +.rz-me-7 { + margin-inline-end: 1.75rem !important; +} + +.rz-m-8 { + margin: 2rem !important; +} + +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; +} + +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; +} + +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; +} + +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; +} + +.rz-ms-8 { + margin-inline-start: 2rem !important; +} + +.rz-me-8 { + margin-inline-end: 2rem !important; +} + +.rz-m-9 { + margin: 2.25rem !important; +} + +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; +} + +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; +} + +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; +} + +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; +} + +.rz-ms-9 { + margin-inline-start: 2.25rem !important; +} + +.rz-me-9 { + margin-inline-end: 2.25rem !important; +} + +.rz-m-10 { + margin: 2.5rem !important; +} + +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; +} + +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; +} + +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; +} + +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; +} + +.rz-ms-10 { + margin-inline-start: 2.5rem !important; +} + +.rz-me-10 { + margin-inline-end: 2.5rem !important; +} + +.rz-m-11 { + margin: 2.75rem !important; +} + +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; +} + +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; +} + +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; +} + +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; +} + +.rz-ms-11 { + margin-inline-start: 2.75rem !important; +} + +.rz-me-11 { + margin-inline-end: 2.75rem !important; +} + +.rz-m-12 { + margin: 3rem !important; +} + +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; +} + +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; +} + +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; +} + +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; +} + +.rz-ms-12 { + margin-inline-start: 3rem !important; +} + +.rz-me-12 { + margin-inline-end: 3rem !important; +} + +.rz-p-0 { + padding: 0 !important; +} + +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; +} + +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; +} + +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; +} + +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; +} + +.rz-ps-0 { + padding-inline-start: 0 !important; +} + +.rz-pe-0 { + padding-inline-end: 0 !important; +} + +.rz-p-05 { + padding: 0.125rem !important; +} + +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; +} + +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; +} + +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; +} + +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; +} + +.rz-ps-05 { + padding-inline-start: 0.125rem !important; +} + +.rz-pe-05 { + padding-inline-end: 0.125rem !important; +} + +.rz-p-1 { + padding: 0.25rem !important; +} + +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; +} + +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; +} + +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; +} + +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; +} + +.rz-ps-1 { + padding-inline-start: 0.25rem !important; +} + +.rz-pe-1 { + padding-inline-end: 0.25rem !important; +} + +.rz-p-2 { + padding: 0.5rem !important; +} + +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; +} + +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; +} + +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; +} + +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; +} + +.rz-ps-2 { + padding-inline-start: 0.5rem !important; +} + +.rz-pe-2 { + padding-inline-end: 0.5rem !important; +} + +.rz-p-3 { + padding: 0.75rem !important; +} + +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; +} + +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; +} + +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; +} + +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; +} + +.rz-ps-3 { + padding-inline-start: 0.75rem !important; +} + +.rz-pe-3 { + padding-inline-end: 0.75rem !important; +} + +.rz-p-4 { + padding: 1rem !important; +} + +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; +} + +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; +} + +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; +} + +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; +} + +.rz-ps-4 { + padding-inline-start: 1rem !important; +} + +.rz-pe-4 { + padding-inline-end: 1rem !important; +} + +.rz-p-5 { + padding: 1.25rem !important; +} + +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; +} + +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; +} + +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; +} + +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; +} + +.rz-ps-5 { + padding-inline-start: 1.25rem !important; +} + +.rz-pe-5 { + padding-inline-end: 1.25rem !important; +} + +.rz-p-6 { + padding: 1.5rem !important; +} + +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; +} + +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; +} + +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; +} + +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; +} + +.rz-ps-6 { + padding-inline-start: 1.5rem !important; +} + +.rz-pe-6 { + padding-inline-end: 1.5rem !important; +} + +.rz-p-7 { + padding: 1.75rem !important; +} + +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; +} + +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; +} + +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; +} + +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; +} + +.rz-ps-7 { + padding-inline-start: 1.75rem !important; +} + +.rz-pe-7 { + padding-inline-end: 1.75rem !important; +} + +.rz-p-8 { + padding: 2rem !important; +} + +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; +} + +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; +} + +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; +} + +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; +} + +.rz-ps-8 { + padding-inline-start: 2rem !important; +} + +.rz-pe-8 { + padding-inline-end: 2rem !important; +} + +.rz-p-9 { + padding: 2.25rem !important; +} + +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; +} + +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; +} + +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; +} + +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; +} + +.rz-ps-9 { + padding-inline-start: 2.25rem !important; +} + +.rz-pe-9 { + padding-inline-end: 2.25rem !important; +} + +.rz-p-10 { + padding: 2.5rem !important; +} + +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; +} + +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; +} + +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; +} + +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; +} + +.rz-ps-10 { + padding-inline-start: 2.5rem !important; +} + +.rz-pe-10 { + padding-inline-end: 2.5rem !important; +} + +.rz-p-11 { + padding: 2.75rem !important; +} + +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; +} + +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; +} + +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; +} + +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; +} + +.rz-ps-11 { + padding-inline-start: 2.75rem !important; +} + +.rz-pe-11 { + padding-inline-end: 2.75rem !important; +} + +.rz-p-12 { + padding: 3rem !important; +} + +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; +} + +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; +} + +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; +} + +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; +} + +.rz-ps-12 { + padding-inline-start: 3rem !important; +} + +.rz-pe-12 { + padding-inline-end: 3rem !important; +} + +.rz-m-auto { + margin: auto !important; +} + +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; +} + +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; +} + +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; +} + +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; +} + +.rz-ms-auto { + margin-inline-start: auto !important; +} + +.rz-me-auto { + margin-inline-end: auto !important; +} + +@media (min-width: 576px) { + .rz-m-xs-0 { + margin: 0 !important; + } + .rz-my-xs-0, + .rz-mt-xs-0 { + margin-top: 0 !important; + } + .rz-mx-xs-0, + .rz-mr-xs-0 { + margin-right: 0 !important; + } + .rz-my-xs-0, + .rz-mb-xs-0 { + margin-bottom: 0 !important; + } + .rz-mx-xs-0, + .rz-ml-xs-0 { + margin-left: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-end: 0 !important; + } + .rz-m-xs-05 { + margin: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mt-xs-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-mr-xs-05 { + margin-right: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mb-xs-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-ml-xs-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xs-1 { + margin: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mt-xs-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-mr-xs-1 { + margin-right: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mb-xs-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-ml-xs-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xs-2 { + margin: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mt-xs-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-mr-xs-2 { + margin-right: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mb-xs-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-ml-xs-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xs-3 { + margin: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mt-xs-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-mr-xs-3 { + margin-right: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mb-xs-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-ml-xs-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xs-4 { + margin: 1rem !important; + } + .rz-my-xs-4, + .rz-mt-xs-4 { + margin-top: 1rem !important; + } + .rz-mx-xs-4, + .rz-mr-xs-4 { + margin-right: 1rem !important; + } + .rz-my-xs-4, + .rz-mb-xs-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xs-4, + .rz-ml-xs-4 { + margin-left: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xs-5 { + margin: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mt-xs-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-mr-xs-5 { + margin-right: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mb-xs-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-ml-xs-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xs-6 { + margin: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mt-xs-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-mr-xs-6 { + margin-right: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mb-xs-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-ml-xs-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xs-7 { + margin: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mt-xs-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-mr-xs-7 { + margin-right: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mb-xs-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-ml-xs-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xs-8 { + margin: 2rem !important; + } + .rz-my-xs-8, + .rz-mt-xs-8 { + margin-top: 2rem !important; + } + .rz-mx-xs-8, + .rz-mr-xs-8 { + margin-right: 2rem !important; + } + .rz-my-xs-8, + .rz-mb-xs-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xs-8, + .rz-ml-xs-8 { + margin-left: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xs-9 { + margin: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mt-xs-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-mr-xs-9 { + margin-right: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mb-xs-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-ml-xs-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xs-10 { + margin: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mt-xs-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-mr-xs-10 { + margin-right: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mb-xs-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-ml-xs-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xs-11 { + margin: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mt-xs-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-mr-xs-11 { + margin-right: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mb-xs-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-ml-xs-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xs-12 { + margin: 3rem !important; + } + .rz-my-xs-12, + .rz-mt-xs-12 { + margin-top: 3rem !important; + } + .rz-mx-xs-12, + .rz-mr-xs-12 { + margin-right: 3rem !important; + } + .rz-my-xs-12, + .rz-mb-xs-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xs-12, + .rz-ml-xs-12 { + margin-left: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xs-0 { + padding: 0 !important; + } + .rz-py-xs-0, + .rz-pt-xs-0 { + padding-top: 0 !important; + } + .rz-px-xs-0, + .rz-pr-xs-0 { + padding-right: 0 !important; + } + .rz-py-xs-0, + .rz-pb-xs-0 { + padding-bottom: 0 !important; + } + .rz-px-xs-0, + .rz-pl-xs-0 { + padding-left: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-end: 0 !important; + } + .rz-p-xs-05 { + padding: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pt-xs-05 { + padding-top: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pr-xs-05 { + padding-right: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pb-xs-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pl-xs-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xs-1 { + padding: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pt-xs-1 { + padding-top: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pr-xs-1 { + padding-right: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pb-xs-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pl-xs-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xs-2 { + padding: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pt-xs-2 { + padding-top: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pr-xs-2 { + padding-right: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pb-xs-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pl-xs-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xs-3 { + padding: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pt-xs-3 { + padding-top: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pr-xs-3 { + padding-right: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pb-xs-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pl-xs-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xs-4 { + padding: 1rem !important; + } + .rz-py-xs-4, + .rz-pt-xs-4 { + padding-top: 1rem !important; + } + .rz-px-xs-4, + .rz-pr-xs-4 { + padding-right: 1rem !important; + } + .rz-py-xs-4, + .rz-pb-xs-4 { + padding-bottom: 1rem !important; + } + .rz-px-xs-4, + .rz-pl-xs-4 { + padding-left: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xs-5 { + padding: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pt-xs-5 { + padding-top: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pr-xs-5 { + padding-right: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pb-xs-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pl-xs-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xs-6 { + padding: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pt-xs-6 { + padding-top: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pr-xs-6 { + padding-right: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pb-xs-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pl-xs-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xs-7 { + padding: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pt-xs-7 { + padding-top: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pr-xs-7 { + padding-right: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pb-xs-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pl-xs-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xs-8 { + padding: 2rem !important; + } + .rz-py-xs-8, + .rz-pt-xs-8 { + padding-top: 2rem !important; + } + .rz-px-xs-8, + .rz-pr-xs-8 { + padding-right: 2rem !important; + } + .rz-py-xs-8, + .rz-pb-xs-8 { + padding-bottom: 2rem !important; + } + .rz-px-xs-8, + .rz-pl-xs-8 { + padding-left: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xs-9 { + padding: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pt-xs-9 { + padding-top: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pr-xs-9 { + padding-right: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pb-xs-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pl-xs-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xs-10 { + padding: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pt-xs-10 { + padding-top: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pr-xs-10 { + padding-right: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pb-xs-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pl-xs-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xs-11 { + padding: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pt-xs-11 { + padding-top: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pr-xs-11 { + padding-right: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pb-xs-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pl-xs-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xs-12 { + padding: 3rem !important; + } + .rz-py-xs-12, + .rz-pt-xs-12 { + padding-top: 3rem !important; + } + .rz-px-xs-12, + .rz-pr-xs-12 { + padding-right: 3rem !important; + } + .rz-py-xs-12, + .rz-pb-xs-12 { + padding-bottom: 3rem !important; + } + .rz-px-xs-12, + .rz-pl-xs-12 { + padding-left: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xs-auto { + margin: auto !important; + } + .rz-my-xs-auto, + .rz-mt-xs-auto { + margin-top: auto !important; + } + .rz-mx-xs-auto, + .rz-mr-xs-auto { + margin-right: auto !important; + } + .rz-my-xs-auto, + .rz-mb-xs-auto { + margin-bottom: auto !important; + } + .rz-mx-xs-auto, + .rz-ml-xs-auto { + margin-left: auto !important; + } + .rz-ms-xs-auto { + margin-inline-start: auto !important; + } + .rz-me-xs-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 768px) { + .rz-m-sm-0 { + margin: 0 !important; + } + .rz-my-sm-0, + .rz-mt-sm-0 { + margin-top: 0 !important; + } + .rz-mx-sm-0, + .rz-mr-sm-0 { + margin-right: 0 !important; + } + .rz-my-sm-0, + .rz-mb-sm-0 { + margin-bottom: 0 !important; + } + .rz-mx-sm-0, + .rz-ml-sm-0 { + margin-left: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-start: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-end: 0 !important; + } + .rz-m-sm-05 { + margin: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mt-sm-05 { + margin-top: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-mr-sm-05 { + margin-right: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mb-sm-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-ml-sm-05 { + margin-left: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-sm-1 { + margin: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mt-sm-1 { + margin-top: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-mr-sm-1 { + margin-right: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-ml-sm-1 { + margin-left: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-sm-2 { + margin: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mt-sm-2 { + margin-top: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-mr-sm-2 { + margin-right: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-ml-sm-2 { + margin-left: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-sm-3 { + margin: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mt-sm-3 { + margin-top: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-mr-sm-3 { + margin-right: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mb-sm-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-ml-sm-3 { + margin-left: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-sm-4 { + margin: 1rem !important; + } + .rz-my-sm-4, + .rz-mt-sm-4 { + margin-top: 1rem !important; + } + .rz-mx-sm-4, + .rz-mr-sm-4 { + margin-right: 1rem !important; + } + .rz-my-sm-4, + .rz-mb-sm-4 { + margin-bottom: 1rem !important; + } + .rz-mx-sm-4, + .rz-ml-sm-4 { + margin-left: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-end: 1rem !important; + } + .rz-m-sm-5 { + margin: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mt-sm-5 { + margin-top: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-mr-sm-5 { + margin-right: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mb-sm-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-ml-sm-5 { + margin-left: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-sm-6 { + margin: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mt-sm-6 { + margin-top: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-mr-sm-6 { + margin-right: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mb-sm-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-ml-sm-6 { + margin-left: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-sm-7 { + margin: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mt-sm-7 { + margin-top: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-mr-sm-7 { + margin-right: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mb-sm-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-ml-sm-7 { + margin-left: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-sm-8 { + margin: 2rem !important; + } + .rz-my-sm-8, + .rz-mt-sm-8 { + margin-top: 2rem !important; + } + .rz-mx-sm-8, + .rz-mr-sm-8 { + margin-right: 2rem !important; + } + .rz-my-sm-8, + .rz-mb-sm-8 { + margin-bottom: 2rem !important; + } + .rz-mx-sm-8, + .rz-ml-sm-8 { + margin-left: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-end: 2rem !important; + } + .rz-m-sm-9 { + margin: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mt-sm-9 { + margin-top: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-mr-sm-9 { + margin-right: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mb-sm-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-ml-sm-9 { + margin-left: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-sm-10 { + margin: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mt-sm-10 { + margin-top: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-mr-sm-10 { + margin-right: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mb-sm-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-ml-sm-10 { + margin-left: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-sm-11 { + margin: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mt-sm-11 { + margin-top: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-mr-sm-11 { + margin-right: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mb-sm-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-ml-sm-11 { + margin-left: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-sm-12 { + margin: 3rem !important; + } + .rz-my-sm-12, + .rz-mt-sm-12 { + margin-top: 3rem !important; + } + .rz-mx-sm-12, + .rz-mr-sm-12 { + margin-right: 3rem !important; + } + .rz-my-sm-12, + .rz-mb-sm-12 { + margin-bottom: 3rem !important; + } + .rz-mx-sm-12, + .rz-ml-sm-12 { + margin-left: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-end: 3rem !important; + } + .rz-p-sm-0 { + padding: 0 !important; + } + .rz-py-sm-0, + .rz-pt-sm-0 { + padding-top: 0 !important; + } + .rz-px-sm-0, + .rz-pr-sm-0 { + padding-right: 0 !important; + } + .rz-py-sm-0, + .rz-pb-sm-0 { + padding-bottom: 0 !important; + } + .rz-px-sm-0, + .rz-pl-sm-0 { + padding-left: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-start: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-end: 0 !important; + } + .rz-p-sm-05 { + padding: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pt-sm-05 { + padding-top: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pr-sm-05 { + padding-right: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pb-sm-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pl-sm-05 { + padding-left: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-sm-1 { + padding: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pt-sm-1 { + padding-top: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pr-sm-1 { + padding-right: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pl-sm-1 { + padding-left: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-sm-2 { + padding: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pt-sm-2 { + padding-top: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pr-sm-2 { + padding-right: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pl-sm-2 { + padding-left: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-sm-3 { + padding: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pt-sm-3 { + padding-top: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pr-sm-3 { + padding-right: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pb-sm-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pl-sm-3 { + padding-left: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-sm-4 { + padding: 1rem !important; + } + .rz-py-sm-4, + .rz-pt-sm-4 { + padding-top: 1rem !important; + } + .rz-px-sm-4, + .rz-pr-sm-4 { + padding-right: 1rem !important; + } + .rz-py-sm-4, + .rz-pb-sm-4 { + padding-bottom: 1rem !important; + } + .rz-px-sm-4, + .rz-pl-sm-4 { + padding-left: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-end: 1rem !important; + } + .rz-p-sm-5 { + padding: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pt-sm-5 { + padding-top: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pr-sm-5 { + padding-right: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pb-sm-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pl-sm-5 { + padding-left: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-sm-6 { + padding: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pt-sm-6 { + padding-top: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pr-sm-6 { + padding-right: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pb-sm-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pl-sm-6 { + padding-left: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-sm-7 { + padding: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pt-sm-7 { + padding-top: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pr-sm-7 { + padding-right: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pb-sm-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pl-sm-7 { + padding-left: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-sm-8 { + padding: 2rem !important; + } + .rz-py-sm-8, + .rz-pt-sm-8 { + padding-top: 2rem !important; + } + .rz-px-sm-8, + .rz-pr-sm-8 { + padding-right: 2rem !important; + } + .rz-py-sm-8, + .rz-pb-sm-8 { + padding-bottom: 2rem !important; + } + .rz-px-sm-8, + .rz-pl-sm-8 { + padding-left: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-end: 2rem !important; + } + .rz-p-sm-9 { + padding: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pt-sm-9 { + padding-top: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pr-sm-9 { + padding-right: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pb-sm-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pl-sm-9 { + padding-left: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-sm-10 { + padding: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pt-sm-10 { + padding-top: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pr-sm-10 { + padding-right: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pb-sm-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pl-sm-10 { + padding-left: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-sm-11 { + padding: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pt-sm-11 { + padding-top: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pr-sm-11 { + padding-right: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pb-sm-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pl-sm-11 { + padding-left: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-sm-12 { + padding: 3rem !important; + } + .rz-py-sm-12, + .rz-pt-sm-12 { + padding-top: 3rem !important; + } + .rz-px-sm-12, + .rz-pr-sm-12 { + padding-right: 3rem !important; + } + .rz-py-sm-12, + .rz-pb-sm-12 { + padding-bottom: 3rem !important; + } + .rz-px-sm-12, + .rz-pl-sm-12 { + padding-left: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-end: 3rem !important; + } + .rz-m-sm-auto { + margin: auto !important; + } + .rz-my-sm-auto, + .rz-mt-sm-auto { + margin-top: auto !important; + } + .rz-mx-sm-auto, + .rz-mr-sm-auto { + margin-right: auto !important; + } + .rz-my-sm-auto, + .rz-mb-sm-auto { + margin-bottom: auto !important; + } + .rz-mx-sm-auto, + .rz-ml-sm-auto { + margin-left: auto !important; + } + .rz-ms-sm-auto { + margin-inline-start: auto !important; + } + .rz-me-sm-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1024px) { + .rz-m-md-0 { + margin: 0 !important; + } + .rz-my-md-0, + .rz-mt-md-0 { + margin-top: 0 !important; + } + .rz-mx-md-0, + .rz-mr-md-0 { + margin-right: 0 !important; + } + .rz-my-md-0, + .rz-mb-md-0 { + margin-bottom: 0 !important; + } + .rz-mx-md-0, + .rz-ml-md-0 { + margin-left: 0 !important; + } + .rz-ms-md-0 { + margin-inline-start: 0 !important; + } + .rz-ms-md-0 { + margin-inline-end: 0 !important; + } + .rz-m-md-05 { + margin: 0.125rem !important; + } + .rz-my-md-05, + .rz-mt-md-05 { + margin-top: 0.125rem !important; + } + .rz-mx-md-05, + .rz-mr-md-05 { + margin-right: 0.125rem !important; + } + .rz-my-md-05, + .rz-mb-md-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-md-05, + .rz-ml-md-05 { + margin-left: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-md-1 { + margin: 0.25rem !important; + } + .rz-my-md-1, + .rz-mt-md-1 { + margin-top: 0.25rem !important; + } + .rz-mx-md-1, + .rz-mr-md-1 { + margin-right: 0.25rem !important; + } + .rz-my-md-1, + .rz-mb-md-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-md-1, + .rz-ml-md-1 { + margin-left: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-md-2 { + margin: 0.5rem !important; + } + .rz-my-md-2, + .rz-mt-md-2 { + margin-top: 0.5rem !important; + } + .rz-mx-md-2, + .rz-mr-md-2 { + margin-right: 0.5rem !important; + } + .rz-my-md-2, + .rz-mb-md-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-md-2, + .rz-ml-md-2 { + margin-left: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-md-3 { + margin: 0.75rem !important; + } + .rz-my-md-3, + .rz-mt-md-3 { + margin-top: 0.75rem !important; + } + .rz-mx-md-3, + .rz-mr-md-3 { + margin-right: 0.75rem !important; + } + .rz-my-md-3, + .rz-mb-md-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-md-3, + .rz-ml-md-3 { + margin-left: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-md-4 { + margin: 1rem !important; + } + .rz-my-md-4, + .rz-mt-md-4 { + margin-top: 1rem !important; + } + .rz-mx-md-4, + .rz-mr-md-4 { + margin-right: 1rem !important; + } + .rz-my-md-4, + .rz-mb-md-4 { + margin-bottom: 1rem !important; + } + .rz-mx-md-4, + .rz-ml-md-4 { + margin-left: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-end: 1rem !important; + } + .rz-m-md-5 { + margin: 1.25rem !important; + } + .rz-my-md-5, + .rz-mt-md-5 { + margin-top: 1.25rem !important; + } + .rz-mx-md-5, + .rz-mr-md-5 { + margin-right: 1.25rem !important; + } + .rz-my-md-5, + .rz-mb-md-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-md-5, + .rz-ml-md-5 { + margin-left: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-md-6 { + margin: 1.5rem !important; + } + .rz-my-md-6, + .rz-mt-md-6 { + margin-top: 1.5rem !important; + } + .rz-mx-md-6, + .rz-mr-md-6 { + margin-right: 1.5rem !important; + } + .rz-my-md-6, + .rz-mb-md-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-md-6, + .rz-ml-md-6 { + margin-left: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-md-7 { + margin: 1.75rem !important; + } + .rz-my-md-7, + .rz-mt-md-7 { + margin-top: 1.75rem !important; + } + .rz-mx-md-7, + .rz-mr-md-7 { + margin-right: 1.75rem !important; + } + .rz-my-md-7, + .rz-mb-md-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-md-7, + .rz-ml-md-7 { + margin-left: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-md-8 { + margin: 2rem !important; + } + .rz-my-md-8, + .rz-mt-md-8 { + margin-top: 2rem !important; + } + .rz-mx-md-8, + .rz-mr-md-8 { + margin-right: 2rem !important; + } + .rz-my-md-8, + .rz-mb-md-8 { + margin-bottom: 2rem !important; + } + .rz-mx-md-8, + .rz-ml-md-8 { + margin-left: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-end: 2rem !important; + } + .rz-m-md-9 { + margin: 2.25rem !important; + } + .rz-my-md-9, + .rz-mt-md-9 { + margin-top: 2.25rem !important; + } + .rz-mx-md-9, + .rz-mr-md-9 { + margin-right: 2.25rem !important; + } + .rz-my-md-9, + .rz-mb-md-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-md-9, + .rz-ml-md-9 { + margin-left: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-md-10 { + margin: 2.5rem !important; + } + .rz-my-md-10, + .rz-mt-md-10 { + margin-top: 2.5rem !important; + } + .rz-mx-md-10, + .rz-mr-md-10 { + margin-right: 2.5rem !important; + } + .rz-my-md-10, + .rz-mb-md-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-md-10, + .rz-ml-md-10 { + margin-left: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-md-11 { + margin: 2.75rem !important; + } + .rz-my-md-11, + .rz-mt-md-11 { + margin-top: 2.75rem !important; + } + .rz-mx-md-11, + .rz-mr-md-11 { + margin-right: 2.75rem !important; + } + .rz-my-md-11, + .rz-mb-md-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-md-11, + .rz-ml-md-11 { + margin-left: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-md-12 { + margin: 3rem !important; + } + .rz-my-md-12, + .rz-mt-md-12 { + margin-top: 3rem !important; + } + .rz-mx-md-12, + .rz-mr-md-12 { + margin-right: 3rem !important; + } + .rz-my-md-12, + .rz-mb-md-12 { + margin-bottom: 3rem !important; + } + .rz-mx-md-12, + .rz-ml-md-12 { + margin-left: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-end: 3rem !important; + } + .rz-p-md-0 { + padding: 0 !important; + } + .rz-py-md-0, + .rz-pt-md-0 { + padding-top: 0 !important; + } + .rz-px-md-0, + .rz-pr-md-0 { + padding-right: 0 !important; + } + .rz-py-md-0, + .rz-pb-md-0 { + padding-bottom: 0 !important; + } + .rz-px-md-0, + .rz-pl-md-0 { + padding-left: 0 !important; + } + .rz-ps-md-0 { + padding-inline-start: 0 !important; + } + .rz-ps-md-0 { + padding-inline-end: 0 !important; + } + .rz-p-md-05 { + padding: 0.125rem !important; + } + .rz-py-md-05, + .rz-pt-md-05 { + padding-top: 0.125rem !important; + } + .rz-px-md-05, + .rz-pr-md-05 { + padding-right: 0.125rem !important; + } + .rz-py-md-05, + .rz-pb-md-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-md-05, + .rz-pl-md-05 { + padding-left: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-md-1 { + padding: 0.25rem !important; + } + .rz-py-md-1, + .rz-pt-md-1 { + padding-top: 0.25rem !important; + } + .rz-px-md-1, + .rz-pr-md-1 { + padding-right: 0.25rem !important; + } + .rz-py-md-1, + .rz-pb-md-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-md-1, + .rz-pl-md-1 { + padding-left: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-md-2 { + padding: 0.5rem !important; + } + .rz-py-md-2, + .rz-pt-md-2 { + padding-top: 0.5rem !important; + } + .rz-px-md-2, + .rz-pr-md-2 { + padding-right: 0.5rem !important; + } + .rz-py-md-2, + .rz-pb-md-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-md-2, + .rz-pl-md-2 { + padding-left: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-md-3 { + padding: 0.75rem !important; + } + .rz-py-md-3, + .rz-pt-md-3 { + padding-top: 0.75rem !important; + } + .rz-px-md-3, + .rz-pr-md-3 { + padding-right: 0.75rem !important; + } + .rz-py-md-3, + .rz-pb-md-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-md-3, + .rz-pl-md-3 { + padding-left: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-md-4 { + padding: 1rem !important; + } + .rz-py-md-4, + .rz-pt-md-4 { + padding-top: 1rem !important; + } + .rz-px-md-4, + .rz-pr-md-4 { + padding-right: 1rem !important; + } + .rz-py-md-4, + .rz-pb-md-4 { + padding-bottom: 1rem !important; + } + .rz-px-md-4, + .rz-pl-md-4 { + padding-left: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-end: 1rem !important; + } + .rz-p-md-5 { + padding: 1.25rem !important; + } + .rz-py-md-5, + .rz-pt-md-5 { + padding-top: 1.25rem !important; + } + .rz-px-md-5, + .rz-pr-md-5 { + padding-right: 1.25rem !important; + } + .rz-py-md-5, + .rz-pb-md-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-md-5, + .rz-pl-md-5 { + padding-left: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-md-6 { + padding: 1.5rem !important; + } + .rz-py-md-6, + .rz-pt-md-6 { + padding-top: 1.5rem !important; + } + .rz-px-md-6, + .rz-pr-md-6 { + padding-right: 1.5rem !important; + } + .rz-py-md-6, + .rz-pb-md-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-md-6, + .rz-pl-md-6 { + padding-left: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-md-7 { + padding: 1.75rem !important; + } + .rz-py-md-7, + .rz-pt-md-7 { + padding-top: 1.75rem !important; + } + .rz-px-md-7, + .rz-pr-md-7 { + padding-right: 1.75rem !important; + } + .rz-py-md-7, + .rz-pb-md-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-md-7, + .rz-pl-md-7 { + padding-left: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-md-8 { + padding: 2rem !important; + } + .rz-py-md-8, + .rz-pt-md-8 { + padding-top: 2rem !important; + } + .rz-px-md-8, + .rz-pr-md-8 { + padding-right: 2rem !important; + } + .rz-py-md-8, + .rz-pb-md-8 { + padding-bottom: 2rem !important; + } + .rz-px-md-8, + .rz-pl-md-8 { + padding-left: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-end: 2rem !important; + } + .rz-p-md-9 { + padding: 2.25rem !important; + } + .rz-py-md-9, + .rz-pt-md-9 { + padding-top: 2.25rem !important; + } + .rz-px-md-9, + .rz-pr-md-9 { + padding-right: 2.25rem !important; + } + .rz-py-md-9, + .rz-pb-md-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-md-9, + .rz-pl-md-9 { + padding-left: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-md-10 { + padding: 2.5rem !important; + } + .rz-py-md-10, + .rz-pt-md-10 { + padding-top: 2.5rem !important; + } + .rz-px-md-10, + .rz-pr-md-10 { + padding-right: 2.5rem !important; + } + .rz-py-md-10, + .rz-pb-md-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-md-10, + .rz-pl-md-10 { + padding-left: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-md-11 { + padding: 2.75rem !important; + } + .rz-py-md-11, + .rz-pt-md-11 { + padding-top: 2.75rem !important; + } + .rz-px-md-11, + .rz-pr-md-11 { + padding-right: 2.75rem !important; + } + .rz-py-md-11, + .rz-pb-md-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-md-11, + .rz-pl-md-11 { + padding-left: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-md-12 { + padding: 3rem !important; + } + .rz-py-md-12, + .rz-pt-md-12 { + padding-top: 3rem !important; + } + .rz-px-md-12, + .rz-pr-md-12 { + padding-right: 3rem !important; + } + .rz-py-md-12, + .rz-pb-md-12 { + padding-bottom: 3rem !important; + } + .rz-px-md-12, + .rz-pl-md-12 { + padding-left: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-end: 3rem !important; + } + .rz-m-md-auto { + margin: auto !important; + } + .rz-my-md-auto, + .rz-mt-md-auto { + margin-top: auto !important; + } + .rz-mx-md-auto, + .rz-mr-md-auto { + margin-right: auto !important; + } + .rz-my-md-auto, + .rz-mb-md-auto { + margin-bottom: auto !important; + } + .rz-mx-md-auto, + .rz-ml-md-auto { + margin-left: auto !important; + } + .rz-ms-md-auto { + margin-inline-start: auto !important; + } + .rz-me-md-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1280px) { + .rz-m-lg-0 { + margin: 0 !important; + } + .rz-my-lg-0, + .rz-mt-lg-0 { + margin-top: 0 !important; + } + .rz-mx-lg-0, + .rz-mr-lg-0 { + margin-right: 0 !important; + } + .rz-my-lg-0, + .rz-mb-lg-0 { + margin-bottom: 0 !important; + } + .rz-mx-lg-0, + .rz-ml-lg-0 { + margin-left: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-start: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-end: 0 !important; + } + .rz-m-lg-05 { + margin: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mt-lg-05 { + margin-top: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-mr-lg-05 { + margin-right: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mb-lg-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-ml-lg-05 { + margin-left: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-lg-1 { + margin: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mt-lg-1 { + margin-top: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-mr-lg-1 { + margin-right: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-ml-lg-1 { + margin-left: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-lg-2 { + margin: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mt-lg-2 { + margin-top: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-mr-lg-2 { + margin-right: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-ml-lg-2 { + margin-left: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-lg-3 { + margin: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mt-lg-3 { + margin-top: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-mr-lg-3 { + margin-right: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mb-lg-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-ml-lg-3 { + margin-left: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-lg-4 { + margin: 1rem !important; + } + .rz-my-lg-4, + .rz-mt-lg-4 { + margin-top: 1rem !important; + } + .rz-mx-lg-4, + .rz-mr-lg-4 { + margin-right: 1rem !important; + } + .rz-my-lg-4, + .rz-mb-lg-4 { + margin-bottom: 1rem !important; + } + .rz-mx-lg-4, + .rz-ml-lg-4 { + margin-left: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-end: 1rem !important; + } + .rz-m-lg-5 { + margin: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mt-lg-5 { + margin-top: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-mr-lg-5 { + margin-right: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mb-lg-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-ml-lg-5 { + margin-left: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-lg-6 { + margin: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mt-lg-6 { + margin-top: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-mr-lg-6 { + margin-right: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mb-lg-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-ml-lg-6 { + margin-left: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-lg-7 { + margin: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mt-lg-7 { + margin-top: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-mr-lg-7 { + margin-right: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mb-lg-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-ml-lg-7 { + margin-left: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-lg-8 { + margin: 2rem !important; + } + .rz-my-lg-8, + .rz-mt-lg-8 { + margin-top: 2rem !important; + } + .rz-mx-lg-8, + .rz-mr-lg-8 { + margin-right: 2rem !important; + } + .rz-my-lg-8, + .rz-mb-lg-8 { + margin-bottom: 2rem !important; + } + .rz-mx-lg-8, + .rz-ml-lg-8 { + margin-left: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-end: 2rem !important; + } + .rz-m-lg-9 { + margin: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mt-lg-9 { + margin-top: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-mr-lg-9 { + margin-right: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mb-lg-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-ml-lg-9 { + margin-left: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-lg-10 { + margin: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mt-lg-10 { + margin-top: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-mr-lg-10 { + margin-right: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mb-lg-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-ml-lg-10 { + margin-left: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-lg-11 { + margin: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mt-lg-11 { + margin-top: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-mr-lg-11 { + margin-right: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mb-lg-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-ml-lg-11 { + margin-left: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-lg-12 { + margin: 3rem !important; + } + .rz-my-lg-12, + .rz-mt-lg-12 { + margin-top: 3rem !important; + } + .rz-mx-lg-12, + .rz-mr-lg-12 { + margin-right: 3rem !important; + } + .rz-my-lg-12, + .rz-mb-lg-12 { + margin-bottom: 3rem !important; + } + .rz-mx-lg-12, + .rz-ml-lg-12 { + margin-left: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-end: 3rem !important; + } + .rz-p-lg-0 { + padding: 0 !important; + } + .rz-py-lg-0, + .rz-pt-lg-0 { + padding-top: 0 !important; + } + .rz-px-lg-0, + .rz-pr-lg-0 { + padding-right: 0 !important; + } + .rz-py-lg-0, + .rz-pb-lg-0 { + padding-bottom: 0 !important; + } + .rz-px-lg-0, + .rz-pl-lg-0 { + padding-left: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-start: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-end: 0 !important; + } + .rz-p-lg-05 { + padding: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pt-lg-05 { + padding-top: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pr-lg-05 { + padding-right: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pb-lg-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pl-lg-05 { + padding-left: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-lg-1 { + padding: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pt-lg-1 { + padding-top: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pr-lg-1 { + padding-right: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pl-lg-1 { + padding-left: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-lg-2 { + padding: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pt-lg-2 { + padding-top: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pr-lg-2 { + padding-right: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pl-lg-2 { + padding-left: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-lg-3 { + padding: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pt-lg-3 { + padding-top: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pr-lg-3 { + padding-right: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pb-lg-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pl-lg-3 { + padding-left: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-lg-4 { + padding: 1rem !important; + } + .rz-py-lg-4, + .rz-pt-lg-4 { + padding-top: 1rem !important; + } + .rz-px-lg-4, + .rz-pr-lg-4 { + padding-right: 1rem !important; + } + .rz-py-lg-4, + .rz-pb-lg-4 { + padding-bottom: 1rem !important; + } + .rz-px-lg-4, + .rz-pl-lg-4 { + padding-left: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-end: 1rem !important; + } + .rz-p-lg-5 { + padding: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pt-lg-5 { + padding-top: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pr-lg-5 { + padding-right: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pb-lg-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pl-lg-5 { + padding-left: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-lg-6 { + padding: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pt-lg-6 { + padding-top: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pr-lg-6 { + padding-right: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pb-lg-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pl-lg-6 { + padding-left: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-lg-7 { + padding: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pt-lg-7 { + padding-top: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pr-lg-7 { + padding-right: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pb-lg-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pl-lg-7 { + padding-left: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-lg-8 { + padding: 2rem !important; + } + .rz-py-lg-8, + .rz-pt-lg-8 { + padding-top: 2rem !important; + } + .rz-px-lg-8, + .rz-pr-lg-8 { + padding-right: 2rem !important; + } + .rz-py-lg-8, + .rz-pb-lg-8 { + padding-bottom: 2rem !important; + } + .rz-px-lg-8, + .rz-pl-lg-8 { + padding-left: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-end: 2rem !important; + } + .rz-p-lg-9 { + padding: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pt-lg-9 { + padding-top: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pr-lg-9 { + padding-right: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pb-lg-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pl-lg-9 { + padding-left: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-lg-10 { + padding: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pt-lg-10 { + padding-top: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pr-lg-10 { + padding-right: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pb-lg-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pl-lg-10 { + padding-left: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-lg-11 { + padding: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pt-lg-11 { + padding-top: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pr-lg-11 { + padding-right: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pb-lg-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pl-lg-11 { + padding-left: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-lg-12 { + padding: 3rem !important; + } + .rz-py-lg-12, + .rz-pt-lg-12 { + padding-top: 3rem !important; + } + .rz-px-lg-12, + .rz-pr-lg-12 { + padding-right: 3rem !important; + } + .rz-py-lg-12, + .rz-pb-lg-12 { + padding-bottom: 3rem !important; + } + .rz-px-lg-12, + .rz-pl-lg-12 { + padding-left: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-end: 3rem !important; + } + .rz-m-lg-auto { + margin: auto !important; + } + .rz-my-lg-auto, + .rz-mt-lg-auto { + margin-top: auto !important; + } + .rz-mx-lg-auto, + .rz-mr-lg-auto { + margin-right: auto !important; + } + .rz-my-lg-auto, + .rz-mb-lg-auto { + margin-bottom: auto !important; + } + .rz-mx-lg-auto, + .rz-ml-lg-auto { + margin-left: auto !important; + } + .rz-ms-lg-auto { + margin-inline-start: auto !important; + } + .rz-me-lg-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1920px) { + .rz-m-xl-0 { + margin: 0 !important; + } + .rz-my-xl-0, + .rz-mt-xl-0 { + margin-top: 0 !important; + } + .rz-mx-xl-0, + .rz-mr-xl-0 { + margin-right: 0 !important; + } + .rz-my-xl-0, + .rz-mb-xl-0 { + margin-bottom: 0 !important; + } + .rz-mx-xl-0, + .rz-ml-xl-0 { + margin-left: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-end: 0 !important; + } + .rz-m-xl-05 { + margin: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mt-xl-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-mr-xl-05 { + margin-right: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mb-xl-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-ml-xl-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xl-1 { + margin: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mt-xl-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-mr-xl-1 { + margin-right: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-ml-xl-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xl-2 { + margin: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mt-xl-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-mr-xl-2 { + margin-right: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-ml-xl-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xl-3 { + margin: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mt-xl-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-mr-xl-3 { + margin-right: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mb-xl-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-ml-xl-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xl-4 { + margin: 1rem !important; + } + .rz-my-xl-4, + .rz-mt-xl-4 { + margin-top: 1rem !important; + } + .rz-mx-xl-4, + .rz-mr-xl-4 { + margin-right: 1rem !important; + } + .rz-my-xl-4, + .rz-mb-xl-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xl-4, + .rz-ml-xl-4 { + margin-left: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xl-5 { + margin: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mt-xl-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-mr-xl-5 { + margin-right: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mb-xl-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-ml-xl-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xl-6 { + margin: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mt-xl-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-mr-xl-6 { + margin-right: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mb-xl-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-ml-xl-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xl-7 { + margin: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mt-xl-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-mr-xl-7 { + margin-right: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mb-xl-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-ml-xl-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xl-8 { + margin: 2rem !important; + } + .rz-my-xl-8, + .rz-mt-xl-8 { + margin-top: 2rem !important; + } + .rz-mx-xl-8, + .rz-mr-xl-8 { + margin-right: 2rem !important; + } + .rz-my-xl-8, + .rz-mb-xl-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xl-8, + .rz-ml-xl-8 { + margin-left: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xl-9 { + margin: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mt-xl-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-mr-xl-9 { + margin-right: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mb-xl-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-ml-xl-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xl-10 { + margin: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mt-xl-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-mr-xl-10 { + margin-right: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mb-xl-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-ml-xl-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xl-11 { + margin: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mt-xl-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-mr-xl-11 { + margin-right: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mb-xl-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-ml-xl-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xl-12 { + margin: 3rem !important; + } + .rz-my-xl-12, + .rz-mt-xl-12 { + margin-top: 3rem !important; + } + .rz-mx-xl-12, + .rz-mr-xl-12 { + margin-right: 3rem !important; + } + .rz-my-xl-12, + .rz-mb-xl-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xl-12, + .rz-ml-xl-12 { + margin-left: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xl-0 { + padding: 0 !important; + } + .rz-py-xl-0, + .rz-pt-xl-0 { + padding-top: 0 !important; + } + .rz-px-xl-0, + .rz-pr-xl-0 { + padding-right: 0 !important; + } + .rz-py-xl-0, + .rz-pb-xl-0 { + padding-bottom: 0 !important; + } + .rz-px-xl-0, + .rz-pl-xl-0 { + padding-left: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-end: 0 !important; + } + .rz-p-xl-05 { + padding: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pt-xl-05 { + padding-top: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pr-xl-05 { + padding-right: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pb-xl-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pl-xl-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xl-1 { + padding: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pt-xl-1 { + padding-top: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pr-xl-1 { + padding-right: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pl-xl-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xl-2 { + padding: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pt-xl-2 { + padding-top: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pr-xl-2 { + padding-right: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pl-xl-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xl-3 { + padding: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pt-xl-3 { + padding-top: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pr-xl-3 { + padding-right: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pb-xl-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pl-xl-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xl-4 { + padding: 1rem !important; + } + .rz-py-xl-4, + .rz-pt-xl-4 { + padding-top: 1rem !important; + } + .rz-px-xl-4, + .rz-pr-xl-4 { + padding-right: 1rem !important; + } + .rz-py-xl-4, + .rz-pb-xl-4 { + padding-bottom: 1rem !important; + } + .rz-px-xl-4, + .rz-pl-xl-4 { + padding-left: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xl-5 { + padding: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pt-xl-5 { + padding-top: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pr-xl-5 { + padding-right: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pb-xl-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pl-xl-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xl-6 { + padding: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pt-xl-6 { + padding-top: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pr-xl-6 { + padding-right: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pb-xl-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pl-xl-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xl-7 { + padding: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pt-xl-7 { + padding-top: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pr-xl-7 { + padding-right: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pb-xl-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pl-xl-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xl-8 { + padding: 2rem !important; + } + .rz-py-xl-8, + .rz-pt-xl-8 { + padding-top: 2rem !important; + } + .rz-px-xl-8, + .rz-pr-xl-8 { + padding-right: 2rem !important; + } + .rz-py-xl-8, + .rz-pb-xl-8 { + padding-bottom: 2rem !important; + } + .rz-px-xl-8, + .rz-pl-xl-8 { + padding-left: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xl-9 { + padding: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pt-xl-9 { + padding-top: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pr-xl-9 { + padding-right: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pb-xl-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pl-xl-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xl-10 { + padding: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pt-xl-10 { + padding-top: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pr-xl-10 { + padding-right: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pb-xl-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pl-xl-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xl-11 { + padding: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pt-xl-11 { + padding-top: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pr-xl-11 { + padding-right: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pb-xl-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pl-xl-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xl-12 { + padding: 3rem !important; + } + .rz-py-xl-12, + .rz-pt-xl-12 { + padding-top: 3rem !important; + } + .rz-px-xl-12, + .rz-pr-xl-12 { + padding-right: 3rem !important; + } + .rz-py-xl-12, + .rz-pb-xl-12 { + padding-bottom: 3rem !important; + } + .rz-px-xl-12, + .rz-pl-xl-12 { + padding-left: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xl-auto { + margin: auto !important; + } + .rz-my-xl-auto, + .rz-mt-xl-auto { + margin-top: auto !important; + } + .rz-mx-xl-auto, + .rz-mr-xl-auto { + margin-right: auto !important; + } + .rz-my-xl-auto, + .rz-mb-xl-auto { + margin-bottom: auto !important; + } + .rz-mx-xl-auto, + .rz-ml-xl-auto { + margin-left: auto !important; + } + .rz-ms-xl-auto { + margin-inline-start: auto !important; + } + .rz-me-xl-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 2560px) { + .rz-m-xx-0 { + margin: 0 !important; + } + .rz-my-xx-0, + .rz-mt-xx-0 { + margin-top: 0 !important; + } + .rz-mx-xx-0, + .rz-mr-xx-0 { + margin-right: 0 !important; + } + .rz-my-xx-0, + .rz-mb-xx-0 { + margin-bottom: 0 !important; + } + .rz-mx-xx-0, + .rz-ml-xx-0 { + margin-left: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-end: 0 !important; + } + .rz-m-xx-05 { + margin: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mt-xx-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-mr-xx-05 { + margin-right: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mb-xx-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-ml-xx-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xx-1 { + margin: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mt-xx-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-mr-xx-1 { + margin-right: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mb-xx-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-ml-xx-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xx-2 { + margin: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mt-xx-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-mr-xx-2 { + margin-right: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mb-xx-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-ml-xx-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xx-3 { + margin: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mt-xx-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-mr-xx-3 { + margin-right: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mb-xx-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-ml-xx-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xx-4 { + margin: 1rem !important; + } + .rz-my-xx-4, + .rz-mt-xx-4 { + margin-top: 1rem !important; + } + .rz-mx-xx-4, + .rz-mr-xx-4 { + margin-right: 1rem !important; + } + .rz-my-xx-4, + .rz-mb-xx-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xx-4, + .rz-ml-xx-4 { + margin-left: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xx-5 { + margin: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mt-xx-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-mr-xx-5 { + margin-right: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mb-xx-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-ml-xx-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xx-6 { + margin: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mt-xx-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-mr-xx-6 { + margin-right: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mb-xx-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-ml-xx-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xx-7 { + margin: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mt-xx-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-mr-xx-7 { + margin-right: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mb-xx-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-ml-xx-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xx-8 { + margin: 2rem !important; + } + .rz-my-xx-8, + .rz-mt-xx-8 { + margin-top: 2rem !important; + } + .rz-mx-xx-8, + .rz-mr-xx-8 { + margin-right: 2rem !important; + } + .rz-my-xx-8, + .rz-mb-xx-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xx-8, + .rz-ml-xx-8 { + margin-left: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xx-9 { + margin: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mt-xx-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-mr-xx-9 { + margin-right: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mb-xx-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-ml-xx-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xx-10 { + margin: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mt-xx-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-mr-xx-10 { + margin-right: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mb-xx-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-ml-xx-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xx-11 { + margin: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mt-xx-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-mr-xx-11 { + margin-right: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mb-xx-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-ml-xx-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xx-12 { + margin: 3rem !important; + } + .rz-my-xx-12, + .rz-mt-xx-12 { + margin-top: 3rem !important; + } + .rz-mx-xx-12, + .rz-mr-xx-12 { + margin-right: 3rem !important; + } + .rz-my-xx-12, + .rz-mb-xx-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xx-12, + .rz-ml-xx-12 { + margin-left: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xx-0 { + padding: 0 !important; + } + .rz-py-xx-0, + .rz-pt-xx-0 { + padding-top: 0 !important; + } + .rz-px-xx-0, + .rz-pr-xx-0 { + padding-right: 0 !important; + } + .rz-py-xx-0, + .rz-pb-xx-0 { + padding-bottom: 0 !important; + } + .rz-px-xx-0, + .rz-pl-xx-0 { + padding-left: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-end: 0 !important; + } + .rz-p-xx-05 { + padding: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pt-xx-05 { + padding-top: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pr-xx-05 { + padding-right: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pb-xx-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pl-xx-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xx-1 { + padding: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pt-xx-1 { + padding-top: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pr-xx-1 { + padding-right: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pb-xx-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pl-xx-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xx-2 { + padding: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pt-xx-2 { + padding-top: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pr-xx-2 { + padding-right: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pb-xx-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pl-xx-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xx-3 { + padding: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pt-xx-3 { + padding-top: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pr-xx-3 { + padding-right: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pb-xx-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pl-xx-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xx-4 { + padding: 1rem !important; + } + .rz-py-xx-4, + .rz-pt-xx-4 { + padding-top: 1rem !important; + } + .rz-px-xx-4, + .rz-pr-xx-4 { + padding-right: 1rem !important; + } + .rz-py-xx-4, + .rz-pb-xx-4 { + padding-bottom: 1rem !important; + } + .rz-px-xx-4, + .rz-pl-xx-4 { + padding-left: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xx-5 { + padding: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pt-xx-5 { + padding-top: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pr-xx-5 { + padding-right: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pb-xx-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pl-xx-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xx-6 { + padding: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pt-xx-6 { + padding-top: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pr-xx-6 { + padding-right: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pb-xx-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pl-xx-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xx-7 { + padding: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pt-xx-7 { + padding-top: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pr-xx-7 { + padding-right: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pb-xx-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pl-xx-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xx-8 { + padding: 2rem !important; + } + .rz-py-xx-8, + .rz-pt-xx-8 { + padding-top: 2rem !important; + } + .rz-px-xx-8, + .rz-pr-xx-8 { + padding-right: 2rem !important; + } + .rz-py-xx-8, + .rz-pb-xx-8 { + padding-bottom: 2rem !important; + } + .rz-px-xx-8, + .rz-pl-xx-8 { + padding-left: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xx-9 { + padding: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pt-xx-9 { + padding-top: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pr-xx-9 { + padding-right: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pb-xx-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pl-xx-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xx-10 { + padding: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pt-xx-10 { + padding-top: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pr-xx-10 { + padding-right: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pb-xx-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pl-xx-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xx-11 { + padding: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pt-xx-11 { + padding-top: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pr-xx-11 { + padding-right: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pb-xx-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pl-xx-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xx-12 { + padding: 3rem !important; + } + .rz-py-xx-12, + .rz-pt-xx-12 { + padding-top: 3rem !important; + } + .rz-px-xx-12, + .rz-pr-xx-12 { + padding-right: 3rem !important; + } + .rz-py-xx-12, + .rz-pb-xx-12 { + padding-bottom: 3rem !important; + } + .rz-px-xx-12, + .rz-pl-xx-12 { + padding-left: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xx-auto { + margin: auto !important; + } + .rz-my-xx-auto, + .rz-mt-xx-auto { + margin-top: auto !important; + } + .rz-mx-xx-auto, + .rz-mr-xx-auto { + margin-right: auto !important; + } + .rz-my-xx-auto, + .rz-mb-xx-auto { + margin-bottom: auto !important; + } + .rz-mx-xx-auto, + .rz-ml-xx-auto { + margin-left: auto !important; + } + .rz-ms-xx-auto { + margin-inline-start: auto !important; + } + .rz-me-xx-auto { + margin-inline-end: auto !important; + } +} +h1.rz-heading { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2.rz-heading { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3.rz-heading { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4.rz-heading { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5.rz-heading { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1, +.h1 { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2, +.h2 { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3, +.h3 { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4, +.h4 { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5, +.h5 { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; +} + +.rz-text-display-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h1-font-size); + line-height: var(--rz-text-display-h1-line-height); + font-weight: var(--rz-text-display-h1-font-weight); + letter-spacing: var(--rz-text-display-h1-letter-spacing); + color: var(--rz-text-display-h1-color); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); +} + +.rz-text-display-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h2-font-size); + line-height: var(--rz-text-display-h2-line-height); + font-weight: var(--rz-text-display-h2-font-weight); + letter-spacing: var(--rz-text-display-h2-letter-spacing); + color: var(--rz-text-display-h2-color); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); +} + +.rz-text-display-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h3-font-size); + line-height: var(--rz-text-display-h3-line-height); + font-weight: var(--rz-text-display-h3-font-weight); + letter-spacing: var(--rz-text-display-h3-letter-spacing); + color: var(--rz-text-display-h3-color); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); +} + +.rz-text-display-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h4-font-size); + line-height: var(--rz-text-display-h4-line-height); + font-weight: var(--rz-text-display-h4-font-weight); + letter-spacing: var(--rz-text-display-h4-letter-spacing); + color: var(--rz-text-display-h4-color); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); +} + +.rz-text-display-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h5-font-size); + line-height: var(--rz-text-display-h5-line-height); + font-weight: var(--rz-text-display-h5-font-weight); + letter-spacing: var(--rz-text-display-h5-letter-spacing); + color: var(--rz-text-display-h5-color); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); +} + +.rz-text-display-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h6-font-size); + line-height: var(--rz-text-display-h6-line-height); + font-weight: var(--rz-text-display-h6-font-weight); + letter-spacing: var(--rz-text-display-h6-letter-spacing); + color: var(--rz-text-display-h6-color); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); +} + +.rz-text-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h1-font-size); + line-height: var(--rz-text-h1-line-height); + font-weight: var(--rz-text-h1-font-weight); + letter-spacing: var(--rz-text-h1-letter-spacing); + color: var(--rz-text-h1-color); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); +} + +.rz-text-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h2-font-size); + line-height: var(--rz-text-h2-line-height); + font-weight: var(--rz-text-h2-font-weight); + letter-spacing: var(--rz-text-h2-letter-spacing); + color: var(--rz-text-h2-color); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); +} + +.rz-text-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h3-font-size); + line-height: var(--rz-text-h3-line-height); + font-weight: var(--rz-text-h3-font-weight); + letter-spacing: var(--rz-text-h3-letter-spacing); + color: var(--rz-text-h3-color); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); +} + +.rz-text-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h4-font-size); + line-height: var(--rz-text-h4-line-height); + font-weight: var(--rz-text-h4-font-weight); + letter-spacing: var(--rz-text-h4-letter-spacing); + color: var(--rz-text-h4-color); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); +} + +.rz-text-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h5-font-size); + line-height: var(--rz-text-h5-line-height); + font-weight: var(--rz-text-h5-font-weight); + letter-spacing: var(--rz-text-h5-letter-spacing); + color: var(--rz-text-h5-color); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); +} + +.rz-text-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-text-h6-color); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); +} + +.rz-text-subtitle1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle1-font-size); + line-height: var(--rz-text-subtitle1-line-height); + font-weight: var(--rz-text-subtitle1-font-weight); + letter-spacing: var(--rz-text-subtitle1-letter-spacing); + color: var(--rz-text-subtitle1-color); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); +} + +.rz-text-subtitle2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle2-font-size); + line-height: var(--rz-text-subtitle2-line-height); + font-weight: var(--rz-text-subtitle2-font-weight); + letter-spacing: var(--rz-text-subtitle2-letter-spacing); + color: var(--rz-text-subtitle2-color); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); +} + +.rz-text-body1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body1-font-size); + line-height: var(--rz-text-body1-line-height); + font-weight: var(--rz-text-body1-font-weight); + letter-spacing: var(--rz-text-body1-letter-spacing); + color: var(--rz-text-body1-color); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); +} + +.rz-text-body2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body2-font-size); + line-height: var(--rz-text-body2-line-height); + font-weight: var(--rz-text-body2-font-weight); + letter-spacing: var(--rz-text-body2-letter-spacing); + color: var(--rz-text-body2-color); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); +} + +.rz-text-button { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-button-font-size); + line-height: var(--rz-text-button-line-height); + font-weight: var(--rz-text-button-font-weight); + letter-spacing: var(--rz-text-button-letter-spacing); + color: var(--rz-text-button-color); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); +} + +.rz-text-caption { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-caption-font-size); + line-height: var(--rz-text-caption-line-height); + font-weight: var(--rz-text-caption-font-weight); + letter-spacing: var(--rz-text-caption-letter-spacing); + color: var(--rz-text-caption-color); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); +} + +.rz-text-overline { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-overline-font-size); + line-height: var(--rz-text-overline-line-height); + font-weight: var(--rz-text-overline-font-weight); + letter-spacing: var(--rz-text-overline-letter-spacing); + text-transform: var(--rz-text-overline-text-transform); + color: var(--rz-text-overline-color); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); +} + +.rz-text-align-start { + text-align: start; +} + +.rz-text-align-end { + text-align: end; +} + +.rz-text-align-left { + text-align: left; +} + +.rz-text-align-right { + text-align: right; +} + +.rz-text-align-center { + text-align: center; +} + +.rz-text-align-justify { + text-align: justify; +} + +.rz-text-align-justify-all { + text-align: justify-all; +} + +.rz-text-align-match-parent { + text-align: match-parent; +} + +@media (min-width: 576px) { + .rz-text-align-xs-start { + text-align: start !important; + } + .rz-text-align-xs-end { + text-align: end !important; + } + .rz-text-align-xs-left { + text-align: left !important; + } + .rz-text-align-xs-right { + text-align: right !important; + } + .rz-text-align-xs-center { + text-align: center !important; + } + .rz-text-align-xs-justify { + text-align: justify !important; + } + .rz-text-align-xs-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xs-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 768px) { + .rz-text-align-sm-start { + text-align: start !important; + } + .rz-text-align-sm-end { + text-align: end !important; + } + .rz-text-align-sm-left { + text-align: left !important; + } + .rz-text-align-sm-right { + text-align: right !important; + } + .rz-text-align-sm-center { + text-align: center !important; + } + .rz-text-align-sm-justify { + text-align: justify !important; + } + .rz-text-align-sm-justify-all { + text-align: justify-all !important; + } + .rz-text-align-sm-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1024px) { + .rz-text-align-md-start { + text-align: start !important; + } + .rz-text-align-md-end { + text-align: end !important; + } + .rz-text-align-md-left { + text-align: left !important; + } + .rz-text-align-md-right { + text-align: right !important; + } + .rz-text-align-md-center { + text-align: center !important; + } + .rz-text-align-md-justify { + text-align: justify !important; + } + .rz-text-align-md-justify-all { + text-align: justify-all !important; + } + .rz-text-align-md-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1280px) { + .rz-text-align-lg-start { + text-align: start !important; + } + .rz-text-align-lg-end { + text-align: end !important; + } + .rz-text-align-lg-left { + text-align: left !important; + } + .rz-text-align-lg-right { + text-align: right !important; + } + .rz-text-align-lg-center { + text-align: center !important; + } + .rz-text-align-lg-justify { + text-align: justify !important; + } + .rz-text-align-lg-justify-all { + text-align: justify-all !important; + } + .rz-text-align-lg-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1920px) { + .rz-text-align-xl-start { + text-align: start !important; + } + .rz-text-align-xl-end { + text-align: end !important; + } + .rz-text-align-xl-left { + text-align: left !important; + } + .rz-text-align-xl-right { + text-align: right !important; + } + .rz-text-align-xl-center { + text-align: center !important; + } + .rz-text-align-xl-justify { + text-align: justify !important; + } + .rz-text-align-xl-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xl-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 2560px) { + .rz-text-align-xx-start { + text-align: start !important; + } + .rz-text-align-xx-end { + text-align: end !important; + } + .rz-text-align-xx-left { + text-align: left !important; + } + .rz-text-align-xx-right { + text-align: right !important; + } + .rz-text-align-xx-center { + text-align: center !important; + } + .rz-text-align-xx-justify { + text-align: justify !important; + } + .rz-text-align-xx-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xx-match-parent { + text-align: match-parent !important; + } +} +.rz-text-wrap { + white-space: normal !important; +} + +.rz-text-nowrap { + white-space: nowrap !important; +} + +.rz-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rz-text-capitalize { + text-transform: capitalize; +} + +.rz-text-uppercase { + text-transform: uppercase; +} + +.rz-text-lowercase { + text-transform: lowercase; +} + +:root { + font-size: var(--rz-root-font-size); +} + +body { + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +p { + line-height: var(--rz-body-line-height); +} + +.rz-label { + vertical-align: middle; + margin-block-start: 0; + margin-block-end: 0; +} + +.rz-form .row .rz-label { + min-height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; + border-top: var(--rz-input-border); + border-bottom: var(--rz-input-border); + border-color: transparent; +} + +label { + margin-block-start: 0; + margin-block-end: 0; +} + +::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-layout ::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; + font-family: var(--rz-icon-font-family); + font-weight: var(--rz-icon-weight, inherit); + font-style: normal; + font-size: var(--rz-icon-size); + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: "liga"; +} + +i.rzi { + display: inline-flex; + justify-content: center; + align-items: center; +} + +.rzi-primary { + color: var(--rz-primary); +} + +.rzi-secondary { + color: var(--rz-secondary); +} + +.rzi-info { + color: var(--rz-info); +} + +.rzi-warning { + color: var(--rz-warning); +} + +.rzi-error { + color: var(--rz-danger); +} + +.rzi-danger { + color: var(--rz-danger); +} + +.rzi-success { + color: var(--rz-success); +} + +.rzi-base { + color: var(--rz-base-700); +} + +.rzi-light { + color: var(--rz-base-700); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + +.rz-helper-hidden-accessible { + opacity: 0; + height: 0; +} +.rz-helper-hidden-accessible input { + height: 0; + padding: 0; + margin: 0; + border: 0; +} + +.rz-helper-hidden { + display: none; +} + +.rz-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; +} + +.rz-pager-element, .rz-button { + box-sizing: border-box; + display: inline-block; + margin: 0; + color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; + border: none; + border-radius: var(--rz-button-border-radius); + outline: none; + box-shadow: var(--rz-button-shadow); + font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); + text-decoration: none; + transition: var(--rz-button-transition); + -webkit-appearance: none; +} +.rz-pager-element:focus, .rz-button:focus { + outline: var(--rz-outline-normal); +} +.rz-pager-element:focus-visible, .rz-button:focus-visible { + outline: var(--rz-button-focus-outline); + outline-offset: var(--rz-button-focus-outline-offset); +} +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { + cursor: pointer; +} +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { + text-decoration: none; + background-image: var(--rz-button-hover-gradient); + background-size: var(--rz-button-hover-background-size); + box-shadow: var(--rz-button-hover-shadow); +} +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { + text-decoration: none; + background-image: var(--rz-button-focus-gradient); + background-size: var(--rz-button-focus-background-size); + box-shadow: var(--rz-button-focus-shadow); +} +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { + text-decoration: none; + background-image: var(--rz-button-active-gradient); + background-size: var(--rz-button-active-background-size); + box-shadow: var(--rz-button-active-shadow); +} +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { + opacity: var(--rz-button-disabled-opacity); + cursor: initial; +} +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { + opacity: var(--rz-button-empty-opacity); + cursor: initial; +} +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: var(--rz-button-vertical-align); + line-height: var(--rz-button-line-height); +} +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { + vertical-align: var(--rz-button-vertical-align); +} +.rz-pager-element .rzi, .rz-button .rzi { + vertical-align: var(--rz-button-vertical-align); +} + +.rz-button.rz-primary:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-button.rz-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-button.rz-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-button.rz-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} +.rz-button.rz-primary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-button.rz-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-button.rz-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-button.rz-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} +.rz-button.rz-secondary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-secondary.rz-variant-flat:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-button.rz-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-button.rz-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-button.rz-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} +.rz-button.rz-info.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-info.rz-variant-flat:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-button.rz-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-button.rz-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-button.rz-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} +.rz-button.rz-warning.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-warning.rz-variant-flat:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-button.rz-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-button.rz-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-button.rz-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-button.rz-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} +.rz-button.rz-error.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-error.rz-variant-flat:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-button.rz-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-button.rz-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-secondary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-info { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} +.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-warning { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-error { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} +.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-danger { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-success { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} +.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-base { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-light { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-dark { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; +} + +.rz-button.rz-variant-text.rz-primary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-secondary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-info { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-button.rz-variant-text.rz-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-button.rz-variant-text.rz-info.rz-shade-default { + color: var(--rz-info); +} +.rz-button.rz-variant-text.rz-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-button.rz-variant-text.rz-info.rz-shade-darker { + color: var(--rz-info-darker); +} +.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-warning { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-error { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-button.rz-variant-text.rz-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-button.rz-variant-text.rz-error.rz-shade-default { + color: var(--rz-error); +} +.rz-button.rz-variant-text.rz-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-button.rz-variant-text.rz-error.rz-shade-darker { + color: var(--rz-error-darker); +} +.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-danger { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-success { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-button.rz-variant-text.rz-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-button.rz-variant-text.rz-success.rz-shade-default { + color: var(--rz-success); +} +.rz-button.rz-variant-text.rz-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-button.rz-variant-text.rz-success.rz-shade-darker { + color: var(--rz-success-darker); +} +.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-text-contrast-color); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button-lg { + padding: 0.875rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3.25rem; + min-width: 3.25rem; + border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; +} +.rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { + padding: 0.875rem; +} +.rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-pager-element, .rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; +} +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { + padding: 0.5rem 1rem 0.5rem 0.5rem; +} +.rz-pager-element, .rz-button-md.rz-button-icon-only { + padding: 0.5rem; +} +.rz-pager-element .rzi, .rz-button-md .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { + padding: 0.25rem 0.75rem; + height: auto; + line-height: 1.25rem; + min-height: 1.75rem; + min-width: 1.75rem; + font-size: var(--rz-body-font-size); +} +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { + padding: 0.25rem 0.75rem 0.25rem 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { + padding: 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-button-xs { + padding: 0.125rem 0.25rem; + height: auto; + line-height: 1rem; + min-height: 1.25rem; + min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; +} +.rz-button-xs .rz-button-box { + line-height: 1rem; + gap: 0.125rem; +} +.rz-button-xs.rz-button-icon-left { + padding: 0.125rem 0.5rem 0.125rem 0.125rem; +} +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { + padding: 0.125rem; +} +.rz-button-xs .rzi { + font-size: calc(0.8 * var(--rz-icon-size)); + line-height: calc(0.8 * var(--rz-icon-size)); + width: calc(0.8 * var(--rz-icon-size)); + height: calc(0.8 * var(--rz-icon-size)); +} + +@keyframes button-icon-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.rz-badge { + box-sizing: border-box; + color: var(--rz-text-contrast-color); + display: inline-block; + padding: var(--rz-badge-padding); + font-size: var(--rz-badge-font-size); + font-weight: var(--rz-badge-font-weight); + line-height: var(--rz-badge-line-height); + text-align: center; + text-transform: var(--rz-badge-text-transform); + white-space: nowrap; + border-radius: var(--rz-badge-border-radius); + letter-spacing: var(--rz-badge-letter-spacing); +} +.rz-button .rz-badge { + vertical-align: top; +} + +.rz-badge-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-badge-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-badge-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-badge-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} + +.rz-badge-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-badge-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-badge-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-badge-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} + +.rz-badge-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-badge-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-badge-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-badge-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} + +.rz-badge-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-badge-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-badge-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-badge-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} + +.rz-badge-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-badge-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-badge-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-badge-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-badge-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} + +.rz-badge-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-badge-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-badge-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-badge-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} + +.rz-badge-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-badge-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-badge-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-badge-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} + +.rz-badge-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-variant-outlined.rz-badge-primary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} + +.rz-variant-outlined.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-lighter); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} + +.rz-variant-outlined.rz-badge-info { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-lighter); +} +.rz-variant-outlined.rz-badge-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-variant-outlined.rz-badge-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-variant-outlined.rz-badge-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-variant-outlined.rz-badge-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} + +.rz-variant-outlined.rz-badge-warning { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-lighter); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} + +.rz-variant-outlined.rz-badge-error { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-lighter); +} +.rz-variant-outlined.rz-badge-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-variant-outlined.rz-badge-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-variant-outlined.rz-badge-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-variant-outlined.rz-badge-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} + +.rz-variant-outlined.rz-badge-danger { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-lighter); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} + +.rz-variant-outlined.rz-badge-success { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-lighter); +} +.rz-variant-outlined.rz-badge-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-variant-outlined.rz-badge-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-variant-outlined.rz-badge-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-variant-outlined.rz-badge-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} + +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-700); + color: var(--rz-base-700); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + +.rz-variant-text.rz-badge-primary { + background-color: transparent; +} +.rz-variant-text.rz-badge-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-variant-text.rz-badge-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-variant-text.rz-badge-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-variant-text.rz-badge-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-variant-text.rz-badge-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} + +.rz-variant-text.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-text.rz-badge-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-variant-text.rz-badge-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-variant-text.rz-badge-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-variant-text.rz-badge-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-variant-text.rz-badge-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} + +.rz-variant-text.rz-badge-info { + background-color: transparent; +} +.rz-variant-text.rz-badge-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-variant-text.rz-badge-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-variant-text.rz-badge-info.rz-shade-default { + color: var(--rz-info); +} +.rz-variant-text.rz-badge-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-variant-text.rz-badge-info.rz-shade-darker { + color: var(--rz-info-darker); +} + +.rz-variant-text.rz-badge-warning { + background-color: transparent; +} +.rz-variant-text.rz-badge-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-variant-text.rz-badge-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-variant-text.rz-badge-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-variant-text.rz-badge-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-variant-text.rz-badge-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} + +.rz-variant-text.rz-badge-error { + background-color: transparent; +} +.rz-variant-text.rz-badge-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-variant-text.rz-badge-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-variant-text.rz-badge-error.rz-shade-default { + color: var(--rz-error); +} +.rz-variant-text.rz-badge-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-variant-text.rz-badge-error.rz-shade-darker { + color: var(--rz-error-darker); +} + +.rz-variant-text.rz-badge-danger { + background-color: transparent; +} +.rz-variant-text.rz-badge-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-variant-text.rz-badge-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-variant-text.rz-badge-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-variant-text.rz-badge-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-variant-text.rz-badge-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} + +.rz-variant-text.rz-badge-success { + background-color: transparent; +} +.rz-variant-text.rz-badge-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-variant-text.rz-badge-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-variant-text.rz-badge-success.rz-shade-default { + color: var(--rz-success); +} +.rz-variant-text.rz-badge-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-variant-text.rz-badge-success.rz-shade-darker { + color: var(--rz-success-darker); +} + +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-700); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + +.rz-badge-pill { + border-radius: var(--rz-badge-pill-border-radius); + padding: var(--rz-badge-pill-padding); +} + +.rz-dropzone { + user-select: none; +} + +.rz-dropzone-item { + user-select: none; + cursor: grab; +} + +.rz-dragging { + cursor: grabbing; +} + +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { + box-shadow: var(--rz-input-hover-shadow); + border: var(--rz-input-hover-border); +} + +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { + box-shadow: var(--rz-input-focus-shadow); + border: var(--rz-input-focus-border); + outline: var(--rz-input-focus-outline); + outline-offset: var(--rz-input-focus-outline-offset); +} + +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { + background-color: var(--rz-input-disabled-background-color); + color: var(--rz-input-disabled-color); + border: none; +} + +input { + color: var(--rz-input-value-color); + font-size: var(--rz-input-font-size); +} +input::placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); +} + +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + color: var(--rz-input-value-color); + font-family: inherit; + font-size: var(--rz-input-font-size); + transition: var(--rz-input-transition); + outline: none; +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + box-shadow: none; + background-color: transparent; + outline: none; + border: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus-within { + border: none; + box-shadow: none; +} + +.rz-header { + background-color: var(--rz-header-background-color); + min-height: var(--rz-header-min-height); + border-bottom: var(--rz-header-border); + color: var(--rz-header-color); + box-shadow: var(--rz-header-shadow); +} +.rz-header.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--rz-header-z); +} +.rz-header a { + text-decoration: none; +} + +.rz-footer { + padding: var(--rz-footer-padding); + border-top: var(--rz-footer-border); + background-color: var(--rz-footer-background-color); + color: var(--rz-footer-color); +} +.rz-footer.fixed { + position: fixed; + z-index: var(--rz-footer-z); + bottom: 0; + left: 0; + right: 0; +} + +.rz-sidebar { + background-color: var(--rz-sidebar-background-color); + color: var(--rz-sidebar-color); + border-inline-end: var(--rz-sidebar-border-inline-end); + position: fixed; + overflow: auto; + left: 0; + top: 0; + bottom: 0; + z-index: var(--rz-sidebar-z); + width: var(--rz-sidebar-width); + opacity: 1; + transition: width var(--rz-transition), opacity var(--rz-transition); +} + +@media (max-width: 768px) { + .rz-sidebar-responsive { + width: 0; + opacity: 0; + } +} +.rz-sidebar-expanded { + width: var(--rz-sidebar-width); + opacity: 1; +} + +.rz-sidebar-collapsed { + width: 0 !important; + opacity: 0; +} + +.rz-card { + box-sizing: border-box; + padding: var(--rz-card-padding); + border-radius: var(--rz-card-border-radius); + background-color: var(--rz-card-background-color); +} +.rz-card.rz-variant-filled { + box-shadow: var(--rz-card-shadow); +} +.rz-card.rz-variant-flat { + background-color: var(--rz-card-flat-background-color); +} +.rz-card.rz-variant-outlined { + background: transparent; + border: var(--rz-card-border); +} +.rz-card.rz-variant-text { + background: transparent; +} +.rz-card h1, +.rz-card h2, +.rz-card h3, +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + +.rz-accordion { + box-sizing: border-box; + border-radius: var(--rz-accordion-border-radius); + box-shadow: var(--rz-accordion-shadow); +} +.rz-accordion > div:first-child { + border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; +} +.rz-accordion > div:last-child, .rz-accordion > div:last-child > div { + border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); +} +.rz-accordion > div:only-child { + border-radius: var(--rz-accordion-border-radius); +} +.rz-accordion:focus { + outline: var(--rz-outline-normal); +} +.rz-accordion:focus-visible { + outline: var(--rz-accordion-item-focus-outline); +} +.rz-accordion .rz-accordion-header { + background-color: var(--rz-accordion-item-background-color); + margin: var(--rz-accordion-item-margin); +} +.rz-accordion .rz-accordion-header:not(:first-child) { + border-top: var(--rz-accordion-item-border); +} +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); + color: var(--rz-accordion-item-color); + line-height: var(--rz-accordion-item-line-height); + text-decoration: none; + display: flex; + align-items: center; + font-size: var(--rz-accordion-item-font-size); + font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; +} +.rz-accordion .rz-accordion-header > a:hover { + color: var(--rz-accordion-hover-color); +} +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { + flex-grow: 1; +} +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { + outline: var(--rz-accordion-item-focus-outline); + outline-offset: var(--rz-accordion-item-focus-outline-offset); +} +.rz-accordion .rz-accordion-header .rzi { + font-size: var(--rz-accordion-icon-font-size); + margin-inline: var(--rz-accordion-icon-margin-inline); +} + +.rz-accordion-toggle-icon { + width: var(--rz-accordion-icon-width); + height: var(--rz-accordion-icon-height); + font-size: var(--rz-accordion-icon-font-size); + order: var(--rz-accordion-toggle-icon-order); +} +.rz-accordion-toggle-icon.rzi { + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); +} +.rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_right"; +} +.rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-accordion-content-wrapper-overflown { + overflow: hidden; +} + +.rz-accordion-content { + font-size: var(--rz-accordion-content-font-size); + background-color: var(--rz-accordion-item-background-color); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); +} + +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); + background: var(--rz-panel-background-color); + border-radius: var(--rz-panel-border-radius); + box-shadow: var(--rz-panel-shadow); +} + +.rz-panel-titlebar { + display: flex; + justify-content: space-between; +} + +.rz-panel-content { + margin: var(--rz-panel-content-margin); +} + +.rz-panel-content-wrapper[aria-hidden=true] { + display: none; +} + +.rz-panel-title { + line-height: var(--rz-panel-title-line-height); + font-weight: var(--rz-panel-title-font-weight); +} + +.rz-panel-titlebar-toggler { + width: var(--rz-panel-toggle-icon-width); + height: var(--rz-panel-toggle-icon-height); + font-size: var(--rz-panel-toggle-icon-font-size); + border-radius: var(--rz-panel-toggle-icon-border-radius); + background-color: var(--rz-panel-toggle-icon-background-color); + color: inherit; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} +.rz-panel-titlebar-toggler:hover { + text-decoration: none; + color: var(--rz-panel-hover-color); +} +.rz-panel-titlebar-toggler:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-titlebar-toggler:focus-visible { + outline: var(--rz-panel-toggle-icon-focus-outline); + outline-offset: var(--rz-panel-toggle-icon-focus-outline-offset); +} +.rz-panel-titlebar-toggler .rzi-minus:before { + content: "remove"; +} +.rz-panel-titlebar-toggler .rzi-plus:before { + content: "add"; +} + +.rz-sidebar-toggle { + appearance: none; + cursor: pointer; + border: none; + padding: var(--rz-sidebar-toggle-padding); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); + background-color: var(--rz-sidebar-toggle-background-color); + color: var(--rz-sidebar-toggle-color); +} +.rz-justify-content-flex-end .rz-sidebar-toggle { + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; +} +.rz-sidebar-toggle:focus { + outline: none; +} +.rz-sidebar-toggle:focus-visible { + outline: var(--rz-sidebar-toggle-focus-outline); + outline-offset: var(--rz-sidebar-toggle-focus-outline-offset); +} +.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover { + color: var(--rz-sidebar-toggle-hover-color); + background: var(--rz-sidebar-toggle-hover-background-color); + border-radius: var(--rz-sidebar-toggle-hover-border-radius); +} +.rz-sidebar-toggle .rzi { + width: var(--rz-sidebar-toggle-icon-width); + height: var(--rz-sidebar-toggle-icon-height); + font-size: var(--rz-sidebar-toggle-icon-width); +} + +.rz-navigation-item-link { + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.rz-navigation-item-link:hover { + text-decoration: none; +} + +.rz-navigation-item-text { + flex: auto; +} + +.rz-context-menu { + box-sizing: border-box; +} +.rz-context-menu .rz-menu { + flex-direction: column; +} + +.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { + box-shadow: var(--rz-context-menu-box-shadow); + border: var(--rz-menu-border); + border-radius: var(--rz-menu-border-radius); +} + +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + align-items: stretch; + background-color: var(--rz-menu-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + background-color: var(--rz-menu-top-item-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-top-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-top-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-top-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu):focus { + outline: var(--rz-outline-normal); +} +.rz-menu:not(.rz-profile-menu):focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-menu-item-focus-outline); + outline-offset: var(--rz-menu-item-focus-outline-offset); +} +.rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-end: -2px; + height: 1px; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: var(--rz-menu-top-item-selected-color); + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item { + position: relative; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + margin: 0; + min-width: 100%; + box-shadow: var(--rz-context-menu-box-shadow); + z-index: 3; + border-radius: var(--rz-menu-border-radius); + background-color: var(--rz-menu-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu { + position: static; + box-shadow: none; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + margin-inline-start: var(--rz-menu-item-offset); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); +} +.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { + margin-inline: var(--rz-menu-item-icon-margin-inline); +} + +.rz-navigation-item-wrapper, +.rz-navigation-item-link, +.rz-navigation-item-text { + transition: var(--rz-menu-item-transition); +} + +li.rz-navigation-item.rz-state-disabled { + opacity: var(--rz-menu-item-disabled-opacity); + cursor: initial; + pointer-events: none; +} + +.rz-menu-toggle-item { + display: none; + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); + justify-content: end; + align-items: center; + width: 100%; + height: 100%; +} + +.rz-menu-toggle { + appearance: none; + background-color: transparent; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: var(--rz-menu-top-item-color); +} +.rz-menu-toggle:hover { + background-color: transparent; + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu-toggle:active { + background-color: transparent; + color: var(--rz-menu-top-item-color); +} +.rz-context-menu .rz-menu-toggle { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu-toggle:hover { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu-toggle:active { + color: var(--rz-menu-item-color); +} + +@media (max-width: 768px) { + .rz-menu:not(.rz-profile-menu).rz-menu-closed .rz-navigation-item { + display: none; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle .rzi { + margin: 0; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open { + display: block; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-item { + background-color: inherit; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-menu { + position: static; + box-shadow: none; + border-radius: 0; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item { + display: flex; + } + .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active:before { + display: none !important; + } +} +.rz-panel-menu { + box-sizing: border-box; + list-style: none; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; + overflow: auto; + font-size: var(--rz-panel-menu-font-size); + font-weight: var(--rz-panel-menu-font-weight); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ +} +.rz-panel-menu:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-panel-menu-focus-outline); + outline-offset: var(--rz-panel-menu-focus-outline-offset); +} +.rz-panel-menu > .rz-navigation-item { + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); +} +.rz-panel-menu .rz-navigation-item { + border-block-end: var(--rz-panel-menu-item-border); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper { + position: relative; + line-height: var(--rz-panel-menu-item-line-height); + transition: var(--rz-panel-menu-item-transition); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-active-background-color); + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-active:before, +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-start: 0; + inset-block-end: 0; + width: 4px; + background-color: var(--rz-panel-menu-item-active-indicator); +} +.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); + color: inherit; + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu a.rz-navigation-item-link { + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu .rz-navigation-item-text { + flex: auto; +} +.rz-panel-menu .rz-navigation-item-icon-children { + margin-inline-start: auto; + font-size: var(--rz-panel-menu-toggle-icon-font-size); + opacity: var(--rz-panel-menu-toggle-icon-opacity); + z-index: 1; +} +.rz-panel-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-height); + width: var(--rz-panel-menu-icon-width); + color: var(--rz-panel-menu-icon-color); + margin-inline: var(--rz-panel-menu-icon-margin-inline); + font-size: var(--rz-panel-menu-icon-font-size); + transition: var(--rz-panel-menu-item-transition); +} +.rz-panel-menu .rz-navigation-menu { + list-style: none; + padding: 0; + margin-block-end: 0; + overflow: hidden; + /* Third level items */ +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); + border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color); + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-2nd-level-active-background-color); + color: var(--rz-panel-menu-item-2nd-level-active-color); + font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-active-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-2nd-level-icon-size); + width: var(--rz-panel-menu-icon-2nd-level-icon-size); + font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu { + margin: 0; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); + color: var(--rz-panel-menu-item-3rd-level-active-color); +} + +ul.rz-profile-menu { + box-sizing: border-box; + list-style: none; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); + display: inline-block; + background-color: var(--rz-profile-menu-top-item-background-color); + border-inline-start: var(--rz-profile-menu-border); + position: relative; + z-index: 3; +} +ul.rz-profile-menu:focus { + outline: var(--rz-outline-normal); +} +ul.rz-profile-menu:focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +ul.rz-profile-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-profile-menu-item-focus-outline); + outline-offset: var(--rz-profile-menu-item-focus-outline-offset); +} +ul.rz-profile-menu .rz-navigation-item-icon-children { + color: var(--rz-profile-menu-toggle-button-color); +} +ul.rz-profile-menu .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + border-radius: var(--rz-profile-menu-border-radius); + background-color: var(--rz-profile-menu-background-color); + box-shadow: var(--rz-context-menu-box-shadow); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; + min-width: 100%; + white-space: nowrap; +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-profile-menu-item-hover-background-color); + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link, +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text { + color: var(--rz-menu-item-color); +} +ul.rz-profile-menu .rz-navigation-menu .rzi { + width: var(--rz-profile-menu-item-icon-width); + height: var(--rz-profile-menu-item-icon-height); + font-size: var(--rz-profile-menu-item-icon-font-size); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); +} + +.rz-gravatar { + box-sizing: border-box; + width: var(--rz-gravatar-width); + height: var(--rz-gravatar-height); + display: inline-block; + border-radius: var(--rz-gravatar-border-radius); + box-shadow: var(--rz-gravatar-box-shadow); +} + +.rz-steps { + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.rz-steps .rz-widget-content { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.rz-steps ul { + list-style: none; + padding: 0; +} +.rz-steps .rz-menuitem-link { + display: inline-flex; + align-items: center; + color: var(--rz-steps-color); + cursor: pointer; + text-decoration: none; +} +.rz-steps .rz-menuitem-link:hover { + text-decoration: none; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps .rz-state-disabled .rz-menuitem-link { + color: var(--rz-text-disabled-color); + cursor: default; +} +.rz-steps .rz-state-disabled .rz-menuitem-link:hover { + color: var(--rz-text-disabled-color) !important; +} +.rz-steps .rz-state-highlight .rz-steps-title { + color: var(--rz-steps-title-selected-color); +} +.rz-steps .rz-state-highlight .rz-steps-number { + background: var(--rz-steps-number-selected-background); + color: var(--rz-steps-number-selected-color); +} + +.rz-steps-item { + display: inline-block; +} +.rz-steps-item:focus { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible .rz-steps-number { + outline: var(--rz-steps-number-focus-outline); + outline-offset: var(--rz-steps-number-focus-outline-offset); +} + +.rz-steps-title { + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); +} + +.rz-steps-number { + text-align: center; + line-height: var(--rz-steps-number-line-height); + color: var(--rz-steps-number-color); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); + width: var(--rz-steps-number-width); + height: var(--rz-steps-number-height); + background-color: var(--rz-steps-number-background-color); + border-radius: var(--rz-steps-number-border-radius); +} + +.rz-steps-buttons { + display: flex; + justify-content: space-between; + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); +} + +.rz-steps-next, +.rz-steps-prev { + display: inline-flex; + align-items: center; + color: var(--rz-steps-button-color) !important; + text-decoration: none; +} +.rz-steps-next:not(.rz-state-disabled):hover, +.rz-steps-prev:not(.rz-state-disabled):hover { + cursor: pointer; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps-next:hover, +.rz-steps-prev:hover { + text-decoration: none; +} +.rz-steps-next.rz-state-disabled, +.rz-steps-prev.rz-state-disabled { + opacity: 0.5 !important; +} + +.rz-steps-prev .rzi:before { + content: "navigate_before"; +} + +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; +} + +.rz-checkbox-list-vertical { + box-sizing: border-box; +} +.rz-checkbox-list-vertical .rz-checkbox { + display: flex; + align-items: center; + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); + cursor: pointer; +} + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} +.rz-checkbox-list-horizontal .rz-checkbox { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-checkbox { + cursor: initial; +} + +.rz-chkbox-label, +.rz-chkbox-template { + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); +} + +.rz-chkbox { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + width: var(--rz-checkbox-width); + min-width: var(--rz-checkbox-width); + height: var(--rz-checkbox-height); +} +.rz-chkbox:focus { + outline: var(--rz-outline-normal); +} +.rz-chkbox:focus-visible .rz-chkbox-box { + outline: var(--rz-checkbox-focus-outline); + outline-offset: var(--rz-checkbox-focus-outline-offset); +} + +.rz-chkbox-box { + position: absolute; + cursor: pointer; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: var(--rz-input-border); + border-width: var(--rz-checkbox-border-width); + border-radius: var(--rz-checkbox-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-chkbox-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-checkbox-border-width); +} +.rz-chkbox-box.rz-state-disabled { + cursor: initial; + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-checkbox-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-chkbox-box .rzi { + width: var(--rz-checkbox-icon-width); + height: var(--rz-checkbox-icon-height); + font-size: var(--rz-checkbox-icon-font-size); + color: var(--rz-checkbox-checked-color); + vertical-align: middle; + background-color: var(--rz-checkbox-checked-icon-background-color); + border-radius: var(--rz-checkbox-checked-icon-border-radius); +} +.rz-chkbox-box .rzi-check:before { + content: "check"; +} +.rz-chkbox-box .rzi-times { + width: var(--rz-checkbox-tri-icon-width); + height: var(--rz-checkbox-tri-icon-height); + font-size: var(--rz-checkbox-tri-icon-font-size); +} +.rz-chkbox-box .rzi-times:before { + content: "remove"; +} +.rz-chkbox-box.rz-state-active { + background-color: var(--rz-checkbox-checked-background-color); + border: var(--rz-checkbox-checked-border); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-checkbox-checked-hover-background-color); + border: var(--rz-checkbox-checked-hover-border); +} +.rz-chkbox-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-checkbox-checked-disabled-background-color); + border: var(--rz-checkbox-checked-disabled-border); + opacity: 0.5; +} + +.rz-switch { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + width: 3rem; + min-width: 3rem; + height: 1.8rem; + border-radius: calc(5 * var(--rz-border-radius)); +} +.rz-switch:focus { + outline: var(--rz-outline-normal); +} +.rz-switch:focus-visible { + outline: var(--rz-switch-focus-outline); + outline-offset: var(--rz-switch-focus-outline-offset); +} + +.rz-switch-circle { + position: absolute; + cursor: pointer; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; +} + +.rz-switch-circle.rz-disabled { + opacity: 0.5; + cursor: initial; +} + +.rz-switch .rz-switch-circle { + background: var(--rz-switch-background-color); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: calc(5 * var(--rz-border-radius)); +} + +.rz-switch.rz-switch-checked .rz-switch-circle { + background: var(--rz-switch-checked-background-color); +} + +.rz-switch .rz-switch-circle:before { + background: var(--rz-switch-circle-background-color); + width: 1.26rem; + height: 1.26rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; + border-radius: calc(5 * var(--rz-border-radius) - 3px); + transition: transform 0.2s linear; + box-shadow: var(--rz-switch-box-shadow); +} + +.rz-switch-circle:before { + position: absolute; + content: ""; + inset-block-start: 50%; +} + +.rz-switch-circle.rz-disabled:before { + box-shadow: none; +} + +.rz-switch.rz-switch-checked .rz-switch-circle:before { + background: var(--rz-switch-checked-circle-background-color); + transform: translateX(1.2rem); +} + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); +} + +.rz-radio-button-list-vertical { + box-sizing: border-box; +} +.rz-radio-button-list-vertical .rz-radio-btn { + display: flex; + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); + align-items: center; +} + +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} +.rz-radio-button-list-horizontal .rz-radio-btn { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-radiobutton { + cursor: initial; +} + +.rz-radiobutton-label, +.rz-radiobutton-template { + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); +} + +.rz-radiobutton { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + width: var(--rz-radio-width); + height: var(--rz-radio-height); + border-radius: var(--rz-radio-border-radius); +} +.rz-radiobutton:focus { + outline: var(--rz-outline-normal); +} +.rz-radiobutton:focus-visible { + outline: var(--rz-radio-focus-outline); + outline-offset: var(--rz-radio-focus-outline-offset); +} + +.rz-radiobutton-box { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + width: inherit; + border: var(--rz-input-border); + border-width: var(--rz-radio-border-width); + border-radius: var(--rz-radio-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box:active:not(.rz-state-disabled) { + background-color: var(--rz-radio-active-background-color); + box-shadow: var(--rz-radio-active-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-disabled { + cursor: initial; + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-radio-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-radiobutton-box .rzi { + width: var(--rz-radio-icon-width); + height: var(--rz-radio-icon-height); + color: var(--rz-radio-checked-color); +} +.rz-radiobutton-box .rzi-circle-on { + border-radius: var(--rz-radio-border-radius); + vertical-align: middle; + background-color: var(--rz-radio-circle-background-color); + box-shadow: var(--rz-radio-circle-shadow); +} +.rz-radiobutton-box .rzi-circle-on:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-circle-hover-background-color); +} +.rz-radiobutton-box.rz-state-active { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-checked-hover-background-color); + border: var(--rz-radio-checked-border); + box-shadow: var(--rz-radio-checked-hover-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); + opacity: 0.5; +} + +.rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; + border: var(--rz-fieldset-border); + border-radius: var(--rz-fieldset-border-radius); +} + +.rz-fieldset-content { + padding: var(--rz-fieldset-padding); +} + +.rz-fieldset-content-wrapper { + overflow: hidden; +} + +.rz-fieldset-legend-text { + vertical-align: middle; +} + +.rz-fieldset-toggler { + vertical-align: middle; + width: var(--rz-fieldset-toggle-width); + height: var(--rz-fieldset-toggle-height); + background-color: var(--rz-fieldset-toggle-background-color); + color: var(--rz-fieldset-toggle-color); + border: var(--rz-fieldset-toggle-border); +} +.rz-fieldset-toggler.rzi { + text-align: center; + font-size: var(--rz-fieldset-toggle-font-size); + line-height: var(--rz-fieldset-toggle-height); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); +} +.rz-fieldset-toggler.rzi-minus:before { + content: "remove"; +} +.rz-fieldset-toggler.rzi-plus:before { + content: "add"; +} +a:focus .rz-fieldset-toggler { + outline: var(--rz-outline-normal); +} +a:focus-visible .rz-fieldset-toggler { + outline: var(--rz-fieldset-toggle-focus-outline); + outline-offset: var(--rz-fieldset-toggle-focus-outline-offset); +} + +.rz-fieldset-legend { + float: none; + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); + width: auto; + color: var(--rz-fieldset-legend-color); + font-size: var(--rz-fieldset-legend-font-size); +} +.rz-fieldset-legend a { + display: inline-flex; + align-items: center; + color: inherit; + text-decoration: none; +} +.rz-fieldset-legend a:focus { + outline: var(--rz-outline-normal); +} + +.rz-multiselect, .rz-dropdown { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + position: relative; + overflow: hidden; + text-align: start; +} +.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-dropdown.rz-dropdown-open { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect.rz-state-focus { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect-trigger, .rz-dropdown-trigger { + position: absolute; + display: flex; + align-items: center; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; +} +.rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { + width: var(--rz-dropdown-trigger-icon-width); + height: var(--rz-dropdown-trigger-icon-height); + font-size: var(--rz-dropdown-trigger-icon-height); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); +} +.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-dropdown-clear-icon { + position: absolute; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; + height: 100%; + display: flex; + align-items: center; + font-size: var(--rz-dropdown-trigger-icon-height); + opacity: 0.4; +} +.rz-dropdown-clear-icon:before { + content: "close"; +} +.rz-dropdown-clear-icon:hover { + opacity: 1; +} +.rz-state-disabled > .rz-dropdown-clear-icon { + display: none; +} + +.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel { + position: absolute; + background-color: var(--rz-dropdown-open-background-color); + border-radius: var(--rz-input-border-radius); + border: var(--rz-dropdown-panel-border); + box-shadow: var(--rz-dropdown-panel-shadow); +} + +.rz-dropdown-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} + +.rz-multiselect-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} +.rz-multiselect-panel .rz-chkbox { + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); +} + +.rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { + list-style: none; + padding: var(--rz-dropdown-items-padding); + margin: 0; +} +.rz-autocomplete-items li, .rz-multiselect-items li, .rz-dropdown-items li { + /* The 'No results found' item has no CSS class */ +} + +.rz-dropdown-items-wrapper, +.rz-multiselect-items-wrapper { + overflow: auto; + margin: var(--rz-dropdown-items-margin); + border-radius: var(--rz-input-border-radius); +} + +.rz-multiselect-items-wrapper { + overflow: auto; +} + +.rz-dropdown-filter-container { + padding: var(--rz-dropdown-filter-padding); + border-bottom: var(--rz-dropdown-filter-border); +} + +.rz-multiselect-filter-container .rz-inputtext, .rz-dropdown-filter { + background-color: transparent; + color: var(--rz-text-color); +} + +.rz-multiselect-header { + display: flex; + align-items: center; + padding: var(--rz-dropdown-item-padding); + margin: var(--rz-dropdown-items-margin); +} + +.rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-autocomplete-items li, .rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item { + padding: var(--rz-dropdown-item-padding); + transition: var(--rz-dropdown-item-transition); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover, .rz-dropdown-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-state-disabled.rz-menuitem, .rz-state-disabled.rz-autocomplete-list-item, .rz-state-disabled.rz-multiselect-item, .rz-autocomplete-items li.rz-state-disabled, .rz-dropdown-items li.rz-state-disabled, .rz-multiselect-items li.rz-state-disabled, .rz-dropdown-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} +.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} + +.rz-multiselect-close { + display: none; +} + +.rz-multiselect-filter-container { + flex: auto; + border-bottom: var(--rz-dropdown-filter-border); +} +.rz-multiselect-filter-container .rz-inputtext { + padding: 0; +} + +.rz-multiselect-item { + display: flex; + align-items: center; +} + +.rz-multiselect-item-content { + flex: 1; +} + +.rz-multiselect-label-container, +.rz-dropdown-label { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); + margin: 0; +} + +.rz-dropdown-chips { + height: inherit; + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); +} +.rz-dropdown-chips .rz-dropdown-chips-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-inline-end: 3rem; +} +.rz-dropdown-chips .rz-chip { + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: var(--rz-chip-gap); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); + color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); + border-radius: var(--rz-chip-border-radius); +} +.rz-dropdown-chips .rz-chip .rz-chip-text { + font-size: var(--rz-chip-font-size); +} +.rz-dropdown-chips .rz-chip .rz-button { + border-radius: var(--rz-chip-border-radius); + box-shadow: none; + align-self: stretch; +} +.rz-dropdown-chips .rz-chip .rzi { + vertical-align: middle; + font-size: 1rem; +} + +.rz-clear .rz-multiselect-label-container, +.rz-clear .rz-dropdown-label { + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); +} + +.rz-autocomplete { + box-sizing: border-box; + display: inline-block; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + background-color: var(--rz-input-background-color); + transition: var(--rz-input-transition); + overflow: hidden; +} +.rz-autocomplete-input { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + background-color: transparent; + color: var(--rz-input-value-color); + box-shadow: var(--rz-input-shadow); + border: none; + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + width: 100%; + transition: var(--rz-input-transition); +} +.rz-autocomplete-input:focus { + outline: none; +} +.rz-autocomplete-input:disabled { + border: none; +} + +.rz-autocomplete-panel { + overflow: auto; + box-sizing: content-box; +} + +.rz-listbox { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + overflow: hidden; + background-color: var(--rz-listbox-background-color); + border: var(--rz-listbox-border); + border-radius: var(--rz-listbox-border-radius); + text-align: start; +} +.rz-listbox .rz-chkbox { + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); +} +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-listbox:focus, .rz-listbox:focus-within { + outline: var(--rz-outline-normal); + border: var(--rz-listbox-focus-border); + box-shadow: var(--rz-listbox-focus-shadow); +} + +.rz-listbox-list { + margin: 0; + padding: 0; +} + +.rz-listbox-item { + cursor: default; + padding: var(--rz-listbox-item-padding); + margin: var(--rz-listbox-item-margin); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-listbox-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-listbox-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-listbox-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} + +.rz-listbox-header { + display: flex; + align-items: center; + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); + border-bottom: var(--rz-listbox-filter-border); +} + +.rz-listbox-list-wrapper { + flex: auto; + overflow: auto; + padding: var(--rz-listbox-padding); +} + +.rz-listbox-filter-container, .rz-dropdown-filter-container, .rz-multiselect-filter-container { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.rz-listbox-filter-container .rz-inputtext, .rz-dropdown-filter-container .rz-inputtext, .rz-multiselect-filter-container .rz-inputtext { + flex: auto; + width: 0; + border: none; + line-height: var(--rz-input-line-height); +} +.rz-listbox-filter-container .rz-inputtext:focus, .rz-dropdown-filter-container .rz-inputtext:focus, .rz-multiselect-filter-container .rz-inputtext:focus { + outline: none; +} +.rz-listbox-filter-container .rzi-search, .rz-dropdown-filter-container .rzi-search, .rz-multiselect-filter-container .rzi-search { + width: var(--rz-listbox-header-icon-width); + height: var(--rz-listbox-header-icon-height); + line-height: var(--rz-listbox-header-icon-height); + font-size: var(--rz-listbox-header-icon-height); +} +.rz-listbox-filter-container .rzi-search:before, .rz-dropdown-filter-container .rzi-search:before, .rz-multiselect-filter-container .rzi-search:before { + content: "search"; +} + +.rz-listbox-filter-container { + flex: auto; +} +.rz-listbox-filter-container .rz-inputtext { + background-color: transparent; +} + +.rz-splitbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { + display: none; +} +.rz-splitbutton .rz-button.rz-splitbutton-menubutton { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { + flex: auto; + overflow: hidden; + text-overflow: ellipsis; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.rz-splitbutton-menu { + display: none; + position: absolute; + min-width: var(--rz-splitbutton-menu-min-width); + box-shadow: var(--rz-splitbutton-menu-shadow); +} + +.rz-menu-list { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-menuitem .rz-menuitem-link { + color: inherit; + display: block; + text-decoration: none; +} +.rz-menuitem .rz-menuitem-link:hover { + text-decoration: none; +} +.rz-menuitem .rz-menuitem-icon { + vertical-align: top; +} + +.rz-splitbutton-menubutton { + margin-inline-start: 1px; +} +.rz-splitbutton-menubutton.rz-variant-outlined { + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); +} +.rz-splitbutton-menubutton .rz-button-text { + display: none; +} +.rz-splitbutton-menubutton .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-slider { + box-sizing: border-box; + position: relative; + display: inline-block; + border: var(--rz-slider-border); + border-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-background-color); +} +.rz-slider.rz-state-disabled { + background-color: var(--rz-slider-disabled-background-color); + border: var(--rz-slider-disabled-border); +} +.rz-slider.rz-state-disabled .rz-slider-range { + background-color: var(--rz-slider-disabled-range-background-color); + border: var(--rz-slider-disabled-range-border); +} +.rz-slider.rz-state-disabled .rz-slider-handle { + background-color: var(--rz-slider-disabled-handle-background-color); + border: var(--rz-slider-disabled-handle-border); +} + +.rz-slider-horizontal { + height: var(--rz-slider-horizontal-height); + width: var(--rz-slider-horizontal-width); +} + +.rz-slider-range { + position: absolute; + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-range-background-color); + border: var(--rz-slider-range-border); +} + +.rz-slider-handle { + position: absolute; + transform: translateY(-50%); + top: 50%; + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); + background-color: var(--rz-slider-handle-background-color); + border: var(--rz-slider-handle-border); + border-radius: var(--rz-slider-handle-border-radius); + box-shadow: var(--rz-slider-handle-shadow); + width: var(--rz-slider-handle-width); + height: var(--rz-slider-handle-height); + transition: var(--rz-slider-handle-transition); +} + +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active { + background-color: var(--rz-slider-handle-hover-background-color); + box-shadow: var(--rz-slider-handle-hover-shadow); + border: var(--rz-slider-handle-hover-border); + cursor: pointer; + outline: none; +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus { + outline: var(--rz-outline-normal); +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus-visible { + outline: var(--rz-slider-handle-focus-outline); + outline-offset: var(--rz-slider-handle-focus-outline-offset); +} + +.rz-rating { + box-sizing: border-box; + display: inline-flex; + font-size: var(--rz-rating-font-size); + height: 1em; +} +.rz-rating.rz-state-disabled .rzi { + opacity: var(--rz-rating-disabled-opacity); + color: var(--rz-rating-disabled-color); +} +.rz-rating a { + width: 1em; + height: 1em; + text-decoration: none; + cursor: default; + outline: none; +} +.rz-rating .rzi { + color: var(--rz-rating-color); + font-size: 1em; +} +.rz-rating .rzi-ban { + color: var(--rz-rating-ban-icon-color); +} +.rz-rating .rzi-ban:before { + content: "highlight_off"; +} +.rz-rating .rzi-star-o { + opacity: var(--rz-rating-opacity); +} +.rz-rating .rzi-star-o:before { + content: "star_border"; +} +.rz-rating .rzi-star { + color: var(--rz-rating-selected-color); +} +.rz-rating .rzi-star:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover { + cursor: pointer; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-ban { + color: var(--rz-rating-selected-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-ban { + color: var(--rz-rating-focus-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o:before { + content: "star"; +} + +.rz-security-code { + box-sizing: border-box; + display: inline-flex; +} + +.rz-security-code-wrapper { + flex: 1; + --rz-gap: 0.5rem; +} + +.rz-security-code-input { + text-align: center; + min-width: var(--rz-security-code-input-min-width); + min-height: var(--rz-security-code-input-min-height); + width: 100%; + height: 100%; + padding: var(--rz-security-code-input-padding); + font-size: var(--rz-security-code-input-font-size); + font-weight: var(--rz-security-code-input-font-weight); + line-height: var(--rz-security-code-input-line-height); +} + +.rz-selectbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-selectbutton .rz-button:focus-visible { + z-index: 1; +} + +.rz-selectbutton .rz-button.rz-button-xs { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-xs:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-sm { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { + display: inline-block; + position: relative; +} +.rz-datepicker .rz-readonly { + cursor: pointer; +} +.rz-datepicker > .rz-inputtext { + width: 100%; + line-height: var(--rz-datepicker-line-height); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); +} +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { + box-shadow: none; + color: var(--rz-datepicker-trigger-icon-hover-color); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} + +.rz-datepicker-inline { + background-color: var(--rz-datepicker-panel-background-color); + border: var(--rz-input-border); +} + +.rz-datepicker-trigger { + box-shadow: none; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 0.625rem; + transform: translateY(-50%); + background-color: transparent; + padding: 0; + vertical-align: text-top; + color: var(--rz-datepicker-trigger-icon-color); + width: var(--rz-datepicker-trigger-icon-width); + height: var(--rz-datepicker-trigger-icon-height); + font-size: var(--rz-datepicker-trigger-icon-height); +} +.rz-datepicker-trigger.rz-state-disabled { + border: none; + box-shadow: none; + cursor: initial; + opacity: 1; + color: var(--rz-input-disabled-color); +} +.rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active), .rz-datepicker-trigger:not(.rz-state-disabled):hover:active { + background-color: transparent; +} +.rz-datepicker-trigger:not(.rz-state-disabled):active { + box-shadow: none !important; + background-image: none !important; +} +.rz-datepicker-trigger .rzi-calendar, +.rz-datepicker-trigger .rzi-time { + font-size: inherit; + vertical-align: top; +} +.rz-datepicker-trigger .rzi-calendar:before { + content: "calendar_today"; +} +.rz-datepicker-trigger .rzi-time:before { + content: "schedule"; +} +.rz-datepicker-trigger .rz-button-text { + display: none; +} + +.rz-datepicker-popup-container { + box-sizing: content-box; + position: absolute; + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); + box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); +} + +.rz-datepicker-inline-container { + position: static; + white-space: nowrap; +} +.rz-datepicker-inline-container .rz-calendar { + display: inline-block; +} + +.rz-datepicker-footer { + position: relative; + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--rz-datepicker-header-background-color); + border-bottom: var(--rz-datepicker-header-border); + color: var(--rz-datepicker-header-color); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); +} + +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); +} +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { + color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); +} +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); +} + +.rz-calendar-prev { + order: 1; +} +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { + content: "chevron_right"; +} + +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { + outline: var(--rz-outline-normal); +} +.rz-calendar-view-container:focus-visible { + outline: var(--rz-datepicker-focus-outline); + outline-offset: var(--rz-datepicker-focus-outline-offset); +} + +.rz-calendar-view { + table-layout: fixed; + border-collapse: collapse; +} +.rz-calendar-view th { + font-weight: normal; + font-size: var(--rz-datepicker-calendar-header-font-size); + text-transform: var(--rz-datepicker-calendar-header-text-transform); + color: var(--rz-datepicker-calendar-header-color); + padding: var(--rz-datepicker-calendar-item-padding); + text-align: center; +} +.rz-calendar-view td { + text-align: center; + border-top: var(--rz-datepicker-calendar-border); + padding: 0; +} +.rz-calendar-view td .rz-state-default { + display: block; + padding: var(--rz-datepicker-calendar-item-padding); + color: var(--rz-datepicker-calendar-color); + font-size: var(--rz-datepicker-calendar-font-size); + border-radius: var(--rz-datepicker-calendar-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-calendar-view td .rz-state-default.rz-calendar-today { + color: var(--rz-datepicker-calendar-today-color); + background-color: var(--rz-datepicker-calendar-today-background-color); + box-shadow: var(--rz-datepicker-calendar-today-box-shadow); + border-radius: var(--rz-datepicker-calendar-today-border-radius); +} +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { + text-decoration: none; + color: var(--rz-datepicker-calendar-hover-color); + background-color: var(--rz-datepicker-calendar-hover-background-color); + cursor: pointer; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { + color: var(--rz-datepicker-calendar-selected-color); + background-color: var(--rz-datepicker-calendar-selected-background-color); + padding: var(--rz-datepicker-calendar-item-padding); + box-shadow: none; +} +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { + color: var(--rz-datepicker-calendar-selected-hover-color); + background-color: var(--rz-datepicker-calendar-selected-hover-background-color); +} +.rz-calendar-view .rz-state-disabled { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-other-month { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-week-number { + opacity: 0.5; +} + +/* Time Picker Styles */ +.rz-timepicker { + display: flex; + align-items: center; + justify-content: center; + gap: var(--rz-timepicker-gap); + border-top: var(--rz-datepicker-calendar-border); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); + color: var(--rz-timepicker-color); +} +.rz-timepicker .rzi-chevron-up:before { + content: "expand_less"; +} +.rz-timepicker .rzi-chevron-down:before { + content: "expand_more"; +} +.rz-timepicker .rz-separator { + color: var(--rz-timepicker-separator-color); +} +.rz-timepicker .rz-separator a { + display: none; +} +.rz-timepicker .rz-button-md { + padding: var(--rz-timepicker-button-padding); + text-transform: uppercase; +} + +.rz-hour-picker, +.rz-minute-picker, +.rz-second-picker { + background-color: var(--rz-timepicker-background-color); + width: 4rem; +} + +.rz-ampm-picker a { + text-decoration: none; +} + +.rz-numeric { + display: inline-block; + position: relative; + padding: 0px; +} +.rz-numeric input[type=number], +.rz-numeric input[type=text] { + -moz-appearance: textfield; + width: 100%; + height: 100%; + border: none; + background-color: transparent; + line-height: var(--rz-numeric-line-height); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); + outline: none; +} +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.rz-numeric.rz-state-disabled .rz-numeric-button { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); +} +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); + background-image: none; + box-shadow: none; + cursor: initial; +} + +.rz-numeric-button { + position: absolute; + inset-inline-end: var(--rz-numeric-button-offset); + padding: 0; + width: var(--rz-numeric-button-width); + height: var(--rz-numeric-button-height); + border-radius: var(--rz-numeric-button-border-radius); + background-color: var(--rz-numeric-button-background-color); + color: var(--rz-numeric-button-color); +} +.rz-numeric-button:hover { + background-color: var(--rz-numeric-button-background-color); +} +.rz-numeric-button .rzi { + font-size: var(--rz-numeric-button-height); + vertical-align: top; +} +.rz-numeric-button .rzi-caret-up:before { + content: "expand_less"; +} +.rz-numeric-button .rzi-caret-down:before { + content: "expand_more"; +} + +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); +} + +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); +} + +.rz-fileupload { + box-sizing: border-box; + display: inline-block; +} +.rz-fileupload .rz-button { + vertical-align: middle; + -webkit-appearance: none !important; +} + +.rz-fileupload-choose { + position: relative; + display: inline-block; + overflow: hidden; + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose input[type=file] { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + min-height: 100%; + cursor: pointer; +} +.rz-fileupload-choose.rz-state-disabled input[type=file] { + cursor: default; +} +.rz-fileupload-choose:not(.rz-state-disabled) { + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):active { + background-color: var(--rz-upload-choose-active-background-color); + color: var(--rz-upload-choose-active-color); +} + +.rz-fileupload-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.rz-fileupload-row > div { + margin: var(--rz-upload-files-margin); +} +.rz-fileupload-row .rz-button-text { + display: none; +} +.rz-fileupload-row .rz-button { + background-color: var(--rz-upload-files-remove-background-color); + color: var(--rz-upload-files-remove-color); +} +.rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash { + display: block; +} +.rz-fileupload-row .rz-button .rzi-close:before, +.rz-fileupload-row .rz-button .rzi-times:before, +.rz-fileupload-row .rz-button .rz-icon-trash:before { + content: "close"; +} + +.rz-fileupload-buttonbar { + position: relative; + background-color: var(--rz-upload-button-bar-background-color); + padding: var(--rz-upload-button-bar-padding); + border-radius: var(--rz-upload-button-bar-border-radius); +} +.rz-fileupload-buttonbar .rz-button:nth-child(3) { + float: right; + background-color: var(--rz-upload-cancel-background-color); + color: var(--rz-upload-cancel-color); +} + +.rz-fileupload-files { + background-color: var(--rz-upload-files-background-color); + padding: var(--rz-upload-files-padding); +} + +.rz-datatable { + position: relative; + box-shadow: var(--rz-grid-shadow); + border: var(--rz-grid-cell-border); + border-radius: var(--rz-grid-border-radius); + background-color: var(--rz-grid-background-color); + overflow: hidden; +} +.rz-datatable:focus { + outline: var(--rz-outline-normal); +} +.rz-datatable:focus-visible { + outline: var(--rz-grid-focus-outline); + outline-offset: var(--rz-grid-focus-outline-offset); +} +.rz-datatable .rz-col-icon { + text-align: center; + vertical-align: middle; + width: var(--rz-grid-column-icon-width); + padding: var(--rz-grid-column-icon-padding); +} +.rz-datatable .rzi-chevron-circle-right { + vertical-align: top; + /* Right-to-left arrow icons */ +} +.rz-datatable .rzi-chevron-circle-right:before { + content: "arrow_right"; +} +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} +.rz-datatable .rzi-chevron-circle-down { + vertical-align: top; +} +.rz-datatable .rzi-chevron-circle-down:before { + content: "arrow_drop_down"; +} +.rz-datatable.rz-has-template > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view > .rz-datatable-scrollable-body > .rz-datatable-scrollable-table-wrapper > table > .rz-datatable-scrollable-colgroup col:first-child { + width: var(--rz-grid-column-icon-width); +} + +.rz-unselectable-text { + user-select: none; +} + +.rz-datatable-tablewrapper > table, +.rz-datatable-scrollable-header-box > table, +.rz-datatable-scrollable-table-wrapper > table, +.rz-datatable-scrollable-footer-box > table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +.rz-resizable-column { + position: relative; +} + +.rz-datatable-reorder-indicator-up { + position: absolute; +} +.rz-datatable-reorder-indicator-up:before { + content: "arrow_drop_down"; +} + +.rz-datatable-reorder-indicator-down { + position: absolute; +} +.rz-datatable-reorder-indicator-down:before { + content: "arrow_drop_up"; +} + +.rz-column-resizer { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + cursor: col-resize; + width: var(--rz-grid-column-resizer-width); +} +.rz-column-resizer:after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + width: var(--rz-grid-column-resizer-helper-width); + background-color: transparent; +} +.rz-column-resizer:hover:after, .rz-column-resizer:active:after { + background-color: var(--rz-grid-column-resizer-helper-background-color); +} + +.rz-rowgroup-header .fa, +.rz-row-toggler { + color: var(--rz-grid-cell-color); +} + +.rz-datatable-scrollable-footer { + background-color: var(--rz-grid-header-background-color); + border-top: var(--rz-grid-cell-border); +} + +.rz-datatable-thead th, +.rz-grid-table thead th { + background-color: var(--rz-grid-header-background-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: inherit; + border-bottom: var(--rz-grid-header-cell-border-bottom); +} +.rz-datatable-thead th:not(:last-child), +.rz-grid-table thead th:not(:last-child) { + border-inline-end: var(--rz-grid-header-cell-border); +} +.rz-datatable-thead th > div:not(.rz-cell-filter), +.rz-grid-table thead th > div:not(.rz-cell-filter) { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + outline: none; + padding: var(--rz-grid-header-cell-padding); +} +.rz-datatable-thead th.rz-state-focused, +.rz-grid-table thead th.rz-state-focused { + outline: var(--rz-grid-cell-focus-outline); + outline-offset: var(--rz-grid-cell-focus-outline-offset); +} +.rz-datatable-thead th .rz-column-title, +.rz-grid-table thead th .rz-column-title { + display: inline-flex; + flex: auto; + align-items: center; + gap: 0.25rem; + width: 100%; + font-size: var(--rz-grid-header-font-size); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding-inline: var(--rz-grid-header-title-padding-inline); + font-weight: var(--rz-grid-header-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content, +.rz-grid-table thead th .rz-column-title-content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content:has(.rz-chkbox), +.rz-grid-table thead th .rz-column-title-content:has(.rz-chkbox) { + overflow: visible; +} +.rz-datatable-thead th.rz-text-align-center .rz-column-title, +.rz-grid-table thead th.rz-text-align-center .rz-column-title { + justify-content: center; + padding-inline-start: 0; +} +.rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th.rz-text-align-right .rz-column-title, +.rz-grid-table thead th.rz-text-align-right .rz-column-title { + justify-content: right; +} +.rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th .rz-column-drag + .rz-column-title, +.rz-grid-table thead th .rz-column-drag + .rz-column-title { + padding-inline-start: 0; +} + +.rz-datatable-tfoot td, .rz-grid-table tfoot td { + background-color: var(--rz-grid-foot-background-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + color: var(--rz-grid-foot-cell-color); + padding: var(--rz-grid-cell-padding); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} + +.rz-datatable-scrollable-header { + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-datatable-scrollable-body { + overflow: auto; + border-top: none; + flex: auto; + border-bottom-right-radius: var(--rz-border-radius); + border-bottom-left-radius: var(--rz-border-radius); +} + +.rz-has-pager .rz-datatable-scrollable-body { + border-radius: 0; +} + +.rz-sortable-column { + cursor: pointer; +} +.rz-sortable-column:focus { + outline: none; +} +.rz-sortable-column.rz-state-active { + background-color: var(--rz-grid-header-sorted-background-color); +} +.rz-sortable-column > div:hover .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { + color: var(--rz-grid-sort-icon-color); +} +.rz-sortable-column .rzi-grid-sort { + width: var(--rz-grid-sort-icon-width); + height: var(--rz-grid-sort-icon-height); + font-size: var(--rz-grid-sort-icon-height); + text-align: left; +} +.rz-sortable-column .rzi-sort { + color: transparent; +} +.rz-sortable-column .rzi-sort:before { + content: "sort"; +} +.rz-sortable-column .rzi-sort-asc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-asc:before { + content: "arrow_drop_up"; +} +.rz-sortable-column .rzi-sort-desc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-desc:before { + content: "arrow_drop_down"; +} + +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td { + background-color: var(--rz-grid-stripe-background-color); +} +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td { + background-color: var(--rz-grid-stripe-odd-background-color); +} + +.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th { + border-bottom: var(--rz-grid-header-cell-border); +} +.rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { + border-inline-end: var(--rz-grid-header-cell-border); +} + +.rz-datatable-data td, +.rz-grid-table td { + padding: var(--rz-grid-cell-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-data td:not(:last-child), +.rz-grid-table td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td.rz-composite-cell, +.rz-grid-table td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td .rz-cell-data, +.rz-grid-table td .rz-cell-data { + color: var(--rz-grid-cell-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rz-datatable-data td .rz-cell-data:has(.rz-chkbox), .rz-datatable-data td .rz-cell-data:has(.rz-button), +.rz-grid-table td .rz-cell-data:has(.rz-chkbox), +.rz-grid-table td .rz-cell-data:has(.rz-button) { + overflow: visible; +} +.rz-datatable-data td .rz-cell-toggle, +.rz-grid-table td .rz-cell-toggle { + display: flex; + align-items: center; + gap: 0.25rem; +} +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} +.rz-datatable-data tr td:first-child, +.rz-grid-table tr td:first-child { + border-inline-start: none; +} +.rz-datatable-data tr td:last-child:not(.rz-composite-cell), +.rz-grid-table tr td:last-child:not(.rz-composite-cell) { + border-inline-end: none; +} +.rz-datatable-data tr:first-child > td, +.rz-grid-table tr:first-child > td { + border-top: none; +} +.rz-datatable-data tr:last-child > td, +.rz-grid-table tr:last-child > td { + border-bottom: none; +} + +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { + border-bottom: none; + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td { + border-bottom: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} + +.rz-datatable-reflow tbody td > .rz-column-title { + display: none; +} + +.rz-datatable-scrollable { + display: flex; + flex-direction: column; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper { + height: 0; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view { + height: 0; +} + +.rz-datatable-scrollable-wrapper { + display: flex; + flex-direction: column; + flex: auto; +} + +.rz-datatable-scrollable-view { + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; +} + +.rz-datatable-header { + background-color: var(--rz-grid-toolbar-background-color); + padding: var(--rz-grid-header-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-header .rzi-plus { + font-size: var(--rz-grid-cell-font-size); +} +.rz-datatable-header .rzi-plus:before { + content: "add"; +} + +.rz-cell-filter { + padding: var(--rz-grid-filter-padding); + margin: var(--rz-grid-filter-margin); + border-top: var(--rz-grid-filter-border); + font-size: var(--rz-grid-filter-font-size); + font-weight: normal; +} +.rz-cell-filter .rz-cell-filter-label { + display: flex; + flex: auto; + align-items: center; +} +.rz-cell-filter .rz-cell-filter-label > .rzi { + width: var(--rz-grid-filter-icon-width); + height: var(--rz-grid-filter-icon-height); + font-size: var(--rz-grid-filter-icon-font-size); + margin-inline: var(--rz-grid-filter-icon-margin-inline); + color: var(--rz-grid-filter-color); +} +.rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { + margin-inline-start: auto; +} +.rz-cell-filter .rz-cell-filter-label .rz-current-filter { + margin-inline-start: 0.5rem; +} + +.rz-selectable tbody tr.rz-data-row td, +.rz-selectable tbody tr.rz-data-row .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:after { + content: ""; + position: absolute; + inset: 0; + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:before { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:after { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > .rzi { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > th.rz-state-focused { + color: var(--rz-grid-cell-focus-color) !important; +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > .rzi { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-disabled { + opacity: 0.5; + pointer-events: none; +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { + color: var(--rz-grid-hover-color); +} + +.rz-cell-filter-content { + display: flex; + flex: auto; + align-items: center; + color: var(--rz-grid-filter-color); + min-height: 1.375rem; + container-type: inline-size; + container-name: rz-cell-filter-content; +} + +@container rz-cell-filter-content (max-width: 200px) { + .rz-cell-filter-content .rz-filter-button .rzi { + display: none; + } + .rz-cell-filter-content .rz-filter-button { + position: absolute; + z-index: 1; + min-height: 0; + inset-inline-start: calc(var(--rz-border-width)); + height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + max-height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + line-height: calc(1.25rem - var(--rz-border-width) * 2); + border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-start-end-radius: 0; + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } +} +.rz-expanded-row > td { + border-bottom: none; + background-color: var(--rz-grid-hover-background-color); +} +.rz-expanded-row > td .rz-cell-data, +.rz-expanded-row > td .rz-row-toggler { + color: var(--rz-grid-hover-color); +} + +.rz-expanded-row-template { + background-color: var(--rz-grid-detail-template-background-color); + padding: var(--rz-grid-detail-template-padding); + border: var(--rz-grid-detail-template-border); + border-radius: var(--rz-grid-detail-template-border-radius); +} + +.rz-expanded-row-content > td { + padding-top: 0; + background-color: var(--rz-grid-detail-template-background-color); +} + +.rz-rowgroup-header a:hover { + text-decoration: none; +} +.rz-rowgroup-header td { + border-top: var(--rz-grid-border); + border-bottom: var(--rz-grid-border); +} + +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; +} + +.rz-datatable-loading-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--rz-grid-loading-indicator-color); + z-index: 2; +} +.rz-datatable-loading-content .rzi-circle-o-notch { + animation: rotation 0.5s linear infinite; + font-size: 2rem; +} +.rz-datatable-loading-content .rzi-circle-o-notch:before { + content: "refresh"; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@media (max-width: 768px) { + .rz-datatable-reflow .rz-data-grid-data > table, + .rz-datatable-reflow .rz-datatable-tablewrapper > table, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table { + table-layout: auto; + display: block; + } + .rz-datatable-reflow .rz-data-grid-data > table > tbody, + .rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody { + display: block; + } + .rz-datatable-reflow thead th { + display: none; + } + .rz-datatable-reflow .rz-data-row { + display: block; + } + .rz-datatable-reflow .rz-data-row > td { + display: block; + width: 100% !important; + text-align: left !important; + border: none; + } + .rz-datatable-reflow .rz-data-row > td .rz-column-title { + display: block; + } +} +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + +.rz-grid-filter-buttons { + display: flex; + justify-content: space-between; + padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} + +.rz-grid-filter-icon { + justify-self: flex-end; + color: var(--rz-grid-filter-color); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); + font-size: var(--rz-grid-header-filter-icon-font-size); + transition: var(--rz-grid-state-transition); + font-weight: 400; +} +.rz-grid-filter-icon:hover { + cursor: pointer; + color: var(--rz-grid-header-filter-icon-hover-color); +} + +.rz-grid-filter-active { + color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; +} + +.rz-data-grid { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.rz-data-grid-data { + overflow: auto; + flex: 1; + box-shadow: var(--rz-grid-data-border-shadow); +} + +.rz-grid-table td, .rz-grid-table th { + padding: var(--rz-grid-cell-padding); +} + +.rz-grid-table thead { + position: sticky; + top: 0; + z-index: 2; +} +.rz-grid-table thead th { + position: sticky; + top: 0; + z-index: 1; +} + +.rz-grid-table-fixed { + table-layout: fixed; +} +.rz-grid-table-fixed .rz-frozen-cell { + position: -webkit-sticky; + position: sticky; +} +.rz-grid-table-fixed .rz-frozen-cell-left, +.rz-grid-table-fixed .rz-frozen-cell-right, +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + background: var(--rz-grid-frozen-cell-background-color); + z-index: 1; +} +.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} + +.rz-grid-table tfoot, .rz-grid-table tfoot td { + position: sticky; + bottom: 0; + z-index: 1; +} + +.rz-grid-table { + width: 100%; + position: relative; + border-collapse: separate; + border-spacing: 0; +} +.rz-grid-table th { + white-space: nowrap; + overflow: hidden; +} +.rz-grid-table td { + white-space: nowrap; + overflow: hidden; +} + +.rz-grid-table tbody > div { + display: table-row; +} + +.rz-column-drag { + cursor: grab; + font-size: inherit; + color: var(--rz-column-drag-handle-color); + transition: var(--rz-grid-state-transition); + margin-inline: var(--rz-column-drag-handle-margin-inline); +} +.rz-column-drag:after { + content: "more_vert"; +} +.rz-column-drag:hover { + color: var(--rz-column-drag-handle-hover-color); +} +.rz-column-drag:active { + color: var(--rz-column-drag-handle-hover-color); + cursor: grabbing; +} + +.rz-column-draggable { + background-color: var(--rz-grid-header-background-color); + border-radius: var(--rz-border-radius); + box-shadow: var(--rz-column-draggable-shadow); + padding: 0; + display: flex; + align-items: center; +} +.rz-column-draggable > div { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + outline: none; + padding: 0; +} +.rz-column-draggable .rz-column-drag { + max-width: 1rem; +} +.rz-column-draggable .rz-column-title { + display: inline-flex; + flex: auto; + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-column-draggable .rz-grid-filter-icon { + display: none; +} + +.rz-group-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-group-header-items { + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); +} + +.rz-group-header-item { + display: flex; + align-items: center; + color: var(--rz-grid-group-header-item-color); + background-color: var(--rz-grid-group-header-item-background-color); + border: var(--rz-grid-group-header-item-border); + border-radius: var(--rz-grid-group-header-item-border-radius); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); + width: fit-content; + float: left; +} +.rz-group-header-item .rz-dialog-titlebar-close { + display: flex; + align-items: center; + text-decoration: none; +} + +.rz-group-header-item-title { + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); +} + +.rz-group-header-drop { + font-size: var(--rz-body-font-size); + color: var(--rz-text-tertiary-color); + height: fit-content; +} + +.rz-column-picker { + display: flex; +} + +.rz-filter-menu-symbol { + width: 1.75rem; + display: inline-block; +} + +.rz-filter-button { + flex: none; + margin-inline-end: 0.5rem; +} + +.rz-data-grid.rz-density-compact { + --rz-grid-cell-line-height: 1rem; + --rz-grid-cell-padding: 0.25rem 0.5rem; + --rz-grid-header-cell-padding: 0.25rem 0; + --rz-grid-header-padding: 0.25rem 1rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-filter-padding: 0.25rem 0.5rem; + --rz-grid-group-header-padding: 0.25rem; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; + --rz-dialog-close-font-size: 1rem; +} + +.rz-pager { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--rz-pager-gap); + flex-wrap: wrap; + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ +} +.rz-pager:focus { + outline: var(--rz-outline-normal); +} +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-pager.rz-align-right { + justify-content: right; +} +.rz-pager.rz-align-left { + justify-content: left; +} +.rz-pager.rz-align-center { + justify-content: center; +} +.rz-pager .rzi-step-backward:before { + content: "first_page"; +} +.rz-pager .rzi-caret-left:before { + content: "navigate_before"; +} +.rz-pager .rzi-caret-right:before { + content: "navigate_next"; +} +.rz-pager .rzi-step-forward:before { + content: "last_page"; +} +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { + order: 2; + width: var(--rz-pager-dropdown-width); + overflow: visible; +} +.rz-pager .rz-pagesize-text { + order: 2; + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); +} + +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); +} + +.rz-pager-bottom { + border-top: var(--rz-pager-border); +} + +.rz-pager-pages { + display: inline-flex; + gap: var(--rz-pager-gap); + margin: 0 0.5rem; +} + +.rz-pager-element { + letter-spacing: 0; +} + +.rz-align-center .rz-pager-first { + margin-inline-start: auto; +} + +.rz-pager-prev { + margin-inline-end: auto; +} +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; +} + +.rz-pager-next { + margin-inline-start: auto; +} +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; +} + +.rz-align-center .rz-pager-last { + margin-inline-end: auto; +} + +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-element:hover { + text-decoration: none; +} + +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-page { + display: inline-block; + min-width: var(--rz-pager-numeric-button-min-width); + text-align: center; + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { + margin-right: auto; +} +.rz-align-left .rz-pager-summary { + order: 2; + margin-left: auto; + padding: 0; +} +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} + +@media (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +@container rz-lookup-panel (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; +} +.rz-overlaypanel { + position: absolute; + overflow: hidden; + box-shadow: var(--rz-overlay-shadow); + border: var(--rz-overlay-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-overlay-background-color); +} + +.rz-tree { + box-sizing: border-box; + display: inline-block; + overflow: auto; +} +.rz-tree:focus { + outline: var(--rz-outline-normal); +} +.rz-tree:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} + +.rz-tree .rz-treenode.rz-treenode-leaf > .rz-treenode-content > .rz-tree-toggler { + visibility: hidden; +} + +.rz-treenode { + padding-inline-start: var(--rz-tree-node-toggle-width); +} + +.rz-tree-toggler { + cursor: pointer; + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); + width: var(--rz-tree-node-toggle-width); + height: 1.5rem; + font-size: var(--rz-icon-size); + line-height: 1.5rem; + text-align: center; + color: var(--rz-tree-node-toggle-color); + transition: var(--rz-tree-transition); +} +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} +.rz-tree-toggler.rzi-caret-right:before { + content: "arrow_right"; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); +} +.rz-tree-toggler.rzi-caret-down:before { + content: "arrow_drop_down"; + margin-inline-start: -0.125rem; +} +.rz-tree-toggler:hover { + color: var(--rz-tree-node-toggle-hover-color); +} + +.rz-treenode-content { + display: flex; + align-items: center; + cursor: pointer; + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); +} +.rz-treenode-content .rz-treenode-label { + display: flex; + align-items: center; + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); +} +.rz-treenode-content .rz-treenode-label .rzi:first-child { + margin-inline-end: 0.25rem; +} +.rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { + outline: var(--rz-tree-node-focus-outline); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} +.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { + background-color: var(--rz-tree-node-hover-background-color); + color: var(--rz-tree-node-hover-color); + border-radius: var(--rz-tree-node-selected-border-radius); +} +.rz-treenode-content .rz-chkbox { + margin-inline-end: 0.25rem; +} + +.rz-tree-container, +.rz-treenode-children { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-treenode-label { + transition: var(--rz-tree-transition); +} +.rz-treenode-content-selected .rz-treenode-label { + border-radius: var(--rz-tree-node-selected-border-radius); + color: var(--rz-tree-node-selected-color); + background-color: var(--rz-tree-node-selected-background-color); +} + +.rz-datalist, +.rz-datagrid { + background-color: var(--rz-datalist-background-color); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); + box-shadow: var(--rz-datalist-shadow); + border: var(--rz-datalist-border); +} + +.rz-g > div, .rz-datalist-data > li { + border-radius: var(--rz-datalist-border-radius); + border: var(--rz-datalist-item-border); + box-shadow: var(--rz-datalist-item-shadow); + padding: var(--rz-datalist-item-padding); + background-color: var(--rz-datalist-item-background-color); +} + +.rz-datalist-data { + list-style: none; + padding: var(--rz-datalist-padding); + margin: 0; +} +.rz-datalist-data > li { + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} +.rz-datalist-data > li:first-child { + margin-block-start: 0; +} +.rz-datalist-data > li:last-child { + margin-block-end: 0; +} + +.rz-g { + display: flex; + flex-wrap: wrap; +} +.rz-g > div { + flex: auto; + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} + +.rz-datalist-content { + box-sizing: border-box; + position: relative; +} + +.rz-datafilter { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + column-gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-selectbutton { + display: inline-flex; +} +.rz-datafilter .rz-datafilter-group { + position: relative; + margin: 0.25rem 0 0; + padding: 0; + flex-basis: 100%; +} +.rz-datafilter .rz-datafilter-group .rz-datafilter-group { + margin: 0; +} +.rz-datafilter .rz-datafilter-item { + position: relative; + list-style: none; + margin: 0; + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-datafilter-item:before { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item:after { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item .rz-multiselect, +.rz-datafilter .rz-datafilter-item .rz-dropdown { + flex: 10rem 1; +} +.rz-datafilter .rz-datafilter-group-item:after { + height: calc(var(--rz-input-height) / 2); +} +.rz-datafilter .rz-datafilter-bar { + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; +} +.rz-datafilter .rz-datafilter-bar:before { + display: none; +} +.rz-datafilter .rz-datafilter-bar:after { + height: calc(var(--rz-input-height) / 2); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); +} +.rz-datafilter .rz-datafilter-bar .rz-splitbutton { + margin-block-start: 0.3125rem; +} +.rz-datafilter .rz-datafilter-editor { + flex: 10rem 4; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear { + color: var(--rz-text-secondary-color); + opacity: 0.5; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear:hover { + opacity: 1; +} + +.rz-scheduler { + box-sizing: border-box; + container-name: scheduler; + container-type: inline-size; + display: flex; + height: 400px; + flex-direction: column; + border-radius: var(--rz-scheduler-border-radius); + border: 1px solid var(--rz-scheduler-border-color); + box-shadow: var(--rz-scheduler-shadow); + color: var(--rz-scheduler-color); + background: var(--rz-scheduler-background-color); + overflow: hidden; + background-clip: border-box; +} +.rz-scheduler a.rz-event-list-btn { + position: absolute; + padding-inline-start: 0.25rem; + color: var(--rz-scheduler-event-list-button-color); + font-size: var(--rz-scheduler-event-list-button-font-size); +} +.rz-scheduler a.rz-event-list-btn:hover { + cursor: pointer; + color: var(--rz-scheduler-event-list-button-color); + text-decoration: underline; +} + +.rz-slot { + display: flex; + height: 1.5em; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} + +.rz-slot-title { + text-align: end; + font-size: var(--rz-scheduler-slot-title-font-size); + padding: var(--rz-scheduler-slot-title-padding); +} + +.rz-slot-hours { + flex: 0 0 5rem; +} +.rz-slot-hours .rz-slot-header { + height: 1.5rem; + text-align: end; + font-size: var(--rz-scheduler-header-font-size); + padding: 0 0.25rem; + border-inline-end: 1px solid var(--rz-scheduler-border-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.rz-slot-minor { + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); +} + +.rz-day-view .rz-slot, +.rz-slots:first-child .rz-slot { + border-inline-start: none; +} + +.rz-event { + position: absolute; + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); + cursor: pointer; +} + +.rz-event-content { + background: var(--rz-scheduler-event-background-color); + border-radius: var(--rz-scheduler-border-radius); + color: var(--rz-scheduler-event-color); + height: 100%; + padding: var(--rz-scheduler-event-content-padding); + font-size: var(--rz-scheduler-event-font-size); + line-height: var(--rz-scheduler-event-line-height); + overflow: hidden; +} + +.rz-events { + position: relative; +} + +.rz-scheduler-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--rz-scheduler-toolbar-padding); + background: var(--rz-scheduler-toolbar-background-color); +} +.rz-scheduler-nav .rz-scheduler-nav-title { + display: flex; + align-self: center; + font-size: var(--rz-scheduler-toolbar-title-font-size); + font-weight: var(--rz-scheduler-toolbar-title-font-weight); + color: var(--rz-scheduler-toolbar-title-color); +} + +.rz-view-header { + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); + background-color: var(--rz-scheduler-header-background-color); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); + display: flex; +} +.rz-view-header .rz-slot-header { + flex: 1; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rz-view-header .rz-slot-hour-header { + flex: 0 0 5rem; +} + +.rz-view { + display: flex; + flex-direction: column; + flex: 1; +} + +.rz-view-content { + flex: auto; + display: flex; + overflow: auto; + height: 0; +} +.rz-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-slot:has(.rz-state-focused) { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-slots { + flex: 1; + font-size: 1rem; +} + +.rz-scheduler-nav-views { + display: flex; +} +.rz-scheduler-nav-views .rz-button.rz-primary { + background: var(--rz-scheduler-view-button-background-color); + color: var(--rz-scheduler-view-button-color); + border: var(--rz-scheduler-view-button-border); + border-radius: 0; + border-inline-end: none; +} +.rz-scheduler-nav-views .rz-button.rz-primary:first-child { + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); +} +.rz-scheduler-nav-views .rz-button.rz-primary:last-child { + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); +} +.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { + background-color: var(--rz-scheduler-view-selected-background-color); + border-color: var(--rz-scheduler-view-selected-border-color); + color: var(--rz-scheduler-view-selected-color); +} +.rz-scheduler-nav-views .rz-button.rz-primary:focus-visible { + z-index: 1; +} + +.rz-scheduler-nav-prev-next { + display: flex; +} +.rz-scheduler-nav-prev-next .rz-button { + background-color: var(--rz-scheduler-prev-next-button-background-color); + color: var(--rz-scheduler-prev-next-button-color); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); + font-size: var(--rz-scheduler-prev-next-button-font-size); +} +.rz-scheduler-nav-prev-next .rz-button.rz-today { + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); + padding: var(--rz-scheduler-today-button-padding); + font-size: var(--rz-scheduler-today-button-font-size); + text-transform: var(--rz-scheduler-today-button-text-transform); +} +.rz-scheduler-nav-prev-next .rz-button.rz-prev { + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button.rz-next { + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button:focus-visible { + z-index: 1; +} + +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + +.rz-event-list .rz-event { + position: static; +} + +.rz-week { + flex: 1; + font-size: 1rem; +} +.rz-week .rz-slots { + display: flex; + height: 100%; +} +.rz-week:first-child .rz-slot { + border-block-start: none; +} + +.rz-month { + flex: 1; + font-size: 1rem; +} +.rz-month .rz-slots { + display: flex; + height: 100%; +} +.rz-month:nth-child(2) .rz-slot { + border-block-start: none; +} +.rz-month .rz-slot { + flex: 1; + height: 100%; + display: flex; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child { + position: sticky; + z-index: 9998; + inset-inline-start: 0; + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child .rz-slot-header { + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-month .rz-slot:nth-child(2) { + border-inline-start: none; +} + +.rz-day-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-day-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-week-view-content { + flex: 1; + display: flex; +} +.rz-week-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-week-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-slots.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-week-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-week-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-month-view .rz-view-content { + flex: 1; + flex-direction: column; +} +.rz-month-view .rz-slot { + flex: 1; + height: 100%; +} +.rz-month-view .rz-slot:first-child { + border-inline-start: none; +} + +.rz-planner-view { + overflow: auto; +} +.rz-planner-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 2.25rem; + z-index: 9999; +} +.rz-planner-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-planner-view .rz-month .rz-slot:first-child .rz-slot-header { + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +.rz-planner-view .rz-month .rz-slot:last-child { + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); +} +.rz-planner-view .rz-month .rz-slot:last-child .rz-slot-header { + writing-mode: vertical-rl; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-planner-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-planner-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-timeline-view { + flex: auto; + overflow: auto; + flex-wrap: wrap; + flex-direction: unset; +} +.rz-timeline-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 36px; + z-index: 9999; +} +.rz-timeline-view .rz-view-header .rz-slot-header { + min-width: var(--rz-scheduler-timeline-slot-width); + flex: 0 0 auto; +} +.rz-timeline-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-timeline-view .rz-month { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slots { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slot { + width: var(--rz-scheduler-timeline-slot-width); + height: var(--rz-scheduler-timeline-slot-height); +} +.rz-timeline-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-timeline-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-year-view { + overflow: auto; + padding: var(--rz-scheduler-year-padding); + --rz-gap: var(--rz-scheduler-year-padding); +} +.rz-year-view .rz-flex-column, +.rz-year-view .rz-week { + min-width: fit-content; +} +.rz-year-view .rz-slot { + flex: 1; + border-block-start: none; + justify-content: center; + height: initial; + padding: var(--rz-scheduler-year-slot-padding); + cursor: pointer; +} +.rz-year-view .rz-slot .rz-slot-title { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-align: center; + width: var(--rz-scheduler-year-slot-title-width); + min-width: 2rem; + min-height: 2rem; + border-radius: var(--rz-scheduler-year-slot-title-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-year-view .rz-slot .rz-slot-title.rz-other-month { + opacity: 0.5; +} +.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments { + color: var(--rz-scheduler-event-color); + background-color: var(--rz-scheduler-event-background-color); +} +.rz-year-view .rz-slot .rz-slot-title.rz-state-focused { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} +.rz-year-view .rz-slot:hover .rz-slot-title:not(.rz-has-appointments) { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} + +.rz-year-month:focus { + outline: var(--rz-outline-normal); +} +.rz-year-month:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); + border-radius: var(--rz-border-radius); +} + +@container scheduler (width < 640px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@container scheduler (width < 1400px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +@media (max-width: 576px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@media (max-width: 1399px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +.rz-tabview { + box-sizing: border-box; + display: flex; +} +.rz-tabview:focus { + outline: var(--rz-outline-normal); +} +.rz-tabview:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-tabview:focus-visible .rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + outline: var(--rz-tabs-tab-focus-outline); + outline-offset: var(--rz-tabs-tab-focus-outline-offset); +} +.rz-tabview.rz-tabview-top { + flex-direction: column; +} +.rz-tabview.rz-tabview-top-right { + flex-direction: column; +} +.rz-tabview.rz-tabview-bottom { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-bottom-right { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-left { + flex-direction: row; +} +.rz-tabview.rz-tabview-right { + flex-direction: row-reverse; +} + +.rz-tabview-nav { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} +.rz-tabview-nav li { + border: var(--rz-tabs-border); + background-color: var(--rz-tabs-tab-background-color); + color: var(--rz-tabs-tab-color); + transition: var(--rz-tabs-transition); +} +.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-hover-background-color); + color: var(--rz-tabs-tab-hover-color); +} +.rz-tabview-nav li a, +.rz-tabview-nav li a:not([href]):not([class]) { + display: flex; + align-items: center; + color: inherit; + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); + font-size: var(--rz-tabs-tab-font-size); + line-height: var(--rz-tabs-tab-line-height); + font-weight: var(--rz-tabs-tab-font-weight); + text-transform: var(--rz-tabs-tab-text-transform); + letter-spacing: var(--rz-tabs-tab-letter-spacing); + text-decoration: none; + cursor: pointer; +} +.rz-tabview-nav li a:hover, +.rz-tabview-nav li a:not([href]):not([class]):hover { + text-decoration: none; +} +.rz-tabview-nav li.rz-state-disabled { + opacity: 0.5; +} +.rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-focus-background-color); + border-color: var(--rz-tabs-tab-focus-background-color); + color: var(--rz-tabs-tab-focus-color); +} +.rz-tabview-nav .rz-tabview-selected { + background-color: var(--rz-tabs-tab-selected-background-color); + color: var(--rz-tabs-tab-selected-color); + position: relative; +} +.rz-tabview-top > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-top > .rz-tabview-nav li { + border-top-width: 2px; + border-bottom-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-bottom-color: var(--rz-tabs-background-color); + margin-bottom: -1px; + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-bottom > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-bottom > .rz-tabview-nav li { + border-bottom-width: 2px; + border-top-color: var(--rz-tabs-tab-background-color); + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-top-color: var(--rz-tabs-background-color); + margin-top: -1px; + padding-top: 1px; + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-left > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-left > .rz-tabview-nav li { + border-left-width: 2px; + border-right-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} +.rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-right-color: var(--rz-tabs-background-color); + margin-right: -1px; + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-right > .rz-tabview-nav li { + border-right-width: 2px; + border-left-color: var(--rz-tabs-tab-background-color); + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-left-color: var(--rz-tabs-background-color); + margin-left: -1px; + padding-left: 1px; + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} + +.rz-tabview-panels { + background-color: var(--rz-tabs-background-color); + border: var(--rz-tabs-border); + box-shadow: var(--rz-tabs-shadow); + flex: 1; + overflow: auto; +} +.rz-tabview-top > .rz-tabview-panels { + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-left > .rz-tabview-panels { + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .rz-tabview-panels { + flex: auto; + } +} +.rz-tabview-panel { + padding: var(--rz-tabs-padding); +} + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); +} + +.rz-tooltip { + box-sizing: border-box; + position: absolute; + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-tooltip-content { + background: var(--rz-tooltip-background-color); + color: var(--rz-tooltip-color); + box-shadow: var(--rz-tooltip-shadow); + padding: var(--rz-tooltip-padding); + border-radius: var(--rz-tooltip-border-radius); + font-size: var(--rz-tooltip-font-size); + white-space: nowrap; +} + +.rz-tooltip .rz-top-tooltip-content { + margin-bottom: 16px; +} + +.rz-tooltip .rz-top-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-end: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-bottom-tooltip-content { + margin-top: -8px; +} + +.rz-tooltip .rz-bottom-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-start: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-left-tooltip-content { + margin-right: 8px; +} + +.rz-tooltip .rz-left-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + right: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-right-tooltip-content { + margin-left: 0; +} + +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-dialog-wrapper { + box-sizing: border-box; + display: flex; + position: fixed; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + z-index: var(--rz-dialog-zindex); + align-items: center; + justify-content: center; +} + +.rz-dialog { + box-sizing: border-box; + position: absolute; + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 150px; + max-height: 100%; + min-height: 150px; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); +} + +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); + font-size: var(--rz-dialog-title-font-size); + line-height: var(--rz-dialog-title-line-height); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); +} + +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; + font-weight: var(--rz-dialog-title-font-weight); + letter-spacing: var(--rz-dialog-title-letter-spacing); + color: var(--rz-dialog-title-color); + user-select: none; +} + +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { + font-size: var(--rz-dialog-close-font-size); + color: var(--rz-dialog-close-color); + vertical-align: var(--rz-dialog-close-vertical-align); +} +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { + content: "close"; +} +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { + color: var(--rz-dialog-close-hover-color); +} + +.rz-dialog-content, +.rz-dialog-side-content { + flex: 0 1 auto; + padding: var(--rz-dialog-content-padding); + overflow: auto; +} + +.rz-dialog-confirm, .rz-dialog-alert { + max-width: 400px; + margin: 0.75rem; +} + +.rz-dialog-confirm-message, .rz-dialog-alert-message { + margin-block-end: 1.5rem; +} + +.rz-dialog-confirm-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.rz-dialog-confirm-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-alert-buttons { + text-align: end; + gap: 0.5rem; +} +.rz-dialog-alert-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-mask { + position: fixed; + z-index: var(--rz-dialog-mask-zindex); + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--rz-dialog-mask-background-color); + opacity: 0.5; +} + +.no-scroll { + overflow: hidden; + padding-inline-end: 15px; +} + +.rz-dialog-side-position-right { + right: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-left { + left: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-top { + top: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +.rz-dialog-side-position-bottom { + bottom: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; +} + +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; +} + +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); +} +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); +} +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); +} +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); +} + +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); +} + +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.rz-notification-title { + font-weight: bold; +} + +.rz-notification-icon { + margin: var(--rz-notification-icon-margin); +} +.rz-notification-icon.rzi-check { + color: var(--rz-notification-success-icon-color); +} +.rz-notification-icon.rzi-check:before { + content: "check"; +} +.rz-notification-icon.rzi-exclamation-triangle { + color: var(--rz-notification-warning-icon-color); +} +.rz-notification-icon.rzi-exclamation-triangle:before { + content: "warning"; +} +.rz-notification-icon.rzi-info-circle { + color: var(--rz-notification-info-icon-color); +} +.rz-notification-icon.rzi-info-circle:before { + content: "info"; +} +.rz-notification-icon.rzi-times { + color: var(--rz-notification-error-icon-color); +} +.rz-notification-icon.rzi-times:before { + content: "error"; +} + +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; +} + +.rz-form { + box-sizing: border-box; +} + +.rz-message { + box-sizing: border-box; +} + +.rz-messages-error { + display: inline-block; + color: var(--rz-form-error-color); + font-size: var(--rz-form-error-font-size); + padding: var(--rz-validator-text-padding); +} + +.rz-message-popup { + position: absolute; + background-color: var(--rz-validator-background-color); + transform: var(--rz-validator-transform); + box-shadow: var(--rz-validator-shadow); + padding: var(--rz-validator-padding); + border-radius: var(--rz-border-radius); + color: var(--rz-validator-color); + pointer-events: none; +} +.rz-message-popup:before { + content: ""; + border: var(--rz-validator-pointer-size) solid transparent; + border-bottom-color: var(--rz-validator-background-color); + position: absolute; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); +} + +body:not(.rz-default-scrollbars)::-webkit-scrollbar, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +body:not(.rz-default-scrollbars)::-webkit-scrollbar-corner, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-layout::-webkit-scrollbar, +.rz-layout ::-webkit-scrollbar, +.rz-scrollbars::-webkit-scrollbar, +.rz-scrollbars ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-thumb, +.rz-layout ::-webkit-scrollbar-thumb, +.rz-scrollbars::-webkit-scrollbar-thumb, +.rz-scrollbars ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-corner, +.rz-layout ::-webkit-scrollbar-corner, +.rz-scrollbars::-webkit-scrollbar-corner, +.rz-scrollbars ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-login { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rz-login .rz-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.rz-login .rz-form .rz-form-row { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} +.rz-login .rz-form .rz-form-row .rz-label { + flex: 1 8rem; +} +.rz-login .rz-form .rz-form-row .rz-form-input-wrapper { + flex: 3 14rem; +} +.rz-login .rz-form .rz-form-row .rz-textbox { + display: block; + width: 100%; +} +.rz-login .rz-form .rz-form-row .rz-textbox.invalid { + border: var(--rz-border-danger); +} +.rz-login .rz-form .rz-form-row .rz-switch { + margin-inline-end: 0.5rem; +} +.rz-login .rz-form .rz-messages-error { + position: absolute; +} +.rz-login .rz-register { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: var(--rz-login-register-background-color); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); + border-radius: var(--rz-border-radius); +} +.rz-login .rz-register .rz-button { + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); +} +.rz-login .rz-login-buttons { + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.rz-lookup-panel { + background-color: var(--rz-lookup-panel-background-color); + padding: var(--rz-lookup-panel-padding); + container-type: inline-size; + container-name: rz-lookup-panel; +} + +.rz-lookup-search { + display: flex; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); +} +.rz-lookup-search input { + flex: auto; +} + +.ssrsviewer { + display: flex; +} +.ssrsviewer iframe { + flex: auto; +} + +.rz-map { + box-sizing: border-box; + height: var(--rz-map-height); + padding: var(--rz-map-padding); + background-color: var(--rz-map-background-color); + box-shadow: var(--rz-map-shadow); + border-radius: var(--rz-border-radius); +} + +.rz-map-container { + height: 100%; +} + +.rz-gauge, +.rz-arc-gauge { + box-sizing: border-box; + position: relative; + display: inline-block; + width: 300px; + height: 300px; +} + +.rz-gauge .rz-line, +.rz-gauge .rz-tick { + stroke: var(--rz-gauge-scale-color); +} +.rz-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-scale-label-color); +} + +.rz-arc-gauge .rz-line, +.rz-arc-gauge .rz-tick { + stroke: var(--rz-gauge-arc-scale-color); +} +.rz-arc-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-arc-scale-label-color); +} + +.rz-gauge-value { + position: absolute; + transform: translateX(-50%); + padding: 0.5rem; +} + +.rz-arc-gauge-value { + position: absolute; + transform: translate(-50%, -50%); + padding: 0.5rem; +} + +.rz-gauge-pointer { + fill: var(--rz-gauge-pointer-color); +} + +.rz-arc-gauge-scale-value { + fill: var(--rz-gauge-arc-value-color); +} + +.rz-arc-gauge-scale { + fill: var(--rz-gauge-arc-scale-color); +} + +.rz-progressbar { + box-sizing: border-box; + border-radius: var(--rz-progressbar-border-radius); + height: var(--rz-progressbar-height); + position: relative; + background-color: var(--rz-progressbar-background-color); + text-align: center; + display: flex; + align-items: center; +} + +.rz-progressbar-value { + border-radius: var(--rz-progressbar-border-radius); + position: absolute; + background-color: var(--rz-progressbar-value-background-color); + height: 100%; + width: 100%; + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-label { + position: relative; + width: 100%; + text-align: center; + font-size: var(--rz-progressbar-font-size); + line-height: var(--rz-progressbar-font-size); +} + +.rz-progressbar-circular { + box-sizing: border-box; + position: relative; +} + +.rz-progressbar-circular-viewbox { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.rz-progressbar-circular-label { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +.rz-progressbar-circular-background { + stroke: var(--rz-progressbar-background-color); + stroke-width: var(--rz-progressbar-circular-stroke-width); +} + +.rz-progressbar-circular-value { + stroke-linecap: var(--rz-progressbar-circular-value-endpoint); + stroke-width: var(--rz-progressbar-circular-value-stroke-width); + stroke: var(--rz-progressbar-value-background-color); + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-determinate .rz-progressbar-circular-value { + stroke-dasharray: 100; + transform: rotate(-0.25turn); +} + +.rz-progressbar-indeterminate { + overflow: hidden; +} +.rz-progressbar-indeterminate .rz-progressbar-value { + background-color: transparent; +} +.rz-progressbar-indeterminate .rz-progressbar-value:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} +.rz-progressbar-indeterminate .rz-progressbar-value:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; + animation-delay: 1.15s; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} +@keyframes rz-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 100%, 60% { + left: 100%; + right: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} +.rz-progressbar-indeterminate .rz-progressbar-circular-value { + animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + transform-origin: 0 0; +} +@keyframes rz-progressbar-circular-indeterminate-anim-rotate { + 100% { + transform: rotate(1turn); + } +} +@keyframes rz-progressbar-circular-indeterminate-anim-dash { + 0% { + stroke-dasharray: 1, 100; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -28; + } + 100% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -99; + } +} + +.rz-progressbar.rz-progressbar-primary { + color: var(--rz-on-primary); +} + +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value { + background-color: var(--rz-primary); +} +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:before { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:after { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); +} + +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); +} +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:before { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:after { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar.rz-progressbar-info { + color: var(--rz-on-info); +} + +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-value { + background-color: var(--rz-info); +} +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:before { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:after { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar.rz-progressbar-warning { + color: var(--rz-on-warning); +} + +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-value { + background-color: var(--rz-warning); +} +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:before { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:after { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-danger { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-success { + color: var(--rz-on-success); +} + +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value { + background-color: var(--rz-success); +} +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:before { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:after { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} + +.rz-scheme-pastel .rz-series-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} + +.rz-scheme-pastel .rz-series-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} + +.rz-scheme-pastel .rz-series-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} + +.rz-scheme-pastel .rz-series-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} + +.rz-scheme-pastel .rz-series-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} + +.rz-scheme-pastel .rz-series-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} + +.rz-scheme-pastel .rz-series-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} + +.rz-scheme-pastel .rz-series-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} + +.rz-scheme-pastel .rz-series-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-9-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} + +.rz-scheme-pastel .rz-series-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-10-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} + +.rz-scheme-pastel .rz-series-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-11-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} + +.rz-scheme-pastel .rz-series-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-12-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} + +.rz-scheme-pastel .rz-series-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-13-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} + +.rz-scheme-pastel .rz-series-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-14-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} + +.rz-scheme-pastel .rz-series-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-15-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} + +.rz-scheme-pastel .rz-series-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-16-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} + +.rz-scheme-pastel .rz-series-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-17-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} + +.rz-scheme-pastel .rz-series-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-18-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} + +.rz-scheme-pastel .rz-series-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-19-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} + +.rz-scheme-pastel .rz-series-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-20-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} + +.rz-scheme-pastel .rz-series-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-21-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} + +.rz-scheme-pastel .rz-series-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-22-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} + +.rz-scheme-pastel .rz-series-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-23-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} + +.rz-scheme-palette .rz-series-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} +.rz-scheme-palette .rz-series-item-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} + +.rz-scheme-palette .rz-series-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} + +.rz-scheme-palette .rz-series-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #665191; +} +.rz-scheme-palette .rz-series-item-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #665191; +} + +.rz-scheme-palette .rz-series-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #a05195; +} +.rz-scheme-palette .rz-series-item-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #a05195; +} + +.rz-scheme-palette .rz-series-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #d45087; +} +.rz-scheme-palette .rz-series-item-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #d45087; +} + +.rz-scheme-palette .rz-series-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} + +.rz-scheme-palette .rz-series-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} + +.rz-scheme-palette .rz-series-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} +.rz-scheme-palette .rz-series-item-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} + +.rz-scheme-monochrome .rz-series-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} + +.rz-scheme-monochrome .rz-series-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #296080; +} +.rz-scheme-monochrome .rz-series-item-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #296080; +} + +.rz-scheme-monochrome .rz-series-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #437594; +} +.rz-scheme-monochrome .rz-series-item-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #437594; +} + +.rz-scheme-monochrome .rz-series-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} + +.rz-scheme-monochrome .rz-series-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} + +.rz-scheme-monochrome .rz-series-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} + +.rz-scheme-monochrome .rz-series-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} + +.rz-scheme-monochrome .rz-series-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} + +.rz-scheme-divergent .rz-series-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #00876c; +} +.rz-scheme-divergent .rz-series-item-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #00876c; +} + +.rz-scheme-divergent .rz-series-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} + +.rz-scheme-divergent .rz-series-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} + +.rz-scheme-divergent .rz-series-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} + +.rz-scheme-divergent .rz-series-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} + +.rz-scheme-divergent .rz-series-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} + +.rz-scheme-divergent .rz-series-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} + +.rz-scheme-divergent .rz-series-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #e27076; +} +.rz-scheme-divergent .rz-series-item-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #e27076; +} + +.rz-scheme-divergent .rz-series-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} + +.rz-marker { + stroke: var(--rz-chart-marker-stroke); +} + +.rz-area-series .rz-marker { + fill-opacity: 1; +} + +.rz-axis { + stroke: var(--rz-chart-axis-color); + font-size: var(--rz-chart-axis-font-size); +} + +.rz-axis .rz-grid-line { + stroke: var(--rz-chart-axis-color); +} + +.rz-tick-text { + stroke: none; + fill: var(--rz-chart-axis-label-color); +} + +.rz-series-data-label { + fill: var(--rz-chart-axis-label-color); +} + +.rz-value-axis .rz-tick-text { + text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; +} + +.rz-category-axis .rz-tick-text { + text-anchor: middle; +} + +.rz-axis .rz-axis-title { + stroke: none; + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-title { + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-content { + height: 100%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rz-legend { + position: absolute; + display: flex; + font-size: var(--rz-chart-legend-font-size); +} + +.rz-legend-right { + right: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-left { + left: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-top { + top: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-bottom { + bottom: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-items { + padding: 0; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; +} + +.rz-legend-item { + display: flex; + align-items: center; + gap: 4px; + margin: 4px; + cursor: pointer; +} +.rz-legend-item:focus { + outline: var(--rz-outline-normal); +} +.rz-legend-item:focus-visible { + outline: var(--rz-chart-legend-focus-outline); + outline-offset: var(--rz-chart-legend-focus-outline-offset); + border-radius: var(--rz-border-radius); +} + +.rz-legend-top .rz-legend-item, +.rz-legend-bottom .rz-legend-item { + display: inline-flex; +} + +.rz-chart-tooltip { + position: absolute; + transform: translate(-50%, -100%); + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-chart-tooltip-content { + background: var(--rz-chart-tooltip-background); + color: var(--rz-chart-tooltip-color); + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + padding: 0.25rem 0.5rem; + border-radius: var(--rz-border-radius); + white-space: nowrap; +} + +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content { + margin-bottom: 15px; +} +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + left: 50%; + bottom: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -11px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-link { + box-sizing: border-box; + color: var(--rz-link-color); + text-decoration: none; + cursor: pointer; +} +.rz-link .rz-link-text { + text-decoration: var(--rz-link-text-decoration); +} +.rz-link .rzi { + font-size: inherit; + vertical-align: middle; +} +.rz-link:hover, .rz-link:focus { + color: var(--rz-link-hover-color); + text-decoration: none; +} +.rz-link:hover .rz-link-text, .rz-link:focus .rz-link-text { + text-decoration: var(--rz-link-hover-text-decoration); +} +.rz-link:focus-visible { + outline: var(--rz-link-focus-outline); +} + +.rz-state-highlight .link { + color: var(--rz-text-contrast-color); +} + +.rz-html-editor { + box-sizing: border-box; + display: flex; + flex-direction: column; + border-radius: var(--rz-editor-border-radius); + border: var(--rz-editor-border); + overflow: hidden; +} +.rz-html-editor:focus-within { + outline: var(--rz-editor-focus-outline); + outline-offset: var(--rz-editor-focus-outline-offset); +} + +.rz-html-editor-content { + flex: 1; + overflow: auto; + padding: 0.5rem; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-source.rz-textarea { + --rz-input-hover-shadow: none; + --rz-input-border: none; + --rz-input-hover-border: none; + --rz-input-focus-shadow: none; + --rz-input-focus-border: none; + flex: 1; + padding: 0.5rem; + overflow: auto; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-toolbar { + border-bottom: var(--rz-editor-border); + display: flex; + line-height: 1rem; + flex-wrap: wrap; + background-color: var(--rz-editor-toolbar-background-color); +} +.rz-html-editor-toolbar .rzi { + font-size: 1rem; +} +.rz-html-editor-toolbar > * { + margin: var(--rz-editor-toolbar-item-margin); +} + +.rz-html-editor-colorpicker { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger { + color: inherit; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} +.rz-html-editor-colorpicker .rz-colorpicker-value { + display: none; +} +.rz-html-editor-colorpicker .rz-colorpicker { + border: none; + box-shadow: none; + padding: 0; + height: auto; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} + +.rz-html-editor-color { + border: none; + display: flex; + flex-direction: column; + background: inherit; + color: inherit; + appearance: none; + padding: 0; + position: relative; +} +.rz-html-editor-color:disabled { + color: var(--rz-input-disabled-color); +} + +.rz-html-editor-color-value { + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; +} + +.rz-html-editor-button { + color: var(--rz-editor-button-color); + appearance: none; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-button.rz-selected { + background-color: var(--rz-editor-button-selected-background-color); + color: var(--rz-editor-button-selected-color); + border-radius: var(--rz-editor-border-radius); +} +.rz-html-editor-button:disabled { + color: var(--rz-editor-button-disabled-color); +} + +.rz-html-editor-dropdown { + display: inline-flex; + padding: var(--rz-editor-button-padding); + align-items: center; + cursor: pointer; +} +.rz-html-editor-dropdown.rz-disabled { + color: var(--rz-input-disabled-color); + cursor: default; +} + +.rz-html-editor-dropdown-item { + cursor: default; + font-size: var(--rz-dropdown-item-font-size); + padding: var(--rz-dropdown-item-padding); + white-space: nowrap; +} +.rz-html-editor-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-html-editor-dropdown-item.rz-selected { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); +} + +.rz-html-editor-dropdown-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: inherit; + background-color: inherit; +} +.rz-html-editor-dropdown-trigger .rzi:before { + content: "arrow_drop_down"; +} + +.rz-html-editor-dropdown-items { + display: none; +} + +.rz-html-editor-dialog-item { + margin-bottom: 1rem; +} +.rz-html-editor-dialog-item label:first-child { + display: block; +} + +.rz-html-editor-dialog-buttons { + text-align: right; +} + +.rz-html-editor-separator { + width: 1px; + background-color: var(--rz-editor-separator-background-color); +} + +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; +} +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} + +.rz-colorpicker { + display: inline-flex; + align-items: center; + cursor: pointer; +} +.rz-colorpicker.rz-state-disabled { + cursor: default; +} + +button.rz-colorpicker-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: var(--rz-text-color); + background-color: inherit; + outline: none; +} +button.rz-colorpicker-trigger .rzi { + font-size: var(--rz-icon-size); +} +button.rz-colorpicker-trigger .rzi:before { + content: "arrow_drop_down"; +} +.rz-state-disabled button.rz-colorpicker-trigger { + color: var(--rz-input-disabled-color); +} + +.rz-colorpicker-popup { + display: none; + position: absolute; + border: var(--rz-colorpicker-panel-border); + background-color: var(--rz-colorpicker-panel-background-color); + box-shadow: var(--rz-colorpicker-panel-shadow); + min-width: 200px; + max-width: var(--rz-colorpicker-panel-max-width); + padding: var(--rz-colorpicker-panel-padding); + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-value { + flex: 1; + border-radius: var(--rz-colorpicker-value-border-radius); + border: var(--rz-colorpicker-panel-border); + min-width: 20px; + min-height: 20px; +} + +.rz-saturation-picker { + height: var(--rz-colorpicker-saturation-height); + position: relative; + touch-action: none; + border-radius: var(--rz-border-radius); +} +.rz-saturation-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-saturation-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-saturation-white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} + +.rz-saturation-black, +.rz-saturation-white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--rz-border-radius); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); +} + +.rz-saturation-black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} + +.rz-saturation-handle { + position: absolute; + width: var(--rz-colorpicker-handle-size); + height: var(--rz-colorpicker-handle-size); + border: var(--rz-colorpicker-handle-border); + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-hue-picker { + margin-bottom: 8px; + touch-action: none; + position: relative; + background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-hue-picker:active { + cursor: none; +} +.rz-hue-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-hue-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-alpha-picker { + touch-action: none; + position: relative; + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-alpha-picker:active { + cursor: none; +} +.rz-alpha-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-alpha-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-hue-handle, +.rz-alpha-handle { + position: absolute; + height: 100%; + width: 8px; + border: var(--rz-colorpicker-handle-border); + border-radius: calc(var(--rz-border-radius) / 2); + transform: translateX(-50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-colorpicker-preview-area { + display: flex; +} + +.rz-hue-and-alpha { + flex: 1; + padding-inline-end: 8px; +} + +.rz-alpha-picker:before, +.rz-colorpicker-preview:before { + position: absolute; + z-index: -1; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--rz-border-radius); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); + background-size: 8px 8px; + background-position: 0 0, 0 4px, 4px -4px, -4px 0px; +} + +.rz-colorpicker-preview { + position: relative; + width: 32px; + height: 32px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-rgba { + display: flex; + gap: 4px; +} + +.rz-color-box { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + color: var(--rz-colorpicker-input-labels-color); + font-size: 0.75rem; + text-transform: uppercase; +} +.rz-color-box .rz-textbox { + width: 80px; + margin-inline-end: 4px; + padding: var(--rz-colorpicker-hex-input-padding); + height: var(--rz-colorpicker-hex-input-height); +} +.rz-color-box .rz-numeric { + padding: var(--rz-colorpicker-rgba-input-padding); + height: var(--rz-colorpicker-rgba-input-height); +} +.rz-color-box .rz-numeric .rz-numeric-input { + padding: 0; + outline: none; +} +.rz-color-box .rz-numeric button { + display: none; +} +.rz-color-box .rz-numeric button:hover { + display: initial; +} + +.rz-colorpicker-button { + justify-content: flex-end; + display: flex; +} + +.rz-colorpicker-section:not(:last-child) { + margin-bottom: 8px; +} + +.rz-colorpicker-colors { + display: flex; + flex-wrap: wrap; + gap: var(--rz-colorpicker-items-gap); +} + +.rz-colorpicker-item { + width: var(--rz-colorpicker-item-size); + height: var(--rz-colorpicker-item-size); + border-radius: var(--rz-colorpicker-item-border-radius); + box-shadow: var(--rz-colorpicker-item-shadow); + cursor: pointer; +} +.rz-colorpicker-item:focus { + outline: var(--rz-outline-normal); +} +.rz-colorpicker-item:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-splitter { + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 100%; +} +.rz-splitter > .rz-splitter-bar { + flex: 0 0 auto; + position: relative; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--rz-splitter-bar-color); + background-color: var(--rz-splitter-bar-background-color); + opacity: 0.4; + user-select: none; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color); + border-radius: 1px; +} +.rz-splitter > .rz-splitter-bar > .rz-expand { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar-resizable:hover { + background-color: var(--rz-splitter-bar-background-color); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active { + background-color: var(--rz-splitter-bar-background-color-active); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-expand, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-collapse { + color: var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:disabled { + opacity: 0.2; +} +.rz-splitter-horizontal { + flex-direction: row; +} +.rz-splitter-horizontal > .rz-splitter-bar { + flex-direction: column; + width: 8px; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_left"; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-resize { + height: 16px; + margin: 2px 0; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before { + content: "arrow_right"; +} +.rz-splitter-horizontal > .rz-splitter-bar-resizable:hover { + cursor: col-resize; +} +.rz-splitter-vertical { + flex-direction: column; +} +.rz-splitter-vertical > .rz-splitter-bar { + flex-direction: row; + height: 8px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_drop_up"; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-resize { + width: 16px; + margin: 0 2px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-expand:before { + content: "arrow_drop_down"; +} +.rz-splitter-vertical > .rz-splitter-bar-resizable:hover { + cursor: row-resize; +} +.rz-splitter-pane { + overflow: hidden; + position: relative; + flex: 0 0 auto; +} +.rz-splitter-pane-collapsed { + flex: 0 1 0% !important; + overflow: hidden !important; + display: block !important; +} +.rz-splitter-pane-lastresizable { + flex: 1 1 auto; +} + +.rz-splitter-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* RadzenLayout styles */ +.rz-layout { + box-sizing: border-box; + height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; + background-color: var(--rz-layout-background-color); +} +.rz-layout .rz-body { + grid-area: rz-body; + overflow: auto; +} +.rz-layout .rz-sidebar { + grid-area: rz-sidebar; + position: static; +} +.rz-layout .rz-header { + grid-area: rz-header; + z-index: 2; +} +.rz-layout .rz-footer { + grid-area: rz-footer; +} + +@media (max-width: 768px) { + body:has(> .rz-layout) { + overflow-x: hidden; + } + .rz-header, + .rz-footer, + .rz-body { + width: 100vw; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } +} +.rz-breadcrumb { + box-sizing: border-box; + display: flex; + align-items: center; +} + +.rz-breadcrumb-item + .rz-breadcrumb-item::before { + content: "»"; + display: inline-block; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + font-size: 1rem; + line-height: 1.25rem; +} + +.rz-breadcrumb-item { + display: inline-flex; + align-items: center; +} +.rz-breadcrumb-item .rz-link { + display: inline-flex; + align-items: center; +} + +.rz-alert { + box-sizing: border-box; + display: flex; + align-items: flex-start; + gap: var(--rz-alert-gap); + margin: var(--rz-alert-margin); + padding: var(--rz-alert-padding); + width: 100%; + border-radius: var(--rz-alert-border-radius); + background-color: var(--rz-alert-background-color); + color: var(--rz-alert-color); +} +.rz-alert-lg { + --rz-alert-gap: 1.5rem; + --rz-alert-margin: 1.5rem 0; + --rz-alert-padding: 1.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-md { + --rz-alert-gap: 1rem; + --rz-alert-margin: 1rem 0; + --rz-alert-padding: 1rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-sm { + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 0.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-xs { + --rz-alert-gap: 0.25rem; + --rz-alert-margin: 0.25rem 0; + --rz-alert-padding: 0.25rem; + --rz-alert-message-margin: 0; + --rz-alert-icon-margin: 0; +} +.rz-alert .rz-alert-item { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-alert-gap); +} +.rz-alert .rz-alert-icon { + color: var(--rz-alert-icon-color); + margin: var(--rz-alert-icon-margin); + font-size: var(--rz-alert-icon-size); +} +.rz-alert .rz-alert-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + margin: var(--rz-alert-message-margin); +} +.rz-alert .rz-alert-title { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-alert-title-color); + margin-bottom: var(--rz-text-h6-margin-bottom); +} +.rz-alert.rz-variant-filled { + box-shadow: var(--rz-alert-box-shadow); +} +.rz-alert.rz-variant-text { + --rz-alert-padding: 0; + --rz-alert-background-color: transparent; + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0; +} +.rz-alert.rz-variant-text .rz-alert-item { + flex: unset; +} +.rz-alert.rz-variant-text .rz-alert-message { + flex-direction: row; +} +.rz-alert.rz-variant-text .rz-alert-title { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + margin-bottom: 0; + margin-right: 0.5rem; +} +.rz-alert.rz-primary { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-primary-lighter); + --rz-alert-color: var(--rz-on-primary-lighter); + --rz-alert-title-color: var(--rz-on-primary-lighter); + --rz-alert-icon-color: var(--rz-on-primary-lighter); +} +.rz-alert.rz-primary.rz-shade-light { + --rz-alert-background-color: var(--rz-primary-light); + --rz-alert-color: var(--rz-on-primary-light); + --rz-alert-title-color: var(--rz-on-primary-light); + --rz-alert-icon-color: var(--rz-on-primary-light); +} +.rz-alert.rz-primary.rz-shade-default { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-dark { + --rz-alert-background-color: var(--rz-primary-dark); + --rz-alert-color: var(--rz-on-primary-dark); + --rz-alert-title-color: var(--rz-on-primary-dark); + --rz-alert-icon-color: var(--rz-on-primary-dark); +} +.rz-alert.rz-primary.rz-shade-darker { + --rz-alert-background-color: var(--rz-primary-darker); + --rz-alert-color: var(--rz-on-primary-darker); + --rz-alert-title-color: var(--rz-on-primary-darker); + --rz-alert-icon-color: var(--rz-on-primary-darker); +} +.rz-alert.rz-variant-outlined.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + --rz-alert-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-variant-text.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-default { + --rz-alert-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-lighter { + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-light { + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-dark { + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-darker { + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-secondary { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-on-secondary-lighter); + --rz-alert-title-color: var(--rz-on-secondary-lighter); + --rz-alert-icon-color: var(--rz-on-secondary-lighter); +} +.rz-alert.rz-secondary.rz-shade-light { + --rz-alert-background-color: var(--rz-secondary-light); + --rz-alert-color: var(--rz-on-secondary-light); + --rz-alert-title-color: var(--rz-on-secondary-light); + --rz-alert-icon-color: var(--rz-on-secondary-light); +} +.rz-alert.rz-secondary.rz-shade-default { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-dark { + --rz-alert-background-color: var(--rz-secondary-dark); + --rz-alert-color: var(--rz-on-secondary-dark); + --rz-alert-title-color: var(--rz-on-secondary-dark); + --rz-alert-icon-color: var(--rz-on-secondary-dark); +} +.rz-alert.rz-secondary.rz-shade-darker { + --rz-alert-background-color: var(--rz-secondary-darker); + --rz-alert-color: var(--rz-on-secondary-darker); + --rz-alert-title-color: var(--rz-on-secondary-darker); + --rz-alert-icon-color: var(--rz-on-secondary-darker); +} +.rz-alert.rz-variant-outlined.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + --rz-alert-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-variant-text.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-default { + --rz-alert-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-lighter { + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-light { + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-dark { + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-darker { + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-info { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-lighter { + --rz-alert-background-color: var(--rz-info-lighter); + --rz-alert-color: var(--rz-on-info-lighter); + --rz-alert-title-color: var(--rz-on-info-lighter); + --rz-alert-icon-color: var(--rz-on-info-lighter); +} +.rz-alert.rz-info.rz-shade-light { + --rz-alert-background-color: var(--rz-info-light); + --rz-alert-color: var(--rz-on-info-light); + --rz-alert-title-color: var(--rz-on-info-light); + --rz-alert-icon-color: var(--rz-on-info-light); +} +.rz-alert.rz-info.rz-shade-default { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-dark { + --rz-alert-background-color: var(--rz-info-dark); + --rz-alert-color: var(--rz-on-info-dark); + --rz-alert-title-color: var(--rz-on-info-dark); + --rz-alert-icon-color: var(--rz-on-info-dark); +} +.rz-alert.rz-info.rz-shade-darker { + --rz-alert-background-color: var(--rz-info-darker); + --rz-alert-color: var(--rz-on-info-darker); + --rz-alert-title-color: var(--rz-on-info-darker); + --rz-alert-icon-color: var(--rz-on-info-darker); +} +.rz-alert.rz-variant-outlined.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + --rz-alert-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-variant-text.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-info.rz-shade-default { + --rz-alert-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-lighter { + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-light { + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-dark { + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-darker { + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-warning { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-lighter { + --rz-alert-background-color: var(--rz-warning-lighter); + --rz-alert-color: var(--rz-on-warning-lighter); + --rz-alert-title-color: var(--rz-on-warning-lighter); + --rz-alert-icon-color: var(--rz-on-warning-lighter); +} +.rz-alert.rz-warning.rz-shade-light { + --rz-alert-background-color: var(--rz-warning-light); + --rz-alert-color: var(--rz-on-warning-light); + --rz-alert-title-color: var(--rz-on-warning-light); + --rz-alert-icon-color: var(--rz-on-warning-light); +} +.rz-alert.rz-warning.rz-shade-default { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-dark { + --rz-alert-background-color: var(--rz-warning-dark); + --rz-alert-color: var(--rz-on-warning-dark); + --rz-alert-title-color: var(--rz-on-warning-dark); + --rz-alert-icon-color: var(--rz-on-warning-dark); +} +.rz-alert.rz-warning.rz-shade-darker { + --rz-alert-background-color: var(--rz-warning-darker); + --rz-alert-color: var(--rz-on-warning-darker); + --rz-alert-title-color: var(--rz-on-warning-darker); + --rz-alert-icon-color: var(--rz-on-warning-darker); +} +.rz-alert.rz-variant-outlined.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + --rz-alert-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-variant-text.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-default { + --rz-alert-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-lighter { + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-light { + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-dark { + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-darker { + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-error { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-error.rz-shade-lighter { + --rz-alert-background-color: var(--rz-error-lighter); + --rz-alert-color: var(--rz-on-error-lighter); + --rz-alert-title-color: var(--rz-on-error-lighter); + --rz-alert-icon-color: var(--rz-on-error-lighter); +} +.rz-alert.rz-error.rz-shade-light { + --rz-alert-background-color: var(--rz-error-light); + --rz-alert-color: var(--rz-on-error-light); + --rz-alert-title-color: var(--rz-on-error-light); + --rz-alert-icon-color: var(--rz-on-error-light); +} +.rz-alert.rz-error.rz-shade-default { + --rz-alert-background-color: var(--rz-error); + --rz-alert-color: var(--rz-on-error); + --rz-alert-title-color: var(--rz-on-error); + --rz-alert-icon-color: var(--rz-on-error); +} +.rz-alert.rz-error.rz-shade-dark { + --rz-alert-background-color: var(--rz-error-dark); + --rz-alert-color: var(--rz-on-error-dark); + --rz-alert-title-color: var(--rz-on-error-dark); + --rz-alert-icon-color: var(--rz-on-error-dark); +} +.rz-alert.rz-error.rz-shade-darker { + --rz-alert-background-color: var(--rz-error-darker); + --rz-alert-color: var(--rz-on-error-darker); + --rz-alert-title-color: var(--rz-on-error-darker); + --rz-alert-icon-color: var(--rz-on-error-darker); +} +.rz-alert.rz-variant-outlined.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-variant-text.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-error.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-lighter { + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-light { + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-dark { + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-darker { + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-danger { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-lighter { + --rz-alert-background-color: var(--rz-danger-lighter); + --rz-alert-color: var(--rz-on-danger-lighter); + --rz-alert-title-color: var(--rz-on-danger-lighter); + --rz-alert-icon-color: var(--rz-on-danger-lighter); +} +.rz-alert.rz-danger.rz-shade-light { + --rz-alert-background-color: var(--rz-danger-light); + --rz-alert-color: var(--rz-on-danger-light); + --rz-alert-title-color: var(--rz-on-danger-light); + --rz-alert-icon-color: var(--rz-on-danger-light); +} +.rz-alert.rz-danger.rz-shade-default { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-dark { + --rz-alert-background-color: var(--rz-danger-dark); + --rz-alert-color: var(--rz-on-danger-dark); + --rz-alert-title-color: var(--rz-on-danger-dark); + --rz-alert-icon-color: var(--rz-on-danger-dark); +} +.rz-alert.rz-danger.rz-shade-darker { + --rz-alert-background-color: var(--rz-danger-darker); + --rz-alert-color: var(--rz-on-danger-darker); + --rz-alert-title-color: var(--rz-on-danger-darker); + --rz-alert-icon-color: var(--rz-on-danger-darker); +} +.rz-alert.rz-variant-outlined.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-variant-text.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-lighter { + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-light { + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-dark { + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-darker { + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-success { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-lighter { + --rz-alert-background-color: var(--rz-success-lighter); + --rz-alert-color: var(--rz-on-success-lighter); + --rz-alert-title-color: var(--rz-on-success-lighter); + --rz-alert-icon-color: var(--rz-on-success-lighter); +} +.rz-alert.rz-success.rz-shade-light { + --rz-alert-background-color: var(--rz-success-light); + --rz-alert-color: var(--rz-on-success-light); + --rz-alert-title-color: var(--rz-on-success-light); + --rz-alert-icon-color: var(--rz-on-success-light); +} +.rz-alert.rz-success.rz-shade-default { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-dark { + --rz-alert-background-color: var(--rz-success-dark); + --rz-alert-color: var(--rz-on-success-dark); + --rz-alert-title-color: var(--rz-on-success-dark); + --rz-alert-icon-color: var(--rz-on-success-dark); +} +.rz-alert.rz-success.rz-shade-darker { + --rz-alert-background-color: var(--rz-success-darker); + --rz-alert-color: var(--rz-on-success-darker); + --rz-alert-title-color: var(--rz-on-success-darker); + --rz-alert-icon-color: var(--rz-on-success-darker); +} +.rz-alert.rz-variant-outlined.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + --rz-alert-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-variant-text.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-success.rz-shade-default { + --rz-alert-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-lighter { + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-light { + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-dark { + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-darker { + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-base { + --rz-alert-background-color: var(--rz-base-700); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-base { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-base { + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-light { + --rz-alert-background-color: var(--rz-base-700); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-contrast-color); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-light { + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-dark { + --rz-alert-background-color: var(--rz-base-900); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-dark { + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} + +@keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +@-webkit-keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +.rz-button.rz-speech-to-text-button-recording { + -webkit-animation: mic-blink 2s linear infinite; + -moz-animation: mic-blink 2s linear infinite; + animation: mic-blink 2s linear infinite; +} + +.rz-flex-row { + flex-direction: row !important; +} + +.rz-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.rz-flex-column { + flex-direction: column !important; +} + +.rz-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.rz-stack { + box-sizing: border-box; + gap: var(--rz-gap); +} + +.rz-row { + box-sizing: border-box; + flex-wrap: wrap; + gap: var(--rz-gap); + row-gap: var(--rz-row-gap); +} + +.rz-row > [class^=rz-col] { + flex: 1 0 0%; +} + +.rz-row > [class*=rz-col-] { + flex: 0 0 auto; + width: 100%; +} + +.rz-row > .rz-col-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); +} + +.rz-row > .rz-col-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-row > .rz-col-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-row > .rz-col-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-row > .rz-col-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-row > .rz-col-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-row > .rz-col-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-row > .rz-col-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-row > .rz-col-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-row > .rz-col-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-row > .rz-col-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-row > .rz-col-12 { + max-width: 100%; + flex-basis: 100%; +} + +@media (min-width: 576px) { + .rz-row > .rz-col-xs-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xs-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 768px) { + .rz-row > .rz-col-sm-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-sm-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1024px) { + .rz-row > .rz-col-md-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-md-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-md-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-md-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-md-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-md-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-md-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-md-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-md-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-md-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-md-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-md-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1280px) { + .rz-row > .rz-col-lg-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-lg-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1920px) { + .rz-row > .rz-col-xl-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xl-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 2560px) { + .rz-row > .rz-col-xx-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xx-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-12 { + max-width: 100%; + flex-basis: 100%; + } +} +.rz-offset-0 { + margin-inline-start: 0; +} + +.rz-offset-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-offset-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-offset-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-offset-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-offset-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-offset-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-offset-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-offset-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-offset-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-offset-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-offset-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); +} + +@media (min-width: 576px) { + .rz-offset-xs-0 { + margin-inline-start: 0; + } + .rz-offset-xs-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xs-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xs-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xs-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xs-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xs-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xs-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xs-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xs-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xs-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xs-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 768px) { + .rz-offset-sm-0 { + margin-inline-start: 0; + } + .rz-offset-sm-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-sm-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-sm-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-sm-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-sm-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-sm-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-sm-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-sm-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-sm-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-sm-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-sm-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1024px) { + .rz-offset-md-0 { + margin-inline-start: 0; + } + .rz-offset-md-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-md-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-md-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-md-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-md-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-md-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-md-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-md-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-md-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-md-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-md-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1280px) { + .rz-offset-lg-0 { + margin-inline-start: 0; + } + .rz-offset-lg-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-lg-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-lg-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-lg-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-lg-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-lg-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-lg-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-lg-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-lg-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-lg-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-lg-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1920px) { + .rz-offset-xl-0 { + margin-inline-start: 0; + } + .rz-offset-xl-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xl-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xl-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xl-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xl-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xl-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xl-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xl-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xl-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xl-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xl-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 2560px) { + .rz-offset-xx-0 { + margin-inline-start: 0; + } + .rz-offset-xx-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xx-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xx-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xx-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xx-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xx-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xx-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xx-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xx-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xx-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xx-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +.rz-order-first { + order: -1 !important; +} + +.rz-order-last { + order: 13 !important; +} + +.rz-order-0 { + order: 0 !important; +} + +.rz-order-1 { + order: 1 !important; +} + +.rz-order-2 { + order: 2 !important; +} + +.rz-order-3 { + order: 3 !important; +} + +.rz-order-4 { + order: 4 !important; +} + +.rz-order-5 { + order: 5 !important; +} + +.rz-order-6 { + order: 6 !important; +} + +.rz-order-7 { + order: 7 !important; +} + +.rz-order-8 { + order: 8 !important; +} + +.rz-order-9 { + order: 9 !important; +} + +.rz-order-10 { + order: 10 !important; +} + +.rz-order-11 { + order: 11 !important; +} + +.rz-order-12 { + order: 12 !important; +} + +@media (min-width: 576px) { + .rz-order-xs-first { + order: -1 !important; + } + .rz-order-xs-last { + order: 13 !important; + } + .rz-order-xs-0 { + order: 0 !important; + } + .rz-order-xs-1 { + order: 1 !important; + } + .rz-order-xs-2 { + order: 2 !important; + } + .rz-order-xs-3 { + order: 3 !important; + } + .rz-order-xs-4 { + order: 4 !important; + } + .rz-order-xs-5 { + order: 5 !important; + } + .rz-order-xs-6 { + order: 6 !important; + } + .rz-order-xs-7 { + order: 7 !important; + } + .rz-order-xs-8 { + order: 8 !important; + } + .rz-order-xs-9 { + order: 9 !important; + } + .rz-order-xs-10 { + order: 10 !important; + } + .rz-order-xs-11 { + order: 11 !important; + } + .rz-order-xs-12 { + order: 12 !important; + } +} +@media (min-width: 768px) { + .rz-order-sm-first { + order: -1 !important; + } + .rz-order-sm-last { + order: 13 !important; + } + .rz-order-sm-0 { + order: 0 !important; + } + .rz-order-sm-1 { + order: 1 !important; + } + .rz-order-sm-2 { + order: 2 !important; + } + .rz-order-sm-3 { + order: 3 !important; + } + .rz-order-sm-4 { + order: 4 !important; + } + .rz-order-sm-5 { + order: 5 !important; + } + .rz-order-sm-6 { + order: 6 !important; + } + .rz-order-sm-7 { + order: 7 !important; + } + .rz-order-sm-8 { + order: 8 !important; + } + .rz-order-sm-9 { + order: 9 !important; + } + .rz-order-sm-10 { + order: 10 !important; + } + .rz-order-sm-11 { + order: 11 !important; + } + .rz-order-sm-12 { + order: 12 !important; + } +} +@media (min-width: 1024px) { + .rz-order-md-first { + order: -1 !important; + } + .rz-order-md-last { + order: 13 !important; + } + .rz-order-md-0 { + order: 0 !important; + } + .rz-order-md-1 { + order: 1 !important; + } + .rz-order-md-2 { + order: 2 !important; + } + .rz-order-md-3 { + order: 3 !important; + } + .rz-order-md-4 { + order: 4 !important; + } + .rz-order-md-5 { + order: 5 !important; + } + .rz-order-md-6 { + order: 6 !important; + } + .rz-order-md-7 { + order: 7 !important; + } + .rz-order-md-8 { + order: 8 !important; + } + .rz-order-md-9 { + order: 9 !important; + } + .rz-order-md-10 { + order: 10 !important; + } + .rz-order-md-11 { + order: 11 !important; + } + .rz-order-md-12 { + order: 12 !important; + } +} +@media (min-width: 1280px) { + .rz-order-lg-first { + order: -1 !important; + } + .rz-order-lg-last { + order: 13 !important; + } + .rz-order-lg-0 { + order: 0 !important; + } + .rz-order-lg-1 { + order: 1 !important; + } + .rz-order-lg-2 { + order: 2 !important; + } + .rz-order-lg-3 { + order: 3 !important; + } + .rz-order-lg-4 { + order: 4 !important; + } + .rz-order-lg-5 { + order: 5 !important; + } + .rz-order-lg-6 { + order: 6 !important; + } + .rz-order-lg-7 { + order: 7 !important; + } + .rz-order-lg-8 { + order: 8 !important; + } + .rz-order-lg-9 { + order: 9 !important; + } + .rz-order-lg-10 { + order: 10 !important; + } + .rz-order-lg-11 { + order: 11 !important; + } + .rz-order-lg-12 { + order: 12 !important; + } +} +@media (min-width: 1920px) { + .rz-order-xl-first { + order: -1 !important; + } + .rz-order-xl-last { + order: 13 !important; + } + .rz-order-xl-0 { + order: 0 !important; + } + .rz-order-xl-1 { + order: 1 !important; + } + .rz-order-xl-2 { + order: 2 !important; + } + .rz-order-xl-3 { + order: 3 !important; + } + .rz-order-xl-4 { + order: 4 !important; + } + .rz-order-xl-5 { + order: 5 !important; + } + .rz-order-xl-6 { + order: 6 !important; + } + .rz-order-xl-7 { + order: 7 !important; + } + .rz-order-xl-8 { + order: 8 !important; + } + .rz-order-xl-9 { + order: 9 !important; + } + .rz-order-xl-10 { + order: 10 !important; + } + .rz-order-xl-11 { + order: 11 !important; + } + .rz-order-xl-12 { + order: 12 !important; + } +} +@media (min-width: 2560px) { + .rz-order-xx-first { + order: -1 !important; + } + .rz-order-xx-last { + order: 13 !important; + } + .rz-order-xx-0 { + order: 0 !important; + } + .rz-order-xx-1 { + order: 1 !important; + } + .rz-order-xx-2 { + order: 2 !important; + } + .rz-order-xx-3 { + order: 3 !important; + } + .rz-order-xx-4 { + order: 4 !important; + } + .rz-order-xx-5 { + order: 5 !important; + } + .rz-order-xx-6 { + order: 6 !important; + } + .rz-order-xx-7 { + order: 7 !important; + } + .rz-order-xx-8 { + order: 8 !important; + } + .rz-order-xx-9 { + order: 9 !important; + } + .rz-order-xx-10 { + order: 10 !important; + } + .rz-order-xx-11 { + order: 11 !important; + } + .rz-order-xx-12 { + order: 12 !important; + } +} +.rz-form-field-helper { + padding: var(--rz-form-field-helper-padding); +} + +.rz-form-field-content { + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); + box-shadow: var(--rz-form-field-shadow); + transition: var(--rz-input-transition); +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + flex: 1; +} +.rz-form-field-content .rz-form-field-start, +.rz-form-field-content .rz-form-field-end { + display: flex; + flex: 0; + align-items: center; + white-space: nowrap; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); +} + +.rz-form-field { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + vertical-align: top; +} +.rz-form-field:hover .rz-form-field-content { + box-shadow: var(--rz-form-field-hover-shadow); +} +.rz-form-field.rz-state-focused .rz-form-field-content { + box-shadow: var(--rz-form-field-focus-shadow); +} +.rz-form-field.rz-state-disabled .rz-form-field-content { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); +} +.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content { + border: var(--rz-input-disabled-border); +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled { + color: var(--rz-input-disabled-color); + opacity: 1; +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled::placeholder, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +.rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { + margin: 0; + --rz-input-height: var(--rz-form-field-filled-height); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); + --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); + box-shadow: var(--rz-input-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { + top: calc(var(--rz-numeric-button-offset) + 1rem); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end { + padding-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-textarea, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-textarea { + margin-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-datepicker-trigger, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-datepicker-trigger { + top: calc(50% + 0.4375rem); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-input-hover-border); + box-shadow: var(--rz-input-hover-shadow); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content { + border: var(--rz-input-focus-border); + box-shadow: var(--rz-input-focus-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content { + border: var(--rz-form-field-filled-border); + border-radius: var(--rz-form-field-filled-border-radius); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-filled .rz-form-field-content:after { + display: var(--rz-form-field-filled-underline-display); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-form-field-filled-hover-border); + box-shadow: var(--rz-form-field-filled-hover-shadow); + background-color: var(--rz-form-field-filled-hover-background-color); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused .rz-form-field-content, .rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused:hover .rz-form-field-content { + border: var(--rz-form-field-filled-focus-border); + box-shadow: var(--rz-form-field-filled-focus-shadow); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-text .rz-form-field-content { + border-color: transparent; + box-shadow: none; + --rz-input-background-color: transparent; + --rz-input-border-radius: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; + --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); +} +.rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { + padding: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-start { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-end { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { + content: ""; + position: absolute; + z-index: 1; + inset-inline-start: 50%; + inset-inline-end: 50%; + bottom: calc(-1 * var(--rz-border-width)); + height: calc(var(--rz-border-width) + 1px); + border: var(--rz-input-focus-border); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { + content: ""; + position: absolute; + inset: calc(-1 * var(--rz-border-width)); + top: auto; + height: var(--rz-border-width); + border-bottom: var(--rz-input-border); +} +.rz-form-field.rz-variant-filled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-hover-border); +} +.rz-form-field.rz-variant-filled.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-filled.rz-state-disabled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-disabled-border); +} +.rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); + border: var(--rz-input-focus-border); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); +} +.rz-form-field .rz-numeric-button { + display: none; +} +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { + display: block; +} + +.rz-form-field-label { + position: absolute; + pointer-events: none; + padding: var(--rz-form-field-label-padding); + inset-block-start: 50%; + inset-inline-end: auto; + border-radius: var(--rz-border-radius); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); + max-width: calc(100% - 1.5rem); + transform: translate(0, -50%); + background-color: transparent; + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); +} +.rz-state-disabled .rz-form-field-content > .rz-form-field-label { + color: var(--rz-input-disabled-color) !important; +} +.rz-form-field-label:last-child { + inset-inline-end: 1.5rem; +} +.rz-textarea ~ .rz-form-field-label { + inset-block-start: var(--rz-form-field-label-textarea-top); + transform: translate(0, 0); +} +.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { + transform: translate(0, 0.625rem); +} +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; + transform: translate(0, 0); + color: var(--rz-input-placeholder-color); + background-color: var(--rz-form-field-label-floating-background-color); + font-size: 0.75rem; + line-height: 1rem; + max-width: calc(100% - 1.5rem); +} +.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + background-color: inherit !important; +} +.invalid ~ .rz-form-field-label { + color: var(--rz-danger) !important; +} +.rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} + +.rz-timeline { + box-sizing: border-box; + display: flex; +} +.rz-timeline.rz-timeline-column { + flex-direction: column; +} +.rz-timeline.rz-timeline-column .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row { + flex-direction: row; +} +.rz-timeline.rz-timeline-row .rz-timeline-item { + flex-direction: column; + justify-content: end; + width: 100%; +} +.rz-timeline.rz-timeline-row.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: column-reverse; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse .rz-timeline-item { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column; + justify-content: end; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item { + flex-direction: column; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-end { + display: none; +} + +.rz-timeline-item { + display: flex; + padding: var(--rz-timeline-item-padding); + position: relative; +} +.rz-timeline-align-items-center .rz-timeline-item { + align-items: center; +} +.rz-timeline-align-items-normal .rz-timeline-item { + align-items: normal; +} +.rz-timeline-align-items-start .rz-timeline-item { + align-items: start; +} +.rz-timeline-align-items-end .rz-timeline-item { + align-items: end; +} +.rz-timeline-align-items-stretch .rz-timeline-item { + align-items: stretch; +} +.rz-timeline-item:before { + content: ""; + position: absolute; + background-color: var(--rz-timeline-line-color); +} +.rz-timeline-column .rz-timeline-item:before { + width: var(--rz-timeline-line-width); + top: 0; + bottom: 0; + left: calc(50% - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline-column .rz-timeline-item:first-child:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-top-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + top: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column .rz-timeline-item:last-child:before { + bottom: calc(50% - var(--rz-timeline-line-width) / 2); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + bottom: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + bottom: auto; + left: 0; + right: 0; + height: var(--rz-timeline-line-width); +} +.rz-timeline-row .rz-timeline-item:first-child:before { + left: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + left: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:last-child:before { + right: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-right-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + right: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} + +.rz-timeline-content-start { + text-align: center; +} +.rz-timeline-column .rz-timeline-content-start { + flex: 1 1 auto; + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-content-end { + flex: 1 1 auto; + text-align: center; +} +.rz-timeline-column .rz-timeline-content-end { + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} +.rz-timeline-row .rz-timeline-content-end { + max-height: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-axis { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 var(--rz-timeline-axis-size); +} +.rz-timeline-column .rz-timeline-axis { + width: var(--rz-timeline-axis-size); +} +.rz-timeline-row .rz-timeline-axis { + height: var(--rz-timeline-axis-size); +} + +.rz-timeline-point { + position: relative; + display: flex; + flex: 0 1 var(--rz-timeline-point-size); + align-items: center; + justify-content: center; + height: var(--rz-timeline-point-size); + width: var(--rz-timeline-point-size); + border: var(--rz-timeline-point-border); + border-radius: var(--rz-timeline-point-border-radius); + background-color: var(--rz-timeline-point-background-color); + color: var(--rz-timeline-point-color); +} + +.rz-timeline-point-outlined { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border-color: var(--rz-timeline-point-background-color); +} + +.rz-timeline-point-flat { + border: 0; +} + +.rz-timeline-point-text { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border: 0; +} + +.rz-timeline-point-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} + +.rz-timeline-point-outlined.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); + border-color: var(--rz-primary); +} + +.rz-timeline-point-text.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); +} + +.rz-timeline-point-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} + +.rz-timeline-point-outlined.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); + border-color: var(--rz-secondary); +} + +.rz-timeline-point-text.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); +} + +.rz-timeline-point-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} + +.rz-timeline-point-outlined.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); + border-color: var(--rz-info); +} + +.rz-timeline-point-text.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); +} + +.rz-timeline-point-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} + +.rz-timeline-point-outlined.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); + border-color: var(--rz-warning); +} + +.rz-timeline-point-text.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); +} + +.rz-timeline-point-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} + +.rz-timeline-point-outlined.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); + border-color: var(--rz-success); +} + +.rz-timeline-point-text.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); +} + +.rz-timeline-point-base { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); + border-color: var(--rz-base-700); +} + +.rz-timeline-point-text.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); +} + +.rz-timeline-point-light { + background-color: var(--rz-base-700); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); + border-color: var(--rz-base-700); +} + +.rz-timeline-point-text.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-700); +} + +.rz-timeline-point-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); + border-color: var(--rz-base-900); +} + +.rz-timeline-point-text.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); +} + +.rz-timeline-axis-lg { + --rz-timeline-point-size: 3rem; +} +.rz-timeline-axis-lg .rzi { + font-size: 2rem; +} + +.rz-timeline-axis-md { + --rz-timeline-point-size: 1.5rem; +} +.rz-timeline-axis-md .rzi { + font-size: 1rem; +} + +.rz-timeline-axis-sm { + --rz-timeline-point-size: 1rem; +} +.rz-timeline-axis-sm .rzi { + font-size: 0.625rem; +} + +.rz-timeline-axis-xs { + --rz-timeline-point-size: 0.75rem; +} +.rz-timeline-axis-xs .rzi { + font-size: 0.5rem; +} + +.rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { + width: 100%; + height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #505f65; + --rz-base-50: #ffffff; + --rz-base-100: #f5f8f9; + --rz-base-200: #e9eef0; + --rz-base-300: #dae0e2; + --rz-base-400: #c1c8cb; + --rz-base-500: #95a2a8; + --rz-base-600: #77858b; + --rz-base-700: #505f65; + --rz-base-800: #3a474d; + --rz-base-900: #28363c; + --rz-base-light: #c1c9cb; + --rz-base-lighter: #ffffff; + --rz-base-dark: #3a474d; + --rz-base-darker: #28363c; + --rz-primary: #598087; + --rz-primary-light: #6d8f95; + --rz-primary-lighter: rgba(89, 128, 135, 0.16); + --rz-primary-dark: #52767c; + --rz-primary-darker: #436065; + --rz-secondary: #80a4ab; + --rz-secondary-light: #8fafb5; + --rz-secondary-lighter: rgba(128, 164, 171, 0.2); + --rz-secondary-dark: #76979d; + --rz-secondary-darker: #607b80; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #ffffff; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #598087; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #80a4ab; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-secondary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-100); + --rz-text-secondary-color: var(--rz-base-300); + --rz-text-tertiary-color: var(--rz-base-400); + --rz-text-disabled-color: var(--rz-base-600); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-700); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-600); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-700); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-700); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-datalist-item-border: none; + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-800); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-700); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-900); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-700); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-700); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-700); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-700); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-700); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-700); + --rz-form-field-filled-hover-background-color: var(--rz-base-700); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-900); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-secondary-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-800); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-900); + --rz-grid-filter-background-color: var(--rz-base-800); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-800); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-700); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-900); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-hover-color: var(--rz-text-secondary-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-700); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-900); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-800); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-700); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-700); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-background-color); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-700); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-700); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-900); + --rz-pager-numeric-button-selected-color: var(--rz-text-contrast-color); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-900); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-700); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-700); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-700); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-900); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-700); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-700); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-900); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-700); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: none; + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-900); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-secondary); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-700); + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: var(--rz-base-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-background-color); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-900); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-dark); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-700); + --rz-slider-disabled-range-border: var(--rz-border-base-700); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-700); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-700); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 0.8; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-700); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-700); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: none; + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-700); + --rz-tabs-tab-color: var(--rz-text-secondary-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-800); + --rz-tabs-tab-hover-color: var(--rz-text-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-600); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-600); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: 0; + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-700); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/software-wcag.css b/_content/Radzen.Blazor/css/software-wcag.css index 7991f24..2805830 100755 --- a/_content/Radzen.Blazor/css/software-wcag.css +++ b/_content/Radzen.Blazor/css/software-wcag.css @@ -1,6 +1,8 @@ -:root { +:root, +.rz-software { --rz-white: #ffffff; --rz-black: #000000; + --rz-base: #dadfe2; --rz-base-50: #ffffff; --rz-base-100: #f6f7fa; --rz-base-200: #e9edf0; @@ -11,6 +13,10 @@ --rz-base-700: #545e61; --rz-base-800: #3a474d; --rz-base-900: #28363c; + --rz-base-light: #e9edf0; + --rz-base-lighter: #ffffff; + --rz-base-dark: #5e696e; + --rz-base-darker: #28363c; --rz-primary: #08697d; --rz-primary-light: #267b8d; --rz-primary-lighter: rgba(8, 105, 125, 0.16); @@ -41,6 +47,11 @@ --rz-danger-lighter: rgba(189, 0, 57, 0.2); --rz-danger-dark: #9f0030; --rz-danger-darker: #8e002b; + --rz-on-base: #28363c; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: #08697d; diff --git a/_content/Radzen.Blazor/css/software.css b/_content/Radzen.Blazor/css/software.css index 976a825..4c8912a 100755 --- a/_content/Radzen.Blazor/css/software.css +++ b/_content/Radzen.Blazor/css/software.css @@ -1,8755 +1,3265 @@ @charset "UTF-8"; -:root { - --blue: #007bff; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; - --red: #dc3545; - --orange: #fd7e14; - --yellow: #ffc107; - --green: #28a745; - --teal: #20c997; - --cyan: #17a2b8; - --white: #fff; - --gray: #6c757d; - --gray-dark: #343a40; - --primary: #598087; - --secondary: #80a4ab; - --success: #5dbf74; - --info: #2cc8c8; - --warning: #fac152; - --danger: #f9777f; - --light: #e9edf0; - --dark: #343a40; - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; - } - a:not(.btn) { - text-decoration: underline; - } - abbr[title]::after { - content: " (" attr(title) ")"; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #adb5bd; - page-break-inside: avoid; - } - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } - @page { - size: a3; - } - body { - min-width: 992px !important; - } - .container { - min-width: 992px !important; - } - .navbar { - display: none; - } - .badge { - border: 1px solid #000; - } - .table { - border-collapse: collapse !important; - } - .table td, - .table th { - background-color: #fff !important; - } - .table-bordered th, - .table-bordered td { - border: 1px solid #dee2e6 !important; - } - .table-dark { - color: inherit; - } - .table-dark th, - .table-dark td, - .table-dark thead th, - .table-dark tbody + tbody { - border-color: #dee2e6; - } - .table .thead-dark th { - color: inherit; - border-color: #dee2e6; - } -} -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -} - -body { - margin: 0; - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #3a474d; - text-align: left; - background-color: #f6f7fa; -} - -[tabindex="-1"]:focus { - outline: 0 !important; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title], -abbr[data-original-title] { - text-decoration: underline; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; - text-decoration-skip-ink: none; -} - -address { - margin-bottom: 1rem; +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: 0.5rem; - margin-left: 0; + font-weight: 100 700; } - -blockquote { - margin: 0 0 1rem; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; } - -b, -strong { - font-weight: bolder; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } - -small { - font-size: 80%; +*, +*::before, +*::after { + box-sizing: inherit; } -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; +.rz-text-title-color { + color: var(--rz-base-900) !important; } -sub { - bottom: -0.25em; +.rz-text-color { + color: var(--rz-base-800) !important; } -sup { - top: -0.5em; +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -a { - color: #80a4ab; - text-decoration: none; - background-color: transparent; -} -a:hover { - color: #80a4ab; - text-decoration: underline; +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):focus { - outline: 0; +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -pre, -code, -kbd, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 1em; +.rz-text-contrast-color { + color: var(--rz-white) !important; } -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -figure { - margin: 0 0 1rem; +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -img { - vertical-align: middle; - border-style: none; +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -svg { - overflow: hidden; - vertical-align: middle; +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -table { - border-collapse: collapse; +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #6c757d; - text-align: left; - caption-side: bottom; +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -th { - text-align: inherit; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -label { - display: inline-block; - margin-bottom: 0.5rem; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -button { - border-radius: 0; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -button, -input { - overflow: visible; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -button, -select { - text-transform: none; +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -select { - word-wrap: normal; +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -button:not(:disabled), -[type=button]:not(:disabled), -[type=reset]:not(:disabled), -[type=submit]:not(:disabled) { - cursor: pointer; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - padding: 0; - border-style: none; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -input[type=radio], -input[type=checkbox] { - box-sizing: border-box; - padding: 0; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -input[type=date], -input[type=time], -input[type=datetime-local], -input[type=month] { - -webkit-appearance: listbox; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -textarea { - overflow: auto; - resize: vertical; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -legend { - display: block; - width: 100%; - max-width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; - white-space: normal; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -progress { - vertical-align: baseline; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; +.rz-display-none { + display: none !important; } -[type=search] { - outline-offset: -2px; - -webkit-appearance: none; +.rz-display-block { + display: block !important; } -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; +.rz-display-inline { + display: inline !important; } -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; +.rz-display-inline-block { + display: inline-block !important; } -output { - display: inline-block; +.rz-display-flex { + display: flex !important; } -summary { - display: list-item; - cursor: pointer; +.rz-display-inline-flex { + display: inline-flex !important; } -template { - display: none; +.rz-display-grid { + display: grid !important; } -[hidden] { - display: none !important; +.rz-display-inline-grid { + display: inline-grid !important; } -.container { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} @media (min-width: 576px) { - .container { - max-width: 540px; + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; } } @media (min-width: 768px) { - .container { - max-width: 720px; + .rz-display-sm-none { + display: none !important; } -} -@media (min-width: 992px) { - .container { - max-width: 960px; + .rz-display-sm-block { + display: block !important; } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; } } +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} -.container-fluid { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} - -.row { - display: flex; - flex-wrap: wrap; - margin-right: -1rem; - margin-left: -1rem; +.rz-justify-content-stretch { + justify-content: stretch !important; } -.no-gutters { - margin-right: 0; - margin-left: 0; +.rz-justify-content-center { + justify-content: center !important; } -.no-gutters > .col, -.no-gutters > [class*=col-] { - padding-right: 0; - padding-left: 0; + +.rz-justify-content-start { + justify-content: start !important; } -.col-xl, -.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, -.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, -.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, -.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, -.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { - position: relative; - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.rz-justify-content-end { + justify-content: end !important; } -.col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.rz-justify-content-flex-start { + justify-content: flex-start !important; } -.col-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; +.rz-justify-content-flex-end { + justify-content: flex-end !important; } -.col-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; +.rz-justify-content-left { + justify-content: left !important; } -.col-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; +.rz-justify-content-right { + justify-content: right !important; } -.col-3 { - flex: 0 0 25%; - max-width: 25%; +.rz-justify-content-space-between { + justify-content: space-between !important; } -.col-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; +.rz-justify-content-space-around { + justify-content: space-around !important; } -.col-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; } -.col-6 { - flex: 0 0 50%; - max-width: 50%; +.rz-align-items-normal { + align-items: normal !important; } -.col-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; +.rz-align-items-stretch { + align-items: stretch !important; } -.col-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; +.rz-align-items-center { + align-items: center !important; } -.col-9 { - flex: 0 0 75%; - max-width: 75%; +.rz-align-items-start { + align-items: start !important; } -.col-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; +.rz-align-items-end { + align-items: end !important; } -.col-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; +.rz-align-items-flex-start { + align-items: flex-start !important; } -.col-12 { - flex: 0 0 100%; - max-width: 100%; +.rz-align-items-flex-end { + align-items: flex-end !important; } -.order-first { - order: -1; +.rz-color-white { + color: var(--rz-white) !important; } -.order-last { - order: 13; +.rz-color-black { + color: var(--rz-black) !important; } -.order-0 { - order: 0; +.rz-color-base { + color: var(--rz-base) !important; } -.order-1 { - order: 1; +.rz-color-base-50 { + color: var(--rz-base-50) !important; } -.order-2 { - order: 2; +.rz-color-base-100 { + color: var(--rz-base-100) !important; } -.order-3 { - order: 3; +.rz-color-base-200 { + color: var(--rz-base-200) !important; } -.order-4 { - order: 4; +.rz-color-base-300 { + color: var(--rz-base-300) !important; } -.order-5 { - order: 5; +.rz-color-base-400 { + color: var(--rz-base-400) !important; } -.order-6 { - order: 6; +.rz-color-base-500 { + color: var(--rz-base-500) !important; } -.order-7 { - order: 7; +.rz-color-base-600 { + color: var(--rz-base-600) !important; } -.order-8 { - order: 8; +.rz-color-base-700 { + color: var(--rz-base-700) !important; } -.order-9 { - order: 9; +.rz-color-base-800 { + color: var(--rz-base-800) !important; } -.order-10 { - order: 10; +.rz-color-base-900 { + color: var(--rz-base-900) !important; } -.order-11 { - order: 11; +.rz-color-base-light { + color: var(--rz-base-light) !important; } -.order-12 { - order: 12; +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; } -.offset-1 { - margin-left: 8.3333333333%; +.rz-color-base-dark { + color: var(--rz-base-dark) !important; } -.offset-2 { - margin-left: 16.6666666667%; +.rz-color-base-darker { + color: var(--rz-base-darker) !important; } -.offset-3 { - margin-left: 25%; +.rz-color-primary { + color: var(--rz-primary) !important; } -.offset-4 { - margin-left: 33.3333333333%; +.rz-color-primary-light { + color: var(--rz-primary-light) !important; } -.offset-5 { - margin-left: 41.6666666667%; +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; } -.offset-6 { - margin-left: 50%; +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; } -.offset-7 { - margin-left: 58.3333333333%; +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; } -.offset-8 { - margin-left: 66.6666666667%; +.rz-color-secondary { + color: var(--rz-secondary) !important; } -.offset-9 { - margin-left: 75%; +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; } -.offset-10 { - margin-left: 83.3333333333%; +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; } -.offset-11 { - margin-left: 91.6666666667%; +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; } -@media (min-width: 576px) { - .col-sm { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-sm-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-sm-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-sm-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-sm-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-sm-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-sm-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-sm-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-sm-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-sm-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-sm-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-sm-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-sm-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - order: -1; - } - .order-sm-last { - order: 13; - } - .order-sm-0 { - order: 0; - } - .order-sm-1 { - order: 1; - } - .order-sm-2 { - order: 2; - } - .order-sm-3 { - order: 3; - } - .order-sm-4 { - order: 4; - } - .order-sm-5 { - order: 5; - } - .order-sm-6 { - order: 6; - } - .order-sm-7 { - order: 7; - } - .order-sm-8 { - order: 8; - } - .order-sm-9 { - order: 9; - } - .order-sm-10 { - order: 10; - } - .order-sm-11 { - order: 11; - } - .order-sm-12 { - order: 12; - } - .offset-sm-0 { - margin-left: 0; - } - .offset-sm-1 { - margin-left: 8.3333333333%; - } - .offset-sm-2 { - margin-left: 16.6666666667%; - } - .offset-sm-3 { - margin-left: 25%; - } - .offset-sm-4 { - margin-left: 33.3333333333%; - } - .offset-sm-5 { - margin-left: 41.6666666667%; - } - .offset-sm-6 { - margin-left: 50%; - } - .offset-sm-7 { - margin-left: 58.3333333333%; - } - .offset-sm-8 { - margin-left: 66.6666666667%; - } - .offset-sm-9 { - margin-left: 75%; - } - .offset-sm-10 { - margin-left: 83.3333333333%; - } - .offset-sm-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 768px) { - .col-md { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-md-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-md-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-md-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-md-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-md-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-md-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-md-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-md-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-md-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-md-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-md-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-md-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - order: -1; - } - .order-md-last { - order: 13; - } - .order-md-0 { - order: 0; - } - .order-md-1 { - order: 1; - } - .order-md-2 { - order: 2; - } - .order-md-3 { - order: 3; - } - .order-md-4 { - order: 4; - } - .order-md-5 { - order: 5; - } - .order-md-6 { - order: 6; - } - .order-md-7 { - order: 7; - } - .order-md-8 { - order: 8; - } - .order-md-9 { - order: 9; - } - .order-md-10 { - order: 10; - } - .order-md-11 { - order: 11; - } - .order-md-12 { - order: 12; - } - .offset-md-0 { - margin-left: 0; - } - .offset-md-1 { - margin-left: 8.3333333333%; - } - .offset-md-2 { - margin-left: 16.6666666667%; - } - .offset-md-3 { - margin-left: 25%; - } - .offset-md-4 { - margin-left: 33.3333333333%; - } - .offset-md-5 { - margin-left: 41.6666666667%; - } - .offset-md-6 { - margin-left: 50%; - } - .offset-md-7 { - margin-left: 58.3333333333%; - } - .offset-md-8 { - margin-left: 66.6666666667%; - } - .offset-md-9 { - margin-left: 75%; - } - .offset-md-10 { - margin-left: 83.3333333333%; - } - .offset-md-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 992px) { - .col-lg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-lg-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-lg-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-lg-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-lg-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-lg-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-lg-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-lg-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-lg-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-lg-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-lg-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-lg-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-lg-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - order: -1; - } - .order-lg-last { - order: 13; - } - .order-lg-0 { - order: 0; - } - .order-lg-1 { - order: 1; - } - .order-lg-2 { - order: 2; - } - .order-lg-3 { - order: 3; - } - .order-lg-4 { - order: 4; - } - .order-lg-5 { - order: 5; - } - .order-lg-6 { - order: 6; - } - .order-lg-7 { - order: 7; - } - .order-lg-8 { - order: 8; - } - .order-lg-9 { - order: 9; - } - .order-lg-10 { - order: 10; - } - .order-lg-11 { - order: 11; - } - .order-lg-12 { - order: 12; - } - .offset-lg-0 { - margin-left: 0; - } - .offset-lg-1 { - margin-left: 8.3333333333%; - } - .offset-lg-2 { - margin-left: 16.6666666667%; - } - .offset-lg-3 { - margin-left: 25%; - } - .offset-lg-4 { - margin-left: 33.3333333333%; - } - .offset-lg-5 { - margin-left: 41.6666666667%; - } - .offset-lg-6 { - margin-left: 50%; - } - .offset-lg-7 { - margin-left: 58.3333333333%; - } - .offset-lg-8 { - margin-left: 66.6666666667%; - } - .offset-lg-9 { - margin-left: 75%; - } - .offset-lg-10 { - margin-left: 83.3333333333%; - } - .offset-lg-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 1200px) { - .col-xl { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-xl-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-xl-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-xl-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-xl-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-xl-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-xl-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-xl-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-xl-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-xl-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-xl-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-xl-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-xl-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - order: -1; - } - .order-xl-last { - order: 13; - } - .order-xl-0 { - order: 0; - } - .order-xl-1 { - order: 1; - } - .order-xl-2 { - order: 2; - } - .order-xl-3 { - order: 3; - } - .order-xl-4 { - order: 4; - } - .order-xl-5 { - order: 5; - } - .order-xl-6 { - order: 6; - } - .order-xl-7 { - order: 7; - } - .order-xl-8 { - order: 8; - } - .order-xl-9 { - order: 9; - } - .order-xl-10 { - order: 10; - } - .order-xl-11 { - order: 11; - } - .order-xl-12 { - order: 12; - } - .offset-xl-0 { - margin-left: 0; - } - .offset-xl-1 { - margin-left: 8.3333333333%; - } - .offset-xl-2 { - margin-left: 16.6666666667%; - } - .offset-xl-3 { - margin-left: 25%; - } - .offset-xl-4 { - margin-left: 33.3333333333%; - } - .offset-xl-5 { - margin-left: 41.6666666667%; - } - .offset-xl-6 { - margin-left: 50%; - } - .offset-xl-7 { - margin-left: 58.3333333333%; - } - .offset-xl-8 { - margin-left: 66.6666666667%; - } - .offset-xl-9 { - margin-left: 75%; - } - .offset-xl-10 { - margin-left: 83.3333333333%; - } - .offset-xl-11 { - margin-left: 91.6666666667%; - } -} -.form-control { - display: block; - width: 100%; - height: 2.25rem; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.429; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: var(--rz-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .form-control { - transition: none; - } -} -.form-control::-ms-expand { - background-color: transparent; - border: 0; -} -.form-control:focus { - color: #495057; - background-color: #fff; - border-color: #9fbbc0; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(89, 128, 135, 0.25); -} -.form-control::placeholder { - color: var(--rz-text-tertiary-color); - opacity: 1; -} -.form-control:disabled, .form-control[readonly] { - background-color: #e9ecef; - opacity: 1; +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; } -select.form-control:focus::-ms-value { - color: #495057; - background-color: #fff; +.rz-color-info { + color: var(--rz-info) !important; } -.form-control-file, -.form-control-range { - display: block; - width: 100%; +.rz-color-info-light { + color: var(--rz-info-light) !important; } -.col-form-label { - padding-top: calc(0.375rem + 1px); - padding-bottom: calc(0.375rem + 1px); - margin-bottom: 0; - font-size: inherit; - line-height: 1.429; +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; } -.col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); - font-size: 1.09375rem; - line-height: 1.5; +.rz-color-info-dark { + color: var(--rz-info-dark) !important; } -.col-form-label-sm { - padding-top: calc(0.25rem + 1px); - padding-bottom: calc(0.25rem + 1px); - font-size: 0.765625rem; - line-height: 1.5; +.rz-color-info-darker { + color: var(--rz-info-darker) !important; } -.form-control-plaintext { - display: block; - width: 100%; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - margin-bottom: 0; - line-height: 1.429; - color: #3a474d; - background-color: transparent; - border: solid transparent; - border-width: 1px 0; -} -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-right: 0; - padding-left: 0; +.rz-color-success { + color: var(--rz-success) !important; } -.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; - border-radius: 0.2rem; +.rz-color-success-light { + color: var(--rz-success-light) !important; } -.form-control-lg { - height: calc(1.5em + 1rem + 2px); - padding: 0.5rem 1rem; - font-size: 1.09375rem; - line-height: 1.5; - border-radius: 0.3rem; +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; } -select.form-control[size], select.form-control[multiple] { - height: auto; +.rz-color-success-dark { + color: var(--rz-success-dark) !important; } -textarea.form-control { - height: auto; +.rz-color-success-darker { + color: var(--rz-success-darker) !important; } -.form-group { - margin-bottom: 1rem; +.rz-color-warning { + color: var(--rz-warning) !important; } -.form-text { - display: block; - margin-top: 0.25rem; +.rz-color-warning-light { + color: var(--rz-warning-light) !important; } -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; -} -.form-row > .col, -.form-row > [class*=col-] { - padding-right: 5px; - padding-left: 5px; +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; } -.form-check { - position: relative; - display: block; - padding-left: 1.25rem; +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; } -.form-check-input { - position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; -} -.form-check-input:disabled ~ .form-check-label { - color: #6c757d; +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; } -.form-check-label { - margin-bottom: 0; +.rz-color-danger { + color: var(--rz-danger) !important; } -.form-check-inline { - display: inline-flex; - align-items: center; - padding-left: 0; - margin-right: 0.75rem; -} -.form-check-inline .form-check-input { - position: static; - margin-top: 0; - margin-right: 0.3125rem; - margin-left: 0; +.rz-color-danger-light { + color: var(--rz-danger-light) !important; } -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #5dbf74; +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; } -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #212529; - background-color: rgba(93, 191, 116, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; } -.was-validated .form-control:valid, .form-control.is-valid { - border-color: #5dbf74; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235dbf74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .form-control:valid ~ .valid-feedback, -.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, -.form-control.is-valid ~ .valid-tooltip { - display: block; +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-base { + color: var(--rz-on-base) !important; } -.was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #5dbf74; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235dbf74' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .custom-select:valid ~ .valid-feedback, -.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, -.custom-select.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; } -.was-validated .form-control-file:valid ~ .valid-feedback, -.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, -.form-control-file.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #5dbf74; -} -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #5dbf74; -} -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #5dbf74; -} -.was-validated .custom-control-input:valid ~ .valid-feedback, -.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, -.custom-control-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #82cd93; - background-color: #82cd93; -} -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); -} -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #5dbf74; +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; } -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #5dbf74; -} -.was-validated .custom-file-input:valid ~ .valid-feedback, -.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, -.custom-file-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #5dbf74; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.25); +.rz-color-on-primary { + color: var(--rz-on-primary) !important; } -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #f9777f; +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; } -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #212529; - background-color: rgba(249, 119, 127, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; } -.was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #f9777f; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9777f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f9777f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .form-control:invalid ~ .invalid-feedback, -.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, -.form-control.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; } -.was-validated .custom-select:invalid, .custom-select.is-invalid { - border-color: #f9777f; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9777f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f9777f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .custom-select:invalid ~ .invalid-feedback, -.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, -.custom-select.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; } -.was-validated .form-control-file:invalid ~ .invalid-feedback, -.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, -.form-control-file.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #f9777f; -} -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #f9777f; -} -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #f9777f; -} -.was-validated .custom-control-input:invalid ~ .invalid-feedback, -.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, -.custom-control-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #fba8ad; - background-color: #fba8ad; -} -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); -} -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #f9777f; +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; } -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #f9777f; -} -.was-validated .custom-file-input:invalid ~ .invalid-feedback, -.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, -.custom-file-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #f9777f; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.25); +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; } -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -.form-inline .form-check { - width: 100%; -} -@media (min-width: 576px) { - .form-inline label { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0; - } - .form-inline .form-group { - display: flex; - flex: 0 0 auto; - flex-flow: row wrap; - align-items: center; - margin-bottom: 0; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - .form-inline .form-control-plaintext { - display: inline-block; - } - .form-inline .input-group, - .form-inline .custom-select { - width: auto; - } - .form-inline .form-check { - display: flex; - align-items: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-inline .form-check-input { - position: relative; - flex-shrink: 0; - margin-top: 0; - margin-right: 0.25rem; - margin-left: 0; - } - .form-inline .custom-control { - align-items: center; - justify-content: center; - } - .form-inline .custom-control-label { - margin-bottom: 0; - } +.rz-color-on-info { + color: var(--rz-on-info) !important; } -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 0.75rem; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: var(--rz-border-radius); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .badge { - transition: none; - } -} -a.badge:hover, a.badge:focus { - text-decoration: none; +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; } -.badge:empty { - display: none; +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; } -.btn .badge { - position: relative; - top: -1px; +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; } -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; } -.badge-primary { - color: #fff; - background-color: #598087; -} -a.badge-primary:hover, a.badge-primary:focus { - color: #fff; - background-color: #456368; -} -a.badge-primary:focus, a.badge-primary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(89, 128, 135, 0.5); +.rz-color-on-success { + color: var(--rz-on-success) !important; } -.badge-secondary { - color: #212529; - background-color: #80a4ab; -} -a.badge-secondary:hover, a.badge-secondary:focus { - color: #212529; - background-color: #638d95; -} -a.badge-secondary:focus, a.badge-secondary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(128, 164, 171, 0.5); +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; } -.badge-success { - color: #212529; - background-color: #5dbf74; -} -a.badge-success:hover, a.badge-success:focus { - color: #212529; - background-color: #42a75a; -} -a.badge-success:focus, a.badge-success.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(93, 191, 116, 0.5); +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; } -.badge-info { - color: #212529; - background-color: #2cc8c8; -} -a.badge-info:hover, a.badge-info:focus { - color: #212529; - background-color: #239e9e; -} -a.badge-info:focus, a.badge-info.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(44, 200, 200, 0.5); +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; } -.badge-warning { - color: #212529; - background-color: #fac152; -} -a.badge-warning:hover, a.badge-warning:focus { - color: #212529; - background-color: #f9af20; -} -a.badge-warning:focus, a.badge-warning.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(250, 193, 82, 0.5); +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; } -.badge-danger { - color: #212529; - background-color: #f9777f; -} -a.badge-danger:hover, a.badge-danger:focus { - color: #212529; - background-color: #f74651; -} -a.badge-danger:focus, a.badge-danger.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(249, 119, 127, 0.5); +.rz-color-on-warning { + color: var(--rz-on-warning) !important; } -.badge-light { - color: #212529; - background-color: #e9edf0; -} -a.badge-light:hover, a.badge-light:focus { - color: #212529; - background-color: #cbd4db; -} -a.badge-light:focus, a.badge-light.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(233, 237, 240, 0.5); +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; } -.badge-dark { - color: #fff; - background-color: #343a40; -} -a.badge-dark:hover, a.badge-dark:focus { - color: #fff; - background-color: #1d2124; -} -a.badge-dark:focus, a.badge-dark.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; } -.alert { - position: relative; - padding: 0.75rem 1.25rem; - margin-bottom: 1rem; - border: 1px solid transparent; - border-radius: 4px; +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; } -.alert-heading { - color: inherit; +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; } -.alert-link { - font-weight: 700; +.rz-color-on-danger { + color: var(--rz-on-danger) !important; } -.alert-dismissible { - padding-right: 3.8125rem; -} -.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; } -.alert-primary { - color: #2e4346; - background-color: #dee6e7; - border-color: #d1dbdd; -} -.alert-primary hr { - border-top-color: #c2d0d2; -} -.alert-primary .alert-link { - color: #1a2627; +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; } -.alert-secondary { - color: #435559; - background-color: #e6edee; - border-color: #dbe6e7; -} -.alert-secondary hr { - border-top-color: #ccdbdd; -} -.alert-secondary .alert-link { - color: #2d393c; +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; } -.alert-success { - color: #30633c; - background-color: #dff2e3; - border-color: #d2edd8; -} -.alert-success hr { - border-top-color: #c0e6c8; -} -.alert-success .alert-link { - color: #1f4127; +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; } -.alert-info { - color: #176868; - background-color: #d5f4f4; - border-color: #c4f0f0; -} -.alert-info hr { - border-top-color: #b0ebeb; -} -.alert-info .alert-link { - color: #0e3e3e; +.rz-color-series-1 { + color: var(--rz-series-1) !important; } -.alert-warning { - color: #82642b; - background-color: #fef3dc; - border-color: #feeecf; -} -.alert-warning hr { - border-top-color: #fde5b6; -} -.alert-warning .alert-link { - color: #5c471e; +.rz-color-series-2 { + color: var(--rz-series-2) !important; } -.alert-danger { - color: #813e42; - background-color: #fee4e5; - border-color: #fdd9db; -} -.alert-danger hr { - border-top-color: #fcc1c4; -} -.alert-danger .alert-link { - color: #5f2d30; +.rz-color-series-3 { + color: var(--rz-series-3) !important; } -.alert-light { - color: #797b7d; - background-color: #fbfbfc; - border-color: #f9fafb; -} -.alert-light hr { - border-top-color: #eaedf1; -} -.alert-light .alert-link { - color: #606263; +.rz-color-series-4 { + color: var(--rz-series-4) !important; } -.alert-dark { - color: #1b1e21; - background-color: #d6d8d9; - border-color: #c6c8ca; -} -.alert-dark hr { - border-top-color: #b9bbbe; -} -.alert-dark .alert-link { - color: #040505; +.rz-color-series-5 { + color: var(--rz-series-5) !important; } -.media { - display: flex; - align-items: flex-start; +.rz-color-series-6 { + color: var(--rz-series-6) !important; } -.media-body { - flex: 1; +.rz-color-series-7 { + color: var(--rz-series-7) !important; } -.align-baseline { - vertical-align: baseline !important; +.rz-color-series-8 { + color: var(--rz-series-8) !important; } -.align-top { - vertical-align: top !important; +.rz-color-series-9 { + color: var(--rz-series-9) !important; } -.align-middle { - vertical-align: middle !important; +.rz-color-series-10 { + color: var(--rz-series-10) !important; } -.align-bottom { - vertical-align: bottom !important; +.rz-color-series-11 { + color: var(--rz-series-11) !important; } -.align-text-bottom { - vertical-align: text-bottom !important; +.rz-color-series-12 { + color: var(--rz-series-12) !important; } -.align-text-top { - vertical-align: text-top !important; +.rz-color-series-13 { + color: var(--rz-series-13) !important; } -.bg-primary { - background-color: #598087 !important; +.rz-color-series-14 { + color: var(--rz-series-14) !important; } -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #456368 !important; +.rz-color-series-15 { + color: var(--rz-series-15) !important; } -.bg-secondary { - background-color: #80a4ab !important; +.rz-color-series-16 { + color: var(--rz-series-16) !important; } -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #638d95 !important; +.rz-color-series-17 { + color: var(--rz-series-17) !important; } -.bg-success { - background-color: #5dbf74 !important; +.rz-color-series-18 { + color: var(--rz-series-18) !important; } -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #42a75a !important; +.rz-color-series-19 { + color: var(--rz-series-19) !important; } -.bg-info { - background-color: #2cc8c8 !important; +.rz-color-series-20 { + color: var(--rz-series-20) !important; } -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #239e9e !important; +.rz-color-series-21 { + color: var(--rz-series-21) !important; } -.bg-warning { - background-color: #fac152 !important; +.rz-color-series-22 { + color: var(--rz-series-22) !important; } -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #f9af20 !important; +.rz-color-series-23 { + color: var(--rz-series-23) !important; } -.bg-danger { - background-color: #f9777f !important; +.rz-color-series-24 { + color: var(--rz-series-24) !important; } -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #f74651 !important; +.rz-background-color-white { + background-color: var(--rz-white) !important; } -.bg-light { - background-color: #e9edf0 !important; +.rz-background-color-black { + background-color: var(--rz-black) !important; } -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #cbd4db !important; +.rz-background-color-base { + background-color: var(--rz-base) !important; } -.bg-dark { - background-color: #343a40 !important; +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; } -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #1d2124 !important; +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; } -.bg-white { - background-color: #fff !important; +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; } -.bg-transparent { - background-color: transparent !important; +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; } -.border { - border: 1px solid #dee2e6 !important; +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; } -.border-top { - border-top: 1px solid #dee2e6 !important; +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; } -.border-right { - border-right: 1px solid #dee2e6 !important; +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; } -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; } -.border-left { - border-left: 1px solid #dee2e6 !important; +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; } -.border-0 { - border: 0 !important; +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; } -.border-top-0 { - border-top: 0 !important; +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; } -.border-right-0 { - border-right: 0 !important; +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; } -.border-bottom-0 { - border-bottom: 0 !important; +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; } -.border-left-0 { - border-left: 0 !important; +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; } -.border-primary { - border-color: #598087 !important; +.rz-background-color-primary { + background-color: var(--rz-primary) !important; } -.border-secondary { - border-color: #80a4ab !important; +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; } -.border-success { - border-color: #5dbf74 !important; +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; } -.border-info { - border-color: #2cc8c8 !important; +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; } -.border-warning { - border-color: #fac152 !important; +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; } -.border-danger { - border-color: #f9777f !important; +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; } -.border-light { - border-color: #e9edf0 !important; +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; } -.border-dark { - border-color: #343a40 !important; +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; } -.border-white { - border-color: #fff !important; +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; } -.rounded-sm { - border-radius: 0.2rem !important; +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; } -.rounded { - border-radius: 4px !important; +.rz-background-color-info { + background-color: var(--rz-info) !important; } -.rounded-top { - border-top-left-radius: 4px !important; - border-top-right-radius: 4px !important; +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; } -.rounded-right { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; } -.rounded-bottom { - border-bottom-right-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; } -.rounded-left { - border-top-left-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; } -.rounded-lg { - border-radius: 0.3rem !important; +.rz-background-color-success { + background-color: var(--rz-success) !important; } -.rounded-circle { - border-radius: 50% !important; +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; } -.rounded-pill { - border-radius: 50rem !important; +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; } -.rounded-0 { - border-radius: 0 !important; +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; } -.clearfix::after { - display: block; - clear: both; - content: ""; +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; } -.d-none { - display: none !important; +.rz-background-color-warning { + background-color: var(--rz-warning) !important; } -.d-inline { - display: inline !important; +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; } -.d-inline-block { - display: inline-block !important; +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; } -.d-block { - display: block !important; +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; } -.d-table { - display: table !important; +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; } -.d-table-row { - display: table-row !important; +.rz-background-color-danger { + background-color: var(--rz-danger) !important; } -.d-table-cell { - display: table-cell !important; +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; } -.d-flex { - display: flex !important; +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; } -.d-inline-flex { - display: inline-flex !important; +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; } -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } - .d-sm-inline { - display: inline !important; - } - .d-sm-inline-block { - display: inline-block !important; - } - .d-sm-block { - display: block !important; - } - .d-sm-table { - display: table !important; - } - .d-sm-table-row { - display: table-row !important; - } - .d-sm-table-cell { - display: table-cell !important; - } - .d-sm-flex { - display: flex !important; - } - .d-sm-inline-flex { - display: inline-flex !important; - } +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; } -@media (min-width: 768px) { - .d-md-none { - display: none !important; - } - .d-md-inline { - display: inline !important; - } - .d-md-inline-block { - display: inline-block !important; - } - .d-md-block { - display: block !important; - } - .d-md-table { - display: table !important; - } - .d-md-table-row { - display: table-row !important; - } - .d-md-table-cell { - display: table-cell !important; - } - .d-md-flex { - display: flex !important; - } - .d-md-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; } -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-inline { - display: inline !important; - } - .d-lg-inline-block { - display: inline-block !important; - } - .d-lg-block { - display: block !important; - } - .d-lg-table { - display: table !important; - } - .d-lg-table-row { - display: table-row !important; - } - .d-lg-table-cell { - display: table-cell !important; - } - .d-lg-flex { - display: flex !important; - } - .d-lg-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; } -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; - } - .d-xl-inline { - display: inline !important; - } - .d-xl-inline-block { - display: inline-block !important; - } - .d-xl-block { - display: block !important; - } - .d-xl-table { - display: table !important; - } - .d-xl-table-row { - display: table-row !important; - } - .d-xl-table-cell { - display: table-cell !important; - } - .d-xl-flex { - display: flex !important; - } - .d-xl-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; } -@media print { - .d-print-none { - display: none !important; - } - .d-print-inline { - display: inline !important; - } - .d-print-inline-block { - display: inline-block !important; - } - .d-print-block { - display: block !important; - } - .d-print-table { - display: table !important; - } - .d-print-table-row { - display: table-row !important; - } - .d-print-table-cell { - display: table-cell !important; - } - .d-print-flex { - display: flex !important; - } - .d-print-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; } -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; } -.embed-responsive::before { - display: block; - content: ""; + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; } -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; } -.embed-responsive-21by9::before { - padding-top: 42.8571428571%; +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; } -.embed-responsive-16by9::before { - padding-top: 56.25%; +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; } -.embed-responsive-4by3::before { - padding-top: 75%; +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; } -.embed-responsive-1by1::before { - padding-top: 100%; +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; } -.flex-row { - flex-direction: row !important; +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; } -.flex-column { - flex-direction: column !important; +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; } -.flex-row-reverse { - flex-direction: row-reverse !important; +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; } -.flex-column-reverse { - flex-direction: column-reverse !important; +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; } -.flex-wrap { - flex-wrap: wrap !important; +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; } -.flex-nowrap { - flex-wrap: nowrap !important; +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; } -.flex-wrap-reverse { - flex-wrap: wrap-reverse !important; +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; } -.flex-fill { - flex: 1 1 auto !important; +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; } -.flex-grow-0 { - flex-grow: 0 !important; +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; } -.flex-grow-1 { - flex-grow: 1 !important; +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; } -.flex-shrink-0 { - flex-shrink: 0 !important; +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; } -.flex-shrink-1 { - flex-shrink: 1 !important; +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; } -.justify-content-start { - justify-content: flex-start !important; +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; } -.justify-content-end { - justify-content: flex-end !important; +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; } -.justify-content-center { - justify-content: center !important; +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; } -.justify-content-between { - justify-content: space-between !important; +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; } -.justify-content-around { - justify-content: space-around !important; +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; } -.align-items-start { - align-items: flex-start !important; +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; } -.align-items-end { - align-items: flex-end !important; +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; } -.align-items-center { - align-items: center !important; +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; } -.align-items-baseline { - align-items: baseline !important; +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; } -.align-items-stretch { - align-items: stretch !important; +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; } -.align-content-start { - align-content: flex-start !important; +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; } -.align-content-end { - align-content: flex-end !important; +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; } -.align-content-center { - align-content: center !important; +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; } -.align-content-between { - align-content: space-between !important; +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; } -.align-content-around { - align-content: space-around !important; +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; } -.align-content-stretch { - align-content: stretch !important; +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; } -.align-self-auto { - align-self: auto !important; +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; } -.align-self-start { - align-self: flex-start !important; +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; } -.align-self-end { - align-self: flex-end !important; +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; } -.align-self-center { - align-self: center !important; +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; } -.align-self-baseline { - align-self: baseline !important; +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; } -.align-self-stretch { - align-self: stretch !important; +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; } -@media (min-width: 576px) { - .flex-sm-row { - flex-direction: row !important; - } - .flex-sm-column { - flex-direction: column !important; - } - .flex-sm-row-reverse { - flex-direction: row-reverse !important; - } - .flex-sm-column-reverse { - flex-direction: column-reverse !important; - } - .flex-sm-wrap { - flex-wrap: wrap !important; - } - .flex-sm-nowrap { - flex-wrap: nowrap !important; - } - .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-sm-fill { - flex: 1 1 auto !important; - } - .flex-sm-grow-0 { - flex-grow: 0 !important; - } - .flex-sm-grow-1 { - flex-grow: 1 !important; - } - .flex-sm-shrink-0 { - flex-shrink: 0 !important; - } - .flex-sm-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-sm-start { - justify-content: flex-start !important; - } - .justify-content-sm-end { - justify-content: flex-end !important; - } - .justify-content-sm-center { - justify-content: center !important; - } - .justify-content-sm-between { - justify-content: space-between !important; - } - .justify-content-sm-around { - justify-content: space-around !important; - } - .align-items-sm-start { - align-items: flex-start !important; - } - .align-items-sm-end { - align-items: flex-end !important; - } - .align-items-sm-center { - align-items: center !important; - } - .align-items-sm-baseline { - align-items: baseline !important; - } - .align-items-sm-stretch { - align-items: stretch !important; - } - .align-content-sm-start { - align-content: flex-start !important; - } - .align-content-sm-end { - align-content: flex-end !important; - } - .align-content-sm-center { - align-content: center !important; - } - .align-content-sm-between { - align-content: space-between !important; - } - .align-content-sm-around { - align-content: space-around !important; - } - .align-content-sm-stretch { - align-content: stretch !important; - } - .align-self-sm-auto { - align-self: auto !important; - } - .align-self-sm-start { - align-self: flex-start !important; - } - .align-self-sm-end { - align-self: flex-end !important; - } - .align-self-sm-center { - align-self: center !important; - } - .align-self-sm-baseline { - align-self: baseline !important; - } - .align-self-sm-stretch { - align-self: stretch !important; - } -} -@media (min-width: 768px) { - .flex-md-row { - flex-direction: row !important; - } - .flex-md-column { - flex-direction: column !important; - } - .flex-md-row-reverse { - flex-direction: row-reverse !important; - } - .flex-md-column-reverse { - flex-direction: column-reverse !important; - } - .flex-md-wrap { - flex-wrap: wrap !important; - } - .flex-md-nowrap { - flex-wrap: nowrap !important; - } - .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-md-fill { - flex: 1 1 auto !important; - } - .flex-md-grow-0 { - flex-grow: 0 !important; - } - .flex-md-grow-1 { - flex-grow: 1 !important; - } - .flex-md-shrink-0 { - flex-shrink: 0 !important; - } - .flex-md-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-md-start { - justify-content: flex-start !important; - } - .justify-content-md-end { - justify-content: flex-end !important; - } - .justify-content-md-center { - justify-content: center !important; - } - .justify-content-md-between { - justify-content: space-between !important; - } - .justify-content-md-around { - justify-content: space-around !important; - } - .align-items-md-start { - align-items: flex-start !important; - } - .align-items-md-end { - align-items: flex-end !important; - } - .align-items-md-center { - align-items: center !important; - } - .align-items-md-baseline { - align-items: baseline !important; - } - .align-items-md-stretch { - align-items: stretch !important; - } - .align-content-md-start { - align-content: flex-start !important; - } - .align-content-md-end { - align-content: flex-end !important; - } - .align-content-md-center { - align-content: center !important; - } - .align-content-md-between { - align-content: space-between !important; - } - .align-content-md-around { - align-content: space-around !important; - } - .align-content-md-stretch { - align-content: stretch !important; - } - .align-self-md-auto { - align-self: auto !important; - } - .align-self-md-start { - align-self: flex-start !important; - } - .align-self-md-end { - align-self: flex-end !important; - } - .align-self-md-center { - align-self: center !important; - } - .align-self-md-baseline { - align-self: baseline !important; - } - .align-self-md-stretch { - align-self: stretch !important; - } +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; } -@media (min-width: 992px) { - .flex-lg-row { - flex-direction: row !important; - } - .flex-lg-column { - flex-direction: column !important; - } - .flex-lg-row-reverse { - flex-direction: row-reverse !important; - } - .flex-lg-column-reverse { - flex-direction: column-reverse !important; - } - .flex-lg-wrap { - flex-wrap: wrap !important; - } - .flex-lg-nowrap { - flex-wrap: nowrap !important; - } - .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-lg-fill { - flex: 1 1 auto !important; - } - .flex-lg-grow-0 { - flex-grow: 0 !important; - } - .flex-lg-grow-1 { - flex-grow: 1 !important; - } - .flex-lg-shrink-0 { - flex-shrink: 0 !important; - } - .flex-lg-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-lg-start { - justify-content: flex-start !important; - } - .justify-content-lg-end { - justify-content: flex-end !important; - } - .justify-content-lg-center { - justify-content: center !important; - } - .justify-content-lg-between { - justify-content: space-between !important; - } - .justify-content-lg-around { - justify-content: space-around !important; - } - .align-items-lg-start { - align-items: flex-start !important; - } - .align-items-lg-end { - align-items: flex-end !important; - } - .align-items-lg-center { - align-items: center !important; - } - .align-items-lg-baseline { - align-items: baseline !important; - } - .align-items-lg-stretch { - align-items: stretch !important; - } - .align-content-lg-start { - align-content: flex-start !important; - } - .align-content-lg-end { - align-content: flex-end !important; - } - .align-content-lg-center { - align-content: center !important; - } - .align-content-lg-between { - align-content: space-between !important; - } - .align-content-lg-around { - align-content: space-around !important; - } - .align-content-lg-stretch { - align-content: stretch !important; - } - .align-self-lg-auto { - align-self: auto !important; - } - .align-self-lg-start { - align-self: flex-start !important; - } - .align-self-lg-end { - align-self: flex-end !important; - } - .align-self-lg-center { - align-self: center !important; - } - .align-self-lg-baseline { - align-self: baseline !important; - } - .align-self-lg-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; } -@media (min-width: 1200px) { - .flex-xl-row { - flex-direction: row !important; - } - .flex-xl-column { - flex-direction: column !important; - } - .flex-xl-row-reverse { - flex-direction: row-reverse !important; - } - .flex-xl-column-reverse { - flex-direction: column-reverse !important; - } - .flex-xl-wrap { - flex-wrap: wrap !important; - } - .flex-xl-nowrap { - flex-wrap: nowrap !important; - } - .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-xl-fill { - flex: 1 1 auto !important; - } - .flex-xl-grow-0 { - flex-grow: 0 !important; - } - .flex-xl-grow-1 { - flex-grow: 1 !important; - } - .flex-xl-shrink-0 { - flex-shrink: 0 !important; - } - .flex-xl-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-xl-start { - justify-content: flex-start !important; - } - .justify-content-xl-end { - justify-content: flex-end !important; - } - .justify-content-xl-center { - justify-content: center !important; - } - .justify-content-xl-between { - justify-content: space-between !important; - } - .justify-content-xl-around { - justify-content: space-around !important; - } - .align-items-xl-start { - align-items: flex-start !important; - } - .align-items-xl-end { - align-items: flex-end !important; - } - .align-items-xl-center { - align-items: center !important; - } - .align-items-xl-baseline { - align-items: baseline !important; - } - .align-items-xl-stretch { - align-items: stretch !important; - } - .align-content-xl-start { - align-content: flex-start !important; - } - .align-content-xl-end { - align-content: flex-end !important; - } - .align-content-xl-center { - align-content: center !important; - } - .align-content-xl-between { - align-content: space-between !important; - } - .align-content-xl-around { - align-content: space-around !important; - } - .align-content-xl-stretch { - align-content: stretch !important; - } - .align-self-xl-auto { - align-self: auto !important; - } - .align-self-xl-start { - align-self: flex-start !important; - } - .align-self-xl-end { - align-self: flex-end !important; - } - .align-self-xl-center { - align-self: center !important; - } - .align-self-xl-baseline { - align-self: baseline !important; - } - .align-self-xl-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; } -.float-left { - float: left !important; + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; } -.float-right { - float: right !important; +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; } -.float-none { - float: none !important; +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; } -@media (min-width: 576px) { - .float-sm-left { - float: left !important; - } - .float-sm-right { - float: right !important; - } - .float-sm-none { - float: none !important; - } +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; } -@media (min-width: 768px) { - .float-md-left { - float: left !important; - } - .float-md-right { - float: right !important; - } - .float-md-none { - float: none !important; - } + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; } -@media (min-width: 992px) { - .float-lg-left { - float: left !important; - } - .float-lg-right { - float: right !important; - } - .float-lg-none { - float: none !important; - } + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; } -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; - } - .float-xl-right { - float: right !important; - } - .float-xl-none { - float: none !important; - } + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; } -.overflow-auto { - overflow: auto !important; + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; } -.overflow-hidden { - overflow: hidden !important; +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; } -.position-static { - position: static !important; +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; } -.position-relative { - position: relative !important; +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; } -.position-absolute { - position: absolute !important; +.rz-border-color-white { + border-color: var(--rz-white) !important; } -.position-fixed { - position: fixed !important; +.rz-border-color-black { + border-color: var(--rz-black) !important; } -.position-sticky { - position: sticky !important; +.rz-border-color-base { + border-color: var(--rz-base) !important; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; } -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; } -@supports (position: sticky) { - .sticky-top { - position: sticky; - top: 0; - z-index: 1020; - } +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; } -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; } -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; } -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; } -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; } -.shadow-none { - box-shadow: none !important; +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; } -.w-25 { - width: 25% !important; +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; } -.w-50 { - width: 50% !important; +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; } -.w-75 { - width: 75% !important; +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; } -.w-100 { - width: 100% !important; +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; } -.w-auto { - width: auto !important; +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; } -.h-25 { - height: 25% !important; +.rz-border-color-primary { + border-color: var(--rz-primary) !important; } -.h-50 { - height: 50% !important; +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; } -.h-75 { - height: 75% !important; +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; } -.h-100 { - height: 100% !important; +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; } -.h-auto { - height: auto !important; +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; } -.mw-100 { - max-width: 100% !important; +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; } -.mh-100 { - max-height: 100% !important; +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; } -.min-vw-100 { - min-width: 100vw !important; +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; } -.min-vh-100 { - min-height: 100vh !important; +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; } -.vw-100 { - width: 100vw !important; +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; } -.vh-100 { - height: 100vh !important; +.rz-border-color-info { + border-color: var(--rz-info) !important; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); -} - -.m-0 { - margin: 0 !important; +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; } -.mt-0, -.my-0 { - margin-top: 0 !important; +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; } -.mr-0, -.mx-0 { - margin-right: 0 !important; +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; } -.mb-0, -.my-0 { - margin-bottom: 0 !important; +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; } -.ml-0, -.mx-0 { - margin-left: 0 !important; +.rz-border-color-success { + border-color: var(--rz-success) !important; } -.m-1 { - margin: 0.25rem !important; +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; } -.mt-1, -.my-1 { - margin-top: 0.25rem !important; +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; } -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; } -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; } -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; +.rz-border-color-warning { + border-color: var(--rz-warning) !important; } -.m-2 { - margin: 0.5rem !important; +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; } -.mt-2, -.my-2 { - margin-top: 0.5rem !important; +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; } -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; } -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; } -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; +.rz-border-color-danger { + border-color: var(--rz-danger) !important; } -.m-3 { - margin: 1rem !important; +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; } -.mt-3, -.my-3 { - margin-top: 1rem !important; +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; } -.mr-3, -.mx-3 { - margin-right: 1rem !important; +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; } -.mb-3, -.my-3 { - margin-bottom: 1rem !important; +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; } -.ml-3, -.mx-3 { - margin-left: 1rem !important; +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; } -.m-4 { - margin: 1.5rem !important; +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; } -.mt-4, -.my-4 { - margin-top: 1.5rem !important; +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; } -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; } -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; } -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; } -.m-5 { - margin: 3rem !important; +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; } -.mt-5, -.my-5 { - margin-top: 3rem !important; +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; } -.mr-5, -.mx-5 { - margin-right: 3rem !important; +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; } -.mb-5, -.my-5 { - margin-bottom: 3rem !important; +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; } -.ml-5, -.mx-5 { - margin-left: 3rem !important; +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; } -.p-0 { - padding: 0 !important; +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; } -.pt-0, -.py-0 { - padding-top: 0 !important; +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; } -.pr-0, -.px-0 { - padding-right: 0 !important; +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; } -.pb-0, -.py-0 { - padding-bottom: 0 !important; +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; } -.pl-0, -.px-0 { - padding-left: 0 !important; +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; } -.p-1 { - padding: 0.25rem !important; +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; } -.pt-1, -.py-1 { - padding-top: 0.25rem !important; +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; } -.pr-1, -.px-1 { - padding-right: 0.25rem !important; +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; } -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; } -.pl-1, -.px-1 { - padding-left: 0.25rem !important; +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; } -.p-2 { - padding: 0.5rem !important; +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; } -.pt-2, -.py-2 { - padding-top: 0.5rem !important; +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; } -.pr-2, -.px-2 { - padding-right: 0.5rem !important; +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; } -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; } -.pl-2, -.px-2 { - padding-left: 0.5rem !important; +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; } -.p-3 { - padding: 1rem !important; +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; } -.pt-3, -.py-3 { - padding-top: 1rem !important; +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; } -.pr-3, -.px-3 { - padding-right: 1rem !important; +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; } -.pb-3, -.py-3 { - padding-bottom: 1rem !important; +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; } -.pl-3, -.px-3 { - padding-left: 1rem !important; +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; } -.p-4 { - padding: 1.5rem !important; +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; } -.pr-4, -.px-4 { - padding-right: 1.5rem !important; +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; } -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; } -.pl-4, -.px-4 { - padding-left: 1.5rem !important; +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; } -.p-5 { - padding: 3rem !important; +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; } -.pt-5, -.py-5 { - padding-top: 3rem !important; +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; } -.pr-5, -.px-5 { - padding-right: 3rem !important; +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; } -.pb-5, -.py-5 { - padding-bottom: 3rem !important; +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; } -.pl-5, -.px-5 { - padding-left: 3rem !important; +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; } -.m-n1 { - margin: -0.25rem !important; +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; } -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; } -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; } -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; } -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; } -.m-n2 { - margin: -0.5rem !important; +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; } -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; } -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; } -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; } -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; } -.m-n3 { - margin: -1rem !important; +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; } -.mt-n3, -.my-n3 { - margin-top: -1rem !important; +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; } -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; } -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; } -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; } -.m-n4 { - margin: -1.5rem !important; +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; } -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; } -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; } -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; } -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; } -.m-n5 { - margin: -3rem !important; +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; } -.mt-n5, -.my-n5 { - margin-top: -3rem !important; +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; } -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; } -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; } -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; } -.m-auto { - margin: auto !important; +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; } -.mt-auto, -.my-auto { - margin-top: auto !important; +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; } -.mr-auto, -.mx-auto { - margin-right: auto !important; +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; } -.mb-auto, -.my-auto { - margin-bottom: auto !important; +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; } -.ml-auto, -.mx-auto { - margin-left: auto !important; +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; } -@media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; - } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; - } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; - } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; - } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; - } - .m-sm-1 { - margin: 0.25rem !important; - } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; - } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; - } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; - } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; - } - .m-sm-2 { - margin: 0.5rem !important; - } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; - } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; - } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; - } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; - } - .m-sm-3 { - margin: 1rem !important; - } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; - } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; - } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; - } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; - } - .m-sm-4 { - margin: 1.5rem !important; - } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; - } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; - } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; - } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; - } - .m-sm-5 { - margin: 3rem !important; - } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; - } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; - } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; - } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; - } - .p-sm-0 { - padding: 0 !important; - } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; - } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; - } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; - } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; - } - .p-sm-1 { - padding: 0.25rem !important; - } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; - } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; - } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; - } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; - } - .p-sm-2 { - padding: 0.5rem !important; - } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; - } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; - } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; - } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; - } - .p-sm-3 { - padding: 1rem !important; - } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; - } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; - } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; - } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; - } - .p-sm-4 { - padding: 1.5rem !important; - } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; - } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; - } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; - } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; - } - .p-sm-5 { - padding: 3rem !important; - } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; - } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; - } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; - } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; - } - .m-sm-n1 { - margin: -0.25rem !important; - } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; - } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; - } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; - } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; - } - .m-sm-n2 { - margin: -0.5rem !important; - } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; - } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; - } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; - } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; - } - .m-sm-n3 { - margin: -1rem !important; - } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; - } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; - } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; - } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; - } - .m-sm-n4 { - margin: -1.5rem !important; - } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; - } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; - } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; - } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; - } - .m-sm-n5 { - margin: -3rem !important; - } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; - } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; - } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; - } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; - } - .m-sm-auto { - margin: auto !important; - } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; - } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; - } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; - } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; - } +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; } -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; - } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; - } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; - } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; - } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; - } - .m-md-1 { - margin: 0.25rem !important; - } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; - } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; - } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; - } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; - } - .m-md-2 { - margin: 0.5rem !important; - } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; - } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; - } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; - } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; - } - .m-md-3 { - margin: 1rem !important; - } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; - } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; - } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; - } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; - } - .m-md-4 { - margin: 1.5rem !important; - } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; - } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; - } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; - } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; - } - .m-md-5 { - margin: 3rem !important; - } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; - } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; - } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; - } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; - } - .p-md-0 { - padding: 0 !important; - } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; - } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; - } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; - } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; - } - .p-md-1 { - padding: 0.25rem !important; - } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; - } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; - } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; - } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; - } - .p-md-2 { - padding: 0.5rem !important; - } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; - } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; - } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; - } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; - } - .p-md-3 { - padding: 1rem !important; - } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; - } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; - } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; - } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; - } - .p-md-4 { - padding: 1.5rem !important; - } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; - } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; - } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; - } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; - } - .p-md-5 { - padding: 3rem !important; - } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; - } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; - } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; - } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; - } - .m-md-n1 { - margin: -0.25rem !important; - } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; - } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; - } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; - } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; - } - .m-md-n2 { - margin: -0.5rem !important; - } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; - } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; - } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; - } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; - } - .m-md-n3 { - margin: -1rem !important; - } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; - } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; - } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; - } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; - } - .m-md-n4 { - margin: -1.5rem !important; - } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; - } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; - } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; - } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; - } - .m-md-n5 { - margin: -3rem !important; - } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; - } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; - } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; - } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; - } - .m-md-auto { - margin: auto !important; - } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; - } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; - } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; - } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; - } + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; } -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; - } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; - } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; - } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; - } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; - } - .m-lg-1 { - margin: 0.25rem !important; - } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; - } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; - } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; - } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; - } - .m-lg-2 { - margin: 0.5rem !important; - } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; - } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; - } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; - } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; - } - .m-lg-3 { - margin: 1rem !important; - } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; - } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; - } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; - } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; - } - .m-lg-4 { - margin: 1.5rem !important; - } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; - } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; - } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; - } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; - } - .m-lg-5 { - margin: 3rem !important; - } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; - } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; - } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; - } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; - } - .p-lg-0 { - padding: 0 !important; - } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; - } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; - } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; - } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; - } - .p-lg-1 { - padding: 0.25rem !important; - } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; - } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; - } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; - } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; - } - .p-lg-2 { - padding: 0.5rem !important; - } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; - } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; - } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; - } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; - } - .p-lg-3 { - padding: 1rem !important; - } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; - } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; - } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; - } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; - } - .p-lg-4 { - padding: 1.5rem !important; - } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; - } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; - } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; - } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; - } - .p-lg-5 { - padding: 3rem !important; - } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; - } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; - } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; - } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; - } - .m-lg-n1 { - margin: -0.25rem !important; - } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; - } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; - } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; - } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; - } - .m-lg-n2 { - margin: -0.5rem !important; - } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; - } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; - } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; - } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; - } - .m-lg-n3 { - margin: -1rem !important; - } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; - } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; - } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; - } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; - } - .m-lg-n4 { - margin: -1.5rem !important; - } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; - } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; - } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; - } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; - } - .m-lg-n5 { - margin: -3rem !important; - } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; - } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; - } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; - } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; - } - .m-lg-auto { - margin: auto !important; - } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; - } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; - } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; - } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; - } -} -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; - } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; - } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; - } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; - } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; - } - .m-xl-1 { - margin: 0.25rem !important; - } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; - } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; - } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; - } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; - } - .m-xl-2 { - margin: 0.5rem !important; - } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; - } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; - } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; - } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; - } - .m-xl-3 { - margin: 1rem !important; - } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; - } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; - } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; - } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; - } - .m-xl-4 { - margin: 1.5rem !important; - } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; - } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; - } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; - } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; - } - .m-xl-5 { - margin: 3rem !important; - } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; - } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; - } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; - } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; - } - .p-xl-0 { - padding: 0 !important; - } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; - } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; - } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; - } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; - } - .p-xl-1 { - padding: 0.25rem !important; - } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; - } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; - } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; - } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; - } - .p-xl-2 { - padding: 0.5rem !important; - } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; - } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; - } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; - } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; - } - .p-xl-3 { - padding: 1rem !important; - } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; - } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; - } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; - } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; - } - .p-xl-4 { - padding: 1.5rem !important; - } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; - } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; - } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; - } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; - } - .p-xl-5 { - padding: 3rem !important; - } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; - } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; - } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; - } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; - } - .m-xl-n1 { - margin: -0.25rem !important; - } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; - } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; - } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; - } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; - } - .m-xl-n2 { - margin: -0.5rem !important; - } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; - } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; - } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; - } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; - } - .m-xl-n3 { - margin: -1rem !important; - } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; - } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; - } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; - } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; - } - .m-xl-n4 { - margin: -1.5rem !important; - } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; - } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; - } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; - } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; - } - .m-xl-n5 { - margin: -3rem !important; - } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; - } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; - } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; - } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; - } - .m-xl-auto { - margin: auto !important; - } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; - } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; - } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; - } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; - } -} -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; -} - -.text-justify { - text-align: justify !important; + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; } -.text-wrap { - white-space: normal !important; +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; } -.text-nowrap { - white-space: nowrap !important; +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; } -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; } -.text-left { - text-align: left !important; +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; } -.text-right { - text-align: right !important; +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; } -.text-center { - text-align: center !important; +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; } -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; - } - .text-sm-right { - text-align: right !important; - } - .text-sm-center { - text-align: center !important; - } -} -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; - } - .text-md-right { - text-align: right !important; - } - .text-md-center { - text-align: center !important; - } -} -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; - } - .text-lg-right { - text-align: right !important; - } - .text-lg-center { - text-align: center !important; - } -} -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; - } - .text-xl-right { - text-align: right !important; - } - .text-xl-center { - text-align: center !important; - } -} -.text-lowercase { - text-transform: lowercase !important; +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; } -.text-uppercase { - text-transform: uppercase !important; +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; } -.text-capitalize { - text-transform: capitalize !important; +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; } -.font-weight-light { - font-weight: 300 !important; +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; } -.font-weight-lighter { - font-weight: lighter !important; +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; } -.font-weight-normal { - font-weight: 400 !important; +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; } -.font-weight-bold { - font-weight: 700 !important; +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; } -.font-weight-bolder { - font-weight: bolder !important; +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; } -.font-italic { - font-style: italic !important; +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; } -.text-white { - color: #fff !important; +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; } -.text-primary { - color: #598087 !important; +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; } -a.text-primary:hover, a.text-primary:focus { - color: #3b5459 !important; +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; } -.text-secondary { - color: #80a4ab !important; +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; } -a.text-secondary:hover, a.text-secondary:focus { - color: #597f86 !important; +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; } -.text-success { - color: #5dbf74 !important; +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; } -a.text-success:hover, a.text-success:focus { - color: #3b9550 !important; +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; } -.text-info { - color: #2cc8c8 !important; +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; } -a.text-info:hover, a.text-info:focus { - color: #1e8989 !important; +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; } -.text-warning { - color: #fac152 !important; +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; } -a.text-warning:hover, a.text-warning:focus { - color: #f8a608 !important; +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; } -.text-danger { - color: #f9777f !important; +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; } -a.text-danger:hover, a.text-danger:focus { - color: #f62e3a !important; +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; } -.text-light { - color: #e9edf0 !important; +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; } -a.text-light:hover, a.text-light:focus { - color: #bcc8d1 !important; +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; } -.text-dark { - color: #343a40 !important; +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; } -a.text-dark:hover, a.text-dark:focus { - color: #121416 !important; +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; } -.text-body { - color: #3a474d !important; +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; } -.text-muted { - color: #6c757d !important; +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; } -.text-black-50 { - color: rgba(0, 0, 0, 0.5) !important; +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; } -.text-white-50 { - color: rgba(255, 255, 255, 0.5) !important; +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; } -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; } -.text-decoration-none { - text-decoration: none !important; +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; } -.text-break { - word-break: break-word !important; - overflow-wrap: break-word !important; +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; } -.text-reset { - color: inherit !important; +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; } -.visible { - visibility: visible !important; +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; } -.invisible { - visibility: hidden !important; +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; } -@font-face { - font-family: "Material Icons"; - font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f6f7fa; - --rz-base-200: #e9edf0; - --rz-base-300: #dadfe2; - --rz-base-400: #c1c9cb; - --rz-base-500: #95a4a8; - --rz-base-600: #77858b; - --rz-base-700: #545e61; - --rz-base-800: #3a474d; - --rz-base-900: #28363c; - --rz-primary: #598087; - --rz-primary-light: #6d8f95; - --rz-primary-lighter: rgba(89, 128, 135, 0.16); - --rz-primary-dark: #52767c; - --rz-primary-darker: #436065; - --rz-secondary: #80a4ab; - --rz-secondary-light: #8fafb5; - --rz-secondary-lighter: rgba(128, 164, 171, 0.2); - --rz-secondary-dark: #76979d; - --rz-secondary-darker: #607b80; - --rz-info: #2cc8c8; - --rz-info-light: #4ed1d1; - --rz-info-lighter: rgba(44, 200, 200, 0.2); - --rz-info-dark: #25a8a8; - --rz-info-darker: #219696; - --rz-success: #5dbf74; - --rz-success-light: #77c98a; - --rz-success-lighter: rgba(93, 191, 116, 0.16); - --rz-success-dark: #4ea061; - --rz-success-darker: #468f57; - --rz-warning: #fac152; - --rz-warning-light: #fbcb6e; - --rz-warning-lighter: rgba(250, 193, 82, 0.2); - --rz-warning-dark: #d2a245; - --rz-warning-darker: #bc913e; - --rz-danger: #f9777f; - --rz-danger-light: #fa8d93; - --rz-danger-lighter: rgba(249, 119, 127, 0.2); - --rz-danger-dark: #d1646b; - --rz-danger-darker: #bb595f; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #598087; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #80a4ab; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #2cc8c8; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #5dbf74; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #fac152; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f9777f; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #376df5; - --rz-series-2: #64dfdf; - --rz-series-3: #f68769; - --rz-series-4: #c161e2; - --rz-series-5: #fdd07a; - --rz-series-6: #f8629b; - --rz-series-7: #74d062; - --rz-series-8: #84a7ff; - --rz-series-9: #4d99f9; - --rz-series-10: #8cecec; - --rz-series-11: #fab793; - --rz-series-12: #da88ee; - --rz-series-13: #fee3ab; - --rz-series-14: #fb89c3; - --rz-series-15: #a2e389; - --rz-series-16: #b5caff; - --rz-series-17: #1750f3; - --rz-series-18: #46d7d7; - --rz-series-19: #f46e4c; - --rz-series-20: #b343db; - --rz-series-21: #fdc55f; - --rz-series-22: #f64485; - --rz-series-23: #58c544; - --rz-series-24: #6a93ff; + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 2px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-primary); +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; } -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; } -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; } -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; } -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; } -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; } -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; } -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; } -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; } -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; +.rz-ripple { + position: relative; + overflow: hidden; } - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; } - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; } -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; +body { + margin: 0; } -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; +.rz-m-0 { + margin: 0 !important; } -.rz-display-none { - display: none !important; +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; } -.rz-display-block { - display: block !important; +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; } -.rz-display-inline { - display: inline !important; +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; } -.rz-display-inline-block { - display: inline-block !important; +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; } -.rz-display-flex { - display: flex !important; +.rz-ms-0 { + margin-inline-start: 0 !important; } -.rz-display-inline-flex { - display: inline-flex !important; +.rz-me-0 { + margin-inline-end: 0 !important; } -.rz-display-grid { - display: grid !important; +.rz-m-05 { + margin: 0.125rem !important; } -.rz-display-inline-grid { - display: inline-grid !important; +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; } -@media (min-width: 576px) { - .rz-display-xs-none { - display: none !important; - } - .rz-display-xs-block { - display: block !important; - } - .rz-display-xs-inline { - display: inline !important; - } - .rz-display-xs-inline-block { - display: inline-block !important; - } - .rz-display-xs-flex { - display: flex !important; - } - .rz-display-xs-inline-flex { - display: inline-flex !important; - } - .rz-display-xs-grid { - display: grid !important; - } - .rz-display-xs-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 768px) { - .rz-display-sm-none { - display: none !important; - } - .rz-display-sm-block { - display: block !important; - } - .rz-display-sm-inline { - display: inline !important; - } - .rz-display-sm-inline-block { - display: inline-block !important; - } - .rz-display-sm-flex { - display: flex !important; - } - .rz-display-sm-inline-flex { - display: inline-flex !important; - } - .rz-display-sm-grid { - display: grid !important; - } - .rz-display-sm-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1024px) { - .rz-display-md-none { - display: none !important; - } - .rz-display-md-block { - display: block !important; - } - .rz-display-md-inline { - display: inline !important; - } - .rz-display-md-inline-block { - display: inline-block !important; - } - .rz-display-md-flex { - display: flex !important; - } - .rz-display-md-inline-flex { - display: inline-flex !important; - } - .rz-display-md-grid { - display: grid !important; - } - .rz-display-md-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1280px) { - .rz-display-lg-none { - display: none !important; - } - .rz-display-lg-block { - display: block !important; - } - .rz-display-lg-inline { - display: inline !important; - } - .rz-display-lg-inline-block { - display: inline-block !important; - } - .rz-display-lg-flex { - display: flex !important; - } - .rz-display-lg-inline-flex { - display: inline-flex !important; - } - .rz-display-lg-grid { - display: grid !important; - } - .rz-display-lg-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1920px) { - .rz-display-xl-none { - display: none !important; - } - .rz-display-xl-block { - display: block !important; - } - .rz-display-xl-inline { - display: inline !important; - } - .rz-display-xl-inline-block { - display: inline-block !important; - } - .rz-display-xl-flex { - display: flex !important; - } - .rz-display-xl-inline-flex { - display: inline-flex !important; - } - .rz-display-xl-grid { - display: grid !important; - } - .rz-display-xl-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 2560px) { - .rz-display-xx-none { - display: none !important; - } - .rz-display-xx-block { - display: block !important; - } - .rz-display-xx-inline { - display: inline !important; - } - .rz-display-xx-inline-block { - display: inline-block !important; - } - .rz-display-xx-flex { - display: flex !important; - } - .rz-display-xx-inline-flex { - display: inline-flex !important; - } - .rz-display-xx-grid { - display: grid !important; - } - .rz-display-xx-inline-grid { - display: inline-grid !important; - } +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; } -.rz-justify-content-normal { - justify-content: normal !important; + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; } -.rz-justify-content-stretch { - justify-content: stretch !important; +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; } -.rz-justify-content-center { - justify-content: center !important; +.rz-ms-05 { + margin-inline-start: 0.125rem !important; } -.rz-justify-content-start { - justify-content: start !important; +.rz-me-05 { + margin-inline-end: 0.125rem !important; } -.rz-justify-content-end { - justify-content: end !important; +.rz-m-1 { + margin: 0.25rem !important; } -.rz-justify-content-flex-start { - justify-content: flex-start !important; +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; } -.rz-justify-content-flex-end { - justify-content: flex-end !important; +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; } -.rz-justify-content-left { - justify-content: left !important; +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; } -.rz-justify-content-right { - justify-content: right !important; +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; } -.rz-justify-content-space-between { - justify-content: space-between !important; +.rz-ms-1 { + margin-inline-start: 0.25rem !important; } -.rz-justify-content-space-around { - justify-content: space-around !important; +.rz-me-1 { + margin-inline-end: 0.25rem !important; } -.rz-justify-content-space-evenly { - justify-content: space-evenly !important; +.rz-m-2 { + margin: 0.5rem !important; } -.rz-align-items-normal { - align-items: normal !important; +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; } -.rz-align-items-stretch { - align-items: stretch !important; +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; } -.rz-align-items-center { - align-items: center !important; +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; } -.rz-align-items-start { - align-items: start !important; +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; } -.rz-align-items-end { - align-items: end !important; +.rz-ms-2 { + margin-inline-start: 0.5rem !important; } -.rz-align-items-flex-start { - align-items: flex-start !important; +.rz-me-2 { + margin-inline-end: 0.5rem !important; } -.rz-align-items-flex-end { - align-items: flex-end !important; +.rz-m-3 { + margin: 0.75rem !important; } -.rz-color-white { - color: var(--rz-white) !important; +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; } -.rz-color-black { - color: var(--rz-black) !important; +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; } -.rz-color-base-50 { - color: var(--rz-base-50) !important; +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; } -.rz-color-base-100 { - color: var(--rz-base-100) !important; +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; } -.rz-color-base-200 { - color: var(--rz-base-200) !important; +.rz-ms-3 { + margin-inline-start: 0.75rem !important; } -.rz-color-base-300 { - color: var(--rz-base-300) !important; +.rz-me-3 { + margin-inline-end: 0.75rem !important; } -.rz-color-base-400 { - color: var(--rz-base-400) !important; +.rz-m-4 { + margin: 1rem !important; } -.rz-color-base-500 { - color: var(--rz-base-500) !important; +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; } -.rz-color-base-600 { - color: var(--rz-base-600) !important; +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; } -.rz-color-base-700 { - color: var(--rz-base-700) !important; +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; } -.rz-color-base-800 { - color: var(--rz-base-800) !important; +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; } -.rz-color-base-900 { - color: var(--rz-base-900) !important; +.rz-ms-4 { + margin-inline-start: 1rem !important; } -.rz-color-primary { - color: var(--rz-primary) !important; +.rz-me-4 { + margin-inline-end: 1rem !important; } -.rz-color-primary-light { - color: var(--rz-primary-light) !important; +.rz-m-5 { + margin: 1.25rem !important; } -.rz-color-primary-lighter { - color: var(--rz-primary-lighter) !important; +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; } -.rz-color-primary-dark { - color: var(--rz-primary-dark) !important; +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; } -.rz-color-primary-darker { - color: var(--rz-primary-darker) !important; +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; } -.rz-color-secondary { - color: var(--rz-secondary) !important; +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; } -.rz-color-secondary-light { - color: var(--rz-secondary-light) !important; +.rz-ms-5 { + margin-inline-start: 1.25rem !important; } -.rz-color-secondary-lighter { - color: var(--rz-secondary-lighter) !important; +.rz-me-5 { + margin-inline-end: 1.25rem !important; } -.rz-color-secondary-dark { - color: var(--rz-secondary-dark) !important; +.rz-m-6 { + margin: 1.5rem !important; } -.rz-color-secondary-darker { - color: var(--rz-secondary-darker) !important; +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; } -.rz-color-info { - color: var(--rz-info) !important; +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; } -.rz-color-info-light { - color: var(--rz-info-light) !important; +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; } -.rz-color-info-lighter { - color: var(--rz-info-lighter) !important; +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; } -.rz-color-info-dark { - color: var(--rz-info-dark) !important; +.rz-ms-6 { + margin-inline-start: 1.5rem !important; } -.rz-color-info-darker { - color: var(--rz-info-darker) !important; +.rz-me-6 { + margin-inline-end: 1.5rem !important; } -.rz-color-success { - color: var(--rz-success) !important; +.rz-m-7 { + margin: 1.75rem !important; } -.rz-color-success-light { - color: var(--rz-success-light) !important; +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; } -.rz-color-success-lighter { - color: var(--rz-success-lighter) !important; +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; } -.rz-color-success-dark { - color: var(--rz-success-dark) !important; +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; } -.rz-color-success-darker { - color: var(--rz-success-darker) !important; +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; } -.rz-color-warning { - color: var(--rz-warning) !important; +.rz-ms-7 { + margin-inline-start: 1.75rem !important; } -.rz-color-warning-light { - color: var(--rz-warning-light) !important; +.rz-me-7 { + margin-inline-end: 1.75rem !important; } -.rz-color-warning-lighter { - color: var(--rz-warning-lighter) !important; +.rz-m-8 { + margin: 2rem !important; } -.rz-color-warning-dark { - color: var(--rz-warning-dark) !important; +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; } -.rz-color-warning-darker { - color: var(--rz-warning-darker) !important; +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; } -.rz-color-danger { - color: var(--rz-danger) !important; +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; } -.rz-color-danger-light { - color: var(--rz-danger-light) !important; +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; } -.rz-color-danger-lighter { - color: var(--rz-danger-lighter) !important; +.rz-ms-8 { + margin-inline-start: 2rem !important; } -.rz-color-danger-dark { - color: var(--rz-danger-dark) !important; +.rz-me-8 { + margin-inline-end: 2rem !important; } -.rz-color-danger-darker { - color: var(--rz-danger-darker) !important; +.rz-m-9 { + margin: 2.25rem !important; } -.rz-color-on-primary { - color: var(--rz-on-primary) !important; +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; } -.rz-color-on-primary-light { - color: var(--rz-on-primary-light) !important; +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; } -.rz-color-on-primary-lighter { - color: var(--rz-on-primary-lighter) !important; +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; } -.rz-color-on-primary-dark { - color: var(--rz-on-primary-dark) !important; +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; } -.rz-color-on-primary-darker { - color: var(--rz-on-primary-darker) !important; +.rz-ms-9 { + margin-inline-start: 2.25rem !important; } -.rz-color-on-secondary { - color: var(--rz-on-secondary) !important; +.rz-me-9 { + margin-inline-end: 2.25rem !important; } -.rz-color-on-secondary-light { - color: var(--rz-on-secondary-light) !important; +.rz-m-10 { + margin: 2.5rem !important; } -.rz-color-on-secondary-lighter { - color: var(--rz-on-secondary-lighter) !important; +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; } -.rz-color-on-secondary-dark { - color: var(--rz-on-secondary-dark) !important; +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; } -.rz-color-on-secondary-darker { - color: var(--rz-on-secondary-darker) !important; +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; } -.rz-color-on-info { - color: var(--rz-on-info) !important; +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; } -.rz-color-on-info-light { - color: var(--rz-on-info-light) !important; +.rz-ms-10 { + margin-inline-start: 2.5rem !important; } -.rz-color-on-info-lighter { - color: var(--rz-on-info-lighter) !important; +.rz-me-10 { + margin-inline-end: 2.5rem !important; } -.rz-color-on-info-dark { - color: var(--rz-on-info-dark) !important; +.rz-m-11 { + margin: 2.75rem !important; } -.rz-color-on-info-darker { - color: var(--rz-on-info-darker) !important; +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; } -.rz-color-on-success { - color: var(--rz-on-success) !important; +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; } -.rz-color-on-success-light { - color: var(--rz-on-success-light) !important; +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; } -.rz-color-on-success-lighter { - color: var(--rz-on-success-lighter) !important; +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; } -.rz-color-on-success-dark { - color: var(--rz-on-success-dark) !important; +.rz-ms-11 { + margin-inline-start: 2.75rem !important; } -.rz-color-on-success-darker { - color: var(--rz-on-success-darker) !important; +.rz-me-11 { + margin-inline-end: 2.75rem !important; } -.rz-color-on-warning { - color: var(--rz-on-warning) !important; +.rz-m-12 { + margin: 3rem !important; } -.rz-color-on-warning-light { - color: var(--rz-on-warning-light) !important; +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; } -.rz-color-on-warning-lighter { - color: var(--rz-on-warning-lighter) !important; +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; } -.rz-color-on-warning-dark { - color: var(--rz-on-warning-dark) !important; +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; } -.rz-color-on-warning-darker { - color: var(--rz-on-warning-darker) !important; +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; } -.rz-color-on-danger { - color: var(--rz-on-danger) !important; +.rz-ms-12 { + margin-inline-start: 3rem !important; } -.rz-color-on-danger-light { - color: var(--rz-on-danger-light) !important; +.rz-me-12 { + margin-inline-end: 3rem !important; } -.rz-color-on-danger-lighter { - color: var(--rz-on-danger-lighter) !important; +.rz-p-0 { + padding: 0 !important; } -.rz-color-on-danger-dark { - color: var(--rz-on-danger-dark) !important; +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; } -.rz-color-on-danger-darker { - color: var(--rz-on-danger-darker) !important; +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; } -.rz-color-series-1 { - color: var(--rz-series-1) !important; +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; } -.rz-color-series-2 { - color: var(--rz-series-2) !important; +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; } -.rz-color-series-3 { - color: var(--rz-series-3) !important; +.rz-ps-0 { + padding-inline-start: 0 !important; } -.rz-color-series-4 { - color: var(--rz-series-4) !important; +.rz-pe-0 { + padding-inline-end: 0 !important; } -.rz-color-series-5 { - color: var(--rz-series-5) !important; +.rz-p-05 { + padding: 0.125rem !important; } -.rz-color-series-6 { - color: var(--rz-series-6) !important; +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; } -.rz-color-series-7 { - color: var(--rz-series-7) !important; +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; } -.rz-color-series-8 { - color: var(--rz-series-8) !important; +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; } -.rz-color-series-9 { - color: var(--rz-series-9) !important; +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; } -.rz-color-series-10 { - color: var(--rz-series-10) !important; +.rz-ps-05 { + padding-inline-start: 0.125rem !important; } -.rz-color-series-11 { - color: var(--rz-series-11) !important; +.rz-pe-05 { + padding-inline-end: 0.125rem !important; } -.rz-color-series-12 { - color: var(--rz-series-12) !important; +.rz-p-1 { + padding: 0.25rem !important; } -.rz-color-series-13 { - color: var(--rz-series-13) !important; +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; } -.rz-color-series-14 { - color: var(--rz-series-14) !important; +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; } -.rz-color-series-15 { - color: var(--rz-series-15) !important; +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; } -.rz-color-series-16 { - color: var(--rz-series-16) !important; +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; } -.rz-color-series-17 { - color: var(--rz-series-17) !important; +.rz-ps-1 { + padding-inline-start: 0.25rem !important; } -.rz-color-series-18 { - color: var(--rz-series-18) !important; +.rz-pe-1 { + padding-inline-end: 0.25rem !important; } -.rz-color-series-19 { - color: var(--rz-series-19) !important; +.rz-p-2 { + padding: 0.5rem !important; } -.rz-color-series-20 { - color: var(--rz-series-20) !important; +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; } -.rz-color-series-21 { - color: var(--rz-series-21) !important; +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; } -.rz-color-series-22 { - color: var(--rz-series-22) !important; +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; } -.rz-color-series-23 { - color: var(--rz-series-23) !important; +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; } -.rz-color-series-24 { - color: var(--rz-series-24) !important; +.rz-ps-2 { + padding-inline-start: 0.5rem !important; } -.rz-background-color-white { - background-color: var(--rz-white) !important; +.rz-pe-2 { + padding-inline-end: 0.5rem !important; } -.rz-background-color-black { - background-color: var(--rz-black) !important; +.rz-p-3 { + padding: 0.75rem !important; } -.rz-background-color-base-50 { - background-color: var(--rz-base-50) !important; +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; } -.rz-background-color-base-100 { - background-color: var(--rz-base-100) !important; +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; } -.rz-background-color-base-200 { - background-color: var(--rz-base-200) !important; +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; } -.rz-background-color-base-300 { - background-color: var(--rz-base-300) !important; +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; } -.rz-background-color-base-400 { - background-color: var(--rz-base-400) !important; +.rz-ps-3 { + padding-inline-start: 0.75rem !important; } -.rz-background-color-base-500 { - background-color: var(--rz-base-500) !important; +.rz-pe-3 { + padding-inline-end: 0.75rem !important; } -.rz-background-color-base-600 { - background-color: var(--rz-base-600) !important; +.rz-p-4 { + padding: 1rem !important; } -.rz-background-color-base-700 { - background-color: var(--rz-base-700) !important; +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; } -.rz-background-color-base-800 { - background-color: var(--rz-base-800) !important; +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; } -.rz-background-color-base-900 { - background-color: var(--rz-base-900) !important; +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; } -.rz-background-color-primary { - background-color: var(--rz-primary) !important; +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; } -.rz-background-color-primary-light { - background-color: var(--rz-primary-light) !important; +.rz-ps-4 { + padding-inline-start: 1rem !important; } -.rz-background-color-primary-lighter { - background-color: var(--rz-primary-lighter) !important; +.rz-pe-4 { + padding-inline-end: 1rem !important; } -.rz-background-color-primary-dark { - background-color: var(--rz-primary-dark) !important; +.rz-p-5 { + padding: 1.25rem !important; } -.rz-background-color-primary-darker { - background-color: var(--rz-primary-darker) !important; +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; } -.rz-background-color-secondary { - background-color: var(--rz-secondary) !important; +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; } -.rz-background-color-secondary-light { - background-color: var(--rz-secondary-light) !important; +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; } -.rz-background-color-secondary-lighter { - background-color: var(--rz-secondary-lighter) !important; +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; } -.rz-background-color-secondary-dark { - background-color: var(--rz-secondary-dark) !important; +.rz-ps-5 { + padding-inline-start: 1.25rem !important; } -.rz-background-color-secondary-darker { - background-color: var(--rz-secondary-darker) !important; +.rz-pe-5 { + padding-inline-end: 1.25rem !important; } -.rz-background-color-info { - background-color: var(--rz-info) !important; +.rz-p-6 { + padding: 1.5rem !important; } -.rz-background-color-info-light { - background-color: var(--rz-info-light) !important; +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; } -.rz-background-color-info-lighter { - background-color: var(--rz-info-lighter) !important; +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; } -.rz-background-color-info-dark { - background-color: var(--rz-info-dark) !important; +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; } -.rz-background-color-info-darker { - background-color: var(--rz-info-darker) !important; +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; } -.rz-background-color-success { - background-color: var(--rz-success) !important; +.rz-ps-6 { + padding-inline-start: 1.5rem !important; } -.rz-background-color-success-light { - background-color: var(--rz-success-light) !important; +.rz-pe-6 { + padding-inline-end: 1.5rem !important; } -.rz-background-color-success-lighter { - background-color: var(--rz-success-lighter) !important; +.rz-p-7 { + padding: 1.75rem !important; } -.rz-background-color-success-dark { - background-color: var(--rz-success-dark) !important; +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; } -.rz-background-color-success-darker { - background-color: var(--rz-success-darker) !important; +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; } -.rz-background-color-warning { - background-color: var(--rz-warning) !important; +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; } -.rz-background-color-warning-light { - background-color: var(--rz-warning-light) !important; +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; } -.rz-background-color-warning-lighter { - background-color: var(--rz-warning-lighter) !important; +.rz-ps-7 { + padding-inline-start: 1.75rem !important; } -.rz-background-color-warning-dark { - background-color: var(--rz-warning-dark) !important; +.rz-pe-7 { + padding-inline-end: 1.75rem !important; } -.rz-background-color-warning-darker { - background-color: var(--rz-warning-darker) !important; +.rz-p-8 { + padding: 2rem !important; } -.rz-background-color-danger { - background-color: var(--rz-danger) !important; +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; } -.rz-background-color-danger-light { - background-color: var(--rz-danger-light) !important; +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; } -.rz-background-color-danger-lighter { - background-color: var(--rz-danger-lighter) !important; +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; } -.rz-background-color-danger-dark { - background-color: var(--rz-danger-dark) !important; +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; } -.rz-background-color-danger-darker { - background-color: var(--rz-danger-darker) !important; +.rz-ps-8 { + padding-inline-start: 2rem !important; } -.rz-background-color-on-primary { - background-color: var(--rz-on-primary) !important; +.rz-pe-8 { + padding-inline-end: 2rem !important; } -.rz-background-color-on-primary-light { - background-color: var(--rz-on-primary-light) !important; +.rz-p-9 { + padding: 2.25rem !important; } -.rz-background-color-on-primary-lighter { - background-color: var(--rz-on-primary-lighter) !important; +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; } -.rz-background-color-on-primary-dark { - background-color: var(--rz-on-primary-dark) !important; +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; } -.rz-background-color-on-primary-darker { - background-color: var(--rz-on-primary-darker) !important; +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; } -.rz-background-color-on-secondary { - background-color: var(--rz-on-secondary) !important; +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; } -.rz-background-color-on-secondary-light { - background-color: var(--rz-on-secondary-light) !important; +.rz-ps-9 { + padding-inline-start: 2.25rem !important; } -.rz-background-color-on-secondary-lighter { - background-color: var(--rz-on-secondary-lighter) !important; +.rz-pe-9 { + padding-inline-end: 2.25rem !important; } -.rz-background-color-on-secondary-dark { - background-color: var(--rz-on-secondary-dark) !important; +.rz-p-10 { + padding: 2.5rem !important; } -.rz-background-color-on-secondary-darker { - background-color: var(--rz-on-secondary-darker) !important; +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; } -.rz-background-color-on-info { - background-color: var(--rz-on-info) !important; +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; } -.rz-background-color-on-info-light { - background-color: var(--rz-on-info-light) !important; +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; } -.rz-background-color-on-info-lighter { - background-color: var(--rz-on-info-lighter) !important; +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; } -.rz-background-color-on-info-dark { - background-color: var(--rz-on-info-dark) !important; +.rz-ps-10 { + padding-inline-start: 2.5rem !important; } -.rz-background-color-on-info-darker { - background-color: var(--rz-on-info-darker) !important; +.rz-pe-10 { + padding-inline-end: 2.5rem !important; } -.rz-background-color-on-success { - background-color: var(--rz-on-success) !important; +.rz-p-11 { + padding: 2.75rem !important; } -.rz-background-color-on-success-light { - background-color: var(--rz-on-success-light) !important; +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; } -.rz-background-color-on-success-lighter { - background-color: var(--rz-on-success-lighter) !important; +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; } -.rz-background-color-on-success-dark { - background-color: var(--rz-on-success-dark) !important; +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; } -.rz-background-color-on-success-darker { - background-color: var(--rz-on-success-darker) !important; +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; } -.rz-background-color-on-warning { - background-color: var(--rz-on-warning) !important; +.rz-ps-11 { + padding-inline-start: 2.75rem !important; } -.rz-background-color-on-warning-light { - background-color: var(--rz-on-warning-light) !important; +.rz-pe-11 { + padding-inline-end: 2.75rem !important; } -.rz-background-color-on-warning-lighter { - background-color: var(--rz-on-warning-lighter) !important; +.rz-p-12 { + padding: 3rem !important; } -.rz-background-color-on-warning-dark { - background-color: var(--rz-on-warning-dark) !important; +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; } -.rz-background-color-on-warning-darker { - background-color: var(--rz-on-warning-darker) !important; +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; } -.rz-background-color-on-danger { - background-color: var(--rz-on-danger) !important; +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; } -.rz-background-color-on-danger-light { - background-color: var(--rz-on-danger-light) !important; -} - -.rz-background-color-on-danger-lighter { - background-color: var(--rz-on-danger-lighter) !important; -} - -.rz-background-color-on-danger-dark { - background-color: var(--rz-on-danger-dark) !important; -} - -.rz-background-color-on-danger-darker { - background-color: var(--rz-on-danger-darker) !important; -} - -.rz-background-color-series-1 { - background-color: var(--rz-series-1) !important; -} - -.rz-background-color-series-2 { - background-color: var(--rz-series-2) !important; -} - -.rz-background-color-series-3 { - background-color: var(--rz-series-3) !important; -} - -.rz-background-color-series-4 { - background-color: var(--rz-series-4) !important; -} - -.rz-background-color-series-5 { - background-color: var(--rz-series-5) !important; -} - -.rz-background-color-series-6 { - background-color: var(--rz-series-6) !important; -} - -.rz-background-color-series-7 { - background-color: var(--rz-series-7) !important; -} - -.rz-background-color-series-8 { - background-color: var(--rz-series-8) !important; -} - -.rz-background-color-series-9 { - background-color: var(--rz-series-9) !important; -} - -.rz-background-color-series-10 { - background-color: var(--rz-series-10) !important; -} - -.rz-background-color-series-11 { - background-color: var(--rz-series-11) !important; -} - -.rz-background-color-series-12 { - background-color: var(--rz-series-12) !important; -} - -.rz-background-color-series-13 { - background-color: var(--rz-series-13) !important; -} - -.rz-background-color-series-14 { - background-color: var(--rz-series-14) !important; -} - -.rz-background-color-series-15 { - background-color: var(--rz-series-15) !important; -} - -.rz-background-color-series-16 { - background-color: var(--rz-series-16) !important; -} - -.rz-background-color-series-17 { - background-color: var(--rz-series-17) !important; -} - -.rz-background-color-series-18 { - background-color: var(--rz-series-18) !important; -} - -.rz-background-color-series-19 { - background-color: var(--rz-series-19) !important; -} - -.rz-background-color-series-20 { - background-color: var(--rz-series-20) !important; -} - -.rz-background-color-series-21 { - background-color: var(--rz-series-21) !important; -} - -.rz-background-color-series-22 { - background-color: var(--rz-series-22) !important; -} - -.rz-background-color-series-23 { - background-color: var(--rz-series-23) !important; -} - -.rz-background-color-series-24 { - background-color: var(--rz-series-24) !important; -} - -.rz-border-color-white { - border-color: var(--rz-white) !important; -} - -.rz-border-color-black { - border-color: var(--rz-black) !important; -} - -.rz-border-color-base-50 { - border-color: var(--rz-base-50) !important; -} - -.rz-border-color-base-100 { - border-color: var(--rz-base-100) !important; -} - -.rz-border-color-base-200 { - border-color: var(--rz-base-200) !important; -} - -.rz-border-color-base-300 { - border-color: var(--rz-base-300) !important; -} - -.rz-border-color-base-400 { - border-color: var(--rz-base-400) !important; -} - -.rz-border-color-base-500 { - border-color: var(--rz-base-500) !important; -} - -.rz-border-color-base-600 { - border-color: var(--rz-base-600) !important; -} - -.rz-border-color-base-700 { - border-color: var(--rz-base-700) !important; -} - -.rz-border-color-base-800 { - border-color: var(--rz-base-800) !important; -} - -.rz-border-color-base-900 { - border-color: var(--rz-base-900) !important; -} - -.rz-border-color-primary { - border-color: var(--rz-primary) !important; -} - -.rz-border-color-primary-light { - border-color: var(--rz-primary-light) !important; -} - -.rz-border-color-primary-lighter { - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-color-primary-dark { - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-color-primary-darker { - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-color-secondary { - border-color: var(--rz-secondary) !important; -} - -.rz-border-color-secondary-light { - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-color-secondary-lighter { - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-color-secondary-dark { - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-color-secondary-darker { - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-color-info { - border-color: var(--rz-info) !important; -} - -.rz-border-color-info-light { - border-color: var(--rz-info-light) !important; -} - -.rz-border-color-info-lighter { - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-color-info-dark { - border-color: var(--rz-info-dark) !important; +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; } -.rz-border-color-info-darker { - border-color: var(--rz-info-darker) !important; +.rz-ps-12 { + padding-inline-start: 3rem !important; } -.rz-border-color-success { - border-color: var(--rz-success) !important; +.rz-pe-12 { + padding-inline-end: 3rem !important; } -.rz-border-color-success-light { - border-color: var(--rz-success-light) !important; +.rz-m-auto { + margin: auto !important; } -.rz-border-color-success-lighter { - border-color: var(--rz-success-lighter) !important; +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; } -.rz-border-color-success-dark { - border-color: var(--rz-success-dark) !important; +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; } -.rz-border-color-success-darker { - border-color: var(--rz-success-darker) !important; +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; } -.rz-border-color-warning { - border-color: var(--rz-warning) !important; +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; } -.rz-border-color-warning-light { - border-color: var(--rz-warning-light) !important; +.rz-ms-auto { + margin-inline-start: auto !important; } -.rz-border-color-warning-lighter { - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-color-warning-dark { - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-color-warning-darker { - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-color-danger { - border-color: var(--rz-danger) !important; -} - -.rz-border-color-danger-light { - border-color: var(--rz-danger-light) !important; -} - -.rz-border-color-danger-lighter { - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-color-danger-dark { - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-color-danger-darker { - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-color-on-primary { - border-color: var(--rz-on-primary) !important; -} - -.rz-border-color-on-primary-light { - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-color-on-primary-lighter { - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-color-on-primary-dark { - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-color-on-primary-darker { - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-color-on-secondary { - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-color-on-secondary-light { - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-color-on-secondary-lighter { - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-color-on-secondary-dark { - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-color-on-secondary-darker { - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-color-on-info { - border-color: var(--rz-on-info) !important; -} - -.rz-border-color-on-info-light { - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-color-on-info-lighter { - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-color-on-info-dark { - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-color-on-info-darker { - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-color-on-success { - border-color: var(--rz-on-success) !important; -} - -.rz-border-color-on-success-light { - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-color-on-success-lighter { - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-color-on-success-dark { - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-color-on-success-darker { - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-color-on-warning { - border-color: var(--rz-on-warning) !important; -} - -.rz-border-color-on-warning-light { - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-color-on-warning-lighter { - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-color-on-warning-dark { - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-color-on-warning-darker { - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-color-on-danger { - border-color: var(--rz-on-danger) !important; -} - -.rz-border-color-on-danger-light { - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-color-on-danger-lighter { - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-color-on-danger-dark { - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-color-on-danger-darker { - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-color-series-1 { - border-color: var(--rz-series-1) !important; -} - -.rz-border-color-series-2 { - border-color: var(--rz-series-2) !important; -} - -.rz-border-color-series-3 { - border-color: var(--rz-series-3) !important; -} - -.rz-border-color-series-4 { - border-color: var(--rz-series-4) !important; -} - -.rz-border-color-series-5 { - border-color: var(--rz-series-5) !important; -} - -.rz-border-color-series-6 { - border-color: var(--rz-series-6) !important; -} - -.rz-border-color-series-7 { - border-color: var(--rz-series-7) !important; -} - -.rz-border-color-series-8 { - border-color: var(--rz-series-8) !important; -} - -.rz-border-color-series-9 { - border-color: var(--rz-series-9) !important; -} - -.rz-border-color-series-10 { - border-color: var(--rz-series-10) !important; -} - -.rz-border-color-series-11 { - border-color: var(--rz-series-11) !important; -} - -.rz-border-color-series-12 { - border-color: var(--rz-series-12) !important; -} - -.rz-border-color-series-13 { - border-color: var(--rz-series-13) !important; -} - -.rz-border-color-series-14 { - border-color: var(--rz-series-14) !important; -} - -.rz-border-color-series-15 { - border-color: var(--rz-series-15) !important; -} - -.rz-border-color-series-16 { - border-color: var(--rz-series-16) !important; -} - -.rz-border-color-series-17 { - border-color: var(--rz-series-17) !important; -} - -.rz-border-color-series-18 { - border-color: var(--rz-series-18) !important; -} - -.rz-border-color-series-19 { - border-color: var(--rz-series-19) !important; -} - -.rz-border-color-series-20 { - border-color: var(--rz-series-20) !important; -} - -.rz-border-color-series-21 { - border-color: var(--rz-series-21) !important; -} - -.rz-border-color-series-22 { - border-color: var(--rz-series-22) !important; -} - -.rz-border-color-series-23 { - border-color: var(--rz-series-23) !important; -} - -.rz-border-color-series-24 { - border-color: var(--rz-series-24) !important; -} - -.rz-border-white { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-white) !important; -} - -.rz-border-black { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-black) !important; -} - -.rz-border-base-50 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-50) !important; -} - -.rz-border-base-100 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-100) !important; -} - -.rz-border-base-200 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-200) !important; -} - -.rz-border-base-300 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-300) !important; -} - -.rz-border-base-400 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-400) !important; -} - -.rz-border-base-500 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-500) !important; -} - -.rz-border-base-600 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-600) !important; -} - -.rz-border-base-700 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-700) !important; -} - -.rz-border-base-800 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-800) !important; -} - -.rz-border-base-900 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-900) !important; -} - -.rz-border-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary) !important; -} - -.rz-border-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-light) !important; -} - -.rz-border-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary) !important; -} - -.rz-border-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info) !important; -} - -.rz-border-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-light) !important; -} - -.rz-border-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-dark) !important; -} - -.rz-border-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-darker) !important; -} - -.rz-border-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success) !important; -} - -.rz-border-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-light) !important; -} - -.rz-border-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-lighter) !important; -} - -.rz-border-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-dark) !important; -} - -.rz-border-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-darker) !important; -} - -.rz-border-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning) !important; -} - -.rz-border-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-light) !important; -} - -.rz-border-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger) !important; -} - -.rz-border-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-light) !important; -} - -.rz-border-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-on-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary) !important; -} - -.rz-border-on-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-on-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-on-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-on-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-on-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-on-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-on-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-on-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-on-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-on-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info) !important; -} - -.rz-border-on-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-on-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-on-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-on-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-on-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success) !important; -} - -.rz-border-on-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-on-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-on-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-on-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-on-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning) !important; -} - -.rz-border-on-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-on-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-on-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-on-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-on-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger) !important; -} - -.rz-border-on-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-on-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-on-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-on-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-series-1 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-1) !important; -} - -.rz-border-series-2 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-2) !important; -} - -.rz-border-series-3 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-3) !important; -} - -.rz-border-series-4 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-4) !important; -} - -.rz-border-series-5 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-5) !important; -} - -.rz-border-series-6 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-6) !important; -} - -.rz-border-series-7 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-7) !important; -} - -.rz-border-series-8 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-8) !important; -} - -.rz-border-series-9 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-9) !important; -} - -.rz-border-series-10 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-10) !important; -} - -.rz-border-series-11 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-11) !important; -} - -.rz-border-series-12 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-12) !important; -} - -.rz-border-series-13 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-13) !important; -} - -.rz-border-series-14 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-14) !important; -} - -.rz-border-series-15 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-15) !important; -} - -.rz-border-series-16 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-16) !important; -} - -.rz-border-series-17 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-17) !important; -} - -.rz-border-series-18 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-18) !important; -} - -.rz-border-series-19 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-19) !important; -} - -.rz-border-series-20 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-20) !important; -} - -.rz-border-series-21 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-21) !important; -} - -.rz-border-series-22 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-22) !important; -} - -.rz-border-series-23 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-23) !important; -} - -.rz-border-series-24 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-24) !important; -} - -.rz-ripple { - position: relative; - overflow: hidden; -} -.rz-ripple:not(.rz-state-disabled):before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - background-position: center; - background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; - transition: background-size 0.8s, opacity 0.8s; -} -.rz-ripple:not(.rz-state-disabled):active:before { - transition: background-size 0s, opacity 0s; - opacity: 0.32; - background-size: 100%; -} - -.rz-m-0 { - margin: 0 !important; -} - -.rz-my-0, -.rz-mt-0 { - margin-top: 0 !important; -} - -.rz-mx-0, -.rz-mr-0 { - margin-right: 0 !important; -} - -.rz-my-0, -.rz-mb-0 { - margin-bottom: 0 !important; -} - -.rz-mx-0, -.rz-ml-0 { - margin-left: 0 !important; -} - -.rz-ms-0 { - margin-inline-start: 0 !important; -} - -.rz-me-0 { - margin-inline-end: 0 !important; -} - -.rz-m-05 { - margin: 0.125rem !important; -} - -.rz-my-05, -.rz-mt-05 { - margin-top: 0.125rem !important; -} - -.rz-mx-05, -.rz-mr-05 { - margin-right: 0.125rem !important; -} - -.rz-my-05, -.rz-mb-05 { - margin-bottom: 0.125rem !important; -} - -.rz-mx-05, -.rz-ml-05 { - margin-left: 0.125rem !important; -} - -.rz-ms-05 { - margin-inline-start: 0.125rem !important; -} - -.rz-me-05 { - margin-inline-end: 0.125rem !important; -} - -.rz-m-1 { - margin: 0.25rem !important; -} - -.rz-my-1, -.rz-mt-1 { - margin-top: 0.25rem !important; -} - -.rz-mx-1, -.rz-mr-1 { - margin-right: 0.25rem !important; -} - -.rz-my-1, -.rz-mb-1 { - margin-bottom: 0.25rem !important; -} - -.rz-mx-1, -.rz-ml-1 { - margin-left: 0.25rem !important; -} - -.rz-ms-1 { - margin-inline-start: 0.25rem !important; -} - -.rz-me-1 { - margin-inline-end: 0.25rem !important; -} - -.rz-m-2 { - margin: 0.5rem !important; -} - -.rz-my-2, -.rz-mt-2 { - margin-top: 0.5rem !important; -} - -.rz-mx-2, -.rz-mr-2 { - margin-right: 0.5rem !important; -} - -.rz-my-2, -.rz-mb-2 { - margin-bottom: 0.5rem !important; -} - -.rz-mx-2, -.rz-ml-2 { - margin-left: 0.5rem !important; -} - -.rz-ms-2 { - margin-inline-start: 0.5rem !important; -} - -.rz-me-2 { - margin-inline-end: 0.5rem !important; -} - -.rz-m-3 { - margin: 0.75rem !important; -} - -.rz-my-3, -.rz-mt-3 { - margin-top: 0.75rem !important; -} - -.rz-mx-3, -.rz-mr-3 { - margin-right: 0.75rem !important; -} - -.rz-my-3, -.rz-mb-3 { - margin-bottom: 0.75rem !important; -} - -.rz-mx-3, -.rz-ml-3 { - margin-left: 0.75rem !important; -} - -.rz-ms-3 { - margin-inline-start: 0.75rem !important; -} - -.rz-me-3 { - margin-inline-end: 0.75rem !important; -} - -.rz-m-4 { - margin: 1rem !important; -} - -.rz-my-4, -.rz-mt-4 { - margin-top: 1rem !important; -} - -.rz-mx-4, -.rz-mr-4 { - margin-right: 1rem !important; -} - -.rz-my-4, -.rz-mb-4 { - margin-bottom: 1rem !important; -} - -.rz-mx-4, -.rz-ml-4 { - margin-left: 1rem !important; -} - -.rz-ms-4 { - margin-inline-start: 1rem !important; -} - -.rz-me-4 { - margin-inline-end: 1rem !important; -} - -.rz-m-5 { - margin: 1.25rem !important; -} - -.rz-my-5, -.rz-mt-5 { - margin-top: 1.25rem !important; -} - -.rz-mx-5, -.rz-mr-5 { - margin-right: 1.25rem !important; -} - -.rz-my-5, -.rz-mb-5 { - margin-bottom: 1.25rem !important; -} - -.rz-mx-5, -.rz-ml-5 { - margin-left: 1.25rem !important; -} - -.rz-ms-5 { - margin-inline-start: 1.25rem !important; -} - -.rz-me-5 { - margin-inline-end: 1.25rem !important; -} - -.rz-m-6 { - margin: 1.5rem !important; -} - -.rz-my-6, -.rz-mt-6 { - margin-top: 1.5rem !important; -} - -.rz-mx-6, -.rz-mr-6 { - margin-right: 1.5rem !important; -} - -.rz-my-6, -.rz-mb-6 { - margin-bottom: 1.5rem !important; -} - -.rz-mx-6, -.rz-ml-6 { - margin-left: 1.5rem !important; -} - -.rz-ms-6 { - margin-inline-start: 1.5rem !important; -} - -.rz-me-6 { - margin-inline-end: 1.5rem !important; -} - -.rz-m-7 { - margin: 1.75rem !important; -} - -.rz-my-7, -.rz-mt-7 { - margin-top: 1.75rem !important; -} - -.rz-mx-7, -.rz-mr-7 { - margin-right: 1.75rem !important; -} - -.rz-my-7, -.rz-mb-7 { - margin-bottom: 1.75rem !important; -} - -.rz-mx-7, -.rz-ml-7 { - margin-left: 1.75rem !important; -} - -.rz-ms-7 { - margin-inline-start: 1.75rem !important; -} - -.rz-me-7 { - margin-inline-end: 1.75rem !important; -} - -.rz-m-8 { - margin: 2rem !important; -} - -.rz-my-8, -.rz-mt-8 { - margin-top: 2rem !important; -} - -.rz-mx-8, -.rz-mr-8 { - margin-right: 2rem !important; -} - -.rz-my-8, -.rz-mb-8 { - margin-bottom: 2rem !important; -} - -.rz-mx-8, -.rz-ml-8 { - margin-left: 2rem !important; -} - -.rz-ms-8 { - margin-inline-start: 2rem !important; -} - -.rz-me-8 { - margin-inline-end: 2rem !important; -} - -.rz-m-9 { - margin: 2.25rem !important; -} - -.rz-my-9, -.rz-mt-9 { - margin-top: 2.25rem !important; -} - -.rz-mx-9, -.rz-mr-9 { - margin-right: 2.25rem !important; -} - -.rz-my-9, -.rz-mb-9 { - margin-bottom: 2.25rem !important; -} - -.rz-mx-9, -.rz-ml-9 { - margin-left: 2.25rem !important; -} - -.rz-ms-9 { - margin-inline-start: 2.25rem !important; -} - -.rz-me-9 { - margin-inline-end: 2.25rem !important; -} - -.rz-m-10 { - margin: 2.5rem !important; -} - -.rz-my-10, -.rz-mt-10 { - margin-top: 2.5rem !important; -} - -.rz-mx-10, -.rz-mr-10 { - margin-right: 2.5rem !important; -} - -.rz-my-10, -.rz-mb-10 { - margin-bottom: 2.5rem !important; -} - -.rz-mx-10, -.rz-ml-10 { - margin-left: 2.5rem !important; -} - -.rz-ms-10 { - margin-inline-start: 2.5rem !important; -} - -.rz-me-10 { - margin-inline-end: 2.5rem !important; -} - -.rz-m-11 { - margin: 2.75rem !important; -} - -.rz-my-11, -.rz-mt-11 { - margin-top: 2.75rem !important; -} - -.rz-mx-11, -.rz-mr-11 { - margin-right: 2.75rem !important; -} - -.rz-my-11, -.rz-mb-11 { - margin-bottom: 2.75rem !important; -} - -.rz-mx-11, -.rz-ml-11 { - margin-left: 2.75rem !important; -} - -.rz-ms-11 { - margin-inline-start: 2.75rem !important; -} - -.rz-me-11 { - margin-inline-end: 2.75rem !important; -} - -.rz-m-12 { - margin: 3rem !important; -} - -.rz-my-12, -.rz-mt-12 { - margin-top: 3rem !important; -} - -.rz-mx-12, -.rz-mr-12 { - margin-right: 3rem !important; -} - -.rz-my-12, -.rz-mb-12 { - margin-bottom: 3rem !important; -} - -.rz-mx-12, -.rz-ml-12 { - margin-left: 3rem !important; -} - -.rz-ms-12 { - margin-inline-start: 3rem !important; -} - -.rz-me-12 { - margin-inline-end: 3rem !important; -} - -.rz-p-0 { - padding: 0 !important; -} - -.rz-py-0, -.rz-pt-0 { - padding-top: 0 !important; -} - -.rz-px-0, -.rz-pr-0 { - padding-right: 0 !important; -} - -.rz-py-0, -.rz-pb-0 { - padding-bottom: 0 !important; -} - -.rz-px-0, -.rz-pl-0 { - padding-left: 0 !important; -} - -.rz-ps-0 { - padding-inline-start: 0 !important; -} - -.rz-pe-0 { - padding-inline-end: 0 !important; -} - -.rz-p-05 { - padding: 0.125rem !important; -} - -.rz-py-05, -.rz-pt-05 { - padding-top: 0.125rem !important; -} - -.rz-px-05, -.rz-pr-05 { - padding-right: 0.125rem !important; -} - -.rz-py-05, -.rz-pb-05 { - padding-bottom: 0.125rem !important; -} - -.rz-px-05, -.rz-pl-05 { - padding-left: 0.125rem !important; -} - -.rz-ps-05 { - padding-inline-start: 0.125rem !important; -} - -.rz-pe-05 { - padding-inline-end: 0.125rem !important; -} - -.rz-p-1 { - padding: 0.25rem !important; -} - -.rz-py-1, -.rz-pt-1 { - padding-top: 0.25rem !important; -} - -.rz-px-1, -.rz-pr-1 { - padding-right: 0.25rem !important; -} - -.rz-py-1, -.rz-pb-1 { - padding-bottom: 0.25rem !important; -} - -.rz-px-1, -.rz-pl-1 { - padding-left: 0.25rem !important; -} - -.rz-ps-1 { - padding-inline-start: 0.25rem !important; -} - -.rz-pe-1 { - padding-inline-end: 0.25rem !important; -} - -.rz-p-2 { - padding: 0.5rem !important; -} - -.rz-py-2, -.rz-pt-2 { - padding-top: 0.5rem !important; -} - -.rz-px-2, -.rz-pr-2 { - padding-right: 0.5rem !important; -} - -.rz-py-2, -.rz-pb-2 { - padding-bottom: 0.5rem !important; -} - -.rz-px-2, -.rz-pl-2 { - padding-left: 0.5rem !important; -} - -.rz-ps-2 { - padding-inline-start: 0.5rem !important; -} - -.rz-pe-2 { - padding-inline-end: 0.5rem !important; -} - -.rz-p-3 { - padding: 0.75rem !important; -} - -.rz-py-3, -.rz-pt-3 { - padding-top: 0.75rem !important; -} - -.rz-px-3, -.rz-pr-3 { - padding-right: 0.75rem !important; -} - -.rz-py-3, -.rz-pb-3 { - padding-bottom: 0.75rem !important; -} - -.rz-px-3, -.rz-pl-3 { - padding-left: 0.75rem !important; -} - -.rz-ps-3 { - padding-inline-start: 0.75rem !important; -} - -.rz-pe-3 { - padding-inline-end: 0.75rem !important; -} - -.rz-p-4 { - padding: 1rem !important; -} - -.rz-py-4, -.rz-pt-4 { - padding-top: 1rem !important; -} - -.rz-px-4, -.rz-pr-4 { - padding-right: 1rem !important; -} - -.rz-py-4, -.rz-pb-4 { - padding-bottom: 1rem !important; -} - -.rz-px-4, -.rz-pl-4 { - padding-left: 1rem !important; -} - -.rz-ps-4 { - padding-inline-start: 1rem !important; -} - -.rz-pe-4 { - padding-inline-end: 1rem !important; -} - -.rz-p-5 { - padding: 1.25rem !important; -} - -.rz-py-5, -.rz-pt-5 { - padding-top: 1.25rem !important; -} - -.rz-px-5, -.rz-pr-5 { - padding-right: 1.25rem !important; -} - -.rz-py-5, -.rz-pb-5 { - padding-bottom: 1.25rem !important; -} - -.rz-px-5, -.rz-pl-5 { - padding-left: 1.25rem !important; -} - -.rz-ps-5 { - padding-inline-start: 1.25rem !important; -} - -.rz-pe-5 { - padding-inline-end: 1.25rem !important; -} - -.rz-p-6 { - padding: 1.5rem !important; -} - -.rz-py-6, -.rz-pt-6 { - padding-top: 1.5rem !important; -} - -.rz-px-6, -.rz-pr-6 { - padding-right: 1.5rem !important; -} - -.rz-py-6, -.rz-pb-6 { - padding-bottom: 1.5rem !important; -} - -.rz-px-6, -.rz-pl-6 { - padding-left: 1.5rem !important; -} - -.rz-ps-6 { - padding-inline-start: 1.5rem !important; -} - -.rz-pe-6 { - padding-inline-end: 1.5rem !important; -} - -.rz-p-7 { - padding: 1.75rem !important; -} - -.rz-py-7, -.rz-pt-7 { - padding-top: 1.75rem !important; -} - -.rz-px-7, -.rz-pr-7 { - padding-right: 1.75rem !important; -} - -.rz-py-7, -.rz-pb-7 { - padding-bottom: 1.75rem !important; -} - -.rz-px-7, -.rz-pl-7 { - padding-left: 1.75rem !important; -} - -.rz-ps-7 { - padding-inline-start: 1.75rem !important; -} - -.rz-pe-7 { - padding-inline-end: 1.75rem !important; -} - -.rz-p-8 { - padding: 2rem !important; -} - -.rz-py-8, -.rz-pt-8 { - padding-top: 2rem !important; -} - -.rz-px-8, -.rz-pr-8 { - padding-right: 2rem !important; -} - -.rz-py-8, -.rz-pb-8 { - padding-bottom: 2rem !important; -} - -.rz-px-8, -.rz-pl-8 { - padding-left: 2rem !important; -} - -.rz-ps-8 { - padding-inline-start: 2rem !important; -} - -.rz-pe-8 { - padding-inline-end: 2rem !important; -} - -.rz-p-9 { - padding: 2.25rem !important; -} - -.rz-py-9, -.rz-pt-9 { - padding-top: 2.25rem !important; -} - -.rz-px-9, -.rz-pr-9 { - padding-right: 2.25rem !important; -} - -.rz-py-9, -.rz-pb-9 { - padding-bottom: 2.25rem !important; -} - -.rz-px-9, -.rz-pl-9 { - padding-left: 2.25rem !important; -} - -.rz-ps-9 { - padding-inline-start: 2.25rem !important; -} - -.rz-pe-9 { - padding-inline-end: 2.25rem !important; -} - -.rz-p-10 { - padding: 2.5rem !important; -} - -.rz-py-10, -.rz-pt-10 { - padding-top: 2.5rem !important; -} - -.rz-px-10, -.rz-pr-10 { - padding-right: 2.5rem !important; -} - -.rz-py-10, -.rz-pb-10 { - padding-bottom: 2.5rem !important; -} - -.rz-px-10, -.rz-pl-10 { - padding-left: 2.5rem !important; -} - -.rz-ps-10 { - padding-inline-start: 2.5rem !important; -} - -.rz-pe-10 { - padding-inline-end: 2.5rem !important; -} - -.rz-p-11 { - padding: 2.75rem !important; -} - -.rz-py-11, -.rz-pt-11 { - padding-top: 2.75rem !important; -} - -.rz-px-11, -.rz-pr-11 { - padding-right: 2.75rem !important; -} - -.rz-py-11, -.rz-pb-11 { - padding-bottom: 2.75rem !important; -} - -.rz-px-11, -.rz-pl-11 { - padding-left: 2.75rem !important; -} - -.rz-ps-11 { - padding-inline-start: 2.75rem !important; -} - -.rz-pe-11 { - padding-inline-end: 2.75rem !important; -} - -.rz-p-12 { - padding: 3rem !important; -} - -.rz-py-12, -.rz-pt-12 { - padding-top: 3rem !important; -} - -.rz-px-12, -.rz-pr-12 { - padding-right: 3rem !important; -} - -.rz-py-12, -.rz-pb-12 { - padding-bottom: 3rem !important; -} - -.rz-px-12, -.rz-pl-12 { - padding-left: 3rem !important; -} - -.rz-ps-12 { - padding-inline-start: 3rem !important; -} - -.rz-pe-12 { - padding-inline-end: 3rem !important; -} - -.rz-m-auto { - margin: auto !important; -} - -.rz-my-auto, -.rz-mt-auto { - margin-top: auto !important; -} - -.rz-mx-auto, -.rz-mr-auto { - margin-right: auto !important; -} - -.rz-my-auto, -.rz-mb-auto { - margin-bottom: auto !important; -} - -.rz-mx-auto, -.rz-ml-auto { - margin-left: auto !important; -} - -.rz-ms-auto { - margin-inline-start: auto !important; -} - -.rz-me-auto { - margin-inline-end: auto !important; +.rz-me-auto { + margin-inline-end: auto !important; } @media (min-width: 576px) { @@ -13120,7 +7630,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -13129,7 +7640,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -13138,7 +7650,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -13147,7 +7660,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -13156,7 +7670,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -13165,7 +7680,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h1, @@ -13175,7 +7691,8 @@ h1, font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2, @@ -13185,7 +7702,8 @@ h2, font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3, @@ -13195,7 +7713,8 @@ h3, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4, @@ -13205,7 +7724,8 @@ h4, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5, @@ -13215,171 +7735,55 @@ h5, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h6, -.h6 { - font-size: 0.75rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h1.text-thin, -.h1.text-thin { - font-size: 3rem; - font-weight: 300; + margin-block-start: 0; + margin-block-end: 0.5rem; } - -h2.text-thin, -.h2.text-thin { - font-size: 2rem; - font-weight: 300; -} - -h3.text-thin, -.h3.text-thin { - font-size: 1.25rem; - font-weight: 300; -} - -h4.text-thin, -.h4.text-thin { - font-size: 1rem; - font-weight: 300; -} - -h5.text-thin, -.h5.text-thin { - font-size: 0.875rem; - font-weight: 300; -} - -h6.text-thin, -.h6.text-thin { - font-size: 0.75rem; - font-weight: 300; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; } .rz-text-display-h1 { @@ -13389,7 +7793,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -13399,7 +7804,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -13409,7 +7815,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -13419,7 +7826,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -13429,7 +7837,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -13439,7 +7848,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -13449,7 +7859,8 @@ h6.text-thin, font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -13459,7 +7870,8 @@ h6.text-thin, font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -13469,7 +7881,8 @@ h6.text-thin, font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -13479,7 +7892,8 @@ h6.text-thin, font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -13489,7 +7903,8 @@ h6.text-thin, font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -13499,7 +7914,8 @@ h6.text-thin, font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -13509,7 +7925,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -13519,7 +7936,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -13529,7 +7947,8 @@ h6.text-thin, font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -13539,7 +7958,8 @@ h6.text-thin, font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -13549,7 +7969,8 @@ h6.text-thin, font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -13559,7 +7980,8 @@ h6.text-thin, font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -13570,7 +7992,8 @@ h6.text-thin, letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -13804,26 +8227,24 @@ p { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } label { - margin-bottom: 0; -} - -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; + margin-block-start: 0; + margin-block-end: 0; } ::selection { @@ -13839,8 +8260,9 @@ label { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -13851,7 +8273,7 @@ label { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -13872,14 +8294,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -13904,6 +8318,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -13927,98 +8358,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: var(--rz-primary); - --rz-button-base-color: var(--rz-on-primary); - --rz-button-background-size: auto; - --rz-button-border-radius: var(--rz-border-radius); - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-hover-background-size: auto; - --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); - --rz-button-focus-background-size: auto; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); - --rz-button-active-background-size: auto; - --rz-button-disabled-opacity: 0.2; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -14026,18 +8431,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -14062,6 +8455,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -14093,59 +8498,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -14290,46 +8642,99 @@ p-button[type] { background-color: var(--rz-danger-dark); color: var(--rz-on-danger-dark); } -.rz-button.rz-danger.rz-shade-darker { - background-color: var(--rz-danger-darker); - color: var(--rz-on-danger-darker); +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); } -.rz-button.rz-danger.rz-variant-flat { +.rz-button.rz-base.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-danger.rz-variant-flat:focus-visible { - outline-color: var(--rz-danger); +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); } -.rz-button.rz-success { - background-color: var(--rz-success); - color: var(--rz-on-success); -} -.rz-button.rz-success.rz-shade-lighter { - background-color: var(--rz-success-lighter); - color: var(--rz-on-success-lighter); -} -.rz-button.rz-success.rz-shade-light { - background-color: var(--rz-success-light); - color: var(--rz-on-success-light); +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-button.rz-success.rz-shade-default { - background-color: var(--rz-success); - color: var(--rz-on-success); +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; } -.rz-button.rz-success.rz-shade-dark { - background-color: var(--rz-success-dark); - color: var(--rz-on-success-dark); +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); } -.rz-button.rz-success.rz-shade-darker { - background-color: var(--rz-success-darker); - color: var(--rz-on-success-darker); + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); } -.rz-button.rz-success.rz-variant-flat { +.rz-button.rz-dark.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-success.rz-variant-flat:focus-visible { - outline-color: var(--rz-success); +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); } .rz-button.rz-variant-outlined.rz-primary { @@ -14361,59 +8766,6 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - .rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } @@ -14588,76 +8940,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); -} -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); -} -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -14818,15 +9175,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -14835,7 +9240,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -14845,51 +9250,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -14897,13 +9302,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -14912,7 +9317,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -14930,19 +9335,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: 10rem; - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 700; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -14984,15 +9378,6 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-900); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -15143,6 +9528,41 @@ p-button[type] { color: var(--rz-on-success-darker); } +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + .rz-variant-outlined.rz-badge-primary { background-color: transparent; } @@ -15167,22 +9587,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} - -.rz-variant-outlined.rz-badge-dark { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} - .rz-variant-outlined.rz-badge-secondary { background-color: transparent; } @@ -15327,6 +9731,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -15346,16 +9790,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -15470,20 +9904,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -15497,57 +9951,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: 0.875rem; - --rz-input-height: 2.25rem; - --rz-input-line-height: 1.429; - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-hover-border: var(--rz-border-hover); - --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-focus-border: var(--rz-border-focus); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); - --rz-input-disabled-background-color: var(--rz-base-100); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 1; - --rz-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -15558,26 +9987,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -15596,15 +10028,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-base-200); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: none; -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -15623,14 +10046,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: var(--rz-border-base-200); - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -15645,18 +10060,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-normal); - --rz-sidebar-background-color: var(--rz-base-800); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -15665,7 +10072,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -15684,17 +10091,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-100); - --rz-card-shadow: var(--rz-shadow-2); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -15724,13 +10122,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -15744,32 +10135,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-secondary); - --rz-accordion-hover-color: var(--rz-secondary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -15788,16 +10155,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -15805,20 +10172,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -15828,7 +10196,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -15837,10 +10205,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -15848,34 +10212,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: 2px; - --rz-panel-toggle-icon-background-color: var(--rz-base-200); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-secondary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -15926,33 +10282,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-200); - --rz-sidebar-toggle-color: var(--rz-base-900); - --rz-sidebar-toggle-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-secondary); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -15986,37 +10328,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: var(--rz-border-normal); - --rz-menu-border-radius: 2px; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-hover-background-color: var(--rz-secondary-light); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-text-color); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: none; - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-secondary); - --rz-menu-top-item-hover-background-color: transparent; - --rz-menu-top-item-selected-color: var(--rz-secondary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-secondary); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -16041,7 +10355,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16063,6 +10378,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -16071,7 +10387,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -16084,7 +10401,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -16114,13 +10432,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -16129,7 +10447,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -16141,7 +10460,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16165,16 +10485,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -16191,7 +10511,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -16251,65 +10572,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: var(--rz-text-contrast-color); - --rz-panel-menu-background-color: var(--rz-base-800); - --rz-panel-menu-hover-background-color: rgba(0, 0, 0, 0.3); - --rz-panel-menu-hover-color: var(--rz-text-contrast-color); - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: var(--rz-border-base-900); - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: var(--rz-base-900); - --rz-panel-menu-item-background-color: var(--rz-base-900); - --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); - --rz-panel-menu-item-active-indicator: var(--rz-secondary); - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: inherit; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 1; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -16319,10 +10595,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -16334,11 +10611,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -16349,8 +10626,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -16359,7 +10636,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -16372,7 +10650,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -16381,20 +10659,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -16418,67 +10698,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-200); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-secondary); - --rz-profile-menu-item-hover-background-color: var(--rz-secondary); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -16499,19 +10764,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -16531,17 +10799,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: none; + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -16549,26 +10811,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-200); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-secondary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-secondary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-text-secondary-color); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -16622,14 +10866,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -16639,7 +10885,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -16662,54 +10909,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: 2px; - --rz-checkbox-border-width: inherit; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-secondary); - --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); - --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); - --rz-checkbox-checked-color: var(--rz-on-secondary); - --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: transparent; - --rz-checkbox-checked-icon-border-radius: 0; - --rz-checkbox-icon-width: var(--rz-body-font-size); - --rz-checkbox-icon-height: var(--rz-body-font-size); - --rz-checkbox-icon-font-size: var(--rz-body-font-size); - --rz-checkbox-tri-icon-width: var(--rz-body-font-size); - --rz-checkbox-tri-icon-height: var(--rz-body-font-size); - --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -16721,10 +10956,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -16743,10 +10980,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -16803,17 +11037,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-400); - --rz-switch-checked-background-color: var(--rz-secondary); - --rz-switch-box-shadow: none; - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -16833,10 +11058,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -16858,8 +11083,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -16868,7 +11093,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -16879,36 +11104,24 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-checked-circle-background-color); transform: translateX(1.2rem); } - -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-secondary); - --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); - --rz-radio-checked-background-color: var(--rz-secondary); - --rz-radio-checked-hover-background-color: var(--rz-secondary-light); - --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-base-background-color); - --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); - --rz-radio-circle-hover-background-color: var(--rz-base-100); - --rz-radio-icon-width: 0.5rem; - --rz-radio-icon-height: 0.5rem; - --rz-radio-checked-border: var(--rz-input-border); + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -16920,7 +11133,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -16943,10 +11157,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -17006,26 +11217,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-normal); - --rz-fieldset-border-radius: 0; - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-tertiary-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-200); - --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -17054,7 +11250,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -17072,8 +11269,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -17088,36 +11287,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); - --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); - --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); - --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); - --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); - --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); - --rz-dropdown-item-transition: none; - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-100); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -17144,15 +11313,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -17160,8 +11330,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -17196,7 +11366,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -17289,28 +11460,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -17327,10 +11502,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -17339,7 +11515,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -17361,24 +11538,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -17388,7 +11549,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -17431,7 +11593,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -17472,39 +11635,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -17514,9 +11667,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -17530,11 +11680,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -17543,36 +11693,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-background-color); - --rz-slider-border: var(--rz-border-normal); - --rz-slider-border-radius: var(--rz-border-radius); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-secondary-lighter); - --rz-slider-range-border: var(--rz-border-secondary-light); - --rz-slider-handle-width: 0.75rem; - --rz-slider-handle-height: 1.5rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-secondary); - --rz-slider-handle-border: none; - --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-secondary-light); - --rz-slider-handle-hover-border: none; - --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-100); - --rz-slider-disabled-range-border: var(--rz-border-normal); - --rz-slider-disabled-handle-border: none; - --rz-slider-disabled-handle-background-color: var(--rz-base-300); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -17599,11 +11721,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -17612,7 +11734,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -17637,19 +11759,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-secondary); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.3; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-secondary); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -17707,16 +11818,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -17737,17 +11840,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: var(--rz-base-backgorund-color); - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-secondary); - --rz-selectbar-selected-color: var(--rz-on-secondary); - --rz-selectbar-selected-border: var(--rz-border-secondary); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -17755,7 +11849,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -17763,13 +11857,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -17778,157 +11872,102 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; - display: inline-block; - background-color: var(--rz-selectbar-background-color); - color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -.rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; - display: inline-block; - background-color: var(--rz-selectbar-background-color); - color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-md.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -.rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); - border: var(--rz-selectbar-border); - border-radius: 0; -} -.rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); -} -.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { - background-color: var(--rz-selectbar-selected-background-color); - color: var(--rz-selectbar-selected-color); - border: var(--rz-selectbar-selected-border); -} - -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-200); - --rz-datepicker-header-color: var(--rz-text-secondary-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); - --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); - --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); - --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); - --rz-datepicker-calendar-border: var(--rz-border-base-100); - --rz-datepicker-calendar-border-radius: 0; - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-secondary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: none; - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-200); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-secondary); - --rz-timepicker-button-color: var(--rz-on-secondary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: 2px; - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); } -.rz-calendar { +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -17936,9 +11975,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -17976,148 +12015,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -18148,47 +12214,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-secondary); - --rz-numeric-button-disabled-background-color: var(--rz-base-300); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-on-secondary); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -18196,9 +12249,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -18206,49 +12259,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); -} - -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -:root { - --rz-upload-button-bar-background-color: var(--rz-base-200); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-300); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary); - --rz-upload-choose-color: var(--rz-on-secondary); - --rz-upload-choose-hover-background-color: var(--rz-secondary); - --rz-upload-choose-hover-color: var(--rz-on-secondary); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-200); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -18335,101 +12369,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: none; - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-secondary-lighter); - --rz-grid-hover-color: var(--rz-on-secondary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: var(--rz-secondary-dark); - --rz-grid-selected-color: var(--rz-on-secondary-dark); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: none; - --rz-grid-header-background-color: var(--rz-base-200); - --rz-grid-header-font-size: 0.75rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: uppercase; - --rz-grid-header-color: var(--rz-text-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-300); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-color); - --rz-grid-foot-background-color: var(--rz-base-200); - --rz-grid-filter-background-color: var(--rz-base-100); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: var(--rz-border-normal); - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-secondary); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-base-200); - --rz-grid-clear-filter-button-background-color: var(--rz-secondary); - --rz-grid-clear-filter-button-color: var(--rz-on-secondary); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: var(--rz-border-normal); - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: var(--rz-base-100); - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-background-color); - --rz-grid-loading-indicator-color: currentColor; - --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-200); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-color); - --rz-column-drag-handle-hover-color: var(--rz-text-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -18453,10 +12392,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -18500,8 +12443,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -18509,8 +12452,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -18536,11 +12479,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -18560,13 +12504,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -18586,11 +12531,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -18598,11 +12543,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -18616,10 +12561,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -18635,7 +12580,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -18687,7 +12632,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -18697,11 +12642,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -18724,13 +12669,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -18751,21 +12700,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -18777,7 +12726,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -18823,7 +12772,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -18837,14 +12785,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -18946,10 +12894,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -18960,31 +12904,18 @@ a:focus-visible .rz-fieldset-toggler { line-height: calc(1.25rem - var(--rz-border-width) * 2); border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-start-end-radius: 0; - border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); - border-end-end-radius: 0; - } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { - text-indent: 2.25rem; - } -} -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } } - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -19014,31 +12945,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -19104,7 +13013,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -19114,18 +13023,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -19134,9 +13082,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -19178,16 +13128,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -19220,7 +13176,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -19271,26 +13227,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -19303,7 +13263,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -19323,7 +13283,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -19331,312 +13291,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: var(--rz-base-background-color); - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: var(--rz-border-normal); - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-base-background-color); - --rz-paginator-numeric-button-selected-color: var(--rz-primary); - --rz-paginator-numeric-button-selected-border: var(--rz-border-base-200); - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-200); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-200); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-200); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-200); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-secondary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-100); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -19646,24 +13566,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-secondary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-secondary-light); - --rz-tree-node-hover-color: var(--rz-on-secondary-light); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -19680,12 +13584,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -19694,13 +13598,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -19710,15 +13620,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -19730,7 +13642,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -19749,25 +13661,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: var(--rz-base-background-color); - --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-200); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-datalist-item-border: var(--rz-border-base-200); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -19786,13 +13684,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -19801,24 +13700,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -19840,7 +13732,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -19851,23 +13744,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -19877,17 +13770,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -19900,70 +13794,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-300); - --rz-scheduler-minor-border-color: var(--rz-base-200); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-tertiary-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-200); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); - --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-secondary-color); - --rz-scheduler-view-button-background-color: var(--rz-base-background-color); - --rz-scheduler-view-selected-color: var(--rz-on-secondary); - --rz-scheduler-view-selected-background-color: var(--rz-secondary); - --rz-scheduler-view-selected-border-color: var(--rz-secondary); - --rz-scheduler-header-background-color: var(--rz-base-200); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: inherit; - --rz-scheduler-header-border: var(--rz-border-normal); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -19979,7 +13811,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -19992,12 +13824,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -20007,27 +13839,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -20062,8 +13895,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -20123,16 +13956,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -20149,25 +13982,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -20181,7 +14027,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -20193,24 +14039,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -20220,11 +14066,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -20252,7 +14098,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -20268,7 +14114,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -20276,7 +14122,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -20325,7 +14171,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -20374,7 +14220,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -20420,8 +14266,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20430,15 +14276,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20471,8 +14317,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20481,15 +14327,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20519,35 +14365,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); - --rz-tabs-border: var(--rz-border-base-200); - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-200); - --rz-tabs-tab-color: var(--rz-secondary); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); - --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); - --rz-tabs-tab-hover-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-secondary-light); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -20601,7 +14420,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -20644,7 +14464,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -20664,7 +14484,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -20699,6 +14519,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -20728,22 +14551,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-tabview-panel { padding: var(--rz-tabs-padding); } - -.rz-tabview-left-icon { - font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-info); - --rz-tooltip-color: var(--rz-on-info); - --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: 0.875rem; + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -20769,8 +14584,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20787,8 +14602,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20832,29 +14647,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-100); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 0.6875rem 1.25rem; - --rz-dialog-title-font-size: 1.25rem; - --rz-dialog-title-line-height: 1.875rem; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: middle; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-800); - --rz-dialog-border-radius: var(--rz-border-radius); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -20867,6 +14661,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -20881,37 +14676,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -20923,7 +14736,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -20937,7 +14750,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -20950,42 +14763,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -21018,161 +14804,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); -} - -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); -} - -.rz-dialog-side-titlebar-close { - float: right; -} -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); -} -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; -} -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); -} - -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } } - -.rz-growl { +.rz-notification { + box-sizing: border-box; position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-growl-item-container { +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-growl-item { +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); border-radius: var(--rz-notification-border-radius); box-shadow: var(--rz-notification-shadow); padding: var(--rz-notification-padding); } - -.rz-growl-message-success .rz-growl-item { +.rz-notification-success .rz-notification-item { color: var(--rz-notification-success-color); background-color: var(--rz-notification-success-background-color); } - -.rz-growl-message-warn .rz-growl-item { +.rz-notification-warn .rz-notification-item { color: var(--rz-notification-warning-color); background-color: var(--rz-notification-warning-background-color); } - -.rz-growl-message-error .rz-growl-item { +.rz-notification-error .rz-notification-item { color: var(--rz-notification-error-color); background-color: var(--rz-notification-error-background-color); } - -.rz-growl-message-info .rz-growl-item { +.rz-notification-info .rz-notification-item { color: var(--rz-notification-info-color); background-color: var(--rz-notification-info-background-color); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-icon-close { - float: right; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close:before { - content: "close"; + +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -21197,16 +14947,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: var(--rz-secondary); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } body:not(.rz-default-scrollbars)::-webkit-scrollbar, @@ -21255,14 +14997,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-100); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -21292,7 +15028,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -21304,12 +15040,15 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -21319,11 +15058,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -21333,24 +15067,11 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -21360,14 +15081,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -21379,18 +15094,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-text-secondary-color); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-secondary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -21439,19 +15145,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-200); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-secondary); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -21479,6 +15174,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -21539,6 +15235,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -21550,6 +15249,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -21570,6 +15272,26 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -21615,48 +15337,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -21720,6 +15400,27 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -21762,6 +15463,69 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-success); } +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + .rz-progressbar-circular-lg { width: 6rem; height: 6rem; @@ -21786,19 +15550,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { font-size: calc(var(--rz-progressbar-font-size) * 0.375); } -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); -} - .rz-chart { + box-sizing: border-box; position: relative; height: 300px; } @@ -22570,6 +16323,10 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -22693,6 +16450,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -22719,24 +16477,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-background-color); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-background-color); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-secondary); - --rz-editor-button-selected-color: var(--rz-on-secondary); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -22921,30 +16663,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: var(--rz-border-radius); - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -23021,7 +16739,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -23093,7 +16811,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -23106,7 +16824,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -23121,6 +16839,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -23132,27 +16851,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -23168,15 +16884,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -23188,15 +16902,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-secondary-color); - --rz-splitter-bar-color-active: var(--rz-on-secondary); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-secondary); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -23218,7 +16925,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23233,7 +16940,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23320,11 +17027,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: var(--rz-body-background-color); +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -23358,8 +17082,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -23367,8 +17101,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -23382,22 +17116,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: 4px; - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -24226,30 +17946,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -24268,16 +17993,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -24653,279 +18375,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -25270,36 +18992,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-100); - --rz-form-field-filled-hover-background-color: var(--rz-base-200); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: none; - --rz-form-field-focus-shadow: none; - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -25309,11 +19001,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -25322,12 +19015,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -25355,20 +19048,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -25413,33 +19108,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -25456,16 +19154,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -25473,33 +19171,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -25516,27 +19214,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -26081,23 +19767,1579 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { width: 100%; height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #dadfe2; + --rz-base-50: #ffffff; + --rz-base-100: #f6f7fa; + --rz-base-200: #e9edf0; + --rz-base-300: #dadfe2; + --rz-base-400: #c1c9cb; + --rz-base-500: #95a4a8; + --rz-base-600: #77858b; + --rz-base-700: #545e61; + --rz-base-800: #3a474d; + --rz-base-900: #28363c; + --rz-base-light: #e9edf0; + --rz-base-lighter: #ffffff; + --rz-base-dark: #77858b; + --rz-base-darker: #28363c; + --rz-primary: #598087; + --rz-primary-light: #6d8f95; + --rz-primary-lighter: rgba(89, 128, 135, 0.16); + --rz-primary-dark: #52767c; + --rz-primary-darker: #436065; + --rz-secondary: #80a4ab; + --rz-secondary-light: #8fafb5; + --rz-secondary-lighter: rgba(128, 164, 171, 0.2); + --rz-secondary-dark: #76979d; + --rz-secondary-darker: #607b80; + --rz-info: #2cc8c8; + --rz-info-light: #4ed1d1; + --rz-info-lighter: rgba(44, 200, 200, 0.2); + --rz-info-dark: #25a8a8; + --rz-info-darker: #219696; + --rz-success: #5dbf74; + --rz-success-light: #77c98a; + --rz-success-lighter: rgba(93, 191, 116, 0.16); + --rz-success-dark: #4ea061; + --rz-success-darker: #468f57; + --rz-warning: #fac152; + --rz-warning-light: #fbcb6e; + --rz-warning-lighter: rgba(250, 193, 82, 0.2); + --rz-warning-dark: #d2a245; + --rz-warning-darker: #bc913e; + --rz-danger: #f9777f; + --rz-danger-light: #fa8d93; + --rz-danger-lighter: rgba(249, 119, 127, 0.2); + --rz-danger-dark: #d1646b; + --rz-danger-darker: #bb595f; + --rz-on-base: #28363c; + --rz-on-base-light: #28363c; + --rz-on-base-lighter: #28363c; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #598087; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #80a4ab; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #2cc8c8; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #5dbf74; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #fac152; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f9777f; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 2px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-secondary); + --rz-accordion-hover-color: var(--rz-secondary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: var(--rz-primary); + --rz-button-base-color: var(--rz-on-primary); + --rz-button-background-size: auto; + --rz-button-border-radius: var(--rz-border-radius); + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-hover-background-size: auto; + --rz-button-focus-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-button-focus-gradient: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); + --rz-button-focus-background-size: auto; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-button-active-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + --rz-button-active-background-size: auto; + --rz-button-disabled-opacity: 0.2; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-100); + --rz-card-shadow: var(--rz-shadow-2); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: 2px; + --rz-checkbox-border-width: inherit; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-secondary); + --rz-checkbox-checked-hover-background-color: var(--rz-secondary-light); + --rz-checkbox-checked-disabled-background-color: var(--rz-secondary); + --rz-checkbox-checked-color: var(--rz-on-secondary); + --rz-checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: transparent; + --rz-checkbox-checked-icon-border-radius: 0; + --rz-checkbox-icon-width: var(--rz-body-font-size); + --rz-checkbox-icon-height: var(--rz-body-font-size); + --rz-checkbox-icon-font-size: var(--rz-body-font-size); + --rz-checkbox-tri-icon-width: var(--rz-body-font-size); + --rz-checkbox-tri-icon-height: var(--rz-body-font-size); + --rz-checkbox-tri-icon-font-size: var(--rz-body-font-size); + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: var(--rz-border-radius); + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: var(--rz-border-radius); + --rz-colorpicker-item-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: var(--rz-white) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px; + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: var(--rz-base-background-color); + --rz-datalist-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-200); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-datalist-item-border: var(--rz-border-base-200); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-input-value-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-input-value-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-secondary-color); + --rz-datepicker-header-background-color: var(--rz-base-200); + --rz-datepicker-header-padding-block: 0.25rem; + --rz-datepicker-header-padding-inline: 0.25rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0; + --rz-datepicker-calendar-padding-inline: 0; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-secondary-light); + --rz-datepicker-calendar-hover-background-color: var(--rz-secondary-light); + --rz-datepicker-calendar-selected-color: var(--rz-on-secondary-dark); + --rz-datepicker-calendar-selected-background-color: var(--rz-secondary-dark); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary); + --rz-datepicker-calendar-border: var(--rz-border-base-100); + --rz-datepicker-calendar-border-radius: 0; + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-secondary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: none; + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-200); + --rz-timepicker-separator-color: var(--rz-text-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-secondary); + --rz-timepicker-button-background-color: var(--rz-secondary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: 2px; + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-100); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 0.6875rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.25rem; + --rz-dialog-title-line-height: 1.875rem; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: middle; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-800); + --rz-dialog-border-radius: var(--rz-border-radius); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-secondary-light); + --rz-dropdown-item-selected-background-color: var(--rz-secondary-dark); + --rz-dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-dropdown-item-hover-color: var(--rz-on-secondary-light); + --rz-dropdown-item-selected-color: var(--rz-on-secondary-dark); + --rz-dropdown-item-selected-hover-background-color: var(--rz-secondary); + --rz-dropdown-item-selected-hover-color: var(--rz-on-secondary); + --rz-dropdown-item-transition: none; + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-100); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-background-color); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-background-color); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-secondary); + --rz-editor-button-selected-color: var(--rz-on-secondary); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-normal); + --rz-fieldset-border-radius: 0; + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-tertiary-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-200); + --rz-fieldset-toggle-color: var(--rz-text-tertiary-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: var(--rz-border-base-200); + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-100); + --rz-form-field-filled-hover-background-color: var(--rz-base-200); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: none; + --rz-form-field-focus-shadow: none; + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(249, 119, 127, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-text-secondary-color); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-secondary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: none; + /* Grid */ + --rz-grid-data-border-shadow: none; + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-secondary-lighter); + --rz-grid-hover-color: var(--rz-on-secondary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-secondary-dark); + --rz-grid-selected-color: var(--rz-on-secondary-dark); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: none; + --rz-grid-header-background-color: var(--rz-base-200); + --rz-grid-header-font-size: 0.75rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: uppercase; + --rz-grid-header-color: var(--rz-text-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-300); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-color); + --rz-grid-foot-background-color: var(--rz-base-200); + --rz-grid-filter-background-color: var(--rz-base-100); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: var(--rz-border-normal); + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-secondary); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-100); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: var(--rz-border-normal); + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-100); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-secondary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-background-color); + --rz-grid-loading-indicator-color: currentColor; + --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-200); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-color); + --rz-column-drag-handle-hover-color: var(--rz-text-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-200); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: none; + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-hover-border: var(--rz-border-hover); + --rz-input-focus-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-focus-border: var(--rz-border-focus); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.03); + --rz-input-disabled-background-color: var(--rz-base-100); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 1; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: var(--rz-body-background-color); + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-100); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: var(--rz-border-normal); + --rz-menu-border-radius: 2px; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-hover-background-color: var(--rz-secondary-light); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-text-color); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-secondary-light); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: none; + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-secondary); + --rz-menu-top-item-hover-background-color: transparent; + --rz-menu-top-item-selected-color: var(--rz-secondary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-secondary); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-secondary); + --rz-numeric-button-disabled-background-color: var(--rz-base-300); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-on-secondary); + /* Overlay */ + --rz-overlay-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-100); + /* Pager */ + --rz-pager-background-color: var(--rz-base-background-color); + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: var(--rz-border-normal); + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-200); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-200); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-base-background-color); + --rz-pager-numeric-button-selected-color: var(--rz-primary); + --rz-pager-numeric-button-selected-border: var(--rz-border-base-200); + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-200); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-200); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-secondary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-900); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.3); + --rz-panel-menu-item-active-color: var(--rz-text-contrast-color); + --rz-panel-menu-item-active-background-color: var(--rz-base-900); + --rz-panel-menu-item-active-indicator: var(--rz-secondary); + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: rgba(0, 0, 0, 0.4); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: rgba(0, 0, 0, 0.6); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: inherit; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 1; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: 2px; + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-secondary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-200); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-secondary); + --rz-profile-menu-item-hover-background-color: var(--rz-secondary); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-200); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-secondary); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-secondary); + --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1); + --rz-radio-checked-background-color: var(--rz-secondary); + --rz-radio-checked-hover-background-color: var(--rz-secondary-light); + --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-base-background-color); + --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03); + --rz-radio-circle-hover-background-color: var(--rz-base-100); + --rz-radio-icon-width: 0.5rem; + --rz-radio-icon-height: 0.5rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-secondary); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.3; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-secondary); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-300); + --rz-scheduler-minor-border-color: var(--rz-base-200); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-tertiary-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-200); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-secondary); + --rz-scheduler-prev-next-button-color: var(--rz-on-secondary); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-secondary-color); + --rz-scheduler-view-button-background-color: var(--rz-base-background-color); + --rz-scheduler-view-selected-color: var(--rz-on-secondary); + --rz-scheduler-view-selected-background-color: var(--rz-secondary); + --rz-scheduler-view-selected-border-color: var(--rz-secondary); + --rz-scheduler-header-background-color: var(--rz-base-200); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: inherit; + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: var(--rz-secondary); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: var(--rz-base-backgorund-color); + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-secondary); + --rz-selectbar-selected-color: var(--rz-on-secondary); + --rz-selectbar-selected-border: var(--rz-border-secondary); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-200); + --rz-sidebar-toggle-color: var(--rz-base-900); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-secondary); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-normal); + --rz-sidebar-background-color: var(--rz-base-800); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: var(--rz-border-radius); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-secondary-lighter); + --rz-slider-range-border: var(--rz-border-secondary-light); + --rz-slider-handle-width: 0.75rem; + --rz-slider-handle-height: 1.5rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-secondary); + --rz-slider-handle-border: none; + --rz-slider-handle-border-radius: calc(var(--rz-border-radius) / 2); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-secondary-light); + --rz-slider-handle-hover-border: none; + --rz-slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2); + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-100); + --rz-slider-disabled-range-border: var(--rz-border-normal); + --rz-slider-disabled-handle-border: none; + --rz-slider-disabled-handle-background-color: var(--rz-base-300); + /* SplitButton */ + --rz-splitbutton-menu-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06); + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-secondary); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-secondary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ --rz-gap: 1rem; -} - -.rz-picklist-source-wrapper, -.rz-picklist-target-wrapper { - flex: 1; - --rz-gap: 0.5rem; - overflow: hidden; -} -.rz-picklist-source-wrapper .rz-listbox, -.rz-picklist-target-wrapper .rz-listbox { - width: 100%; - height: 100%; -} - -.rz-picklist-buttons.rz-flex-row .rzi { - transform: rotate(90deg); + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-200); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-secondary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-secondary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-text-secondary-color); + /* Switch */ + --rz-switch-background-color: var(--rz-base-400); + --rz-switch-checked-background-color: var(--rz-secondary); + --rz-switch-box-shadow: none; + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + --rz-tabs-border: var(--rz-border-base-200); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-200); + --rz-tabs-tab-color: var(--rz-secondary); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-secondary); + --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); + --rz-tabs-tab-hover-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-secondary-light); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-info); + --rz-tooltip-color: var(--rz-on-info); + --rz-tooltip-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-secondary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: calc(var(--rz-border-radius) / 2); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-secondary-light); + --rz-tree-node-hover-color: var(--rz-on-secondary-light); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-200); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary); + --rz-upload-choose-color: var(--rz-on-secondary); + --rz-upload-choose-hover-background-color: var(--rz-secondary); + --rz-upload-choose-hover-color: var(--rz-on-secondary); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-200); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/standard-base.css b/_content/Radzen.Blazor/css/standard-base.css index 1df31ab..c77a069 100755 --- a/_content/Radzen.Blazor/css/standard-base.css +++ b/_content/Radzen.Blazor/css/standard-base.css @@ -35,631 +35,175 @@ } @font-face { - font-family: "Material Icons"; + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); + font-weight: 100 700; } @font-face { font-family: "Source Sans Pro"; - font-weight: 200; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + font-weight: 200 900; } @font-face { font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); +*, +*::before, +*::after { + box-sizing: inherit; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-text-title-color { + color: var(--rz-base-900) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-text-color { + color: var(--rz-base-800) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-text-contrast-color { + color: var(--rz-white) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f4f5f9; - --rz-base-200: #e9eaed; - --rz-base-300: #e0e1e4; - --rz-base-400: #c9cacd; - --rz-base-500: #afafb2; - --rz-base-600: #8d8e90; - --rz-base-700: #707072; - --rz-base-800: #4f4f50; - --rz-base-900: #262526; - --rz-primary: #1151f3; - --rz-primary-light: #376df5; - --rz-primary-lighter: rgba(17, 81, 243, 0.16); - --rz-primary-dark: #0e44cc; - --rz-primary-darker: #0d3eb9; - --rz-secondary: #5d89f7; - --rz-secondary-light: #779cf8; - --rz-secondary-lighter: rgba(93, 137, 247, 0.16); - --rz-secondary-dark: #4e73cf; - --rz-secondary-darker: #4768bc; - --rz-info: #12a4f5; - --rz-info-light: #38b3f7; - --rz-info-lighter: rgba(18, 164, 245, 0.16); - --rz-info-dark: #0f8ace; - --rz-info-darker: #0e7dba; - --rz-success: #009b51; - --rz-success-light: #29ab6d; - --rz-success-lighter: rgba(0, 155, 81, 0.16); - --rz-success-dark: #008244; - --rz-success-darker: #00763e; - --rz-warning: #ffae11; - --rz-warning-light: #ffbb37; - --rz-warning-lighter: rgba(255, 174, 17, 0.16); - --rz-warning-dark: #d6920e; - --rz-warning-darker: #c2840d; - --rz-danger: #f31155; - --rz-danger-light: #f53770; - --rz-danger-lighter: rgba(243, 17, 85, 0.16); - --rz-danger-dark: #cc0e47; - --rz-danger-darker: #b90d41; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #1151f3; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #5d89f7; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #12a4f5; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #009b51; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #ffae11; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f31155; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #376df5; - --rz-series-2: #64dfdf; - --rz-series-3: #f68769; - --rz-series-4: #c161e2; - --rz-series-5: #fdd07a; - --rz-series-6: #f8629b; - --rz-series-7: #74d062; - --rz-series-8: #84a7ff; - --rz-series-9: #4d99f9; - --rz-series-10: #8cecec; - --rz-series-11: #fab793; - --rz-series-12: #da88ee; - --rz-series-13: #fee3ab; - --rz-series-14: #fb89c3; - --rz-series-15: #a2e389; - --rz-series-16: #b5caff; - --rz-series-17: #1750f3; - --rz-series-18: #46d7d7; - --rz-series-19: #f46e4c; - --rz-series-20: #b343db; - --rz-series-21: #fdc55f; - --rz-series-22: #f64485; - --rz-series-23: #58c544; - --rz-series-24: #6a93ff; + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 1px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-primary-light); +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); -} - -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-display-none { + display: none !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-display-block { + display: block !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-display-inline { + display: inline !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-display-inline-block { + display: inline-block !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-display-flex { + display: flex !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-display-inline-flex { + display: inline-flex !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-display-grid { + display: grid !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); -} - -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; -} - -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; -} - -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; -} - -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; -} - -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; -} - -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; -} - -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; -} - -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; -} - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; -} - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; -} - -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; -} - -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; -} - -.rz-display-none { - display: none !important; -} - -.rz-display-block { - display: block !important; -} - -.rz-display-inline { - display: inline !important; -} - -.rz-display-inline-block { - display: inline-block !important; -} - -.rz-display-flex { - display: flex !important; -} - -.rz-display-inline-flex { - display: inline-flex !important; -} - -.rz-display-grid { - display: grid !important; -} - -.rz-display-inline-grid { - display: inline-grid !important; +.rz-display-inline-grid { + display: inline-grid !important; } @media (min-width: 576px) { @@ -902,6 +446,10 @@ $rz-shadow-10: none !default; */ color: var(--rz-black) !important; } +.rz-color-base { + color: var(--rz-base) !important; +} + .rz-color-base-50 { color: var(--rz-base-50) !important; } @@ -942,6 +490,22 @@ $rz-shadow-10: none !default; */ color: var(--rz-base-900) !important; } +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + .rz-color-primary { color: var(--rz-primary) !important; } @@ -1062,6 +626,26 @@ $rz-shadow-10: none !default; */ color: var(--rz-danger-darker) !important; } +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + .rz-color-on-primary { color: var(--rz-on-primary) !important; } @@ -1286,6 +870,10 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-black) !important; } +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + .rz-background-color-base-50 { background-color: var(--rz-base-50) !important; } @@ -1326,6 +914,22 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-base-900) !important; } +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + .rz-background-color-primary { background-color: var(--rz-primary) !important; } @@ -1446,6 +1050,26 @@ $rz-shadow-10: none !default; */ background-color: var(--rz-danger-darker) !important; } +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + .rz-background-color-on-primary { background-color: var(--rz-on-primary) !important; } @@ -1670,6 +1294,10 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + .rz-border-color-base-50 { border-color: var(--rz-base-50) !important; } @@ -1710,6 +1338,22 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + .rz-border-color-primary { border-color: var(--rz-primary) !important; } @@ -1830,6 +1474,26 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-color-on-primary { border-color: var(--rz-on-primary) !important; } @@ -2058,6 +1722,12 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-black) !important; } +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + .rz-border-base-50 { border-width: var(--rz-border-width); border-style: solid; @@ -2118,6 +1788,30 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-base-900) !important; } +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + .rz-border-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2298,6 +1992,36 @@ $rz-shadow-10: none !default; */ border-color: var(--rz-danger-darker) !important; } +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + .rz-border-on-primary { border-width: var(--rz-border-width); border-style: solid; @@ -2641,6 +2365,10 @@ $rz-shadow-10: none !default; */ background-size: 100%; } +body { + margin: 0; +} + .rz-m-0 { margin: 0 !important; } @@ -7937,7 +7665,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -7946,7 +7675,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -7955,7 +7685,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -7964,7 +7695,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -7973,7 +7705,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -7982,125 +7715,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } .rz-text-display-h1 { @@ -8110,7 +7726,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -8120,7 +7737,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -8130,7 +7748,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -8140,7 +7759,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -8150,7 +7770,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -8160,7 +7781,8 @@ h6.rz-heading { font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -8170,7 +7792,8 @@ h6.rz-heading { font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -8180,7 +7803,8 @@ h6.rz-heading { font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -8190,7 +7814,8 @@ h6.rz-heading { font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -8200,7 +7825,8 @@ h6.rz-heading { font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -8210,7 +7836,8 @@ h6.rz-heading { font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -8220,7 +7847,8 @@ h6.rz-heading { font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -8230,7 +7858,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -8240,7 +7869,8 @@ h6.rz-heading { font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -8250,7 +7880,8 @@ h6.rz-heading { font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -8260,7 +7891,8 @@ h6.rz-heading { font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -8270,7 +7902,8 @@ h6.rz-heading { font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -8280,7 +7913,8 @@ h6.rz-heading { font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -8291,7 +7925,8 @@ h6.rz-heading { letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -8510,24 +8145,21 @@ h6.rz-heading { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; -} - .rz-layout ::selection { background-color: var(--rz-text-selection-background-color); color: var(--rz-text-selection-color); @@ -8536,8 +8168,9 @@ h6.rz-heading { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -8548,7 +8181,7 @@ h6.rz-heading { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -8569,14 +8202,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -8601,6 +8226,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -8624,98 +8266,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: #e9eaed; - --rz-button-base-color: #4f4f50; - --rz-button-background-size: 100% 0%, 100% 0%; - --rz-button-border-radius: 4px; - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: none; - --rz-button-hover-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); - --rz-button-hover-background-size: 100% 200%, 100% 0%; - --rz-button-focus-shadow: none; - --rz-button-focus-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); - --rz-button-focus-background-size: 100% 200%, 100% 0%; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: none; - --rz-button-active-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); - --rz-button-active-background-size: 100% 0%, 100% 200%; - --rz-button-disabled-opacity: 0.5; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -8723,18 +8339,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -8759,6 +8363,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -8790,59 +8406,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -9029,6 +8592,59 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-variant-outlined.rz-primary { background-color: transparent; } @@ -9058,73 +8674,20 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { +.rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); } -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); } - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-secondary { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); - color: var(--rz-secondary-light); -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); - color: var(--rz-secondary-light); -} -.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); - color: var(--rz-secondary); +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); } .rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); @@ -9285,76 +8848,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); -} -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); -} -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -9515,15 +9083,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -9532,7 +9148,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -9542,51 +9158,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -9594,13 +9210,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -9609,7 +9225,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -9627,19 +9243,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 600; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -9658,7 +9263,7 @@ p-button[type] { .rz-badge-primary { background-color: var(--rz-primary); - color: var(--rz-on-rimary); + color: var(--rz-on-primary); } .rz-badge-primary.rz-shade-lighter { background-color: var(--rz-primary-lighter); @@ -9681,18 +9286,9 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-800); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { - background-color: var(--rz-secondary-lighter); - color: var(--rz-secondary); + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); } .rz-badge-secondary.rz-shade-lighter { background-color: var(--rz-secondary-lighter); @@ -9840,44 +9436,63 @@ p-button[type] { color: var(--rz-on-success-darker); } -.rz-variant-outlined.rz-badge-primary { - background-color: transparent; +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); - color: var(--rz-primary-lighter); +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); } -.rz-variant-outlined.rz-badge-primary.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); - color: var(--rz-primary-light); +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); } -.rz-variant-outlined.rz-badge-primary.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); - color: var(--rz-primary); +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); } -.rz-variant-outlined.rz-badge-primary.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); - color: var(--rz-primary-dark); +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); } -.rz-variant-outlined.rz-badge-primary.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); - color: var(--rz-primary-darker); +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); } -.rz-variant-outlined.rz-badge-dark { +.rz-variant-outlined.rz-badge-primary { background-color: transparent; } -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); } .rz-variant-outlined.rz-badge-secondary { @@ -10024,6 +9639,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -10043,16 +9698,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -10167,20 +9812,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -10194,57 +9859,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: var(--rz-body-font-size); - --rz-input-height: 2.25rem; - --rz-input-line-height: var(--rz-body-line-height); - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: none; - --rz-input-hover-shadow: none; - --rz-input-hover-border: var(--rz-border-primary-light); - --rz-input-focus-shadow: 0px 0px 0px 1px var(--rz-white), 0px 0px 0px 3px rgba(17, 81, 243, 0.2); - --rz-input-focus-border: var(--rz-border-primary-light); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: none; - --rz-input-disabled-background-color: var(--rz-base-100); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 0.5; - --rz-input-transition: var(--rz-transition-all), width 0, height 0; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -10255,26 +9895,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -10293,15 +9936,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-white); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -10320,14 +9954,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: none; - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -10342,18 +9968,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-base-800); - --rz-sidebar-background-color: var(--rz-base-900); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -10362,7 +9980,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -10381,17 +9999,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-100); - --rz-card-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -10421,13 +10030,6 @@ input::placeholder { margin-bottom: 0; } -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - .rz-body { margin: var(--rz-layout-body-margin); padding: var(--rz-layout-body-padding); @@ -10441,32 +10043,8 @@ input::placeholder { transform: translateZ(0); } -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-base-900); - --rz-accordion-hover-color: var(--rz-primary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; -} - .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -10485,16 +10063,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -10502,20 +10080,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -10525,7 +10104,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -10534,10 +10113,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -10545,34 +10120,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: var(--rz-border-radius); - --rz-panel-toggle-icon-background-color: var(--rz-base-200); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-primary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -10623,33 +10190,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-200); - --rz-sidebar-toggle-color: var(--rz-base-800); - --rz-sidebar-toggle-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-base-900); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; - border: none; + appearance: none; + cursor: pointer; + border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -10683,37 +10236,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: none; - --rz-menu-border-radius: 0; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-primary-lighter); - --rz-menu-item-hover-background-color: var(--rz-primary-lighter); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-primary); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-primary-lighter); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: var(--rz-transition-all); - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-on-primary-lighter); - --rz-menu-top-item-hover-background-color: var(--rz-primary-lighter); - --rz-menu-top-item-selected-color: var(--rz-primary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-on-primary-lighter); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -10738,7 +10263,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10760,6 +10286,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -10768,7 +10295,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -10781,7 +10309,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -10811,13 +10340,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -10826,7 +10355,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -10838,7 +10368,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -10862,16 +10393,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -10888,7 +10419,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -10948,65 +10480,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: #ffffff; - --rz-panel-menu-background-color: #262526; - --rz-panel-menu-hover-background-color: #333233; - --rz-panel-menu-hover-color: inherit; - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: 1px solid #373637; - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: #515151; - --rz-panel-menu-item-background-color: #373637; - --rz-panel-menu-item-active-color: inherit; - --rz-panel-menu-item-active-indicator: #1151f3; - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: #494849; - --rz-panel-menu-item-2nd-level-background-color: #403f40; - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: #494849; - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: #515151; - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: #515151; - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: #ffffff; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 0.4; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -11016,10 +10503,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -11031,11 +10519,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -11046,8 +10534,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -11056,7 +10544,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -11069,7 +10558,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -11078,20 +10567,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -11115,67 +10606,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-200); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-text-color); - --rz-profile-menu-item-hover-background-color: var(--rz-primary-lighter); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -11196,19 +10672,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -11228,17 +10707,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -11246,26 +10719,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-300); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-primary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-primary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-primary); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -11319,14 +10774,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -11336,7 +10793,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -11359,54 +10817,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: var(--rz-border-radius); - --rz-checkbox-border-width: 1px; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-base-background-color); - --rz-checkbox-checked-hover-background-color: var(--rz-base-background-color); - --rz-checkbox-checked-disabled-background-color: var(--rz-base-background-color); - --rz-checkbox-checked-color: var(--rz-primary); - --rz-checkbox-checked-shadow: none; - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-hover-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: var(--rz-base-background-color); - --rz-checkbox-checked-icon-border-radius: calc(var(--rz-border-radius) / 2); - --rz-checkbox-icon-width: 1rem; - --rz-checkbox-icon-height: 1rem; - --rz-checkbox-icon-font-size: 1rem; - --rz-checkbox-tri-icon-width: 1rem; - --rz-checkbox-tri-icon-height: 1rem; - --rz-checkbox-tri-icon-font-size: 1rem; +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -11418,10 +10864,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -11440,10 +10888,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11500,17 +10945,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-200); - --rz-switch-checked-background-color: var(--rz-primary); - --rz-switch-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -11530,10 +10966,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -11555,8 +10991,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -11565,7 +11001,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -11577,35 +11013,23 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { transform: translateX(1.2rem); } -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-base-background-color); - --rz-radio-active-shadow: none; - --rz-radio-checked-background-color: var(--rz-base-background-color); - --rz-radio-checked-hover-background-color: var(--rz-base-background-color); - --rz-radio-checked-hover-shadow: none; - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-primary); - --rz-radio-circle-shadow: none; - --rz-radio-circle-hover-background-color: var(--rz-primary-light); - --rz-radio-icon-width: 0.625rem; - --rz-radio-icon-height: 0.625rem; - --rz-radio-checked-border: var(--rz-input-border); +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -11617,7 +11041,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -11640,10 +11065,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -11703,26 +11125,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-base-300); - --rz-fieldset-border-radius: var(--rz-border-radius); - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-200); - --rz-fieldset-toggle-color: var(--rz-text-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -11751,7 +11158,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -11769,8 +11177,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -11785,36 +11195,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-shadow: none; - --rz-dropdown-item-hover-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-transition: var(--rz-transition-all); - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-200); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -11841,15 +11221,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -11857,8 +11238,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -11893,7 +11274,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -11986,28 +11368,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -12024,10 +11410,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -12036,7 +11423,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -12058,24 +11446,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -12085,7 +11457,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -12128,7 +11501,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -12169,39 +11543,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: none; - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -12211,9 +11575,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -12227,11 +11588,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -12240,36 +11601,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-background-color); - --rz-slider-border: var(--rz-border-base-300); - --rz-slider-border-radius: calc(2 * var(--rz-border-radius)); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-primary-lighter); - --rz-slider-range-border: var(--rz-border-primary-lighter); - --rz-slider-handle-width: 1.25rem; - --rz-slider-handle-height: 1.25rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-white); - --rz-slider-handle-border: 0.25rem solid var(--rz-primary); - --rz-slider-handle-border-radius: calc(4 * var(--rz-border-radius)); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-primary); - --rz-slider-handle-hover-border: 0.25rem solid var(--rz-primary); - --rz-slider-handle-hover-shadow: none; - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-200); - --rz-slider-disabled-range-border: var(--rz-border-base-300); - --rz-slider-disabled-handle-border: 0.25rem solid var(--rz-base-400); - --rz-slider-disabled-handle-background-color: var(--rz-white); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -12296,11 +11629,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -12309,7 +11642,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -12334,19 +11667,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-text-tertiary-color); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.5; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-text-tertiary-color); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -12404,16 +11726,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -12434,17 +11748,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: transparent; - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-primary-lighter); - --rz-selectbar-selected-color: var(--rz-on-primary-lighter); - --rz-selectbar-selected-border: var(--rz-border-normal); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -12452,7 +11757,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12460,13 +11765,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12475,7 +11780,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12483,13 +11788,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12498,7 +11803,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12506,13 +11811,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12521,7 +11826,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -12529,13 +11834,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -12543,89 +11848,34 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-selectbar-selected-border); } -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-text-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-background-color); - --rz-datepicker-header-color: var(--rz-text-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-primary-lighter); - --rz-datepicker-calendar-hover-background-color: var(--rz-primary-lighter); - --rz-datepicker-calendar-selected-color: var(--rz-on-primary); - --rz-datepicker-calendar-selected-background-color: var(--rz-primary); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-light); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-light); - --rz-datepicker-calendar-border: none; - --rz-datepicker-calendar-border-radius: var(--rz-border-radius); - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-primary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-primary); - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-background-color); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-disabled-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-primary); - --rz-timepicker-button-color: var(--rz-on-primary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: var(--rz-border-radius); - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; -} - -.rz-calendar { +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -12633,9 +11883,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -12673,148 +11923,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; } -.rz-datepicker-next .rzi-chevron-right:before { + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; } -.rz-datepicker-calendar-container:focus { +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -12845,47 +12122,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-base-background-color); - --rz-numeric-button-disabled-background-color: var(--rz-base-100); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-text-tertiary-color); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -12893,9 +12157,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -12903,49 +12167,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); -} - -:root { - --rz-upload-button-bar-background-color: var(--rz-base-100); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-300); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary-lighter); - --rz-upload-choose-color: var(--rz-on-secondary-lighter); - --rz-upload-choose-hover-background-color: var(--rz-secondary-light); - --rz-upload-choose-hover-color: var(--rz-on-secondary-light); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-300); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -13032,101 +12277,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-200), 0 -1px 0 0 var(--rz-base-200); - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-primary-lighter); - --rz-grid-hover-color: var(--rz-on-primary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: rgba(114, 152, 248, 0.16); - --rz-grid-selected-color: var(--rz-on-primary-lighter); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: var(--rz-border-normal); - --rz-grid-header-background-color: var(--rz-base-100); - --rz-grid-header-font-size: 0.875rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: none; - --rz-grid-header-color: var(--rz-text-title-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-100); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-title-color); - --rz-grid-foot-background-color: var(--rz-base-200); - --rz-grid-filter-background-color: var(--rz-base-100); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: none; - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-text-title-color); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-white); - --rz-grid-clear-filter-button-background-color: var(--rz-base-200); - --rz-grid-clear-filter-button-color: var(--rz-text-color); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: none; - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: none; - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: #f7f8fb; - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-primary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-100); - --rz-grid-loading-indicator-color: var(--rz-on-primary-lighter); - --rz-grid-loading-indicator-background-color: var(--rz-primary-lighter); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-100); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-disabled-color); - --rz-column-drag-handle-hover-color: var(--rz-text-title-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -13150,10 +12300,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -13197,8 +12351,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -13206,8 +12360,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -13233,11 +12387,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -13257,13 +12412,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -13283,11 +12439,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -13295,11 +12451,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -13313,10 +12469,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -13332,7 +12488,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -13384,7 +12540,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -13394,11 +12550,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -13421,13 +12577,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -13448,21 +12608,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -13474,7 +12634,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -13520,7 +12680,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -13534,14 +12693,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -13643,10 +12802,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -13660,28 +12815,15 @@ a:focus-visible .rz-fieldset-toggler { border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-end-end-radius: 0; } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { text-indent: 2.25rem; } } -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); -} - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -13711,31 +12853,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -13801,7 +12921,7 @@ a:focus-visible .rz-fieldset-toggler { padding: 1rem; } .rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, +.rz-grid-filter .rz-numeric, .rz-grid-filter .rz-textbox, .rz-grid-filter .rz-grid-filter-label { display: block; @@ -13811,18 +12931,57 @@ a:focus-visible .rz-fieldset-toggler { font-weight: 600; } +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -13831,9 +12990,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -13875,16 +13036,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -13917,7 +13084,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -13968,26 +13135,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -14000,7 +13171,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -14020,7 +13191,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -14028,312 +13199,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: transparent; - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: none; - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-primary-lighter); - --rz-paginator-numeric-button-selected-color: var(--rz-on-primary-lighter); - --rz-paginator-numeric-button-selected-border: 1px solid transparent; - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-200); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-200); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-200); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-200); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-tertiary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-100); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -14343,24 +13474,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-primary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: var(--rz-border-radius); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-primary-lighter); - --rz-tree-node-hover-color: var(--rz-primary); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-title-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -14377,12 +13492,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -14391,13 +13506,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -14407,15 +13528,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -14427,7 +13550,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -14446,25 +13569,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: transparent; - --rz-datalist-shadow: none; - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-200); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: none; - --rz-datalist-item-border: var(--rz-border-base-200); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -14483,13 +13592,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -14498,24 +13608,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -14537,7 +13640,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -14548,23 +13652,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -14574,17 +13678,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -14597,70 +13702,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-200); - --rz-scheduler-minor-border-color: var(--rz-base-100); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: none; - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-100); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-base-200); - --rz-scheduler-prev-next-button-color: var(--rz-text-color); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-color); - --rz-scheduler-view-button-background-color: transparent; - --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); - --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); - --rz-scheduler-view-selected-border-color: transparent; - --rz-scheduler-header-background-color: var(--rz-base-100); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: var(--rz-text-tertiary-color); - --rz-scheduler-header-border: var(--rz-border-normal); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -14676,7 +13719,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -14689,12 +13732,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -14704,27 +13747,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -14759,8 +13803,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -14820,16 +13864,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -14846,25 +13890,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -14878,7 +13935,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -14890,24 +13947,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -14917,11 +13974,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -14949,7 +14006,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -14965,7 +14022,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -14973,7 +14030,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -15022,7 +14079,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -15071,7 +14128,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -15117,8 +14174,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15127,15 +14184,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15168,8 +14225,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -15178,15 +14235,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -15216,35 +14273,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: none; - --rz-tabs-border: var(--rz-border-base-200); - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-200); - --rz-tabs-tab-color: var(--rz-text-color); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-primary); - --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); - --rz-tabs-tab-hover-color: var(--rz-primary); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-primary); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -15298,7 +14328,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -15341,7 +14372,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -15361,7 +14392,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -15396,6 +14427,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -15426,21 +14460,13 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-tabs-padding); } -.rz-tabview-left-icon { +.rz-tabview-icon { font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-base-900); - --rz-tooltip-color: var(--rz-white); - --rz-tooltip-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: var(--rz-body-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -15466,8 +14492,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15484,8 +14510,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -15529,29 +14555,8 @@ a:focus-visible .rz-fieldset-toggler { border-right: inherit; } -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-background-color); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 1.25rem 1.25rem 0.5rem; - --rz-dialog-title-font-size: 1.5rem; - --rz-dialog-title-line-height: 1.25em; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: top; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-600); - --rz-dialog-border-radius: calc(2 * var(--rz-border-radius)); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; -} - .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -15564,6 +14569,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -15578,37 +14584,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -15620,7 +14644,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -15634,7 +14658,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -15647,42 +14671,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -15715,161 +14712,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-dialog-side-titlebar-close { - float: right; +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); } -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); } -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); } -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); } -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); -} - -.rz-growl { - position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; -} - -.rz-growl-item-container { - background-color: var(--rz-notification-container-background-color); -} - -.rz-growl-item { - border-radius: var(--rz-notification-border-radius); - box-shadow: var(--rz-notification-shadow); - padding: var(--rz-notification-padding); -} - -.rz-growl-message-success .rz-growl-item { - color: var(--rz-notification-success-color); - background-color: var(--rz-notification-success-background-color); -} - -.rz-growl-message-warn .rz-growl-item { - color: var(--rz-notification-warning-color); - background-color: var(--rz-notification-warning-background-color); -} - -.rz-growl-message-error .rz-growl-item { - color: var(--rz-notification-error-color); - background-color: var(--rz-notification-error-background-color); -} - -.rz-growl-message-info .rz-growl-item { - color: var(--rz-notification-info-color); - background-color: var(--rz-notification-info-background-color); +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close { - float: right; -} -.rz-growl-icon-close:before { - content: "close"; +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1.5rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(243, 17, 85, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -15894,16 +14855,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: rgba(141, 142, 144, 0.5); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } .rz-layout::-webkit-scrollbar, @@ -15932,14 +14885,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-100); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -15969,7 +14916,7 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -15981,12 +14928,15 @@ a:focus-visible .rz-fieldset-toggler { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -15996,11 +14946,6 @@ a:focus-visible .rz-fieldset-toggler { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -16010,24 +14955,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -16037,14 +14969,8 @@ a:focus-visible .rz-fieldset-toggler { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -16056,18 +14982,9 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-primary); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-primary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -16116,19 +15033,8 @@ a:focus-visible .rz-fieldset-toggler { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-200); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-primary-lighter); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -16156,6 +15062,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -16216,6 +15123,9 @@ a:focus-visible .rz-fieldset-toggler { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -16227,6 +15137,9 @@ a:focus-visible .rz-fieldset-toggler { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -16247,6 +15160,26 @@ a:focus-visible .rz-fieldset-toggler { right: -8%; } } +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} .rz-progressbar-indeterminate .rz-progressbar-circular-value { animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0 0; @@ -16292,48 +15225,6 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -16397,6 +15288,27 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -16439,49 +15351,101 @@ a:focus-visible .rz-fieldset-toggler { stroke: var(--rz-success); } -.rz-progressbar-circular-lg { - width: 6rem; - height: 6rem; - font-size: calc(var(--rz-progressbar-font-size) * 1.25); +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); } -.rz-progressbar-circular-md { - width: 3rem; - height: 3rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.75); +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); } - -.rz-progressbar-circular-sm { - width: 2rem; - height: 2rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.5); +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); } -.rz-progressbar-circular-xs { - width: 1.25rem; - height: 1.25rem; - font-size: calc(var(--rz-progressbar-font-size) * 0.375); +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); } - -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); } - -.rz-chart { - position: relative; - height: 300px; +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); } -.rz-area-series { - fill-opacity: 0.8; +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; } .rz-scheme-pastel .rz-series-0 { @@ -17247,6 +16211,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -17370,6 +16338,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -17396,24 +16365,8 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-100); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-100); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-primary); - --rz-editor-button-selected-color: var(--rz-on-primary); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -17598,30 +16551,6 @@ a:focus-visible .rz-fieldset-toggler { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: 1rem; - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: 1rem; - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08); - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -17698,7 +16627,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -17770,7 +16699,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -17783,7 +16712,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -17798,6 +16727,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -17809,27 +16739,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -17845,15 +16772,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -17865,15 +16790,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-tertiary-color); - --rz-splitter-bar-color-active: var(--rz-on-primary-lighter); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-primary-lighter); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -17895,7 +16813,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17910,7 +16828,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -17997,11 +16915,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: transparent; +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -18035,8 +16970,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -18044,8 +16989,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -18059,22 +17004,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: var(--rz-border-radius); - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -18903,30 +17834,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -18945,16 +17881,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -19330,279 +18263,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -19947,36 +18880,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-100); - --rz-form-field-filled-hover-background-color: var(--rz-base-200); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -19986,11 +18889,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -19999,12 +18903,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -20032,20 +18936,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -20090,33 +18996,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -20133,16 +19042,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -20150,33 +19059,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -20193,27 +19102,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -20758,6 +19655,7 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; width: 100%; height: 100%; --rz-gap: 1rem; @@ -20779,6 +19677,1561 @@ button.rz-colorpicker-trigger .rzi:before { transform: rotate(90deg); } +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #e0e1e4; + --rz-base-50: #ffffff; + --rz-base-100: #f4f5f9; + --rz-base-200: #e9eaed; + --rz-base-300: #e0e1e4; + --rz-base-400: #c9cacd; + --rz-base-500: #afafb2; + --rz-base-600: #8d8e90; + --rz-base-700: #707072; + --rz-base-800: #4f4f50; + --rz-base-900: #262526; + --rz-base-light: #e9eaed; + --rz-base-lighter: #f4f5f9; + --rz-base-dark: #707072; + --rz-base-darker: #262526; + --rz-primary: #1151f3; + --rz-primary-light: #376df5; + --rz-primary-lighter: rgba(17, 81, 243, 0.16); + --rz-primary-dark: #0e44cc; + --rz-primary-darker: #0d3eb9; + --rz-secondary: #5d89f7; + --rz-secondary-light: #779cf8; + --rz-secondary-lighter: rgba(93, 137, 247, 0.16); + --rz-secondary-dark: #4e73cf; + --rz-secondary-darker: #4768bc; + --rz-info: #12a4f5; + --rz-info-light: #38b3f7; + --rz-info-lighter: rgba(18, 164, 245, 0.16); + --rz-info-dark: #0f8ace; + --rz-info-darker: #0e7dba; + --rz-success: #009b51; + --rz-success-light: #29ab6d; + --rz-success-lighter: rgba(0, 155, 81, 0.16); + --rz-success-dark: #008244; + --rz-success-darker: #00763e; + --rz-warning: #ffae11; + --rz-warning-light: #ffbb37; + --rz-warning-lighter: rgba(255, 174, 17, 0.16); + --rz-warning-dark: #d6920e; + --rz-warning-darker: #c2840d; + --rz-danger: #f31155; + --rz-danger-light: #f53770; + --rz-danger-lighter: rgba(243, 17, 85, 0.16); + --rz-danger-dark: #cc0e47; + --rz-danger-darker: #b90d41; + --rz-on-base: #262526; + --rz-on-base-light: #262526; + --rz-on-base-lighter: #262526; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #1151f3; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #5d89f7; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #12a4f5; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #009b51; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #ffae11; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f31155; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 1px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary-light); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-base-900); + --rz-accordion-hover-color: var(--rz-primary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: #e9eaed; + --rz-button-base-color: #4f4f50; + --rz-button-background-size: 100% 0%, 100% 0%; + --rz-button-border-radius: 4px; + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: none; + --rz-button-hover-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-hover-background-size: 100% 200%, 100% 0%; + --rz-button-focus-shadow: none; + --rz-button-focus-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-focus-background-size: 100% 200%, 100% 0%; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: none; + --rz-button-active-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-active-background-size: 100% 0%, 100% 200%; + --rz-button-disabled-opacity: 0.5; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-100); + --rz-card-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: var(--rz-border-radius); + --rz-checkbox-border-width: 1px; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-hover-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-disabled-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-color: var(--rz-primary); + --rz-checkbox-checked-shadow: none; + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-hover-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-icon-border-radius: calc(var(--rz-border-radius) / 2); + --rz-checkbox-icon-width: 1rem; + --rz-checkbox-icon-height: 1rem; + --rz-checkbox-icon-font-size: 1rem; + --rz-checkbox-tri-icon-width: 1rem; + --rz-checkbox-tri-icon-height: 1rem; + --rz-checkbox-tri-icon-font-size: 1rem; + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: 1rem; + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: 1rem; + --rz-colorpicker-item-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08); + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: transparent; + --rz-datalist-shadow: none; + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-200); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: none; + --rz-datalist-item-border: var(--rz-border-base-200); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-text-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-color); + --rz-datepicker-header-background-color: var(--rz-base-background-color); + --rz-datepicker-header-padding-block: 0.5rem; + --rz-datepicker-header-padding-inline: 0.5rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0 0.5rem; + --rz-datepicker-calendar-padding-inline: 0.5rem; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-primary-lighter); + --rz-datepicker-calendar-hover-background-color: var(--rz-primary-lighter); + --rz-datepicker-calendar-selected-color: var(--rz-on-primary); + --rz-datepicker-calendar-selected-background-color: var(--rz-primary); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-light); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-light); + --rz-datepicker-calendar-border: none; + --rz-datepicker-calendar-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-primary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-primary); + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-background-color); + --rz-timepicker-separator-color: var(--rz-text-disabled-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-primary); + --rz-timepicker-button-background-color: var(--rz-primary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: var(--rz-border-radius); + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 1.25rem 0.5rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.5rem; + --rz-dialog-title-line-height: 1.25em; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: top; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-600); + --rz-dialog-border-radius: calc(2 * var(--rz-border-radius)); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-shadow: none; + --rz-dropdown-item-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-transition: var(--rz-transition-all); + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-200); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-100); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-100); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-primary); + --rz-editor-button-selected-color: var(--rz-on-primary); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-300); + --rz-fieldset-border-radius: var(--rz-border-radius); + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-200); + --rz-fieldset-toggle-color: var(--rz-text-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: none; + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-100); + --rz-form-field-filled-hover-background-color: var(--rz-base-200); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(243, 17, 85, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-primary); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-primary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); + /* Grid */ + --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-200), 0 -1px 0 0 var(--rz-base-200); + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-primary-lighter); + --rz-grid-hover-color: var(--rz-on-primary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: rgba(114, 152, 248, 0.16); + --rz-grid-selected-color: var(--rz-on-primary-lighter); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: var(--rz-border-normal); + --rz-grid-header-background-color: var(--rz-base-100); + --rz-grid-header-font-size: 0.875rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: none; + --rz-grid-header-color: var(--rz-text-title-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-100); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-title-color); + --rz-grid-foot-background-color: var(--rz-base-200); + --rz-grid-filter-background-color: var(--rz-base-100); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: none; + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-text-title-color); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-100); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base-200); + --rz-grid-clear-filter-button-color: var(--rz-text-color); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: none; + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: none; + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: #f7f8fb; + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-primary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-100); + --rz-grid-loading-indicator-color: var(--rz-on-primary-lighter); + --rz-grid-loading-indicator-background-color: var(--rz-primary-lighter); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-100); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-disabled-color); + --rz-column-drag-handle-hover-color: var(--rz-text-title-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-white); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: none; + --rz-input-hover-shadow: none; + --rz-input-hover-border: var(--rz-border-primary-light); + --rz-input-focus-shadow: 0px 0px 0px 1px var(--rz-white), 0px 0px 0px 3px rgba(17, 81, 243, 0.2); + --rz-input-focus-border: var(--rz-border-primary-light); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: none; + --rz-input-disabled-background-color: var(--rz-base-100); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 0.5; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: transparent; + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-100); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: none; + --rz-menu-border-radius: 0; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-primary-lighter); + --rz-menu-item-hover-background-color: var(--rz-primary-lighter); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-primary); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-primary-lighter); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: var(--rz-transition-all); + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-on-primary-lighter); + --rz-menu-top-item-hover-background-color: var(--rz-primary-lighter); + --rz-menu-top-item-selected-color: var(--rz-primary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-on-primary-lighter); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-base-background-color); + --rz-numeric-button-disabled-background-color: var(--rz-base-100); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-text-tertiary-color); + /* Overlay */ + --rz-overlay-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-100); + /* Pager */ + --rz-pager-background-color: transparent; + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: none; + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-200); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-200); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-primary-lighter); + --rz-pager-numeric-button-selected-color: var(--rz-on-primary-lighter); + --rz-pager-numeric-button-selected-border: 1px solid transparent; + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-200); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-200); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-tertiary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: 1px solid #373637; + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: #ffffff; + --rz-panel-menu-item-background-color: #262526; + --rz-panel-menu-item-hover-color: inherit; + --rz-panel-menu-item-hover-background-color: #333233; + --rz-panel-menu-item-active-color: inherit; + --rz-panel-menu-item-active-background-color: #515151; + --rz-panel-menu-item-active-indicator: #1151f3; + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: #373637; + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: #494849; + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: #494849; + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: #403f40; + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: #515151; + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: #515151; + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: #ffffff; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 0.4; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: var(--rz-border-radius); + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-primary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-200); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-primary-lighter); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-200); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-primary-lighter); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-base-background-color); + --rz-radio-active-shadow: none; + --rz-radio-checked-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-shadow: none; + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-primary); + --rz-radio-circle-shadow: none; + --rz-radio-circle-hover-background-color: var(--rz-primary-light); + --rz-radio-icon-width: 0.625rem; + --rz-radio-icon-height: 0.625rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-text-tertiary-color); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.5; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-text-tertiary-color); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-200); + --rz-scheduler-minor-border-color: var(--rz-base-100); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: none; + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-100); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-base-200); + --rz-scheduler-prev-next-button-color: var(--rz-text-color); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-color); + --rz-scheduler-view-button-background-color: transparent; + --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); + --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); + --rz-scheduler-view-selected-border-color: transparent; + --rz-scheduler-header-background-color: var(--rz-base-100); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: var(--rz-text-tertiary-color); + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: rgba(141, 142, 144, 0.5); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: transparent; + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-primary-lighter); + --rz-selectbar-selected-color: var(--rz-on-primary-lighter); + --rz-selectbar-selected-border: var(--rz-border-normal); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-200); + --rz-sidebar-toggle-color: var(--rz-base-800); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-base-900); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-900); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-base-300); + --rz-slider-border-radius: calc(2 * var(--rz-border-radius)); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-primary-lighter); + --rz-slider-range-border: var(--rz-border-primary-lighter); + --rz-slider-handle-width: 1.25rem; + --rz-slider-handle-height: 1.25rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-white); + --rz-slider-handle-border: 0.25rem solid var(--rz-primary); + --rz-slider-handle-border-radius: calc(4 * var(--rz-border-radius)); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-primary); + --rz-slider-handle-hover-border: 0.25rem solid var(--rz-primary); + --rz-slider-handle-hover-shadow: none; + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-200); + --rz-slider-disabled-range-border: var(--rz-border-base-300); + --rz-slider-disabled-handle-border: 0.25rem solid var(--rz-base-400); + --rz-slider-disabled-handle-background-color: var(--rz-white); + /* SplitButton */ + --rz-splitbutton-menu-shadow: none; + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-tertiary-color); + --rz-splitter-bar-color-active: var(--rz-on-primary-lighter); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-primary-lighter); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-300); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-primary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-primary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-primary); + /* Switch */ + --rz-switch-background-color: var(--rz-base-200); + --rz-switch-checked-background-color: var(--rz-primary); + --rz-switch-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: none; + --rz-tabs-border: var(--rz-border-base-200); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-200); + --rz-tabs-tab-color: var(--rz-text-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-primary); + --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); + --rz-tabs-tab-hover-color: var(--rz-primary); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-primary); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-base-900); + --rz-tooltip-color: var(--rz-white); + --rz-tooltip-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-primary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: var(--rz-border-radius); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-primary-lighter); + --rz-tree-node-hover-color: var(--rz-primary); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-title-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-100); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary-lighter); + --rz-upload-choose-color: var(--rz-on-secondary-lighter); + --rz-upload-choose-hover-background-color: var(--rz-secondary-light); + --rz-upload-choose-hover-color: var(--rz-on-secondary-light); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-300); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} + body { background: #f4f5f9 no-repeat 180% 0/60% fixed url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwNCIgaGVpZ2h0PSIxNDU4IiB2aWV3Qm94PSIwIDAgMTIwNCAxNDU4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfNDkzXzEwMTM0KSI+CjxjaXJjbGUgY3g9IjcyMi4xMjgiIGN5PSI4MzkuMDIiIHI9IjQ4MS40MTkiIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF80OTNfMTAxMzQpIi8+CjwvZz4KPGcgb3BhY2l0eT0iMC41IiBmaWx0ZXI9InVybCgjZmlsdGVyMV9mXzQ5M18xMDEzNCkiPgo8Y2lyY2xlIGN4PSI0NzAuMzMzIiBjeT0iNTcwLjMzMyIgcj0iNDcwLjMzMyIgZmlsbD0idXJsKCNwYWludDFfcmFkaWFsXzQ5M18xMDEzNCkiLz4KPC9nPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIyX2ZfNDkzXzEwMTM0KSI+CjxjaXJjbGUgY3g9IjY5MS41MTEiIGN5PSI1MjIuMjk3IiByPSIzMzEuNTAzIiBmaWxsPSJ1cmwoI3BhaW50Ml9yYWRpYWxfNDkzXzEwMTM0KSIvPgo8L2c+CjxnIG9wYWNpdHk9IjAuNSIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjNfZl80OTNfMTAxMzQpIj4KPGNpcmNsZSBjeD0iNjA4LjI0NCIgY3k9IjEwNzkuOTciIHI9IjMzMS41MDMiIHRyYW5zZm9ybT0icm90YXRlKC04MS4yMjQ0IDYwOC4yNDQgMTA3OS45NykiIGZpbGw9InVybCgjcGFpbnQzX3JhZGlhbF80OTNfMTAxMzQpIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl80OTNfMTAxMzQiIHg9IjE0MC43MDkiIHk9IjI1Ny42MDEiIHdpZHRoPSIxMTYyLjg0IiBoZWlnaHQ9IjExNjIuODQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZl80OTNfMTAxMzQiIHg9Ii0xMDAiIHk9IjAiIHdpZHRoPSIxMTQwLjY3IiBoZWlnaHQ9IjExNDAuNjciIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjJfZl80OTNfMTAxMzQiIHg9IjI2MC4wMDgiIHk9IjkwLjc5MzkiIHdpZHRoPSI4NjMuMDA2IiBoZWlnaHQ9Ijg2My4wMDYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjNfZl80OTNfMTAxMzQiIHg9IjE3Ni42OTQiIHk9IjY0OC40MjMiIHdpZHRoPSI4NjMuMSIgaGVpZ2h0PSI4NjMuMSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzQ5M18xMDEzNCIvPgo8L2ZpbHRlcj4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzQ5M18xMDEzNCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg3MjIuMTI4IDgzOS4wMikgcm90YXRlKDkwKSBzY2FsZSg0ODEuNDE5KSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRjFBNkMiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkYxQTZDIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDFfcmFkaWFsXzQ5M18xMDEzNCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg0NzAuMzMzIDU3MC4zMzMpIHJvdGF0ZSg5MCkgc2NhbGUoNDcwLjMzMykiPgo8c3RvcCBzdG9wLWNvbG9yPSIjM0FBQ0ZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzNBOTVGRiIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQyX3JhZGlhbF80OTNfMTAxMzQiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjkxLjUxMSA1MjIuMjk3KSByb3RhdGUoOTApIHNjYWxlKDMzMS41MDMpIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzQ4M0FGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ODNBRkYiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50M19yYWRpYWxfNDkzXzEwMTM0IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwOC4yNDQgMTA3OS45Nykgcm90YXRlKDkwKSBzY2FsZSgzMzEuNTAzKSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkM4M0EiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkZDODNBIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K"); } \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/standard-dark-base.css b/_content/Radzen.Blazor/css/standard-dark-base.css new file mode 100755 index 0000000..a1e054c --- /dev/null +++ b/_content/Radzen.Blazor/css/standard-dark-base.css @@ -0,0 +1,21384 @@ +@charset "UTF-8"; +.rz-selectable .rz-datatable-even td, +.rz-selectable .rz-datatable-even .rz-cell-data, +.rz-selectable .rz-datatable-odd td, +.rz-selectable .rz-datatable-odd .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable .rz-datatable-even:hover > td:not(.rz-frozen-cell), +.rz-selectable .rz-datatable-odd:hover > td:not(.rz-frozen-cell) { + background-color: var(--rz-primary-lighter); +} +.rz-selectable .rz-datatable-even:hover .rz-cell-data, +.rz-selectable .rz-datatable-odd:hover .rz-cell-data { + color: var(--rz-on-primary-lighter); +} + +.rz-checkbox-list-vertical.rz-state-disabled > div > .rz-chkbox-label, +.rz-checkbox-list-horizontal.rz-state-disabled > div > .rz-chkbox-label { + opacity: 0.5; +} +.rz-checkbox-list-vertical:not(.rz-state-disabled) > div > .rz-chkbox-label:hover, +.rz-checkbox-list-horizontal:not(.rz-state-disabled) > div > .rz-chkbox-label:hover { + color: var(--rz-primary-light); + cursor: pointer; +} + +.rz-radio-button-list-vertical.rz-state-disabled > div > .rz-radiobutton-label, +.rz-radio-button-list-horizontal.rz-state-disabled > div > .rz-radiobutton-label { + opacity: 0.5; +} +.rz-radio-button-list-vertical:not(.rz-state-disabled) > div > .rz-radiobutton-label:hover, +.rz-radio-button-list-horizontal:not(.rz-state-disabled) > div > .rz-radiobutton-label:hover { + color: var(--rz-primary-light); + cursor: pointer; +} + +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +.rz-text-title-color { + color: var(--rz-base-50) !important; +} + +.rz-text-color { + color: var(--rz-base-100) !important; +} + +.rz-text-secondary-color { + color: var(--rz-base-300) !important; +} + +.rz-text-tertiary-color { + color: var(--rz-base-400) !important; +} + +.rz-text-disabled-color { + color: var(--rz-base-500) !important; +} + +.rz-text-contrast-color { + color: var(--rz-white) !important; +} + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; +} + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; +} + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; +} + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; +} + +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; +} + +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; +} + +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; +} + +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; +} + +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; +} + +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; +} + +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; +} + +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; +} + +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; +} + +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; +} + +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; +} + +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; +} + +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; +} + +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; +} + +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; +} + +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; +} + +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; +} + +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; +} + +.rz-display-none { + display: none !important; +} + +.rz-display-block { + display: block !important; +} + +.rz-display-inline { + display: inline !important; +} + +.rz-display-inline-block { + display: inline-block !important; +} + +.rz-display-flex { + display: flex !important; +} + +.rz-display-inline-flex { + display: inline-flex !important; +} + +.rz-display-grid { + display: grid !important; +} + +.rz-display-inline-grid { + display: inline-grid !important; +} + +@media (min-width: 576px) { + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 768px) { + .rz-display-sm-none { + display: none !important; + } + .rz-display-sm-block { + display: block !important; + } + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} + +.rz-justify-content-stretch { + justify-content: stretch !important; +} + +.rz-justify-content-center { + justify-content: center !important; +} + +.rz-justify-content-start { + justify-content: start !important; +} + +.rz-justify-content-end { + justify-content: end !important; +} + +.rz-justify-content-flex-start { + justify-content: flex-start !important; +} + +.rz-justify-content-flex-end { + justify-content: flex-end !important; +} + +.rz-justify-content-left { + justify-content: left !important; +} + +.rz-justify-content-right { + justify-content: right !important; +} + +.rz-justify-content-space-between { + justify-content: space-between !important; +} + +.rz-justify-content-space-around { + justify-content: space-around !important; +} + +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.rz-align-items-normal { + align-items: normal !important; +} + +.rz-align-items-stretch { + align-items: stretch !important; +} + +.rz-align-items-center { + align-items: center !important; +} + +.rz-align-items-start { + align-items: start !important; +} + +.rz-align-items-end { + align-items: end !important; +} + +.rz-align-items-flex-start { + align-items: flex-start !important; +} + +.rz-align-items-flex-end { + align-items: flex-end !important; +} + +.rz-color-white { + color: var(--rz-white) !important; +} + +.rz-color-black { + color: var(--rz-black) !important; +} + +.rz-color-base { + color: var(--rz-base) !important; +} + +.rz-color-base-50 { + color: var(--rz-base-50) !important; +} + +.rz-color-base-100 { + color: var(--rz-base-100) !important; +} + +.rz-color-base-200 { + color: var(--rz-base-200) !important; +} + +.rz-color-base-300 { + color: var(--rz-base-300) !important; +} + +.rz-color-base-400 { + color: var(--rz-base-400) !important; +} + +.rz-color-base-500 { + color: var(--rz-base-500) !important; +} + +.rz-color-base-600 { + color: var(--rz-base-600) !important; +} + +.rz-color-base-700 { + color: var(--rz-base-700) !important; +} + +.rz-color-base-800 { + color: var(--rz-base-800) !important; +} + +.rz-color-base-900 { + color: var(--rz-base-900) !important; +} + +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + +.rz-color-primary { + color: var(--rz-primary) !important; +} + +.rz-color-primary-light { + color: var(--rz-primary-light) !important; +} + +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; +} + +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; +} + +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; +} + +.rz-color-secondary { + color: var(--rz-secondary) !important; +} + +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; +} + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; +} + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; +} + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; +} + +.rz-color-info { + color: var(--rz-info) !important; +} + +.rz-color-info-light { + color: var(--rz-info-light) !important; +} + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; +} + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; +} + +.rz-color-info-darker { + color: var(--rz-info-darker) !important; +} + +.rz-color-success { + color: var(--rz-success) !important; +} + +.rz-color-success-light { + color: var(--rz-success-light) !important; +} + +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; +} + +.rz-color-success-dark { + color: var(--rz-success-dark) !important; +} + +.rz-color-success-darker { + color: var(--rz-success-darker) !important; +} + +.rz-color-warning { + color: var(--rz-warning) !important; +} + +.rz-color-warning-light { + color: var(--rz-warning-light) !important; +} + +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; +} + +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; +} + +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; +} + +.rz-color-danger { + color: var(--rz-danger) !important; +} + +.rz-color-danger-light { + color: var(--rz-danger-light) !important; +} + +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; +} + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; +} + +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; +} + +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + +.rz-color-on-primary { + color: var(--rz-on-primary) !important; +} + +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; +} + +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; +} + +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; +} + +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; +} + +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; +} + +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; +} + +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; +} + +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; +} + +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; +} + +.rz-color-on-info { + color: var(--rz-on-info) !important; +} + +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; +} + +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; +} + +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; +} + +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; +} + +.rz-color-on-success { + color: var(--rz-on-success) !important; +} + +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; +} + +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; +} + +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; +} + +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; +} + +.rz-color-on-warning { + color: var(--rz-on-warning) !important; +} + +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; +} + +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; +} + +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; +} + +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; +} + +.rz-color-on-danger { + color: var(--rz-on-danger) !important; +} + +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; +} + +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; +} + +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; +} + +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; +} + +.rz-color-series-1 { + color: var(--rz-series-1) !important; +} + +.rz-color-series-2 { + color: var(--rz-series-2) !important; +} + +.rz-color-series-3 { + color: var(--rz-series-3) !important; +} + +.rz-color-series-4 { + color: var(--rz-series-4) !important; +} + +.rz-color-series-5 { + color: var(--rz-series-5) !important; +} + +.rz-color-series-6 { + color: var(--rz-series-6) !important; +} + +.rz-color-series-7 { + color: var(--rz-series-7) !important; +} + +.rz-color-series-8 { + color: var(--rz-series-8) !important; +} + +.rz-color-series-9 { + color: var(--rz-series-9) !important; +} + +.rz-color-series-10 { + color: var(--rz-series-10) !important; +} + +.rz-color-series-11 { + color: var(--rz-series-11) !important; +} + +.rz-color-series-12 { + color: var(--rz-series-12) !important; +} + +.rz-color-series-13 { + color: var(--rz-series-13) !important; +} + +.rz-color-series-14 { + color: var(--rz-series-14) !important; +} + +.rz-color-series-15 { + color: var(--rz-series-15) !important; +} + +.rz-color-series-16 { + color: var(--rz-series-16) !important; +} + +.rz-color-series-17 { + color: var(--rz-series-17) !important; +} + +.rz-color-series-18 { + color: var(--rz-series-18) !important; +} + +.rz-color-series-19 { + color: var(--rz-series-19) !important; +} + +.rz-color-series-20 { + color: var(--rz-series-20) !important; +} + +.rz-color-series-21 { + color: var(--rz-series-21) !important; +} + +.rz-color-series-22 { + color: var(--rz-series-22) !important; +} + +.rz-color-series-23 { + color: var(--rz-series-23) !important; +} + +.rz-color-series-24 { + color: var(--rz-series-24) !important; +} + +.rz-background-color-white { + background-color: var(--rz-white) !important; +} + +.rz-background-color-black { + background-color: var(--rz-black) !important; +} + +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; +} + +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; +} + +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; +} + +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; +} + +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; +} + +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; +} + +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; +} + +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; +} + +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; +} + +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; +} + +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + +.rz-background-color-primary { + background-color: var(--rz-primary) !important; +} + +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; +} + +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; +} + +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; +} + +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; +} + +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; +} + +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; +} + +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; +} + +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; +} + +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; +} + +.rz-background-color-info { + background-color: var(--rz-info) !important; +} + +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; +} + +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; +} + +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; +} + +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; +} + +.rz-background-color-success { + background-color: var(--rz-success) !important; +} + +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; +} + +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; +} + +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; +} + +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; +} + +.rz-background-color-warning { + background-color: var(--rz-warning) !important; +} + +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; +} + +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; +} + +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; +} + +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; +} + +.rz-background-color-danger { + background-color: var(--rz-danger) !important; +} + +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; +} + +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; +} + +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; +} + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; +} + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; +} + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; +} + +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; +} + +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; +} + +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; +} + +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; +} + +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; +} + +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; +} + +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; +} + +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; +} + +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; +} + +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; +} + +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; +} + +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; +} + +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; +} + +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; +} + +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; +} + +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; +} + +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; +} + +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; +} + +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; +} + +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; +} + +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; +} + +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; +} + +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; +} + +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; +} + +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; +} + +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; +} + +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; +} + +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; +} + +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; +} + +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; +} + +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; +} + +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; +} + +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; +} + +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; +} + +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; +} + +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; +} + +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; +} + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; +} + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; +} + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; +} + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; +} + +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; +} + +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; +} + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; +} + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; +} + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; +} + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; +} + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; +} + +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; +} + +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; +} + +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; +} + +.rz-border-color-white { + border-color: var(--rz-white) !important; +} + +.rz-border-color-black { + border-color: var(--rz-black) !important; +} + +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; +} + +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; +} + +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; +} + +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; +} + +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; +} + +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; +} + +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; +} + +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; +} + +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; +} + +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; +} + +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + +.rz-border-color-primary { + border-color: var(--rz-primary) !important; +} + +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; +} + +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; +} + +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-color-info { + border-color: var(--rz-info) !important; +} + +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; +} + +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; +} + +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; +} + +.rz-border-color-success { + border-color: var(--rz-success) !important; +} + +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; +} + +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; +} + +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; +} + +.rz-border-color-warning { + border-color: var(--rz-warning) !important; +} + +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; +} + +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-color-danger { + border-color: var(--rz-danger) !important; +} + +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; +} + +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; +} + +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; +} + +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; +} + +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; +} + +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; +} + +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; +} + +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; +} + +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; +} + +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; +} + +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; +} + +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; +} + +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; +} + +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; +} + +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; +} + +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; +} + +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; +} + +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; +} + +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; +} + +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; +} + +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; +} + +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; +} + +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; +} + +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; +} + +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; +} + +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; +} + +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; +} + +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; +} + +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; +} + +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; +} + +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; +} + +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; +} + +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; +} + +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; +} + +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; +} + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; +} + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; +} + +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; +} + +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; +} + +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; +} + +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; +} + +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; +} + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; +} + +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; +} + +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; +} + +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; +} + +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; +} + +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; +} + +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; +} + +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; +} + +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; +} + +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; +} + +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; +} + +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; +} + +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} + +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; +} + +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; +} + +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; +} + +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; +} + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; +} + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; +} + +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; +} + +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; +} + +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; +} + +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; +} + +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; +} + +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; +} + +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; +} + +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; +} + +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; +} + +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; +} + +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; +} + +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; +} + +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; +} + +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; +} + +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; +} + +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; +} + +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; +} + +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; +} + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; +} + +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; +} + +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; +} + +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; +} + +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; +} + +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; +} + +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; +} + +.rz-ripple { + position: relative; + overflow: hidden; +} +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +body { + margin: 0; +} + +.rz-m-0 { + margin: 0 !important; +} + +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; +} + +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; +} + +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; +} + +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; +} + +.rz-ms-0 { + margin-inline-start: 0 !important; +} + +.rz-me-0 { + margin-inline-end: 0 !important; +} + +.rz-m-05 { + margin: 0.125rem !important; +} + +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; +} + +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; +} + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; +} + +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; +} + +.rz-ms-05 { + margin-inline-start: 0.125rem !important; +} + +.rz-me-05 { + margin-inline-end: 0.125rem !important; +} + +.rz-m-1 { + margin: 0.25rem !important; +} + +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; +} + +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; +} + +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; +} + +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; +} + +.rz-ms-1 { + margin-inline-start: 0.25rem !important; +} + +.rz-me-1 { + margin-inline-end: 0.25rem !important; +} + +.rz-m-2 { + margin: 0.5rem !important; +} + +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; +} + +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; +} + +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; +} + +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; +} + +.rz-ms-2 { + margin-inline-start: 0.5rem !important; +} + +.rz-me-2 { + margin-inline-end: 0.5rem !important; +} + +.rz-m-3 { + margin: 0.75rem !important; +} + +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; +} + +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; +} + +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; +} + +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; +} + +.rz-ms-3 { + margin-inline-start: 0.75rem !important; +} + +.rz-me-3 { + margin-inline-end: 0.75rem !important; +} + +.rz-m-4 { + margin: 1rem !important; +} + +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; +} + +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; +} + +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; +} + +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; +} + +.rz-ms-4 { + margin-inline-start: 1rem !important; +} + +.rz-me-4 { + margin-inline-end: 1rem !important; +} + +.rz-m-5 { + margin: 1.25rem !important; +} + +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; +} + +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; +} + +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; +} + +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; +} + +.rz-ms-5 { + margin-inline-start: 1.25rem !important; +} + +.rz-me-5 { + margin-inline-end: 1.25rem !important; +} + +.rz-m-6 { + margin: 1.5rem !important; +} + +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; +} + +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; +} + +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; +} + +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; +} + +.rz-ms-6 { + margin-inline-start: 1.5rem !important; +} + +.rz-me-6 { + margin-inline-end: 1.5rem !important; +} + +.rz-m-7 { + margin: 1.75rem !important; +} + +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; +} + +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; +} + +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; +} + +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; +} + +.rz-ms-7 { + margin-inline-start: 1.75rem !important; +} + +.rz-me-7 { + margin-inline-end: 1.75rem !important; +} + +.rz-m-8 { + margin: 2rem !important; +} + +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; +} + +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; +} + +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; +} + +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; +} + +.rz-ms-8 { + margin-inline-start: 2rem !important; +} + +.rz-me-8 { + margin-inline-end: 2rem !important; +} + +.rz-m-9 { + margin: 2.25rem !important; +} + +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; +} + +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; +} + +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; +} + +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; +} + +.rz-ms-9 { + margin-inline-start: 2.25rem !important; +} + +.rz-me-9 { + margin-inline-end: 2.25rem !important; +} + +.rz-m-10 { + margin: 2.5rem !important; +} + +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; +} + +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; +} + +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; +} + +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; +} + +.rz-ms-10 { + margin-inline-start: 2.5rem !important; +} + +.rz-me-10 { + margin-inline-end: 2.5rem !important; +} + +.rz-m-11 { + margin: 2.75rem !important; +} + +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; +} + +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; +} + +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; +} + +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; +} + +.rz-ms-11 { + margin-inline-start: 2.75rem !important; +} + +.rz-me-11 { + margin-inline-end: 2.75rem !important; +} + +.rz-m-12 { + margin: 3rem !important; +} + +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; +} + +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; +} + +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; +} + +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; +} + +.rz-ms-12 { + margin-inline-start: 3rem !important; +} + +.rz-me-12 { + margin-inline-end: 3rem !important; +} + +.rz-p-0 { + padding: 0 !important; +} + +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; +} + +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; +} + +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; +} + +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; +} + +.rz-ps-0 { + padding-inline-start: 0 !important; +} + +.rz-pe-0 { + padding-inline-end: 0 !important; +} + +.rz-p-05 { + padding: 0.125rem !important; +} + +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; +} + +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; +} + +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; +} + +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; +} + +.rz-ps-05 { + padding-inline-start: 0.125rem !important; +} + +.rz-pe-05 { + padding-inline-end: 0.125rem !important; +} + +.rz-p-1 { + padding: 0.25rem !important; +} + +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; +} + +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; +} + +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; +} + +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; +} + +.rz-ps-1 { + padding-inline-start: 0.25rem !important; +} + +.rz-pe-1 { + padding-inline-end: 0.25rem !important; +} + +.rz-p-2 { + padding: 0.5rem !important; +} + +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; +} + +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; +} + +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; +} + +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; +} + +.rz-ps-2 { + padding-inline-start: 0.5rem !important; +} + +.rz-pe-2 { + padding-inline-end: 0.5rem !important; +} + +.rz-p-3 { + padding: 0.75rem !important; +} + +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; +} + +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; +} + +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; +} + +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; +} + +.rz-ps-3 { + padding-inline-start: 0.75rem !important; +} + +.rz-pe-3 { + padding-inline-end: 0.75rem !important; +} + +.rz-p-4 { + padding: 1rem !important; +} + +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; +} + +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; +} + +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; +} + +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; +} + +.rz-ps-4 { + padding-inline-start: 1rem !important; +} + +.rz-pe-4 { + padding-inline-end: 1rem !important; +} + +.rz-p-5 { + padding: 1.25rem !important; +} + +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; +} + +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; +} + +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; +} + +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; +} + +.rz-ps-5 { + padding-inline-start: 1.25rem !important; +} + +.rz-pe-5 { + padding-inline-end: 1.25rem !important; +} + +.rz-p-6 { + padding: 1.5rem !important; +} + +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; +} + +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; +} + +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; +} + +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; +} + +.rz-ps-6 { + padding-inline-start: 1.5rem !important; +} + +.rz-pe-6 { + padding-inline-end: 1.5rem !important; +} + +.rz-p-7 { + padding: 1.75rem !important; +} + +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; +} + +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; +} + +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; +} + +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; +} + +.rz-ps-7 { + padding-inline-start: 1.75rem !important; +} + +.rz-pe-7 { + padding-inline-end: 1.75rem !important; +} + +.rz-p-8 { + padding: 2rem !important; +} + +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; +} + +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; +} + +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; +} + +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; +} + +.rz-ps-8 { + padding-inline-start: 2rem !important; +} + +.rz-pe-8 { + padding-inline-end: 2rem !important; +} + +.rz-p-9 { + padding: 2.25rem !important; +} + +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; +} + +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; +} + +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; +} + +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; +} + +.rz-ps-9 { + padding-inline-start: 2.25rem !important; +} + +.rz-pe-9 { + padding-inline-end: 2.25rem !important; +} + +.rz-p-10 { + padding: 2.5rem !important; +} + +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; +} + +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; +} + +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; +} + +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; +} + +.rz-ps-10 { + padding-inline-start: 2.5rem !important; +} + +.rz-pe-10 { + padding-inline-end: 2.5rem !important; +} + +.rz-p-11 { + padding: 2.75rem !important; +} + +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; +} + +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; +} + +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; +} + +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; +} + +.rz-ps-11 { + padding-inline-start: 2.75rem !important; +} + +.rz-pe-11 { + padding-inline-end: 2.75rem !important; +} + +.rz-p-12 { + padding: 3rem !important; +} + +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; +} + +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; +} + +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; +} + +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; +} + +.rz-ps-12 { + padding-inline-start: 3rem !important; +} + +.rz-pe-12 { + padding-inline-end: 3rem !important; +} + +.rz-m-auto { + margin: auto !important; +} + +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; +} + +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; +} + +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; +} + +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; +} + +.rz-ms-auto { + margin-inline-start: auto !important; +} + +.rz-me-auto { + margin-inline-end: auto !important; +} + +@media (min-width: 576px) { + .rz-m-xs-0 { + margin: 0 !important; + } + .rz-my-xs-0, + .rz-mt-xs-0 { + margin-top: 0 !important; + } + .rz-mx-xs-0, + .rz-mr-xs-0 { + margin-right: 0 !important; + } + .rz-my-xs-0, + .rz-mb-xs-0 { + margin-bottom: 0 !important; + } + .rz-mx-xs-0, + .rz-ml-xs-0 { + margin-left: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-end: 0 !important; + } + .rz-m-xs-05 { + margin: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mt-xs-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-mr-xs-05 { + margin-right: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mb-xs-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-ml-xs-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xs-1 { + margin: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mt-xs-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-mr-xs-1 { + margin-right: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mb-xs-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-ml-xs-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xs-2 { + margin: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mt-xs-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-mr-xs-2 { + margin-right: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mb-xs-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-ml-xs-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xs-3 { + margin: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mt-xs-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-mr-xs-3 { + margin-right: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mb-xs-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-ml-xs-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xs-4 { + margin: 1rem !important; + } + .rz-my-xs-4, + .rz-mt-xs-4 { + margin-top: 1rem !important; + } + .rz-mx-xs-4, + .rz-mr-xs-4 { + margin-right: 1rem !important; + } + .rz-my-xs-4, + .rz-mb-xs-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xs-4, + .rz-ml-xs-4 { + margin-left: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xs-5 { + margin: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mt-xs-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-mr-xs-5 { + margin-right: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mb-xs-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-ml-xs-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xs-6 { + margin: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mt-xs-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-mr-xs-6 { + margin-right: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mb-xs-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-ml-xs-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xs-7 { + margin: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mt-xs-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-mr-xs-7 { + margin-right: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mb-xs-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-ml-xs-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xs-8 { + margin: 2rem !important; + } + .rz-my-xs-8, + .rz-mt-xs-8 { + margin-top: 2rem !important; + } + .rz-mx-xs-8, + .rz-mr-xs-8 { + margin-right: 2rem !important; + } + .rz-my-xs-8, + .rz-mb-xs-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xs-8, + .rz-ml-xs-8 { + margin-left: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xs-9 { + margin: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mt-xs-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-mr-xs-9 { + margin-right: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mb-xs-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-ml-xs-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xs-10 { + margin: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mt-xs-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-mr-xs-10 { + margin-right: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mb-xs-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-ml-xs-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xs-11 { + margin: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mt-xs-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-mr-xs-11 { + margin-right: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mb-xs-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-ml-xs-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xs-12 { + margin: 3rem !important; + } + .rz-my-xs-12, + .rz-mt-xs-12 { + margin-top: 3rem !important; + } + .rz-mx-xs-12, + .rz-mr-xs-12 { + margin-right: 3rem !important; + } + .rz-my-xs-12, + .rz-mb-xs-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xs-12, + .rz-ml-xs-12 { + margin-left: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xs-0 { + padding: 0 !important; + } + .rz-py-xs-0, + .rz-pt-xs-0 { + padding-top: 0 !important; + } + .rz-px-xs-0, + .rz-pr-xs-0 { + padding-right: 0 !important; + } + .rz-py-xs-0, + .rz-pb-xs-0 { + padding-bottom: 0 !important; + } + .rz-px-xs-0, + .rz-pl-xs-0 { + padding-left: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-end: 0 !important; + } + .rz-p-xs-05 { + padding: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pt-xs-05 { + padding-top: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pr-xs-05 { + padding-right: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pb-xs-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pl-xs-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xs-1 { + padding: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pt-xs-1 { + padding-top: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pr-xs-1 { + padding-right: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pb-xs-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pl-xs-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xs-2 { + padding: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pt-xs-2 { + padding-top: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pr-xs-2 { + padding-right: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pb-xs-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pl-xs-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xs-3 { + padding: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pt-xs-3 { + padding-top: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pr-xs-3 { + padding-right: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pb-xs-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pl-xs-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xs-4 { + padding: 1rem !important; + } + .rz-py-xs-4, + .rz-pt-xs-4 { + padding-top: 1rem !important; + } + .rz-px-xs-4, + .rz-pr-xs-4 { + padding-right: 1rem !important; + } + .rz-py-xs-4, + .rz-pb-xs-4 { + padding-bottom: 1rem !important; + } + .rz-px-xs-4, + .rz-pl-xs-4 { + padding-left: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xs-5 { + padding: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pt-xs-5 { + padding-top: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pr-xs-5 { + padding-right: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pb-xs-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pl-xs-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xs-6 { + padding: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pt-xs-6 { + padding-top: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pr-xs-6 { + padding-right: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pb-xs-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pl-xs-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xs-7 { + padding: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pt-xs-7 { + padding-top: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pr-xs-7 { + padding-right: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pb-xs-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pl-xs-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xs-8 { + padding: 2rem !important; + } + .rz-py-xs-8, + .rz-pt-xs-8 { + padding-top: 2rem !important; + } + .rz-px-xs-8, + .rz-pr-xs-8 { + padding-right: 2rem !important; + } + .rz-py-xs-8, + .rz-pb-xs-8 { + padding-bottom: 2rem !important; + } + .rz-px-xs-8, + .rz-pl-xs-8 { + padding-left: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xs-9 { + padding: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pt-xs-9 { + padding-top: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pr-xs-9 { + padding-right: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pb-xs-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pl-xs-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xs-10 { + padding: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pt-xs-10 { + padding-top: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pr-xs-10 { + padding-right: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pb-xs-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pl-xs-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xs-11 { + padding: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pt-xs-11 { + padding-top: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pr-xs-11 { + padding-right: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pb-xs-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pl-xs-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xs-12 { + padding: 3rem !important; + } + .rz-py-xs-12, + .rz-pt-xs-12 { + padding-top: 3rem !important; + } + .rz-px-xs-12, + .rz-pr-xs-12 { + padding-right: 3rem !important; + } + .rz-py-xs-12, + .rz-pb-xs-12 { + padding-bottom: 3rem !important; + } + .rz-px-xs-12, + .rz-pl-xs-12 { + padding-left: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xs-auto { + margin: auto !important; + } + .rz-my-xs-auto, + .rz-mt-xs-auto { + margin-top: auto !important; + } + .rz-mx-xs-auto, + .rz-mr-xs-auto { + margin-right: auto !important; + } + .rz-my-xs-auto, + .rz-mb-xs-auto { + margin-bottom: auto !important; + } + .rz-mx-xs-auto, + .rz-ml-xs-auto { + margin-left: auto !important; + } + .rz-ms-xs-auto { + margin-inline-start: auto !important; + } + .rz-me-xs-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 768px) { + .rz-m-sm-0 { + margin: 0 !important; + } + .rz-my-sm-0, + .rz-mt-sm-0 { + margin-top: 0 !important; + } + .rz-mx-sm-0, + .rz-mr-sm-0 { + margin-right: 0 !important; + } + .rz-my-sm-0, + .rz-mb-sm-0 { + margin-bottom: 0 !important; + } + .rz-mx-sm-0, + .rz-ml-sm-0 { + margin-left: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-start: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-end: 0 !important; + } + .rz-m-sm-05 { + margin: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mt-sm-05 { + margin-top: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-mr-sm-05 { + margin-right: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mb-sm-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-ml-sm-05 { + margin-left: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-sm-1 { + margin: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mt-sm-1 { + margin-top: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-mr-sm-1 { + margin-right: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-ml-sm-1 { + margin-left: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-sm-2 { + margin: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mt-sm-2 { + margin-top: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-mr-sm-2 { + margin-right: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-ml-sm-2 { + margin-left: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-sm-3 { + margin: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mt-sm-3 { + margin-top: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-mr-sm-3 { + margin-right: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mb-sm-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-ml-sm-3 { + margin-left: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-sm-4 { + margin: 1rem !important; + } + .rz-my-sm-4, + .rz-mt-sm-4 { + margin-top: 1rem !important; + } + .rz-mx-sm-4, + .rz-mr-sm-4 { + margin-right: 1rem !important; + } + .rz-my-sm-4, + .rz-mb-sm-4 { + margin-bottom: 1rem !important; + } + .rz-mx-sm-4, + .rz-ml-sm-4 { + margin-left: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-end: 1rem !important; + } + .rz-m-sm-5 { + margin: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mt-sm-5 { + margin-top: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-mr-sm-5 { + margin-right: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mb-sm-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-ml-sm-5 { + margin-left: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-sm-6 { + margin: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mt-sm-6 { + margin-top: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-mr-sm-6 { + margin-right: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mb-sm-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-ml-sm-6 { + margin-left: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-sm-7 { + margin: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mt-sm-7 { + margin-top: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-mr-sm-7 { + margin-right: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mb-sm-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-ml-sm-7 { + margin-left: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-sm-8 { + margin: 2rem !important; + } + .rz-my-sm-8, + .rz-mt-sm-8 { + margin-top: 2rem !important; + } + .rz-mx-sm-8, + .rz-mr-sm-8 { + margin-right: 2rem !important; + } + .rz-my-sm-8, + .rz-mb-sm-8 { + margin-bottom: 2rem !important; + } + .rz-mx-sm-8, + .rz-ml-sm-8 { + margin-left: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-end: 2rem !important; + } + .rz-m-sm-9 { + margin: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mt-sm-9 { + margin-top: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-mr-sm-9 { + margin-right: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mb-sm-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-ml-sm-9 { + margin-left: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-sm-10 { + margin: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mt-sm-10 { + margin-top: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-mr-sm-10 { + margin-right: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mb-sm-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-ml-sm-10 { + margin-left: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-sm-11 { + margin: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mt-sm-11 { + margin-top: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-mr-sm-11 { + margin-right: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mb-sm-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-ml-sm-11 { + margin-left: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-sm-12 { + margin: 3rem !important; + } + .rz-my-sm-12, + .rz-mt-sm-12 { + margin-top: 3rem !important; + } + .rz-mx-sm-12, + .rz-mr-sm-12 { + margin-right: 3rem !important; + } + .rz-my-sm-12, + .rz-mb-sm-12 { + margin-bottom: 3rem !important; + } + .rz-mx-sm-12, + .rz-ml-sm-12 { + margin-left: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-end: 3rem !important; + } + .rz-p-sm-0 { + padding: 0 !important; + } + .rz-py-sm-0, + .rz-pt-sm-0 { + padding-top: 0 !important; + } + .rz-px-sm-0, + .rz-pr-sm-0 { + padding-right: 0 !important; + } + .rz-py-sm-0, + .rz-pb-sm-0 { + padding-bottom: 0 !important; + } + .rz-px-sm-0, + .rz-pl-sm-0 { + padding-left: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-start: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-end: 0 !important; + } + .rz-p-sm-05 { + padding: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pt-sm-05 { + padding-top: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pr-sm-05 { + padding-right: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pb-sm-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pl-sm-05 { + padding-left: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-sm-1 { + padding: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pt-sm-1 { + padding-top: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pr-sm-1 { + padding-right: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pl-sm-1 { + padding-left: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-sm-2 { + padding: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pt-sm-2 { + padding-top: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pr-sm-2 { + padding-right: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pl-sm-2 { + padding-left: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-sm-3 { + padding: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pt-sm-3 { + padding-top: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pr-sm-3 { + padding-right: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pb-sm-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pl-sm-3 { + padding-left: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-sm-4 { + padding: 1rem !important; + } + .rz-py-sm-4, + .rz-pt-sm-4 { + padding-top: 1rem !important; + } + .rz-px-sm-4, + .rz-pr-sm-4 { + padding-right: 1rem !important; + } + .rz-py-sm-4, + .rz-pb-sm-4 { + padding-bottom: 1rem !important; + } + .rz-px-sm-4, + .rz-pl-sm-4 { + padding-left: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-end: 1rem !important; + } + .rz-p-sm-5 { + padding: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pt-sm-5 { + padding-top: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pr-sm-5 { + padding-right: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pb-sm-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pl-sm-5 { + padding-left: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-sm-6 { + padding: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pt-sm-6 { + padding-top: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pr-sm-6 { + padding-right: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pb-sm-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pl-sm-6 { + padding-left: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-sm-7 { + padding: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pt-sm-7 { + padding-top: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pr-sm-7 { + padding-right: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pb-sm-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pl-sm-7 { + padding-left: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-sm-8 { + padding: 2rem !important; + } + .rz-py-sm-8, + .rz-pt-sm-8 { + padding-top: 2rem !important; + } + .rz-px-sm-8, + .rz-pr-sm-8 { + padding-right: 2rem !important; + } + .rz-py-sm-8, + .rz-pb-sm-8 { + padding-bottom: 2rem !important; + } + .rz-px-sm-8, + .rz-pl-sm-8 { + padding-left: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-end: 2rem !important; + } + .rz-p-sm-9 { + padding: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pt-sm-9 { + padding-top: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pr-sm-9 { + padding-right: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pb-sm-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pl-sm-9 { + padding-left: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-sm-10 { + padding: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pt-sm-10 { + padding-top: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pr-sm-10 { + padding-right: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pb-sm-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pl-sm-10 { + padding-left: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-sm-11 { + padding: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pt-sm-11 { + padding-top: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pr-sm-11 { + padding-right: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pb-sm-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pl-sm-11 { + padding-left: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-sm-12 { + padding: 3rem !important; + } + .rz-py-sm-12, + .rz-pt-sm-12 { + padding-top: 3rem !important; + } + .rz-px-sm-12, + .rz-pr-sm-12 { + padding-right: 3rem !important; + } + .rz-py-sm-12, + .rz-pb-sm-12 { + padding-bottom: 3rem !important; + } + .rz-px-sm-12, + .rz-pl-sm-12 { + padding-left: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-end: 3rem !important; + } + .rz-m-sm-auto { + margin: auto !important; + } + .rz-my-sm-auto, + .rz-mt-sm-auto { + margin-top: auto !important; + } + .rz-mx-sm-auto, + .rz-mr-sm-auto { + margin-right: auto !important; + } + .rz-my-sm-auto, + .rz-mb-sm-auto { + margin-bottom: auto !important; + } + .rz-mx-sm-auto, + .rz-ml-sm-auto { + margin-left: auto !important; + } + .rz-ms-sm-auto { + margin-inline-start: auto !important; + } + .rz-me-sm-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1024px) { + .rz-m-md-0 { + margin: 0 !important; + } + .rz-my-md-0, + .rz-mt-md-0 { + margin-top: 0 !important; + } + .rz-mx-md-0, + .rz-mr-md-0 { + margin-right: 0 !important; + } + .rz-my-md-0, + .rz-mb-md-0 { + margin-bottom: 0 !important; + } + .rz-mx-md-0, + .rz-ml-md-0 { + margin-left: 0 !important; + } + .rz-ms-md-0 { + margin-inline-start: 0 !important; + } + .rz-ms-md-0 { + margin-inline-end: 0 !important; + } + .rz-m-md-05 { + margin: 0.125rem !important; + } + .rz-my-md-05, + .rz-mt-md-05 { + margin-top: 0.125rem !important; + } + .rz-mx-md-05, + .rz-mr-md-05 { + margin-right: 0.125rem !important; + } + .rz-my-md-05, + .rz-mb-md-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-md-05, + .rz-ml-md-05 { + margin-left: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-md-1 { + margin: 0.25rem !important; + } + .rz-my-md-1, + .rz-mt-md-1 { + margin-top: 0.25rem !important; + } + .rz-mx-md-1, + .rz-mr-md-1 { + margin-right: 0.25rem !important; + } + .rz-my-md-1, + .rz-mb-md-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-md-1, + .rz-ml-md-1 { + margin-left: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-md-2 { + margin: 0.5rem !important; + } + .rz-my-md-2, + .rz-mt-md-2 { + margin-top: 0.5rem !important; + } + .rz-mx-md-2, + .rz-mr-md-2 { + margin-right: 0.5rem !important; + } + .rz-my-md-2, + .rz-mb-md-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-md-2, + .rz-ml-md-2 { + margin-left: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-md-3 { + margin: 0.75rem !important; + } + .rz-my-md-3, + .rz-mt-md-3 { + margin-top: 0.75rem !important; + } + .rz-mx-md-3, + .rz-mr-md-3 { + margin-right: 0.75rem !important; + } + .rz-my-md-3, + .rz-mb-md-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-md-3, + .rz-ml-md-3 { + margin-left: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-md-4 { + margin: 1rem !important; + } + .rz-my-md-4, + .rz-mt-md-4 { + margin-top: 1rem !important; + } + .rz-mx-md-4, + .rz-mr-md-4 { + margin-right: 1rem !important; + } + .rz-my-md-4, + .rz-mb-md-4 { + margin-bottom: 1rem !important; + } + .rz-mx-md-4, + .rz-ml-md-4 { + margin-left: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-end: 1rem !important; + } + .rz-m-md-5 { + margin: 1.25rem !important; + } + .rz-my-md-5, + .rz-mt-md-5 { + margin-top: 1.25rem !important; + } + .rz-mx-md-5, + .rz-mr-md-5 { + margin-right: 1.25rem !important; + } + .rz-my-md-5, + .rz-mb-md-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-md-5, + .rz-ml-md-5 { + margin-left: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-md-6 { + margin: 1.5rem !important; + } + .rz-my-md-6, + .rz-mt-md-6 { + margin-top: 1.5rem !important; + } + .rz-mx-md-6, + .rz-mr-md-6 { + margin-right: 1.5rem !important; + } + .rz-my-md-6, + .rz-mb-md-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-md-6, + .rz-ml-md-6 { + margin-left: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-md-7 { + margin: 1.75rem !important; + } + .rz-my-md-7, + .rz-mt-md-7 { + margin-top: 1.75rem !important; + } + .rz-mx-md-7, + .rz-mr-md-7 { + margin-right: 1.75rem !important; + } + .rz-my-md-7, + .rz-mb-md-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-md-7, + .rz-ml-md-7 { + margin-left: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-md-8 { + margin: 2rem !important; + } + .rz-my-md-8, + .rz-mt-md-8 { + margin-top: 2rem !important; + } + .rz-mx-md-8, + .rz-mr-md-8 { + margin-right: 2rem !important; + } + .rz-my-md-8, + .rz-mb-md-8 { + margin-bottom: 2rem !important; + } + .rz-mx-md-8, + .rz-ml-md-8 { + margin-left: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-end: 2rem !important; + } + .rz-m-md-9 { + margin: 2.25rem !important; + } + .rz-my-md-9, + .rz-mt-md-9 { + margin-top: 2.25rem !important; + } + .rz-mx-md-9, + .rz-mr-md-9 { + margin-right: 2.25rem !important; + } + .rz-my-md-9, + .rz-mb-md-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-md-9, + .rz-ml-md-9 { + margin-left: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-md-10 { + margin: 2.5rem !important; + } + .rz-my-md-10, + .rz-mt-md-10 { + margin-top: 2.5rem !important; + } + .rz-mx-md-10, + .rz-mr-md-10 { + margin-right: 2.5rem !important; + } + .rz-my-md-10, + .rz-mb-md-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-md-10, + .rz-ml-md-10 { + margin-left: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-md-11 { + margin: 2.75rem !important; + } + .rz-my-md-11, + .rz-mt-md-11 { + margin-top: 2.75rem !important; + } + .rz-mx-md-11, + .rz-mr-md-11 { + margin-right: 2.75rem !important; + } + .rz-my-md-11, + .rz-mb-md-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-md-11, + .rz-ml-md-11 { + margin-left: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-md-12 { + margin: 3rem !important; + } + .rz-my-md-12, + .rz-mt-md-12 { + margin-top: 3rem !important; + } + .rz-mx-md-12, + .rz-mr-md-12 { + margin-right: 3rem !important; + } + .rz-my-md-12, + .rz-mb-md-12 { + margin-bottom: 3rem !important; + } + .rz-mx-md-12, + .rz-ml-md-12 { + margin-left: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-end: 3rem !important; + } + .rz-p-md-0 { + padding: 0 !important; + } + .rz-py-md-0, + .rz-pt-md-0 { + padding-top: 0 !important; + } + .rz-px-md-0, + .rz-pr-md-0 { + padding-right: 0 !important; + } + .rz-py-md-0, + .rz-pb-md-0 { + padding-bottom: 0 !important; + } + .rz-px-md-0, + .rz-pl-md-0 { + padding-left: 0 !important; + } + .rz-ps-md-0 { + padding-inline-start: 0 !important; + } + .rz-ps-md-0 { + padding-inline-end: 0 !important; + } + .rz-p-md-05 { + padding: 0.125rem !important; + } + .rz-py-md-05, + .rz-pt-md-05 { + padding-top: 0.125rem !important; + } + .rz-px-md-05, + .rz-pr-md-05 { + padding-right: 0.125rem !important; + } + .rz-py-md-05, + .rz-pb-md-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-md-05, + .rz-pl-md-05 { + padding-left: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-md-1 { + padding: 0.25rem !important; + } + .rz-py-md-1, + .rz-pt-md-1 { + padding-top: 0.25rem !important; + } + .rz-px-md-1, + .rz-pr-md-1 { + padding-right: 0.25rem !important; + } + .rz-py-md-1, + .rz-pb-md-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-md-1, + .rz-pl-md-1 { + padding-left: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-md-2 { + padding: 0.5rem !important; + } + .rz-py-md-2, + .rz-pt-md-2 { + padding-top: 0.5rem !important; + } + .rz-px-md-2, + .rz-pr-md-2 { + padding-right: 0.5rem !important; + } + .rz-py-md-2, + .rz-pb-md-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-md-2, + .rz-pl-md-2 { + padding-left: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-md-3 { + padding: 0.75rem !important; + } + .rz-py-md-3, + .rz-pt-md-3 { + padding-top: 0.75rem !important; + } + .rz-px-md-3, + .rz-pr-md-3 { + padding-right: 0.75rem !important; + } + .rz-py-md-3, + .rz-pb-md-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-md-3, + .rz-pl-md-3 { + padding-left: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-md-4 { + padding: 1rem !important; + } + .rz-py-md-4, + .rz-pt-md-4 { + padding-top: 1rem !important; + } + .rz-px-md-4, + .rz-pr-md-4 { + padding-right: 1rem !important; + } + .rz-py-md-4, + .rz-pb-md-4 { + padding-bottom: 1rem !important; + } + .rz-px-md-4, + .rz-pl-md-4 { + padding-left: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-end: 1rem !important; + } + .rz-p-md-5 { + padding: 1.25rem !important; + } + .rz-py-md-5, + .rz-pt-md-5 { + padding-top: 1.25rem !important; + } + .rz-px-md-5, + .rz-pr-md-5 { + padding-right: 1.25rem !important; + } + .rz-py-md-5, + .rz-pb-md-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-md-5, + .rz-pl-md-5 { + padding-left: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-md-6 { + padding: 1.5rem !important; + } + .rz-py-md-6, + .rz-pt-md-6 { + padding-top: 1.5rem !important; + } + .rz-px-md-6, + .rz-pr-md-6 { + padding-right: 1.5rem !important; + } + .rz-py-md-6, + .rz-pb-md-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-md-6, + .rz-pl-md-6 { + padding-left: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-md-7 { + padding: 1.75rem !important; + } + .rz-py-md-7, + .rz-pt-md-7 { + padding-top: 1.75rem !important; + } + .rz-px-md-7, + .rz-pr-md-7 { + padding-right: 1.75rem !important; + } + .rz-py-md-7, + .rz-pb-md-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-md-7, + .rz-pl-md-7 { + padding-left: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-md-8 { + padding: 2rem !important; + } + .rz-py-md-8, + .rz-pt-md-8 { + padding-top: 2rem !important; + } + .rz-px-md-8, + .rz-pr-md-8 { + padding-right: 2rem !important; + } + .rz-py-md-8, + .rz-pb-md-8 { + padding-bottom: 2rem !important; + } + .rz-px-md-8, + .rz-pl-md-8 { + padding-left: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-end: 2rem !important; + } + .rz-p-md-9 { + padding: 2.25rem !important; + } + .rz-py-md-9, + .rz-pt-md-9 { + padding-top: 2.25rem !important; + } + .rz-px-md-9, + .rz-pr-md-9 { + padding-right: 2.25rem !important; + } + .rz-py-md-9, + .rz-pb-md-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-md-9, + .rz-pl-md-9 { + padding-left: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-md-10 { + padding: 2.5rem !important; + } + .rz-py-md-10, + .rz-pt-md-10 { + padding-top: 2.5rem !important; + } + .rz-px-md-10, + .rz-pr-md-10 { + padding-right: 2.5rem !important; + } + .rz-py-md-10, + .rz-pb-md-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-md-10, + .rz-pl-md-10 { + padding-left: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-md-11 { + padding: 2.75rem !important; + } + .rz-py-md-11, + .rz-pt-md-11 { + padding-top: 2.75rem !important; + } + .rz-px-md-11, + .rz-pr-md-11 { + padding-right: 2.75rem !important; + } + .rz-py-md-11, + .rz-pb-md-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-md-11, + .rz-pl-md-11 { + padding-left: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-md-12 { + padding: 3rem !important; + } + .rz-py-md-12, + .rz-pt-md-12 { + padding-top: 3rem !important; + } + .rz-px-md-12, + .rz-pr-md-12 { + padding-right: 3rem !important; + } + .rz-py-md-12, + .rz-pb-md-12 { + padding-bottom: 3rem !important; + } + .rz-px-md-12, + .rz-pl-md-12 { + padding-left: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-end: 3rem !important; + } + .rz-m-md-auto { + margin: auto !important; + } + .rz-my-md-auto, + .rz-mt-md-auto { + margin-top: auto !important; + } + .rz-mx-md-auto, + .rz-mr-md-auto { + margin-right: auto !important; + } + .rz-my-md-auto, + .rz-mb-md-auto { + margin-bottom: auto !important; + } + .rz-mx-md-auto, + .rz-ml-md-auto { + margin-left: auto !important; + } + .rz-ms-md-auto { + margin-inline-start: auto !important; + } + .rz-me-md-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1280px) { + .rz-m-lg-0 { + margin: 0 !important; + } + .rz-my-lg-0, + .rz-mt-lg-0 { + margin-top: 0 !important; + } + .rz-mx-lg-0, + .rz-mr-lg-0 { + margin-right: 0 !important; + } + .rz-my-lg-0, + .rz-mb-lg-0 { + margin-bottom: 0 !important; + } + .rz-mx-lg-0, + .rz-ml-lg-0 { + margin-left: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-start: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-end: 0 !important; + } + .rz-m-lg-05 { + margin: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mt-lg-05 { + margin-top: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-mr-lg-05 { + margin-right: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mb-lg-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-ml-lg-05 { + margin-left: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-lg-1 { + margin: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mt-lg-1 { + margin-top: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-mr-lg-1 { + margin-right: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-ml-lg-1 { + margin-left: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-lg-2 { + margin: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mt-lg-2 { + margin-top: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-mr-lg-2 { + margin-right: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-ml-lg-2 { + margin-left: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-lg-3 { + margin: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mt-lg-3 { + margin-top: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-mr-lg-3 { + margin-right: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mb-lg-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-ml-lg-3 { + margin-left: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-lg-4 { + margin: 1rem !important; + } + .rz-my-lg-4, + .rz-mt-lg-4 { + margin-top: 1rem !important; + } + .rz-mx-lg-4, + .rz-mr-lg-4 { + margin-right: 1rem !important; + } + .rz-my-lg-4, + .rz-mb-lg-4 { + margin-bottom: 1rem !important; + } + .rz-mx-lg-4, + .rz-ml-lg-4 { + margin-left: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-end: 1rem !important; + } + .rz-m-lg-5 { + margin: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mt-lg-5 { + margin-top: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-mr-lg-5 { + margin-right: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mb-lg-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-ml-lg-5 { + margin-left: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-lg-6 { + margin: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mt-lg-6 { + margin-top: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-mr-lg-6 { + margin-right: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mb-lg-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-ml-lg-6 { + margin-left: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-lg-7 { + margin: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mt-lg-7 { + margin-top: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-mr-lg-7 { + margin-right: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mb-lg-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-ml-lg-7 { + margin-left: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-lg-8 { + margin: 2rem !important; + } + .rz-my-lg-8, + .rz-mt-lg-8 { + margin-top: 2rem !important; + } + .rz-mx-lg-8, + .rz-mr-lg-8 { + margin-right: 2rem !important; + } + .rz-my-lg-8, + .rz-mb-lg-8 { + margin-bottom: 2rem !important; + } + .rz-mx-lg-8, + .rz-ml-lg-8 { + margin-left: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-end: 2rem !important; + } + .rz-m-lg-9 { + margin: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mt-lg-9 { + margin-top: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-mr-lg-9 { + margin-right: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mb-lg-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-ml-lg-9 { + margin-left: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-lg-10 { + margin: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mt-lg-10 { + margin-top: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-mr-lg-10 { + margin-right: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mb-lg-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-ml-lg-10 { + margin-left: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-lg-11 { + margin: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mt-lg-11 { + margin-top: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-mr-lg-11 { + margin-right: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mb-lg-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-ml-lg-11 { + margin-left: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-lg-12 { + margin: 3rem !important; + } + .rz-my-lg-12, + .rz-mt-lg-12 { + margin-top: 3rem !important; + } + .rz-mx-lg-12, + .rz-mr-lg-12 { + margin-right: 3rem !important; + } + .rz-my-lg-12, + .rz-mb-lg-12 { + margin-bottom: 3rem !important; + } + .rz-mx-lg-12, + .rz-ml-lg-12 { + margin-left: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-end: 3rem !important; + } + .rz-p-lg-0 { + padding: 0 !important; + } + .rz-py-lg-0, + .rz-pt-lg-0 { + padding-top: 0 !important; + } + .rz-px-lg-0, + .rz-pr-lg-0 { + padding-right: 0 !important; + } + .rz-py-lg-0, + .rz-pb-lg-0 { + padding-bottom: 0 !important; + } + .rz-px-lg-0, + .rz-pl-lg-0 { + padding-left: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-start: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-end: 0 !important; + } + .rz-p-lg-05 { + padding: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pt-lg-05 { + padding-top: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pr-lg-05 { + padding-right: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pb-lg-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pl-lg-05 { + padding-left: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-lg-1 { + padding: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pt-lg-1 { + padding-top: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pr-lg-1 { + padding-right: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pl-lg-1 { + padding-left: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-lg-2 { + padding: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pt-lg-2 { + padding-top: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pr-lg-2 { + padding-right: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pl-lg-2 { + padding-left: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-lg-3 { + padding: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pt-lg-3 { + padding-top: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pr-lg-3 { + padding-right: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pb-lg-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pl-lg-3 { + padding-left: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-lg-4 { + padding: 1rem !important; + } + .rz-py-lg-4, + .rz-pt-lg-4 { + padding-top: 1rem !important; + } + .rz-px-lg-4, + .rz-pr-lg-4 { + padding-right: 1rem !important; + } + .rz-py-lg-4, + .rz-pb-lg-4 { + padding-bottom: 1rem !important; + } + .rz-px-lg-4, + .rz-pl-lg-4 { + padding-left: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-end: 1rem !important; + } + .rz-p-lg-5 { + padding: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pt-lg-5 { + padding-top: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pr-lg-5 { + padding-right: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pb-lg-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pl-lg-5 { + padding-left: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-lg-6 { + padding: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pt-lg-6 { + padding-top: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pr-lg-6 { + padding-right: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pb-lg-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pl-lg-6 { + padding-left: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-lg-7 { + padding: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pt-lg-7 { + padding-top: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pr-lg-7 { + padding-right: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pb-lg-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pl-lg-7 { + padding-left: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-lg-8 { + padding: 2rem !important; + } + .rz-py-lg-8, + .rz-pt-lg-8 { + padding-top: 2rem !important; + } + .rz-px-lg-8, + .rz-pr-lg-8 { + padding-right: 2rem !important; + } + .rz-py-lg-8, + .rz-pb-lg-8 { + padding-bottom: 2rem !important; + } + .rz-px-lg-8, + .rz-pl-lg-8 { + padding-left: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-end: 2rem !important; + } + .rz-p-lg-9 { + padding: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pt-lg-9 { + padding-top: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pr-lg-9 { + padding-right: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pb-lg-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pl-lg-9 { + padding-left: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-lg-10 { + padding: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pt-lg-10 { + padding-top: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pr-lg-10 { + padding-right: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pb-lg-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pl-lg-10 { + padding-left: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-lg-11 { + padding: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pt-lg-11 { + padding-top: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pr-lg-11 { + padding-right: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pb-lg-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pl-lg-11 { + padding-left: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-lg-12 { + padding: 3rem !important; + } + .rz-py-lg-12, + .rz-pt-lg-12 { + padding-top: 3rem !important; + } + .rz-px-lg-12, + .rz-pr-lg-12 { + padding-right: 3rem !important; + } + .rz-py-lg-12, + .rz-pb-lg-12 { + padding-bottom: 3rem !important; + } + .rz-px-lg-12, + .rz-pl-lg-12 { + padding-left: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-end: 3rem !important; + } + .rz-m-lg-auto { + margin: auto !important; + } + .rz-my-lg-auto, + .rz-mt-lg-auto { + margin-top: auto !important; + } + .rz-mx-lg-auto, + .rz-mr-lg-auto { + margin-right: auto !important; + } + .rz-my-lg-auto, + .rz-mb-lg-auto { + margin-bottom: auto !important; + } + .rz-mx-lg-auto, + .rz-ml-lg-auto { + margin-left: auto !important; + } + .rz-ms-lg-auto { + margin-inline-start: auto !important; + } + .rz-me-lg-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1920px) { + .rz-m-xl-0 { + margin: 0 !important; + } + .rz-my-xl-0, + .rz-mt-xl-0 { + margin-top: 0 !important; + } + .rz-mx-xl-0, + .rz-mr-xl-0 { + margin-right: 0 !important; + } + .rz-my-xl-0, + .rz-mb-xl-0 { + margin-bottom: 0 !important; + } + .rz-mx-xl-0, + .rz-ml-xl-0 { + margin-left: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-end: 0 !important; + } + .rz-m-xl-05 { + margin: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mt-xl-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-mr-xl-05 { + margin-right: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mb-xl-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-ml-xl-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xl-1 { + margin: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mt-xl-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-mr-xl-1 { + margin-right: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-ml-xl-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xl-2 { + margin: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mt-xl-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-mr-xl-2 { + margin-right: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-ml-xl-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xl-3 { + margin: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mt-xl-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-mr-xl-3 { + margin-right: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mb-xl-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-ml-xl-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xl-4 { + margin: 1rem !important; + } + .rz-my-xl-4, + .rz-mt-xl-4 { + margin-top: 1rem !important; + } + .rz-mx-xl-4, + .rz-mr-xl-4 { + margin-right: 1rem !important; + } + .rz-my-xl-4, + .rz-mb-xl-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xl-4, + .rz-ml-xl-4 { + margin-left: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xl-5 { + margin: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mt-xl-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-mr-xl-5 { + margin-right: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mb-xl-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-ml-xl-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xl-6 { + margin: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mt-xl-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-mr-xl-6 { + margin-right: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mb-xl-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-ml-xl-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xl-7 { + margin: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mt-xl-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-mr-xl-7 { + margin-right: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mb-xl-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-ml-xl-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xl-8 { + margin: 2rem !important; + } + .rz-my-xl-8, + .rz-mt-xl-8 { + margin-top: 2rem !important; + } + .rz-mx-xl-8, + .rz-mr-xl-8 { + margin-right: 2rem !important; + } + .rz-my-xl-8, + .rz-mb-xl-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xl-8, + .rz-ml-xl-8 { + margin-left: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xl-9 { + margin: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mt-xl-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-mr-xl-9 { + margin-right: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mb-xl-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-ml-xl-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xl-10 { + margin: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mt-xl-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-mr-xl-10 { + margin-right: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mb-xl-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-ml-xl-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xl-11 { + margin: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mt-xl-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-mr-xl-11 { + margin-right: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mb-xl-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-ml-xl-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xl-12 { + margin: 3rem !important; + } + .rz-my-xl-12, + .rz-mt-xl-12 { + margin-top: 3rem !important; + } + .rz-mx-xl-12, + .rz-mr-xl-12 { + margin-right: 3rem !important; + } + .rz-my-xl-12, + .rz-mb-xl-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xl-12, + .rz-ml-xl-12 { + margin-left: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xl-0 { + padding: 0 !important; + } + .rz-py-xl-0, + .rz-pt-xl-0 { + padding-top: 0 !important; + } + .rz-px-xl-0, + .rz-pr-xl-0 { + padding-right: 0 !important; + } + .rz-py-xl-0, + .rz-pb-xl-0 { + padding-bottom: 0 !important; + } + .rz-px-xl-0, + .rz-pl-xl-0 { + padding-left: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-end: 0 !important; + } + .rz-p-xl-05 { + padding: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pt-xl-05 { + padding-top: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pr-xl-05 { + padding-right: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pb-xl-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pl-xl-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xl-1 { + padding: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pt-xl-1 { + padding-top: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pr-xl-1 { + padding-right: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pl-xl-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xl-2 { + padding: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pt-xl-2 { + padding-top: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pr-xl-2 { + padding-right: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pl-xl-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xl-3 { + padding: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pt-xl-3 { + padding-top: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pr-xl-3 { + padding-right: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pb-xl-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pl-xl-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xl-4 { + padding: 1rem !important; + } + .rz-py-xl-4, + .rz-pt-xl-4 { + padding-top: 1rem !important; + } + .rz-px-xl-4, + .rz-pr-xl-4 { + padding-right: 1rem !important; + } + .rz-py-xl-4, + .rz-pb-xl-4 { + padding-bottom: 1rem !important; + } + .rz-px-xl-4, + .rz-pl-xl-4 { + padding-left: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xl-5 { + padding: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pt-xl-5 { + padding-top: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pr-xl-5 { + padding-right: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pb-xl-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pl-xl-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xl-6 { + padding: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pt-xl-6 { + padding-top: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pr-xl-6 { + padding-right: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pb-xl-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pl-xl-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xl-7 { + padding: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pt-xl-7 { + padding-top: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pr-xl-7 { + padding-right: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pb-xl-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pl-xl-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xl-8 { + padding: 2rem !important; + } + .rz-py-xl-8, + .rz-pt-xl-8 { + padding-top: 2rem !important; + } + .rz-px-xl-8, + .rz-pr-xl-8 { + padding-right: 2rem !important; + } + .rz-py-xl-8, + .rz-pb-xl-8 { + padding-bottom: 2rem !important; + } + .rz-px-xl-8, + .rz-pl-xl-8 { + padding-left: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xl-9 { + padding: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pt-xl-9 { + padding-top: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pr-xl-9 { + padding-right: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pb-xl-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pl-xl-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xl-10 { + padding: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pt-xl-10 { + padding-top: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pr-xl-10 { + padding-right: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pb-xl-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pl-xl-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xl-11 { + padding: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pt-xl-11 { + padding-top: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pr-xl-11 { + padding-right: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pb-xl-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pl-xl-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xl-12 { + padding: 3rem !important; + } + .rz-py-xl-12, + .rz-pt-xl-12 { + padding-top: 3rem !important; + } + .rz-px-xl-12, + .rz-pr-xl-12 { + padding-right: 3rem !important; + } + .rz-py-xl-12, + .rz-pb-xl-12 { + padding-bottom: 3rem !important; + } + .rz-px-xl-12, + .rz-pl-xl-12 { + padding-left: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xl-auto { + margin: auto !important; + } + .rz-my-xl-auto, + .rz-mt-xl-auto { + margin-top: auto !important; + } + .rz-mx-xl-auto, + .rz-mr-xl-auto { + margin-right: auto !important; + } + .rz-my-xl-auto, + .rz-mb-xl-auto { + margin-bottom: auto !important; + } + .rz-mx-xl-auto, + .rz-ml-xl-auto { + margin-left: auto !important; + } + .rz-ms-xl-auto { + margin-inline-start: auto !important; + } + .rz-me-xl-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 2560px) { + .rz-m-xx-0 { + margin: 0 !important; + } + .rz-my-xx-0, + .rz-mt-xx-0 { + margin-top: 0 !important; + } + .rz-mx-xx-0, + .rz-mr-xx-0 { + margin-right: 0 !important; + } + .rz-my-xx-0, + .rz-mb-xx-0 { + margin-bottom: 0 !important; + } + .rz-mx-xx-0, + .rz-ml-xx-0 { + margin-left: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-end: 0 !important; + } + .rz-m-xx-05 { + margin: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mt-xx-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-mr-xx-05 { + margin-right: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mb-xx-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-ml-xx-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xx-1 { + margin: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mt-xx-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-mr-xx-1 { + margin-right: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mb-xx-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-ml-xx-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xx-2 { + margin: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mt-xx-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-mr-xx-2 { + margin-right: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mb-xx-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-ml-xx-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xx-3 { + margin: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mt-xx-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-mr-xx-3 { + margin-right: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mb-xx-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-ml-xx-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xx-4 { + margin: 1rem !important; + } + .rz-my-xx-4, + .rz-mt-xx-4 { + margin-top: 1rem !important; + } + .rz-mx-xx-4, + .rz-mr-xx-4 { + margin-right: 1rem !important; + } + .rz-my-xx-4, + .rz-mb-xx-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xx-4, + .rz-ml-xx-4 { + margin-left: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xx-5 { + margin: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mt-xx-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-mr-xx-5 { + margin-right: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mb-xx-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-ml-xx-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xx-6 { + margin: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mt-xx-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-mr-xx-6 { + margin-right: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mb-xx-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-ml-xx-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xx-7 { + margin: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mt-xx-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-mr-xx-7 { + margin-right: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mb-xx-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-ml-xx-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xx-8 { + margin: 2rem !important; + } + .rz-my-xx-8, + .rz-mt-xx-8 { + margin-top: 2rem !important; + } + .rz-mx-xx-8, + .rz-mr-xx-8 { + margin-right: 2rem !important; + } + .rz-my-xx-8, + .rz-mb-xx-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xx-8, + .rz-ml-xx-8 { + margin-left: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xx-9 { + margin: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mt-xx-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-mr-xx-9 { + margin-right: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mb-xx-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-ml-xx-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xx-10 { + margin: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mt-xx-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-mr-xx-10 { + margin-right: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mb-xx-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-ml-xx-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xx-11 { + margin: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mt-xx-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-mr-xx-11 { + margin-right: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mb-xx-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-ml-xx-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xx-12 { + margin: 3rem !important; + } + .rz-my-xx-12, + .rz-mt-xx-12 { + margin-top: 3rem !important; + } + .rz-mx-xx-12, + .rz-mr-xx-12 { + margin-right: 3rem !important; + } + .rz-my-xx-12, + .rz-mb-xx-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xx-12, + .rz-ml-xx-12 { + margin-left: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xx-0 { + padding: 0 !important; + } + .rz-py-xx-0, + .rz-pt-xx-0 { + padding-top: 0 !important; + } + .rz-px-xx-0, + .rz-pr-xx-0 { + padding-right: 0 !important; + } + .rz-py-xx-0, + .rz-pb-xx-0 { + padding-bottom: 0 !important; + } + .rz-px-xx-0, + .rz-pl-xx-0 { + padding-left: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-end: 0 !important; + } + .rz-p-xx-05 { + padding: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pt-xx-05 { + padding-top: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pr-xx-05 { + padding-right: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pb-xx-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pl-xx-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xx-1 { + padding: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pt-xx-1 { + padding-top: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pr-xx-1 { + padding-right: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pb-xx-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pl-xx-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xx-2 { + padding: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pt-xx-2 { + padding-top: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pr-xx-2 { + padding-right: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pb-xx-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pl-xx-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xx-3 { + padding: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pt-xx-3 { + padding-top: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pr-xx-3 { + padding-right: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pb-xx-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pl-xx-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xx-4 { + padding: 1rem !important; + } + .rz-py-xx-4, + .rz-pt-xx-4 { + padding-top: 1rem !important; + } + .rz-px-xx-4, + .rz-pr-xx-4 { + padding-right: 1rem !important; + } + .rz-py-xx-4, + .rz-pb-xx-4 { + padding-bottom: 1rem !important; + } + .rz-px-xx-4, + .rz-pl-xx-4 { + padding-left: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xx-5 { + padding: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pt-xx-5 { + padding-top: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pr-xx-5 { + padding-right: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pb-xx-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pl-xx-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xx-6 { + padding: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pt-xx-6 { + padding-top: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pr-xx-6 { + padding-right: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pb-xx-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pl-xx-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xx-7 { + padding: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pt-xx-7 { + padding-top: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pr-xx-7 { + padding-right: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pb-xx-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pl-xx-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xx-8 { + padding: 2rem !important; + } + .rz-py-xx-8, + .rz-pt-xx-8 { + padding-top: 2rem !important; + } + .rz-px-xx-8, + .rz-pr-xx-8 { + padding-right: 2rem !important; + } + .rz-py-xx-8, + .rz-pb-xx-8 { + padding-bottom: 2rem !important; + } + .rz-px-xx-8, + .rz-pl-xx-8 { + padding-left: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xx-9 { + padding: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pt-xx-9 { + padding-top: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pr-xx-9 { + padding-right: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pb-xx-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pl-xx-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xx-10 { + padding: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pt-xx-10 { + padding-top: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pr-xx-10 { + padding-right: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pb-xx-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pl-xx-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xx-11 { + padding: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pt-xx-11 { + padding-top: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pr-xx-11 { + padding-right: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pb-xx-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pl-xx-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xx-12 { + padding: 3rem !important; + } + .rz-py-xx-12, + .rz-pt-xx-12 { + padding-top: 3rem !important; + } + .rz-px-xx-12, + .rz-pr-xx-12 { + padding-right: 3rem !important; + } + .rz-py-xx-12, + .rz-pb-xx-12 { + padding-bottom: 3rem !important; + } + .rz-px-xx-12, + .rz-pl-xx-12 { + padding-left: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xx-auto { + margin: auto !important; + } + .rz-my-xx-auto, + .rz-mt-xx-auto { + margin-top: auto !important; + } + .rz-mx-xx-auto, + .rz-mr-xx-auto { + margin-right: auto !important; + } + .rz-my-xx-auto, + .rz-mb-xx-auto { + margin-bottom: auto !important; + } + .rz-mx-xx-auto, + .rz-ml-xx-auto { + margin-left: auto !important; + } + .rz-ms-xx-auto { + margin-inline-start: auto !important; + } + .rz-me-xx-auto { + margin-inline-end: auto !important; + } +} +h1.rz-heading { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2.rz-heading { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3.rz-heading { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4.rz-heading { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5.rz-heading { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1, +.h1 { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2, +.h2 { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3, +.h3 { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4, +.h4 { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5, +.h5 { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; +} + +.rz-text-display-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h1-font-size); + line-height: var(--rz-text-display-h1-line-height); + font-weight: var(--rz-text-display-h1-font-weight); + letter-spacing: var(--rz-text-display-h1-letter-spacing); + color: var(--rz-text-display-h1-color); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); +} + +.rz-text-display-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h2-font-size); + line-height: var(--rz-text-display-h2-line-height); + font-weight: var(--rz-text-display-h2-font-weight); + letter-spacing: var(--rz-text-display-h2-letter-spacing); + color: var(--rz-text-display-h2-color); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); +} + +.rz-text-display-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h3-font-size); + line-height: var(--rz-text-display-h3-line-height); + font-weight: var(--rz-text-display-h3-font-weight); + letter-spacing: var(--rz-text-display-h3-letter-spacing); + color: var(--rz-text-display-h3-color); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); +} + +.rz-text-display-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h4-font-size); + line-height: var(--rz-text-display-h4-line-height); + font-weight: var(--rz-text-display-h4-font-weight); + letter-spacing: var(--rz-text-display-h4-letter-spacing); + color: var(--rz-text-display-h4-color); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); +} + +.rz-text-display-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h5-font-size); + line-height: var(--rz-text-display-h5-line-height); + font-weight: var(--rz-text-display-h5-font-weight); + letter-spacing: var(--rz-text-display-h5-letter-spacing); + color: var(--rz-text-display-h5-color); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); +} + +.rz-text-display-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h6-font-size); + line-height: var(--rz-text-display-h6-line-height); + font-weight: var(--rz-text-display-h6-font-weight); + letter-spacing: var(--rz-text-display-h6-letter-spacing); + color: var(--rz-text-display-h6-color); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); +} + +.rz-text-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h1-font-size); + line-height: var(--rz-text-h1-line-height); + font-weight: var(--rz-text-h1-font-weight); + letter-spacing: var(--rz-text-h1-letter-spacing); + color: var(--rz-text-h1-color); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); +} + +.rz-text-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h2-font-size); + line-height: var(--rz-text-h2-line-height); + font-weight: var(--rz-text-h2-font-weight); + letter-spacing: var(--rz-text-h2-letter-spacing); + color: var(--rz-text-h2-color); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); +} + +.rz-text-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h3-font-size); + line-height: var(--rz-text-h3-line-height); + font-weight: var(--rz-text-h3-font-weight); + letter-spacing: var(--rz-text-h3-letter-spacing); + color: var(--rz-text-h3-color); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); +} + +.rz-text-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h4-font-size); + line-height: var(--rz-text-h4-line-height); + font-weight: var(--rz-text-h4-font-weight); + letter-spacing: var(--rz-text-h4-letter-spacing); + color: var(--rz-text-h4-color); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); +} + +.rz-text-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h5-font-size); + line-height: var(--rz-text-h5-line-height); + font-weight: var(--rz-text-h5-font-weight); + letter-spacing: var(--rz-text-h5-letter-spacing); + color: var(--rz-text-h5-color); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); +} + +.rz-text-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-text-h6-color); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); +} + +.rz-text-subtitle1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle1-font-size); + line-height: var(--rz-text-subtitle1-line-height); + font-weight: var(--rz-text-subtitle1-font-weight); + letter-spacing: var(--rz-text-subtitle1-letter-spacing); + color: var(--rz-text-subtitle1-color); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); +} + +.rz-text-subtitle2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle2-font-size); + line-height: var(--rz-text-subtitle2-line-height); + font-weight: var(--rz-text-subtitle2-font-weight); + letter-spacing: var(--rz-text-subtitle2-letter-spacing); + color: var(--rz-text-subtitle2-color); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); +} + +.rz-text-body1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body1-font-size); + line-height: var(--rz-text-body1-line-height); + font-weight: var(--rz-text-body1-font-weight); + letter-spacing: var(--rz-text-body1-letter-spacing); + color: var(--rz-text-body1-color); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); +} + +.rz-text-body2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body2-font-size); + line-height: var(--rz-text-body2-line-height); + font-weight: var(--rz-text-body2-font-weight); + letter-spacing: var(--rz-text-body2-letter-spacing); + color: var(--rz-text-body2-color); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); +} + +.rz-text-button { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-button-font-size); + line-height: var(--rz-text-button-line-height); + font-weight: var(--rz-text-button-font-weight); + letter-spacing: var(--rz-text-button-letter-spacing); + color: var(--rz-text-button-color); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); +} + +.rz-text-caption { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-caption-font-size); + line-height: var(--rz-text-caption-line-height); + font-weight: var(--rz-text-caption-font-weight); + letter-spacing: var(--rz-text-caption-letter-spacing); + color: var(--rz-text-caption-color); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); +} + +.rz-text-overline { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-overline-font-size); + line-height: var(--rz-text-overline-line-height); + font-weight: var(--rz-text-overline-font-weight); + letter-spacing: var(--rz-text-overline-letter-spacing); + text-transform: var(--rz-text-overline-text-transform); + color: var(--rz-text-overline-color); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); +} + +.rz-text-align-start { + text-align: start; +} + +.rz-text-align-end { + text-align: end; +} + +.rz-text-align-left { + text-align: left; +} + +.rz-text-align-right { + text-align: right; +} + +.rz-text-align-center { + text-align: center; +} + +.rz-text-align-justify { + text-align: justify; +} + +.rz-text-align-justify-all { + text-align: justify-all; +} + +.rz-text-align-match-parent { + text-align: match-parent; +} + +@media (min-width: 576px) { + .rz-text-align-xs-start { + text-align: start !important; + } + .rz-text-align-xs-end { + text-align: end !important; + } + .rz-text-align-xs-left { + text-align: left !important; + } + .rz-text-align-xs-right { + text-align: right !important; + } + .rz-text-align-xs-center { + text-align: center !important; + } + .rz-text-align-xs-justify { + text-align: justify !important; + } + .rz-text-align-xs-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xs-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 768px) { + .rz-text-align-sm-start { + text-align: start !important; + } + .rz-text-align-sm-end { + text-align: end !important; + } + .rz-text-align-sm-left { + text-align: left !important; + } + .rz-text-align-sm-right { + text-align: right !important; + } + .rz-text-align-sm-center { + text-align: center !important; + } + .rz-text-align-sm-justify { + text-align: justify !important; + } + .rz-text-align-sm-justify-all { + text-align: justify-all !important; + } + .rz-text-align-sm-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1024px) { + .rz-text-align-md-start { + text-align: start !important; + } + .rz-text-align-md-end { + text-align: end !important; + } + .rz-text-align-md-left { + text-align: left !important; + } + .rz-text-align-md-right { + text-align: right !important; + } + .rz-text-align-md-center { + text-align: center !important; + } + .rz-text-align-md-justify { + text-align: justify !important; + } + .rz-text-align-md-justify-all { + text-align: justify-all !important; + } + .rz-text-align-md-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1280px) { + .rz-text-align-lg-start { + text-align: start !important; + } + .rz-text-align-lg-end { + text-align: end !important; + } + .rz-text-align-lg-left { + text-align: left !important; + } + .rz-text-align-lg-right { + text-align: right !important; + } + .rz-text-align-lg-center { + text-align: center !important; + } + .rz-text-align-lg-justify { + text-align: justify !important; + } + .rz-text-align-lg-justify-all { + text-align: justify-all !important; + } + .rz-text-align-lg-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1920px) { + .rz-text-align-xl-start { + text-align: start !important; + } + .rz-text-align-xl-end { + text-align: end !important; + } + .rz-text-align-xl-left { + text-align: left !important; + } + .rz-text-align-xl-right { + text-align: right !important; + } + .rz-text-align-xl-center { + text-align: center !important; + } + .rz-text-align-xl-justify { + text-align: justify !important; + } + .rz-text-align-xl-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xl-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 2560px) { + .rz-text-align-xx-start { + text-align: start !important; + } + .rz-text-align-xx-end { + text-align: end !important; + } + .rz-text-align-xx-left { + text-align: left !important; + } + .rz-text-align-xx-right { + text-align: right !important; + } + .rz-text-align-xx-center { + text-align: center !important; + } + .rz-text-align-xx-justify { + text-align: justify !important; + } + .rz-text-align-xx-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xx-match-parent { + text-align: match-parent !important; + } +} +.rz-text-wrap { + white-space: normal !important; +} + +.rz-text-nowrap { + white-space: nowrap !important; +} + +.rz-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rz-text-capitalize { + text-transform: capitalize; +} + +.rz-text-uppercase { + text-transform: uppercase; +} + +.rz-text-lowercase { + text-transform: lowercase; +} + +:root { + font-size: var(--rz-root-font-size); +} + +body { + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +p { + line-height: var(--rz-body-line-height); +} + +.rz-label { + vertical-align: middle; + margin-block-start: 0; + margin-block-end: 0; +} + +.rz-form .row .rz-label { + min-height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; + border-top: var(--rz-input-border); + border-bottom: var(--rz-input-border); + border-color: transparent; +} + +label { + margin-block-start: 0; + margin-block-end: 0; +} + +::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-layout ::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; + font-family: var(--rz-icon-font-family); + font-weight: var(--rz-icon-weight, inherit); + font-style: normal; + font-size: var(--rz-icon-size); + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: "liga"; +} + +i.rzi { + display: inline-flex; + justify-content: center; + align-items: center; +} + +.rzi-primary { + color: var(--rz-primary); +} + +.rzi-secondary { + color: var(--rz-secondary); +} + +.rzi-info { + color: var(--rz-info); +} + +.rzi-warning { + color: var(--rz-warning); +} + +.rzi-error { + color: var(--rz-danger); +} + +.rzi-danger { + color: var(--rz-danger); +} + +.rzi-success { + color: var(--rz-success); +} + +.rzi-base { + color: var(--rz-base); +} + +.rzi-light { + color: var(--rz-base-500); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + +.rz-helper-hidden-accessible { + opacity: 0; + height: 0; +} +.rz-helper-hidden-accessible input { + height: 0; + padding: 0; + margin: 0; + border: 0; +} + +.rz-helper-hidden { + display: none; +} + +.rz-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; +} + +.rz-pager-element, .rz-button { + box-sizing: border-box; + display: inline-block; + margin: 0; + color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; + border: none; + border-radius: var(--rz-button-border-radius); + outline: none; + box-shadow: var(--rz-button-shadow); + font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); + text-decoration: none; + transition: var(--rz-button-transition); + -webkit-appearance: none; +} +.rz-pager-element:focus, .rz-button:focus { + outline: var(--rz-outline-normal); +} +.rz-pager-element:focus-visible, .rz-button:focus-visible { + outline: var(--rz-button-focus-outline); + outline-offset: var(--rz-button-focus-outline-offset); +} +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { + cursor: pointer; +} +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { + text-decoration: none; + background-image: var(--rz-button-hover-gradient); + background-size: var(--rz-button-hover-background-size); + box-shadow: var(--rz-button-hover-shadow); +} +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { + text-decoration: none; + background-image: var(--rz-button-focus-gradient); + background-size: var(--rz-button-focus-background-size); + box-shadow: var(--rz-button-focus-shadow); +} +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { + text-decoration: none; + background-image: var(--rz-button-active-gradient); + background-size: var(--rz-button-active-background-size); + box-shadow: var(--rz-button-active-shadow); +} +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { + opacity: var(--rz-button-disabled-opacity); + cursor: initial; +} +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { + opacity: var(--rz-button-empty-opacity); + cursor: initial; +} +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: var(--rz-button-vertical-align); + line-height: var(--rz-button-line-height); +} +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { + vertical-align: var(--rz-button-vertical-align); +} +.rz-pager-element .rzi, .rz-button .rzi { + vertical-align: var(--rz-button-vertical-align); +} + +.rz-button.rz-primary:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-button.rz-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-button.rz-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-button.rz-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} +.rz-button.rz-primary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-button.rz-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-button.rz-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-button.rz-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} +.rz-button.rz-secondary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-secondary.rz-variant-flat:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-button.rz-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-button.rz-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-button.rz-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} +.rz-button.rz-info.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-info.rz-variant-flat:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-button.rz-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-button.rz-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-button.rz-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} +.rz-button.rz-warning.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-warning.rz-variant-flat:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-button.rz-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-button.rz-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-button.rz-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-button.rz-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} +.rz-button.rz-error.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-error.rz-variant-flat:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-button.rz-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-button.rz-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-500); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-secondary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-info { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} +.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-warning { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-error { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} +.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-danger { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-success { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} +.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-base { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-light { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-500); + color: var(--rz-base-500); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-dark { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; +} + +.rz-button.rz-variant-text.rz-primary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-secondary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-info { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-button.rz-variant-text.rz-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-button.rz-variant-text.rz-info.rz-shade-default { + color: var(--rz-info); +} +.rz-button.rz-variant-text.rz-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-button.rz-variant-text.rz-info.rz-shade-darker { + color: var(--rz-info-darker); +} +.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-warning { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-error { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-button.rz-variant-text.rz-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-button.rz-variant-text.rz-error.rz-shade-default { + color: var(--rz-error); +} +.rz-button.rz-variant-text.rz-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-button.rz-variant-text.rz-error.rz-shade-darker { + color: var(--rz-error-darker); +} +.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-danger { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-success { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-button.rz-variant-text.rz-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-button.rz-variant-text.rz-success.rz-shade-default { + color: var(--rz-success); +} +.rz-button.rz-variant-text.rz-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-button.rz-variant-text.rz-success.rz-shade-darker { + color: var(--rz-success-darker); +} +.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-500); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button-lg { + padding: 0.875rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3.25rem; + min-width: 3.25rem; + border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; +} +.rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { + padding: 0.875rem; +} +.rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-pager-element, .rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; +} +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { + padding: 0.5rem 1rem 0.5rem 0.5rem; +} +.rz-pager-element, .rz-button-md.rz-button-icon-only { + padding: 0.5rem; +} +.rz-pager-element .rzi, .rz-button-md .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { + padding: 0.25rem 0.75rem; + height: auto; + line-height: 1.25rem; + min-height: 1.75rem; + min-width: 1.75rem; + font-size: var(--rz-body-font-size); +} +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { + padding: 0.25rem 0.75rem 0.25rem 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { + padding: 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-button-xs { + padding: 0.125rem 0.25rem; + height: auto; + line-height: 1rem; + min-height: 1.25rem; + min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; +} +.rz-button-xs .rz-button-box { + line-height: 1rem; + gap: 0.125rem; +} +.rz-button-xs.rz-button-icon-left { + padding: 0.125rem 0.5rem 0.125rem 0.125rem; +} +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { + padding: 0.125rem; +} +.rz-button-xs .rzi { + font-size: calc(0.8 * var(--rz-icon-size)); + line-height: calc(0.8 * var(--rz-icon-size)); + width: calc(0.8 * var(--rz-icon-size)); + height: calc(0.8 * var(--rz-icon-size)); +} + +@keyframes button-icon-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.rz-badge { + box-sizing: border-box; + color: var(--rz-text-contrast-color); + display: inline-block; + padding: var(--rz-badge-padding); + font-size: var(--rz-badge-font-size); + font-weight: var(--rz-badge-font-weight); + line-height: var(--rz-badge-line-height); + text-align: center; + text-transform: var(--rz-badge-text-transform); + white-space: nowrap; + border-radius: var(--rz-badge-border-radius); + letter-spacing: var(--rz-badge-letter-spacing); +} +.rz-button .rz-badge { + vertical-align: top; +} + +.rz-badge-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-badge-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-badge-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-badge-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} + +.rz-badge-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-badge-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-badge-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-badge-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} + +.rz-badge-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-badge-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-badge-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-badge-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} + +.rz-badge-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-badge-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-badge-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-badge-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} + +.rz-badge-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-badge-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-badge-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-badge-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-badge-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} + +.rz-badge-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-badge-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-badge-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-badge-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} + +.rz-badge-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-badge-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-badge-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-badge-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} + +.rz-badge-base { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-500); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-variant-outlined.rz-badge-primary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} + +.rz-variant-outlined.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-lighter); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} + +.rz-variant-outlined.rz-badge-info { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-lighter); +} +.rz-variant-outlined.rz-badge-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-variant-outlined.rz-badge-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-variant-outlined.rz-badge-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-variant-outlined.rz-badge-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} + +.rz-variant-outlined.rz-badge-warning { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-lighter); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} + +.rz-variant-outlined.rz-badge-error { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-lighter); +} +.rz-variant-outlined.rz-badge-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-variant-outlined.rz-badge-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-variant-outlined.rz-badge-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-variant-outlined.rz-badge-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} + +.rz-variant-outlined.rz-badge-danger { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-lighter); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} + +.rz-variant-outlined.rz-badge-success { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-lighter); +} +.rz-variant-outlined.rz-badge-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-variant-outlined.rz-badge-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-variant-outlined.rz-badge-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-variant-outlined.rz-badge-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} + +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-500); + color: var(--rz-base-500); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + +.rz-variant-text.rz-badge-primary { + background-color: transparent; +} +.rz-variant-text.rz-badge-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-variant-text.rz-badge-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-variant-text.rz-badge-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-variant-text.rz-badge-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-variant-text.rz-badge-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} + +.rz-variant-text.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-text.rz-badge-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-variant-text.rz-badge-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-variant-text.rz-badge-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-variant-text.rz-badge-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-variant-text.rz-badge-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} + +.rz-variant-text.rz-badge-info { + background-color: transparent; +} +.rz-variant-text.rz-badge-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-variant-text.rz-badge-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-variant-text.rz-badge-info.rz-shade-default { + color: var(--rz-info); +} +.rz-variant-text.rz-badge-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-variant-text.rz-badge-info.rz-shade-darker { + color: var(--rz-info-darker); +} + +.rz-variant-text.rz-badge-warning { + background-color: transparent; +} +.rz-variant-text.rz-badge-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-variant-text.rz-badge-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-variant-text.rz-badge-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-variant-text.rz-badge-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-variant-text.rz-badge-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} + +.rz-variant-text.rz-badge-error { + background-color: transparent; +} +.rz-variant-text.rz-badge-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-variant-text.rz-badge-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-variant-text.rz-badge-error.rz-shade-default { + color: var(--rz-error); +} +.rz-variant-text.rz-badge-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-variant-text.rz-badge-error.rz-shade-darker { + color: var(--rz-error-darker); +} + +.rz-variant-text.rz-badge-danger { + background-color: transparent; +} +.rz-variant-text.rz-badge-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-variant-text.rz-badge-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-variant-text.rz-badge-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-variant-text.rz-badge-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-variant-text.rz-badge-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} + +.rz-variant-text.rz-badge-success { + background-color: transparent; +} +.rz-variant-text.rz-badge-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-variant-text.rz-badge-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-variant-text.rz-badge-success.rz-shade-default { + color: var(--rz-success); +} +.rz-variant-text.rz-badge-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-variant-text.rz-badge-success.rz-shade-darker { + color: var(--rz-success-darker); +} + +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-500); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + +.rz-badge-pill { + border-radius: var(--rz-badge-pill-border-radius); + padding: var(--rz-badge-pill-padding); +} + +.rz-dropzone { + user-select: none; +} + +.rz-dropzone-item { + user-select: none; + cursor: grab; +} + +.rz-dragging { + cursor: grabbing; +} + +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { + box-shadow: var(--rz-input-hover-shadow); + border: var(--rz-input-hover-border); +} + +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { + box-shadow: var(--rz-input-focus-shadow); + border: var(--rz-input-focus-border); + outline: var(--rz-input-focus-outline); + outline-offset: var(--rz-input-focus-outline-offset); +} + +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { + background-color: var(--rz-input-disabled-background-color); + color: var(--rz-input-disabled-color); + border: none; +} + +input { + color: var(--rz-input-value-color); + font-size: var(--rz-input-font-size); +} +input::placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); +} + +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + color: var(--rz-input-value-color); + font-family: inherit; + font-size: var(--rz-input-font-size); + transition: var(--rz-input-transition); + outline: none; +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + box-shadow: none; + background-color: transparent; + outline: none; + border: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus-within { + border: none; + box-shadow: none; +} + +.rz-header { + background-color: var(--rz-header-background-color); + min-height: var(--rz-header-min-height); + border-bottom: var(--rz-header-border); + color: var(--rz-header-color); + box-shadow: var(--rz-header-shadow); +} +.rz-header.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--rz-header-z); +} +.rz-header a { + text-decoration: none; +} + +.rz-footer { + padding: var(--rz-footer-padding); + border-top: var(--rz-footer-border); + background-color: var(--rz-footer-background-color); + color: var(--rz-footer-color); +} +.rz-footer.fixed { + position: fixed; + z-index: var(--rz-footer-z); + bottom: 0; + left: 0; + right: 0; +} + +.rz-sidebar { + background-color: var(--rz-sidebar-background-color); + color: var(--rz-sidebar-color); + border-inline-end: var(--rz-sidebar-border-inline-end); + position: fixed; + overflow: auto; + left: 0; + top: 0; + bottom: 0; + z-index: var(--rz-sidebar-z); + width: var(--rz-sidebar-width); + opacity: 1; + transition: width var(--rz-transition), opacity var(--rz-transition); +} + +@media (max-width: 768px) { + .rz-sidebar-responsive { + width: 0; + opacity: 0; + } +} +.rz-sidebar-expanded { + width: var(--rz-sidebar-width); + opacity: 1; +} + +.rz-sidebar-collapsed { + width: 0 !important; + opacity: 0; +} + +.rz-card { + box-sizing: border-box; + padding: var(--rz-card-padding); + border-radius: var(--rz-card-border-radius); + background-color: var(--rz-card-background-color); +} +.rz-card.rz-variant-filled { + box-shadow: var(--rz-card-shadow); +} +.rz-card.rz-variant-flat { + background-color: var(--rz-card-flat-background-color); +} +.rz-card.rz-variant-outlined { + background: transparent; + border: var(--rz-card-border); +} +.rz-card.rz-variant-text { + background: transparent; +} +.rz-card h1, +.rz-card h2, +.rz-card h3, +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + +.rz-accordion { + box-sizing: border-box; + border-radius: var(--rz-accordion-border-radius); + box-shadow: var(--rz-accordion-shadow); +} +.rz-accordion > div:first-child { + border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; +} +.rz-accordion > div:last-child, .rz-accordion > div:last-child > div { + border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); +} +.rz-accordion > div:only-child { + border-radius: var(--rz-accordion-border-radius); +} +.rz-accordion:focus { + outline: var(--rz-outline-normal); +} +.rz-accordion:focus-visible { + outline: var(--rz-accordion-item-focus-outline); +} +.rz-accordion .rz-accordion-header { + background-color: var(--rz-accordion-item-background-color); + margin: var(--rz-accordion-item-margin); +} +.rz-accordion .rz-accordion-header:not(:first-child) { + border-top: var(--rz-accordion-item-border); +} +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); + color: var(--rz-accordion-item-color); + line-height: var(--rz-accordion-item-line-height); + text-decoration: none; + display: flex; + align-items: center; + font-size: var(--rz-accordion-item-font-size); + font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; +} +.rz-accordion .rz-accordion-header > a:hover { + color: var(--rz-accordion-hover-color); +} +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { + flex-grow: 1; +} +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { + outline: var(--rz-accordion-item-focus-outline); + outline-offset: var(--rz-accordion-item-focus-outline-offset); +} +.rz-accordion .rz-accordion-header .rzi { + font-size: var(--rz-accordion-icon-font-size); + margin-inline: var(--rz-accordion-icon-margin-inline); +} + +.rz-accordion-toggle-icon { + width: var(--rz-accordion-icon-width); + height: var(--rz-accordion-icon-height); + font-size: var(--rz-accordion-icon-font-size); + order: var(--rz-accordion-toggle-icon-order); +} +.rz-accordion-toggle-icon.rzi { + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); +} +.rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_right"; +} +.rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-accordion-content-wrapper-overflown { + overflow: hidden; +} + +.rz-accordion-content { + font-size: var(--rz-accordion-content-font-size); + background-color: var(--rz-accordion-item-background-color); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); +} + +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); + background: var(--rz-panel-background-color); + border-radius: var(--rz-panel-border-radius); + box-shadow: var(--rz-panel-shadow); +} + +.rz-panel-titlebar { + display: flex; + justify-content: space-between; +} + +.rz-panel-content { + margin: var(--rz-panel-content-margin); +} + +.rz-panel-content-wrapper[aria-hidden=true] { + display: none; +} + +.rz-panel-title { + line-height: var(--rz-panel-title-line-height); + font-weight: var(--rz-panel-title-font-weight); +} + +.rz-panel-titlebar-toggler { + width: var(--rz-panel-toggle-icon-width); + height: var(--rz-panel-toggle-icon-height); + font-size: var(--rz-panel-toggle-icon-font-size); + border-radius: var(--rz-panel-toggle-icon-border-radius); + background-color: var(--rz-panel-toggle-icon-background-color); + color: inherit; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} +.rz-panel-titlebar-toggler:hover { + text-decoration: none; + color: var(--rz-panel-hover-color); +} +.rz-panel-titlebar-toggler:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-titlebar-toggler:focus-visible { + outline: var(--rz-panel-toggle-icon-focus-outline); + outline-offset: var(--rz-panel-toggle-icon-focus-outline-offset); +} +.rz-panel-titlebar-toggler .rzi-minus:before { + content: "remove"; +} +.rz-panel-titlebar-toggler .rzi-plus:before { + content: "add"; +} + +.rz-sidebar-toggle { + appearance: none; + cursor: pointer; + border: none; + padding: var(--rz-sidebar-toggle-padding); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); + background-color: var(--rz-sidebar-toggle-background-color); + color: var(--rz-sidebar-toggle-color); +} +.rz-justify-content-flex-end .rz-sidebar-toggle { + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; +} +.rz-sidebar-toggle:focus { + outline: none; +} +.rz-sidebar-toggle:focus-visible { + outline: var(--rz-sidebar-toggle-focus-outline); + outline-offset: var(--rz-sidebar-toggle-focus-outline-offset); +} +.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover { + color: var(--rz-sidebar-toggle-hover-color); + background: var(--rz-sidebar-toggle-hover-background-color); + border-radius: var(--rz-sidebar-toggle-hover-border-radius); +} +.rz-sidebar-toggle .rzi { + width: var(--rz-sidebar-toggle-icon-width); + height: var(--rz-sidebar-toggle-icon-height); + font-size: var(--rz-sidebar-toggle-icon-width); +} + +.rz-navigation-item-link { + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.rz-navigation-item-link:hover { + text-decoration: none; +} + +.rz-navigation-item-text { + flex: auto; +} + +.rz-context-menu { + box-sizing: border-box; +} +.rz-context-menu .rz-menu { + flex-direction: column; +} + +.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { + box-shadow: var(--rz-context-menu-box-shadow); + border: var(--rz-menu-border); + border-radius: var(--rz-menu-border-radius); +} + +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + align-items: stretch; + background-color: var(--rz-menu-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + background-color: var(--rz-menu-top-item-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-top-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-top-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-top-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu):focus { + outline: var(--rz-outline-normal); +} +.rz-menu:not(.rz-profile-menu):focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-menu-item-focus-outline); + outline-offset: var(--rz-menu-item-focus-outline-offset); +} +.rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-end: -2px; + height: 1px; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: var(--rz-menu-top-item-selected-color); + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item { + position: relative; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + margin: 0; + min-width: 100%; + box-shadow: var(--rz-context-menu-box-shadow); + z-index: 3; + border-radius: var(--rz-menu-border-radius); + background-color: var(--rz-menu-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu { + position: static; + box-shadow: none; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + margin-inline-start: var(--rz-menu-item-offset); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); +} +.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { + margin-inline: var(--rz-menu-item-icon-margin-inline); +} + +.rz-navigation-item-wrapper, +.rz-navigation-item-link, +.rz-navigation-item-text { + transition: var(--rz-menu-item-transition); +} + +li.rz-navigation-item.rz-state-disabled { + opacity: var(--rz-menu-item-disabled-opacity); + cursor: initial; + pointer-events: none; +} + +.rz-menu-toggle-item { + display: none; + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); + justify-content: end; + align-items: center; + width: 100%; + height: 100%; +} + +.rz-menu-toggle { + appearance: none; + background-color: transparent; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: var(--rz-menu-top-item-color); +} +.rz-menu-toggle:hover { + background-color: transparent; + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu-toggle:active { + background-color: transparent; + color: var(--rz-menu-top-item-color); +} +.rz-context-menu .rz-menu-toggle { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu-toggle:hover { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu-toggle:active { + color: var(--rz-menu-item-color); +} + +@media (max-width: 768px) { + .rz-menu:not(.rz-profile-menu).rz-menu-closed .rz-navigation-item { + display: none; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle .rzi { + margin: 0; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open { + display: block; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-item { + background-color: inherit; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-menu { + position: static; + box-shadow: none; + border-radius: 0; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item { + display: flex; + } + .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active:before { + display: none !important; + } +} +.rz-panel-menu { + box-sizing: border-box; + list-style: none; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; + overflow: auto; + font-size: var(--rz-panel-menu-font-size); + font-weight: var(--rz-panel-menu-font-weight); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ +} +.rz-panel-menu:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-panel-menu-focus-outline); + outline-offset: var(--rz-panel-menu-focus-outline-offset); +} +.rz-panel-menu > .rz-navigation-item { + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); +} +.rz-panel-menu .rz-navigation-item { + border-block-end: var(--rz-panel-menu-item-border); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper { + position: relative; + line-height: var(--rz-panel-menu-item-line-height); + transition: var(--rz-panel-menu-item-transition); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-active-background-color); + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-active:before, +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-start: 0; + inset-block-end: 0; + width: 4px; + background-color: var(--rz-panel-menu-item-active-indicator); +} +.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); + color: inherit; + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu a.rz-navigation-item-link { + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu .rz-navigation-item-text { + flex: auto; +} +.rz-panel-menu .rz-navigation-item-icon-children { + margin-inline-start: auto; + font-size: var(--rz-panel-menu-toggle-icon-font-size); + opacity: var(--rz-panel-menu-toggle-icon-opacity); + z-index: 1; +} +.rz-panel-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-height); + width: var(--rz-panel-menu-icon-width); + color: var(--rz-panel-menu-icon-color); + margin-inline: var(--rz-panel-menu-icon-margin-inline); + font-size: var(--rz-panel-menu-icon-font-size); + transition: var(--rz-panel-menu-item-transition); +} +.rz-panel-menu .rz-navigation-menu { + list-style: none; + padding: 0; + margin-block-end: 0; + overflow: hidden; + /* Third level items */ +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); + border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color); + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-2nd-level-active-background-color); + color: var(--rz-panel-menu-item-2nd-level-active-color); + font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-active-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-2nd-level-icon-size); + width: var(--rz-panel-menu-icon-2nd-level-icon-size); + font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu { + margin: 0; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); + color: var(--rz-panel-menu-item-3rd-level-active-color); +} + +ul.rz-profile-menu { + box-sizing: border-box; + list-style: none; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); + display: inline-block; + background-color: var(--rz-profile-menu-top-item-background-color); + border-inline-start: var(--rz-profile-menu-border); + position: relative; + z-index: 3; +} +ul.rz-profile-menu:focus { + outline: var(--rz-outline-normal); +} +ul.rz-profile-menu:focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +ul.rz-profile-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-profile-menu-item-focus-outline); + outline-offset: var(--rz-profile-menu-item-focus-outline-offset); +} +ul.rz-profile-menu .rz-navigation-item-icon-children { + color: var(--rz-profile-menu-toggle-button-color); +} +ul.rz-profile-menu .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + border-radius: var(--rz-profile-menu-border-radius); + background-color: var(--rz-profile-menu-background-color); + box-shadow: var(--rz-context-menu-box-shadow); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; + min-width: 100%; + white-space: nowrap; +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-profile-menu-item-hover-background-color); + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link, +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text { + color: var(--rz-menu-item-color); +} +ul.rz-profile-menu .rz-navigation-menu .rzi { + width: var(--rz-profile-menu-item-icon-width); + height: var(--rz-profile-menu-item-icon-height); + font-size: var(--rz-profile-menu-item-icon-font-size); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); +} + +.rz-gravatar { + box-sizing: border-box; + width: var(--rz-gravatar-width); + height: var(--rz-gravatar-height); + display: inline-block; + border-radius: var(--rz-gravatar-border-radius); + box-shadow: var(--rz-gravatar-box-shadow); +} + +.rz-steps { + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.rz-steps .rz-widget-content { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.rz-steps ul { + list-style: none; + padding: 0; +} +.rz-steps .rz-menuitem-link { + display: inline-flex; + align-items: center; + color: var(--rz-steps-color); + cursor: pointer; + text-decoration: none; +} +.rz-steps .rz-menuitem-link:hover { + text-decoration: none; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps .rz-state-disabled .rz-menuitem-link { + color: var(--rz-text-disabled-color); + cursor: default; +} +.rz-steps .rz-state-disabled .rz-menuitem-link:hover { + color: var(--rz-text-disabled-color) !important; +} +.rz-steps .rz-state-highlight .rz-steps-title { + color: var(--rz-steps-title-selected-color); +} +.rz-steps .rz-state-highlight .rz-steps-number { + background: var(--rz-steps-number-selected-background); + color: var(--rz-steps-number-selected-color); +} + +.rz-steps-item { + display: inline-block; +} +.rz-steps-item:focus { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible .rz-steps-number { + outline: var(--rz-steps-number-focus-outline); + outline-offset: var(--rz-steps-number-focus-outline-offset); +} + +.rz-steps-title { + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); +} + +.rz-steps-number { + text-align: center; + line-height: var(--rz-steps-number-line-height); + color: var(--rz-steps-number-color); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); + width: var(--rz-steps-number-width); + height: var(--rz-steps-number-height); + background-color: var(--rz-steps-number-background-color); + border-radius: var(--rz-steps-number-border-radius); +} + +.rz-steps-buttons { + display: flex; + justify-content: space-between; + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); +} + +.rz-steps-next, +.rz-steps-prev { + display: inline-flex; + align-items: center; + color: var(--rz-steps-button-color) !important; + text-decoration: none; +} +.rz-steps-next:not(.rz-state-disabled):hover, +.rz-steps-prev:not(.rz-state-disabled):hover { + cursor: pointer; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps-next:hover, +.rz-steps-prev:hover { + text-decoration: none; +} +.rz-steps-next.rz-state-disabled, +.rz-steps-prev.rz-state-disabled { + opacity: 0.5 !important; +} + +.rz-steps-prev .rzi:before { + content: "navigate_before"; +} + +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; +} + +.rz-checkbox-list-vertical { + box-sizing: border-box; +} +.rz-checkbox-list-vertical .rz-checkbox { + display: flex; + align-items: center; + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); + cursor: pointer; +} + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} +.rz-checkbox-list-horizontal .rz-checkbox { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-checkbox { + cursor: initial; +} + +.rz-chkbox-label, +.rz-chkbox-template { + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); +} + +.rz-chkbox { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + width: var(--rz-checkbox-width); + min-width: var(--rz-checkbox-width); + height: var(--rz-checkbox-height); +} +.rz-chkbox:focus { + outline: var(--rz-outline-normal); +} +.rz-chkbox:focus-visible .rz-chkbox-box { + outline: var(--rz-checkbox-focus-outline); + outline-offset: var(--rz-checkbox-focus-outline-offset); +} + +.rz-chkbox-box { + position: absolute; + cursor: pointer; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: var(--rz-input-border); + border-width: var(--rz-checkbox-border-width); + border-radius: var(--rz-checkbox-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-chkbox-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-checkbox-border-width); +} +.rz-chkbox-box.rz-state-disabled { + cursor: initial; + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-checkbox-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-chkbox-box .rzi { + width: var(--rz-checkbox-icon-width); + height: var(--rz-checkbox-icon-height); + font-size: var(--rz-checkbox-icon-font-size); + color: var(--rz-checkbox-checked-color); + vertical-align: middle; + background-color: var(--rz-checkbox-checked-icon-background-color); + border-radius: var(--rz-checkbox-checked-icon-border-radius); +} +.rz-chkbox-box .rzi-check:before { + content: "check"; +} +.rz-chkbox-box .rzi-times { + width: var(--rz-checkbox-tri-icon-width); + height: var(--rz-checkbox-tri-icon-height); + font-size: var(--rz-checkbox-tri-icon-font-size); +} +.rz-chkbox-box .rzi-times:before { + content: "remove"; +} +.rz-chkbox-box.rz-state-active { + background-color: var(--rz-checkbox-checked-background-color); + border: var(--rz-checkbox-checked-border); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-checkbox-checked-hover-background-color); + border: var(--rz-checkbox-checked-hover-border); +} +.rz-chkbox-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-checkbox-checked-disabled-background-color); + border: var(--rz-checkbox-checked-disabled-border); + opacity: 0.5; +} + +.rz-switch { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + width: 3rem; + min-width: 3rem; + height: 1.8rem; + border-radius: calc(5 * var(--rz-border-radius)); +} +.rz-switch:focus { + outline: var(--rz-outline-normal); +} +.rz-switch:focus-visible { + outline: var(--rz-switch-focus-outline); + outline-offset: var(--rz-switch-focus-outline-offset); +} + +.rz-switch-circle { + position: absolute; + cursor: pointer; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; +} + +.rz-switch-circle.rz-disabled { + opacity: 0.5; + cursor: initial; +} + +.rz-switch .rz-switch-circle { + background: var(--rz-switch-background-color); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: calc(5 * var(--rz-border-radius)); +} + +.rz-switch.rz-switch-checked .rz-switch-circle { + background: var(--rz-switch-checked-background-color); +} + +.rz-switch .rz-switch-circle:before { + background: var(--rz-switch-circle-background-color); + width: 1.26rem; + height: 1.26rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; + border-radius: calc(5 * var(--rz-border-radius) - 3px); + transition: transform 0.2s linear; + box-shadow: var(--rz-switch-box-shadow); +} + +.rz-switch-circle:before { + position: absolute; + content: ""; + inset-block-start: 50%; +} + +.rz-switch-circle.rz-disabled:before { + box-shadow: none; +} + +.rz-switch.rz-switch-checked .rz-switch-circle:before { + background: var(--rz-switch-checked-circle-background-color); + transform: translateX(1.2rem); +} + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); +} + +.rz-radio-button-list-vertical { + box-sizing: border-box; +} +.rz-radio-button-list-vertical .rz-radio-btn { + display: flex; + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); + align-items: center; +} + +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} +.rz-radio-button-list-horizontal .rz-radio-btn { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-radiobutton { + cursor: initial; +} + +.rz-radiobutton-label, +.rz-radiobutton-template { + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); +} + +.rz-radiobutton { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + width: var(--rz-radio-width); + height: var(--rz-radio-height); + border-radius: var(--rz-radio-border-radius); +} +.rz-radiobutton:focus { + outline: var(--rz-outline-normal); +} +.rz-radiobutton:focus-visible { + outline: var(--rz-radio-focus-outline); + outline-offset: var(--rz-radio-focus-outline-offset); +} + +.rz-radiobutton-box { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + width: inherit; + border: var(--rz-input-border); + border-width: var(--rz-radio-border-width); + border-radius: var(--rz-radio-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box:active:not(.rz-state-disabled) { + background-color: var(--rz-radio-active-background-color); + box-shadow: var(--rz-radio-active-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-disabled { + cursor: initial; + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-radio-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-radiobutton-box .rzi { + width: var(--rz-radio-icon-width); + height: var(--rz-radio-icon-height); + color: var(--rz-radio-checked-color); +} +.rz-radiobutton-box .rzi-circle-on { + border-radius: var(--rz-radio-border-radius); + vertical-align: middle; + background-color: var(--rz-radio-circle-background-color); + box-shadow: var(--rz-radio-circle-shadow); +} +.rz-radiobutton-box .rzi-circle-on:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-circle-hover-background-color); +} +.rz-radiobutton-box.rz-state-active { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-checked-hover-background-color); + border: var(--rz-radio-checked-border); + box-shadow: var(--rz-radio-checked-hover-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); + opacity: 0.5; +} + +.rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; + border: var(--rz-fieldset-border); + border-radius: var(--rz-fieldset-border-radius); +} + +.rz-fieldset-content { + padding: var(--rz-fieldset-padding); +} + +.rz-fieldset-content-wrapper { + overflow: hidden; +} + +.rz-fieldset-legend-text { + vertical-align: middle; +} + +.rz-fieldset-toggler { + vertical-align: middle; + width: var(--rz-fieldset-toggle-width); + height: var(--rz-fieldset-toggle-height); + background-color: var(--rz-fieldset-toggle-background-color); + color: var(--rz-fieldset-toggle-color); + border: var(--rz-fieldset-toggle-border); +} +.rz-fieldset-toggler.rzi { + text-align: center; + font-size: var(--rz-fieldset-toggle-font-size); + line-height: var(--rz-fieldset-toggle-height); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); +} +.rz-fieldset-toggler.rzi-minus:before { + content: "remove"; +} +.rz-fieldset-toggler.rzi-plus:before { + content: "add"; +} +a:focus .rz-fieldset-toggler { + outline: var(--rz-outline-normal); +} +a:focus-visible .rz-fieldset-toggler { + outline: var(--rz-fieldset-toggle-focus-outline); + outline-offset: var(--rz-fieldset-toggle-focus-outline-offset); +} + +.rz-fieldset-legend { + float: none; + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); + width: auto; + color: var(--rz-fieldset-legend-color); + font-size: var(--rz-fieldset-legend-font-size); +} +.rz-fieldset-legend a { + display: inline-flex; + align-items: center; + color: inherit; + text-decoration: none; +} +.rz-fieldset-legend a:focus { + outline: var(--rz-outline-normal); +} + +.rz-multiselect, .rz-dropdown { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + position: relative; + overflow: hidden; + text-align: start; +} +.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-dropdown.rz-dropdown-open { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect.rz-state-focus { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect-trigger, .rz-dropdown-trigger { + position: absolute; + display: flex; + align-items: center; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; +} +.rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { + width: var(--rz-dropdown-trigger-icon-width); + height: var(--rz-dropdown-trigger-icon-height); + font-size: var(--rz-dropdown-trigger-icon-height); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); +} +.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-dropdown-clear-icon { + position: absolute; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; + height: 100%; + display: flex; + align-items: center; + font-size: var(--rz-dropdown-trigger-icon-height); + opacity: 0.4; +} +.rz-dropdown-clear-icon:before { + content: "close"; +} +.rz-dropdown-clear-icon:hover { + opacity: 1; +} +.rz-state-disabled > .rz-dropdown-clear-icon { + display: none; +} + +.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel { + position: absolute; + background-color: var(--rz-dropdown-open-background-color); + border-radius: var(--rz-input-border-radius); + border: var(--rz-dropdown-panel-border); + box-shadow: var(--rz-dropdown-panel-shadow); +} + +.rz-dropdown-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} + +.rz-multiselect-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} +.rz-multiselect-panel .rz-chkbox { + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); +} + +.rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { + list-style: none; + padding: var(--rz-dropdown-items-padding); + margin: 0; +} +.rz-autocomplete-items li, .rz-multiselect-items li, .rz-dropdown-items li { + /* The 'No results found' item has no CSS class */ +} + +.rz-dropdown-items-wrapper, +.rz-multiselect-items-wrapper { + overflow: auto; + margin: var(--rz-dropdown-items-margin); + border-radius: var(--rz-input-border-radius); +} + +.rz-multiselect-items-wrapper { + overflow: auto; +} + +.rz-dropdown-filter-container { + padding: var(--rz-dropdown-filter-padding); + border-bottom: var(--rz-dropdown-filter-border); +} + +.rz-multiselect-filter-container .rz-inputtext, .rz-dropdown-filter { + background-color: transparent; + color: var(--rz-text-color); +} + +.rz-multiselect-header { + display: flex; + align-items: center; + padding: var(--rz-dropdown-item-padding); + margin: var(--rz-dropdown-items-margin); +} + +.rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-autocomplete-items li, .rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item { + padding: var(--rz-dropdown-item-padding); + transition: var(--rz-dropdown-item-transition); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover, .rz-dropdown-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-state-disabled.rz-menuitem, .rz-state-disabled.rz-autocomplete-list-item, .rz-state-disabled.rz-multiselect-item, .rz-autocomplete-items li.rz-state-disabled, .rz-dropdown-items li.rz-state-disabled, .rz-multiselect-items li.rz-state-disabled, .rz-dropdown-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} +.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} + +.rz-multiselect-close { + display: none; +} + +.rz-multiselect-filter-container { + flex: auto; + border-bottom: var(--rz-dropdown-filter-border); +} +.rz-multiselect-filter-container .rz-inputtext { + padding: 0; +} + +.rz-multiselect-item { + display: flex; + align-items: center; +} + +.rz-multiselect-item-content { + flex: 1; +} + +.rz-multiselect-label-container, +.rz-dropdown-label { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); + margin: 0; +} + +.rz-dropdown-chips { + height: inherit; + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); +} +.rz-dropdown-chips .rz-dropdown-chips-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-inline-end: 3rem; +} +.rz-dropdown-chips .rz-chip { + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: var(--rz-chip-gap); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); + color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); + border-radius: var(--rz-chip-border-radius); +} +.rz-dropdown-chips .rz-chip .rz-chip-text { + font-size: var(--rz-chip-font-size); +} +.rz-dropdown-chips .rz-chip .rz-button { + border-radius: var(--rz-chip-border-radius); + box-shadow: none; + align-self: stretch; +} +.rz-dropdown-chips .rz-chip .rzi { + vertical-align: middle; + font-size: 1rem; +} + +.rz-clear .rz-multiselect-label-container, +.rz-clear .rz-dropdown-label { + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); +} + +.rz-autocomplete { + box-sizing: border-box; + display: inline-block; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + background-color: var(--rz-input-background-color); + transition: var(--rz-input-transition); + overflow: hidden; +} +.rz-autocomplete-input { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + background-color: transparent; + color: var(--rz-input-value-color); + box-shadow: var(--rz-input-shadow); + border: none; + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + width: 100%; + transition: var(--rz-input-transition); +} +.rz-autocomplete-input:focus { + outline: none; +} +.rz-autocomplete-input:disabled { + border: none; +} + +.rz-autocomplete-panel { + overflow: auto; + box-sizing: content-box; +} + +.rz-listbox { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + overflow: hidden; + background-color: var(--rz-listbox-background-color); + border: var(--rz-listbox-border); + border-radius: var(--rz-listbox-border-radius); + text-align: start; +} +.rz-listbox .rz-chkbox { + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); +} +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-listbox:focus, .rz-listbox:focus-within { + outline: var(--rz-outline-normal); + border: var(--rz-listbox-focus-border); + box-shadow: var(--rz-listbox-focus-shadow); +} + +.rz-listbox-list { + margin: 0; + padding: 0; +} + +.rz-listbox-item { + cursor: default; + padding: var(--rz-listbox-item-padding); + margin: var(--rz-listbox-item-margin); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-listbox-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-listbox-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-listbox-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} + +.rz-listbox-header { + display: flex; + align-items: center; + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); + border-bottom: var(--rz-listbox-filter-border); +} + +.rz-listbox-list-wrapper { + flex: auto; + overflow: auto; + padding: var(--rz-listbox-padding); +} + +.rz-listbox-filter-container, .rz-dropdown-filter-container, .rz-multiselect-filter-container { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.rz-listbox-filter-container .rz-inputtext, .rz-dropdown-filter-container .rz-inputtext, .rz-multiselect-filter-container .rz-inputtext { + flex: auto; + width: 0; + border: none; + line-height: var(--rz-input-line-height); +} +.rz-listbox-filter-container .rz-inputtext:focus, .rz-dropdown-filter-container .rz-inputtext:focus, .rz-multiselect-filter-container .rz-inputtext:focus { + outline: none; +} +.rz-listbox-filter-container .rzi-search, .rz-dropdown-filter-container .rzi-search, .rz-multiselect-filter-container .rzi-search { + width: var(--rz-listbox-header-icon-width); + height: var(--rz-listbox-header-icon-height); + line-height: var(--rz-listbox-header-icon-height); + font-size: var(--rz-listbox-header-icon-height); +} +.rz-listbox-filter-container .rzi-search:before, .rz-dropdown-filter-container .rzi-search:before, .rz-multiselect-filter-container .rzi-search:before { + content: "search"; +} + +.rz-listbox-filter-container { + flex: auto; +} +.rz-listbox-filter-container .rz-inputtext { + background-color: transparent; +} + +.rz-splitbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { + display: none; +} +.rz-splitbutton .rz-button.rz-splitbutton-menubutton { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { + flex: auto; + overflow: hidden; + text-overflow: ellipsis; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.rz-splitbutton-menu { + display: none; + position: absolute; + min-width: var(--rz-splitbutton-menu-min-width); + box-shadow: var(--rz-splitbutton-menu-shadow); +} + +.rz-menu-list { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-menuitem .rz-menuitem-link { + color: inherit; + display: block; + text-decoration: none; +} +.rz-menuitem .rz-menuitem-link:hover { + text-decoration: none; +} +.rz-menuitem .rz-menuitem-icon { + vertical-align: top; +} + +.rz-splitbutton-menubutton { + margin-inline-start: 1px; +} +.rz-splitbutton-menubutton.rz-variant-outlined { + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); +} +.rz-splitbutton-menubutton .rz-button-text { + display: none; +} +.rz-splitbutton-menubutton .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-slider { + box-sizing: border-box; + position: relative; + display: inline-block; + border: var(--rz-slider-border); + border-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-background-color); +} +.rz-slider.rz-state-disabled { + background-color: var(--rz-slider-disabled-background-color); + border: var(--rz-slider-disabled-border); +} +.rz-slider.rz-state-disabled .rz-slider-range { + background-color: var(--rz-slider-disabled-range-background-color); + border: var(--rz-slider-disabled-range-border); +} +.rz-slider.rz-state-disabled .rz-slider-handle { + background-color: var(--rz-slider-disabled-handle-background-color); + border: var(--rz-slider-disabled-handle-border); +} + +.rz-slider-horizontal { + height: var(--rz-slider-horizontal-height); + width: var(--rz-slider-horizontal-width); +} + +.rz-slider-range { + position: absolute; + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-range-background-color); + border: var(--rz-slider-range-border); +} + +.rz-slider-handle { + position: absolute; + transform: translateY(-50%); + top: 50%; + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); + background-color: var(--rz-slider-handle-background-color); + border: var(--rz-slider-handle-border); + border-radius: var(--rz-slider-handle-border-radius); + box-shadow: var(--rz-slider-handle-shadow); + width: var(--rz-slider-handle-width); + height: var(--rz-slider-handle-height); + transition: var(--rz-slider-handle-transition); +} + +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active { + background-color: var(--rz-slider-handle-hover-background-color); + box-shadow: var(--rz-slider-handle-hover-shadow); + border: var(--rz-slider-handle-hover-border); + cursor: pointer; + outline: none; +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus { + outline: var(--rz-outline-normal); +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus-visible { + outline: var(--rz-slider-handle-focus-outline); + outline-offset: var(--rz-slider-handle-focus-outline-offset); +} + +.rz-rating { + box-sizing: border-box; + display: inline-flex; + font-size: var(--rz-rating-font-size); + height: 1em; +} +.rz-rating.rz-state-disabled .rzi { + opacity: var(--rz-rating-disabled-opacity); + color: var(--rz-rating-disabled-color); +} +.rz-rating a { + width: 1em; + height: 1em; + text-decoration: none; + cursor: default; + outline: none; +} +.rz-rating .rzi { + color: var(--rz-rating-color); + font-size: 1em; +} +.rz-rating .rzi-ban { + color: var(--rz-rating-ban-icon-color); +} +.rz-rating .rzi-ban:before { + content: "highlight_off"; +} +.rz-rating .rzi-star-o { + opacity: var(--rz-rating-opacity); +} +.rz-rating .rzi-star-o:before { + content: "star_border"; +} +.rz-rating .rzi-star { + color: var(--rz-rating-selected-color); +} +.rz-rating .rzi-star:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover { + cursor: pointer; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-ban { + color: var(--rz-rating-selected-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-ban { + color: var(--rz-rating-focus-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o:before { + content: "star"; +} + +.rz-security-code { + box-sizing: border-box; + display: inline-flex; +} + +.rz-security-code-wrapper { + flex: 1; + --rz-gap: 0.5rem; +} + +.rz-security-code-input { + text-align: center; + min-width: var(--rz-security-code-input-min-width); + min-height: var(--rz-security-code-input-min-height); + width: 100%; + height: 100%; + padding: var(--rz-security-code-input-padding); + font-size: var(--rz-security-code-input-font-size); + font-weight: var(--rz-security-code-input-font-weight); + line-height: var(--rz-security-code-input-line-height); +} + +.rz-selectbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-selectbutton .rz-button:focus-visible { + z-index: 1; +} + +.rz-selectbutton .rz-button.rz-button-xs { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-xs:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-sm { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { + display: inline-block; + position: relative; +} +.rz-datepicker .rz-readonly { + cursor: pointer; +} +.rz-datepicker > .rz-inputtext { + width: 100%; + line-height: var(--rz-datepicker-line-height); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); +} +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { + box-shadow: none; + color: var(--rz-datepicker-trigger-icon-hover-color); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} + +.rz-datepicker-inline { + background-color: var(--rz-datepicker-panel-background-color); + border: var(--rz-input-border); +} + +.rz-datepicker-trigger { + box-shadow: none; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 0.625rem; + transform: translateY(-50%); + background-color: transparent; + padding: 0; + vertical-align: text-top; + color: var(--rz-datepicker-trigger-icon-color); + width: var(--rz-datepicker-trigger-icon-width); + height: var(--rz-datepicker-trigger-icon-height); + font-size: var(--rz-datepicker-trigger-icon-height); +} +.rz-datepicker-trigger.rz-state-disabled { + border: none; + box-shadow: none; + cursor: initial; + opacity: 1; + color: var(--rz-input-disabled-color); +} +.rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active), .rz-datepicker-trigger:not(.rz-state-disabled):hover:active { + background-color: transparent; +} +.rz-datepicker-trigger:not(.rz-state-disabled):active { + box-shadow: none !important; + background-image: none !important; +} +.rz-datepicker-trigger .rzi-calendar, +.rz-datepicker-trigger .rzi-time { + font-size: inherit; + vertical-align: top; +} +.rz-datepicker-trigger .rzi-calendar:before { + content: "calendar_today"; +} +.rz-datepicker-trigger .rzi-time:before { + content: "schedule"; +} +.rz-datepicker-trigger .rz-button-text { + display: none; +} + +.rz-datepicker-popup-container { + box-sizing: content-box; + position: absolute; + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); + box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); +} + +.rz-datepicker-inline-container { + position: static; + white-space: nowrap; +} +.rz-datepicker-inline-container .rz-calendar { + display: inline-block; +} + +.rz-datepicker-footer { + position: relative; + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--rz-datepicker-header-background-color); + border-bottom: var(--rz-datepicker-header-border); + color: var(--rz-datepicker-header-color); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); +} + +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); +} +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { + color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); +} +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); +} + +.rz-calendar-prev { + order: 1; +} +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { + content: "chevron_right"; +} + +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { + outline: var(--rz-outline-normal); +} +.rz-calendar-view-container:focus-visible { + outline: var(--rz-datepicker-focus-outline); + outline-offset: var(--rz-datepicker-focus-outline-offset); +} + +.rz-calendar-view { + table-layout: fixed; + border-collapse: collapse; +} +.rz-calendar-view th { + font-weight: normal; + font-size: var(--rz-datepicker-calendar-header-font-size); + text-transform: var(--rz-datepicker-calendar-header-text-transform); + color: var(--rz-datepicker-calendar-header-color); + padding: var(--rz-datepicker-calendar-item-padding); + text-align: center; +} +.rz-calendar-view td { + text-align: center; + border-top: var(--rz-datepicker-calendar-border); + padding: 0; +} +.rz-calendar-view td .rz-state-default { + display: block; + padding: var(--rz-datepicker-calendar-item-padding); + color: var(--rz-datepicker-calendar-color); + font-size: var(--rz-datepicker-calendar-font-size); + border-radius: var(--rz-datepicker-calendar-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-calendar-view td .rz-state-default.rz-calendar-today { + color: var(--rz-datepicker-calendar-today-color); + background-color: var(--rz-datepicker-calendar-today-background-color); + box-shadow: var(--rz-datepicker-calendar-today-box-shadow); + border-radius: var(--rz-datepicker-calendar-today-border-radius); +} +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { + text-decoration: none; + color: var(--rz-datepicker-calendar-hover-color); + background-color: var(--rz-datepicker-calendar-hover-background-color); + cursor: pointer; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { + color: var(--rz-datepicker-calendar-selected-color); + background-color: var(--rz-datepicker-calendar-selected-background-color); + padding: var(--rz-datepicker-calendar-item-padding); + box-shadow: none; +} +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { + color: var(--rz-datepicker-calendar-selected-hover-color); + background-color: var(--rz-datepicker-calendar-selected-hover-background-color); +} +.rz-calendar-view .rz-state-disabled { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-other-month { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-week-number { + opacity: 0.5; +} + +/* Time Picker Styles */ +.rz-timepicker { + display: flex; + align-items: center; + justify-content: center; + gap: var(--rz-timepicker-gap); + border-top: var(--rz-datepicker-calendar-border); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); + color: var(--rz-timepicker-color); +} +.rz-timepicker .rzi-chevron-up:before { + content: "expand_less"; +} +.rz-timepicker .rzi-chevron-down:before { + content: "expand_more"; +} +.rz-timepicker .rz-separator { + color: var(--rz-timepicker-separator-color); +} +.rz-timepicker .rz-separator a { + display: none; +} +.rz-timepicker .rz-button-md { + padding: var(--rz-timepicker-button-padding); + text-transform: uppercase; +} + +.rz-hour-picker, +.rz-minute-picker, +.rz-second-picker { + background-color: var(--rz-timepicker-background-color); + width: 4rem; +} + +.rz-ampm-picker a { + text-decoration: none; +} + +.rz-numeric { + display: inline-block; + position: relative; + padding: 0px; +} +.rz-numeric input[type=number], +.rz-numeric input[type=text] { + -moz-appearance: textfield; + width: 100%; + height: 100%; + border: none; + background-color: transparent; + line-height: var(--rz-numeric-line-height); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); + outline: none; +} +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.rz-numeric.rz-state-disabled .rz-numeric-button { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); +} +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); + background-image: none; + box-shadow: none; + cursor: initial; +} + +.rz-numeric-button { + position: absolute; + inset-inline-end: var(--rz-numeric-button-offset); + padding: 0; + width: var(--rz-numeric-button-width); + height: var(--rz-numeric-button-height); + border-radius: var(--rz-numeric-button-border-radius); + background-color: var(--rz-numeric-button-background-color); + color: var(--rz-numeric-button-color); +} +.rz-numeric-button:hover { + background-color: var(--rz-numeric-button-background-color); +} +.rz-numeric-button .rzi { + font-size: var(--rz-numeric-button-height); + vertical-align: top; +} +.rz-numeric-button .rzi-caret-up:before { + content: "expand_less"; +} +.rz-numeric-button .rzi-caret-down:before { + content: "expand_more"; +} + +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); +} + +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); +} + +.rz-fileupload { + box-sizing: border-box; + display: inline-block; +} +.rz-fileupload .rz-button { + vertical-align: middle; + -webkit-appearance: none !important; +} + +.rz-fileupload-choose { + position: relative; + display: inline-block; + overflow: hidden; + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose input[type=file] { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + min-height: 100%; + cursor: pointer; +} +.rz-fileupload-choose.rz-state-disabled input[type=file] { + cursor: default; +} +.rz-fileupload-choose:not(.rz-state-disabled) { + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):active { + background-color: var(--rz-upload-choose-active-background-color); + color: var(--rz-upload-choose-active-color); +} + +.rz-fileupload-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.rz-fileupload-row > div { + margin: var(--rz-upload-files-margin); +} +.rz-fileupload-row .rz-button-text { + display: none; +} +.rz-fileupload-row .rz-button { + background-color: var(--rz-upload-files-remove-background-color); + color: var(--rz-upload-files-remove-color); +} +.rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash { + display: block; +} +.rz-fileupload-row .rz-button .rzi-close:before, +.rz-fileupload-row .rz-button .rzi-times:before, +.rz-fileupload-row .rz-button .rz-icon-trash:before { + content: "close"; +} + +.rz-fileupload-buttonbar { + position: relative; + background-color: var(--rz-upload-button-bar-background-color); + padding: var(--rz-upload-button-bar-padding); + border-radius: var(--rz-upload-button-bar-border-radius); +} +.rz-fileupload-buttonbar .rz-button:nth-child(3) { + float: right; + background-color: var(--rz-upload-cancel-background-color); + color: var(--rz-upload-cancel-color); +} + +.rz-fileupload-files { + background-color: var(--rz-upload-files-background-color); + padding: var(--rz-upload-files-padding); +} + +.rz-datatable { + position: relative; + box-shadow: var(--rz-grid-shadow); + border: var(--rz-grid-cell-border); + border-radius: var(--rz-grid-border-radius); + background-color: var(--rz-grid-background-color); + overflow: hidden; +} +.rz-datatable:focus { + outline: var(--rz-outline-normal); +} +.rz-datatable:focus-visible { + outline: var(--rz-grid-focus-outline); + outline-offset: var(--rz-grid-focus-outline-offset); +} +.rz-datatable .rz-col-icon { + text-align: center; + vertical-align: middle; + width: var(--rz-grid-column-icon-width); + padding: var(--rz-grid-column-icon-padding); +} +.rz-datatable .rzi-chevron-circle-right { + vertical-align: top; + /* Right-to-left arrow icons */ +} +.rz-datatable .rzi-chevron-circle-right:before { + content: "arrow_right"; +} +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} +.rz-datatable .rzi-chevron-circle-down { + vertical-align: top; +} +.rz-datatable .rzi-chevron-circle-down:before { + content: "arrow_drop_down"; +} +.rz-datatable.rz-has-template > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view > .rz-datatable-scrollable-body > .rz-datatable-scrollable-table-wrapper > table > .rz-datatable-scrollable-colgroup col:first-child { + width: var(--rz-grid-column-icon-width); +} + +.rz-unselectable-text { + user-select: none; +} + +.rz-datatable-tablewrapper > table, +.rz-datatable-scrollable-header-box > table, +.rz-datatable-scrollable-table-wrapper > table, +.rz-datatable-scrollable-footer-box > table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +.rz-resizable-column { + position: relative; +} + +.rz-datatable-reorder-indicator-up { + position: absolute; +} +.rz-datatable-reorder-indicator-up:before { + content: "arrow_drop_down"; +} + +.rz-datatable-reorder-indicator-down { + position: absolute; +} +.rz-datatable-reorder-indicator-down:before { + content: "arrow_drop_up"; +} + +.rz-column-resizer { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + cursor: col-resize; + width: var(--rz-grid-column-resizer-width); +} +.rz-column-resizer:after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + width: var(--rz-grid-column-resizer-helper-width); + background-color: transparent; +} +.rz-column-resizer:hover:after, .rz-column-resizer:active:after { + background-color: var(--rz-grid-column-resizer-helper-background-color); +} + +.rz-rowgroup-header .fa, +.rz-row-toggler { + color: var(--rz-grid-cell-color); +} + +.rz-datatable-scrollable-footer { + background-color: var(--rz-grid-header-background-color); + border-top: var(--rz-grid-cell-border); +} + +.rz-datatable-thead th, +.rz-grid-table thead th { + background-color: var(--rz-grid-header-background-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: inherit; + border-bottom: var(--rz-grid-header-cell-border-bottom); +} +.rz-datatable-thead th:not(:last-child), +.rz-grid-table thead th:not(:last-child) { + border-inline-end: var(--rz-grid-header-cell-border); +} +.rz-datatable-thead th > div:not(.rz-cell-filter), +.rz-grid-table thead th > div:not(.rz-cell-filter) { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + outline: none; + padding: var(--rz-grid-header-cell-padding); +} +.rz-datatable-thead th.rz-state-focused, +.rz-grid-table thead th.rz-state-focused { + outline: var(--rz-grid-cell-focus-outline); + outline-offset: var(--rz-grid-cell-focus-outline-offset); +} +.rz-datatable-thead th .rz-column-title, +.rz-grid-table thead th .rz-column-title { + display: inline-flex; + flex: auto; + align-items: center; + gap: 0.25rem; + width: 100%; + font-size: var(--rz-grid-header-font-size); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding-inline: var(--rz-grid-header-title-padding-inline); + font-weight: var(--rz-grid-header-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content, +.rz-grid-table thead th .rz-column-title-content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content:has(.rz-chkbox), +.rz-grid-table thead th .rz-column-title-content:has(.rz-chkbox) { + overflow: visible; +} +.rz-datatable-thead th.rz-text-align-center .rz-column-title, +.rz-grid-table thead th.rz-text-align-center .rz-column-title { + justify-content: center; + padding-inline-start: 0; +} +.rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th.rz-text-align-right .rz-column-title, +.rz-grid-table thead th.rz-text-align-right .rz-column-title { + justify-content: right; +} +.rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th .rz-column-drag + .rz-column-title, +.rz-grid-table thead th .rz-column-drag + .rz-column-title { + padding-inline-start: 0; +} + +.rz-datatable-tfoot td, .rz-grid-table tfoot td { + background-color: var(--rz-grid-foot-background-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + color: var(--rz-grid-foot-cell-color); + padding: var(--rz-grid-cell-padding); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} + +.rz-datatable-scrollable-header { + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-datatable-scrollable-body { + overflow: auto; + border-top: none; + flex: auto; + border-bottom-right-radius: var(--rz-border-radius); + border-bottom-left-radius: var(--rz-border-radius); +} + +.rz-has-pager .rz-datatable-scrollable-body { + border-radius: 0; +} + +.rz-sortable-column { + cursor: pointer; +} +.rz-sortable-column:focus { + outline: none; +} +.rz-sortable-column.rz-state-active { + background-color: var(--rz-grid-header-sorted-background-color); +} +.rz-sortable-column > div:hover .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { + color: var(--rz-grid-sort-icon-color); +} +.rz-sortable-column .rzi-grid-sort { + width: var(--rz-grid-sort-icon-width); + height: var(--rz-grid-sort-icon-height); + font-size: var(--rz-grid-sort-icon-height); + text-align: left; +} +.rz-sortable-column .rzi-sort { + color: transparent; +} +.rz-sortable-column .rzi-sort:before { + content: "sort"; +} +.rz-sortable-column .rzi-sort-asc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-asc:before { + content: "arrow_drop_up"; +} +.rz-sortable-column .rzi-sort-desc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-desc:before { + content: "arrow_drop_down"; +} + +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td { + background-color: var(--rz-grid-stripe-background-color); +} +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td { + background-color: var(--rz-grid-stripe-odd-background-color); +} + +.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th { + border-bottom: var(--rz-grid-header-cell-border); +} +.rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { + border-inline-end: var(--rz-grid-header-cell-border); +} + +.rz-datatable-data td, +.rz-grid-table td { + padding: var(--rz-grid-cell-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-data td:not(:last-child), +.rz-grid-table td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td.rz-composite-cell, +.rz-grid-table td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td .rz-cell-data, +.rz-grid-table td .rz-cell-data { + color: var(--rz-grid-cell-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rz-datatable-data td .rz-cell-data:has(.rz-chkbox), .rz-datatable-data td .rz-cell-data:has(.rz-button), +.rz-grid-table td .rz-cell-data:has(.rz-chkbox), +.rz-grid-table td .rz-cell-data:has(.rz-button) { + overflow: visible; +} +.rz-datatable-data td .rz-cell-toggle, +.rz-grid-table td .rz-cell-toggle { + display: flex; + align-items: center; + gap: 0.25rem; +} +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} +.rz-datatable-data tr td:first-child, +.rz-grid-table tr td:first-child { + border-inline-start: none; +} +.rz-datatable-data tr td:last-child:not(.rz-composite-cell), +.rz-grid-table tr td:last-child:not(.rz-composite-cell) { + border-inline-end: none; +} +.rz-datatable-data tr:first-child > td, +.rz-grid-table tr:first-child > td { + border-top: none; +} +.rz-datatable-data tr:last-child > td, +.rz-grid-table tr:last-child > td { + border-bottom: none; +} + +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { + border-bottom: none; + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td { + border-bottom: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} + +.rz-datatable-reflow tbody td > .rz-column-title { + display: none; +} + +.rz-datatable-scrollable { + display: flex; + flex-direction: column; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper { + height: 0; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view { + height: 0; +} + +.rz-datatable-scrollable-wrapper { + display: flex; + flex-direction: column; + flex: auto; +} + +.rz-datatable-scrollable-view { + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; +} + +.rz-datatable-header { + background-color: var(--rz-grid-toolbar-background-color); + padding: var(--rz-grid-header-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-header .rzi-plus { + font-size: var(--rz-grid-cell-font-size); +} +.rz-datatable-header .rzi-plus:before { + content: "add"; +} + +.rz-cell-filter { + padding: var(--rz-grid-filter-padding); + margin: var(--rz-grid-filter-margin); + border-top: var(--rz-grid-filter-border); + font-size: var(--rz-grid-filter-font-size); + font-weight: normal; +} +.rz-cell-filter .rz-cell-filter-label { + display: flex; + flex: auto; + align-items: center; +} +.rz-cell-filter .rz-cell-filter-label > .rzi { + width: var(--rz-grid-filter-icon-width); + height: var(--rz-grid-filter-icon-height); + font-size: var(--rz-grid-filter-icon-font-size); + margin-inline: var(--rz-grid-filter-icon-margin-inline); + color: var(--rz-grid-filter-color); +} +.rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { + margin-inline-start: auto; +} +.rz-cell-filter .rz-cell-filter-label .rz-current-filter { + margin-inline-start: 0.5rem; +} + +.rz-selectable tbody tr.rz-data-row td, +.rz-selectable tbody tr.rz-data-row .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:after { + content: ""; + position: absolute; + inset: 0; + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:before { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:after { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > .rzi { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > th.rz-state-focused { + color: var(--rz-grid-cell-focus-color) !important; +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > .rzi { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-disabled { + opacity: 0.5; + pointer-events: none; +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { + color: var(--rz-grid-hover-color); +} + +.rz-cell-filter-content { + display: flex; + flex: auto; + align-items: center; + color: var(--rz-grid-filter-color); + min-height: 1.375rem; + container-type: inline-size; + container-name: rz-cell-filter-content; +} + +@container rz-cell-filter-content (max-width: 200px) { + .rz-cell-filter-content .rz-filter-button .rzi { + display: none; + } + .rz-cell-filter-content .rz-filter-button { + position: absolute; + z-index: 1; + min-height: 0; + inset-inline-start: calc(var(--rz-border-width)); + height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + max-height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + line-height: calc(1.25rem - var(--rz-border-width) * 2); + border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-start-end-radius: 0; + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } +} +.rz-expanded-row > td { + border-bottom: none; + background-color: var(--rz-grid-hover-background-color); +} +.rz-expanded-row > td .rz-cell-data, +.rz-expanded-row > td .rz-row-toggler { + color: var(--rz-grid-hover-color); +} + +.rz-expanded-row-template { + background-color: var(--rz-grid-detail-template-background-color); + padding: var(--rz-grid-detail-template-padding); + border: var(--rz-grid-detail-template-border); + border-radius: var(--rz-grid-detail-template-border-radius); +} + +.rz-expanded-row-content > td { + padding-top: 0; + background-color: var(--rz-grid-detail-template-background-color); +} + +.rz-rowgroup-header a:hover { + text-decoration: none; +} +.rz-rowgroup-header td { + border-top: var(--rz-grid-border); + border-bottom: var(--rz-grid-border); +} + +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; +} + +.rz-datatable-loading-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--rz-grid-loading-indicator-color); + z-index: 2; +} +.rz-datatable-loading-content .rzi-circle-o-notch { + animation: rotation 0.5s linear infinite; + font-size: 2rem; +} +.rz-datatable-loading-content .rzi-circle-o-notch:before { + content: "refresh"; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@media (max-width: 768px) { + .rz-datatable-reflow .rz-data-grid-data > table, + .rz-datatable-reflow .rz-datatable-tablewrapper > table, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table { + table-layout: auto; + display: block; + } + .rz-datatable-reflow .rz-data-grid-data > table > tbody, + .rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody { + display: block; + } + .rz-datatable-reflow thead th { + display: none; + } + .rz-datatable-reflow .rz-data-row { + display: block; + } + .rz-datatable-reflow .rz-data-row > td { + display: block; + width: 100% !important; + text-align: left !important; + border: none; + } + .rz-datatable-reflow .rz-data-row > td .rz-column-title { + display: block; + } +} +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + +.rz-grid-filter-buttons { + display: flex; + justify-content: space-between; + padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} + +.rz-grid-filter-icon { + justify-self: flex-end; + color: var(--rz-grid-filter-color); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); + font-size: var(--rz-grid-header-filter-icon-font-size); + transition: var(--rz-grid-state-transition); + font-weight: 400; +} +.rz-grid-filter-icon:hover { + cursor: pointer; + color: var(--rz-grid-header-filter-icon-hover-color); +} + +.rz-grid-filter-active { + color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; +} + +.rz-data-grid { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.rz-data-grid-data { + overflow: auto; + flex: 1; + box-shadow: var(--rz-grid-data-border-shadow); +} + +.rz-grid-table td, .rz-grid-table th { + padding: var(--rz-grid-cell-padding); +} + +.rz-grid-table thead { + position: sticky; + top: 0; + z-index: 2; +} +.rz-grid-table thead th { + position: sticky; + top: 0; + z-index: 1; +} + +.rz-grid-table-fixed { + table-layout: fixed; +} +.rz-grid-table-fixed .rz-frozen-cell { + position: -webkit-sticky; + position: sticky; +} +.rz-grid-table-fixed .rz-frozen-cell-left, +.rz-grid-table-fixed .rz-frozen-cell-right, +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + background: var(--rz-grid-frozen-cell-background-color); + z-index: 1; +} +.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} + +.rz-grid-table tfoot, .rz-grid-table tfoot td { + position: sticky; + bottom: 0; + z-index: 1; +} + +.rz-grid-table { + width: 100%; + position: relative; + border-collapse: separate; + border-spacing: 0; +} +.rz-grid-table th { + white-space: nowrap; + overflow: hidden; +} +.rz-grid-table td { + white-space: nowrap; + overflow: hidden; +} + +.rz-grid-table tbody > div { + display: table-row; +} + +.rz-column-drag { + cursor: grab; + font-size: inherit; + color: var(--rz-column-drag-handle-color); + transition: var(--rz-grid-state-transition); + margin-inline: var(--rz-column-drag-handle-margin-inline); +} +.rz-column-drag:after { + content: "more_vert"; +} +.rz-column-drag:hover { + color: var(--rz-column-drag-handle-hover-color); +} +.rz-column-drag:active { + color: var(--rz-column-drag-handle-hover-color); + cursor: grabbing; +} + +.rz-column-draggable { + background-color: var(--rz-grid-header-background-color); + border-radius: var(--rz-border-radius); + box-shadow: var(--rz-column-draggable-shadow); + padding: 0; + display: flex; + align-items: center; +} +.rz-column-draggable > div { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + outline: none; + padding: 0; +} +.rz-column-draggable .rz-column-drag { + max-width: 1rem; +} +.rz-column-draggable .rz-column-title { + display: inline-flex; + flex: auto; + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-column-draggable .rz-grid-filter-icon { + display: none; +} + +.rz-group-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-group-header-items { + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); +} + +.rz-group-header-item { + display: flex; + align-items: center; + color: var(--rz-grid-group-header-item-color); + background-color: var(--rz-grid-group-header-item-background-color); + border: var(--rz-grid-group-header-item-border); + border-radius: var(--rz-grid-group-header-item-border-radius); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); + width: fit-content; + float: left; +} +.rz-group-header-item .rz-dialog-titlebar-close { + display: flex; + align-items: center; + text-decoration: none; +} + +.rz-group-header-item-title { + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); +} + +.rz-group-header-drop { + font-size: var(--rz-body-font-size); + color: var(--rz-text-tertiary-color); + height: fit-content; +} + +.rz-column-picker { + display: flex; +} + +.rz-filter-menu-symbol { + width: 1.75rem; + display: inline-block; +} + +.rz-filter-button { + flex: none; + margin-inline-end: 0.5rem; +} + +.rz-data-grid.rz-density-compact { + --rz-grid-cell-line-height: 1rem; + --rz-grid-cell-padding: 0.25rem 0.5rem; + --rz-grid-header-cell-padding: 0.25rem 0; + --rz-grid-header-padding: 0.25rem 1rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-filter-padding: 0.25rem 0.5rem; + --rz-grid-group-header-padding: 0.25rem; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; + --rz-dialog-close-font-size: 1rem; +} + +.rz-pager { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--rz-pager-gap); + flex-wrap: wrap; + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ +} +.rz-pager:focus { + outline: var(--rz-outline-normal); +} +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-pager.rz-align-right { + justify-content: right; +} +.rz-pager.rz-align-left { + justify-content: left; +} +.rz-pager.rz-align-center { + justify-content: center; +} +.rz-pager .rzi-step-backward:before { + content: "first_page"; +} +.rz-pager .rzi-caret-left:before { + content: "navigate_before"; +} +.rz-pager .rzi-caret-right:before { + content: "navigate_next"; +} +.rz-pager .rzi-step-forward:before { + content: "last_page"; +} +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { + order: 2; + width: var(--rz-pager-dropdown-width); + overflow: visible; +} +.rz-pager .rz-pagesize-text { + order: 2; + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); +} + +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); +} + +.rz-pager-bottom { + border-top: var(--rz-pager-border); +} + +.rz-pager-pages { + display: inline-flex; + gap: var(--rz-pager-gap); + margin: 0 0.5rem; +} + +.rz-pager-element { + letter-spacing: 0; +} + +.rz-align-center .rz-pager-first { + margin-inline-start: auto; +} + +.rz-pager-prev { + margin-inline-end: auto; +} +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; +} + +.rz-pager-next { + margin-inline-start: auto; +} +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; +} + +.rz-align-center .rz-pager-last { + margin-inline-end: auto; +} + +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-element:hover { + text-decoration: none; +} + +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-page { + display: inline-block; + min-width: var(--rz-pager-numeric-button-min-width); + text-align: center; + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { + margin-right: auto; +} +.rz-align-left .rz-pager-summary { + order: 2; + margin-left: auto; + padding: 0; +} +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} + +@media (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +@container rz-lookup-panel (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; +} +.rz-overlaypanel { + position: absolute; + overflow: hidden; + box-shadow: var(--rz-overlay-shadow); + border: var(--rz-overlay-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-overlay-background-color); +} + +.rz-tree { + box-sizing: border-box; + display: inline-block; + overflow: auto; +} +.rz-tree:focus { + outline: var(--rz-outline-normal); +} +.rz-tree:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} + +.rz-tree .rz-treenode.rz-treenode-leaf > .rz-treenode-content > .rz-tree-toggler { + visibility: hidden; +} + +.rz-treenode { + padding-inline-start: var(--rz-tree-node-toggle-width); +} + +.rz-tree-toggler { + cursor: pointer; + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); + width: var(--rz-tree-node-toggle-width); + height: 1.5rem; + font-size: var(--rz-icon-size); + line-height: 1.5rem; + text-align: center; + color: var(--rz-tree-node-toggle-color); + transition: var(--rz-tree-transition); +} +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} +.rz-tree-toggler.rzi-caret-right:before { + content: "arrow_right"; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); +} +.rz-tree-toggler.rzi-caret-down:before { + content: "arrow_drop_down"; + margin-inline-start: -0.125rem; +} +.rz-tree-toggler:hover { + color: var(--rz-tree-node-toggle-hover-color); +} + +.rz-treenode-content { + display: flex; + align-items: center; + cursor: pointer; + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); +} +.rz-treenode-content .rz-treenode-label { + display: flex; + align-items: center; + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); +} +.rz-treenode-content .rz-treenode-label .rzi:first-child { + margin-inline-end: 0.25rem; +} +.rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { + outline: var(--rz-tree-node-focus-outline); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} +.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { + background-color: var(--rz-tree-node-hover-background-color); + color: var(--rz-tree-node-hover-color); + border-radius: var(--rz-tree-node-selected-border-radius); +} +.rz-treenode-content .rz-chkbox { + margin-inline-end: 0.25rem; +} + +.rz-tree-container, +.rz-treenode-children { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-treenode-label { + transition: var(--rz-tree-transition); +} +.rz-treenode-content-selected .rz-treenode-label { + border-radius: var(--rz-tree-node-selected-border-radius); + color: var(--rz-tree-node-selected-color); + background-color: var(--rz-tree-node-selected-background-color); +} + +.rz-datalist, +.rz-datagrid { + background-color: var(--rz-datalist-background-color); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); + box-shadow: var(--rz-datalist-shadow); + border: var(--rz-datalist-border); +} + +.rz-g > div, .rz-datalist-data > li { + border-radius: var(--rz-datalist-border-radius); + border: var(--rz-datalist-item-border); + box-shadow: var(--rz-datalist-item-shadow); + padding: var(--rz-datalist-item-padding); + background-color: var(--rz-datalist-item-background-color); +} + +.rz-datalist-data { + list-style: none; + padding: var(--rz-datalist-padding); + margin: 0; +} +.rz-datalist-data > li { + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} +.rz-datalist-data > li:first-child { + margin-block-start: 0; +} +.rz-datalist-data > li:last-child { + margin-block-end: 0; +} + +.rz-g { + display: flex; + flex-wrap: wrap; +} +.rz-g > div { + flex: auto; + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} + +.rz-datalist-content { + box-sizing: border-box; + position: relative; +} + +.rz-datafilter { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + column-gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-selectbutton { + display: inline-flex; +} +.rz-datafilter .rz-datafilter-group { + position: relative; + margin: 0.25rem 0 0; + padding: 0; + flex-basis: 100%; +} +.rz-datafilter .rz-datafilter-group .rz-datafilter-group { + margin: 0; +} +.rz-datafilter .rz-datafilter-item { + position: relative; + list-style: none; + margin: 0; + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-datafilter-item:before { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item:after { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item .rz-multiselect, +.rz-datafilter .rz-datafilter-item .rz-dropdown { + flex: 10rem 1; +} +.rz-datafilter .rz-datafilter-group-item:after { + height: calc(var(--rz-input-height) / 2); +} +.rz-datafilter .rz-datafilter-bar { + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; +} +.rz-datafilter .rz-datafilter-bar:before { + display: none; +} +.rz-datafilter .rz-datafilter-bar:after { + height: calc(var(--rz-input-height) / 2); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); +} +.rz-datafilter .rz-datafilter-bar .rz-splitbutton { + margin-block-start: 0.3125rem; +} +.rz-datafilter .rz-datafilter-editor { + flex: 10rem 4; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear { + color: var(--rz-text-secondary-color); + opacity: 0.5; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear:hover { + opacity: 1; +} + +.rz-scheduler { + box-sizing: border-box; + container-name: scheduler; + container-type: inline-size; + display: flex; + height: 400px; + flex-direction: column; + border-radius: var(--rz-scheduler-border-radius); + border: 1px solid var(--rz-scheduler-border-color); + box-shadow: var(--rz-scheduler-shadow); + color: var(--rz-scheduler-color); + background: var(--rz-scheduler-background-color); + overflow: hidden; + background-clip: border-box; +} +.rz-scheduler a.rz-event-list-btn { + position: absolute; + padding-inline-start: 0.25rem; + color: var(--rz-scheduler-event-list-button-color); + font-size: var(--rz-scheduler-event-list-button-font-size); +} +.rz-scheduler a.rz-event-list-btn:hover { + cursor: pointer; + color: var(--rz-scheduler-event-list-button-color); + text-decoration: underline; +} + +.rz-slot { + display: flex; + height: 1.5em; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} + +.rz-slot-title { + text-align: end; + font-size: var(--rz-scheduler-slot-title-font-size); + padding: var(--rz-scheduler-slot-title-padding); +} + +.rz-slot-hours { + flex: 0 0 5rem; +} +.rz-slot-hours .rz-slot-header { + height: 1.5rem; + text-align: end; + font-size: var(--rz-scheduler-header-font-size); + padding: 0 0.25rem; + border-inline-end: 1px solid var(--rz-scheduler-border-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.rz-slot-minor { + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); +} + +.rz-day-view .rz-slot, +.rz-slots:first-child .rz-slot { + border-inline-start: none; +} + +.rz-event { + position: absolute; + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); + cursor: pointer; +} + +.rz-event-content { + background: var(--rz-scheduler-event-background-color); + border-radius: var(--rz-scheduler-border-radius); + color: var(--rz-scheduler-event-color); + height: 100%; + padding: var(--rz-scheduler-event-content-padding); + font-size: var(--rz-scheduler-event-font-size); + line-height: var(--rz-scheduler-event-line-height); + overflow: hidden; +} + +.rz-events { + position: relative; +} + +.rz-scheduler-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--rz-scheduler-toolbar-padding); + background: var(--rz-scheduler-toolbar-background-color); +} +.rz-scheduler-nav .rz-scheduler-nav-title { + display: flex; + align-self: center; + font-size: var(--rz-scheduler-toolbar-title-font-size); + font-weight: var(--rz-scheduler-toolbar-title-font-weight); + color: var(--rz-scheduler-toolbar-title-color); +} + +.rz-view-header { + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); + background-color: var(--rz-scheduler-header-background-color); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); + display: flex; +} +.rz-view-header .rz-slot-header { + flex: 1; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rz-view-header .rz-slot-hour-header { + flex: 0 0 5rem; +} + +.rz-view { + display: flex; + flex-direction: column; + flex: 1; +} + +.rz-view-content { + flex: auto; + display: flex; + overflow: auto; + height: 0; +} +.rz-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-slot:has(.rz-state-focused) { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-slots { + flex: 1; + font-size: 1rem; +} + +.rz-scheduler-nav-views { + display: flex; +} +.rz-scheduler-nav-views .rz-button.rz-primary { + background: var(--rz-scheduler-view-button-background-color); + color: var(--rz-scheduler-view-button-color); + border: var(--rz-scheduler-view-button-border); + border-radius: 0; + border-inline-end: none; +} +.rz-scheduler-nav-views .rz-button.rz-primary:first-child { + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); +} +.rz-scheduler-nav-views .rz-button.rz-primary:last-child { + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); +} +.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { + background-color: var(--rz-scheduler-view-selected-background-color); + border-color: var(--rz-scheduler-view-selected-border-color); + color: var(--rz-scheduler-view-selected-color); +} +.rz-scheduler-nav-views .rz-button.rz-primary:focus-visible { + z-index: 1; +} + +.rz-scheduler-nav-prev-next { + display: flex; +} +.rz-scheduler-nav-prev-next .rz-button { + background-color: var(--rz-scheduler-prev-next-button-background-color); + color: var(--rz-scheduler-prev-next-button-color); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); + font-size: var(--rz-scheduler-prev-next-button-font-size); +} +.rz-scheduler-nav-prev-next .rz-button.rz-today { + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); + padding: var(--rz-scheduler-today-button-padding); + font-size: var(--rz-scheduler-today-button-font-size); + text-transform: var(--rz-scheduler-today-button-text-transform); +} +.rz-scheduler-nav-prev-next .rz-button.rz-prev { + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button.rz-next { + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button:focus-visible { + z-index: 1; +} + +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + +.rz-event-list .rz-event { + position: static; +} + +.rz-week { + flex: 1; + font-size: 1rem; +} +.rz-week .rz-slots { + display: flex; + height: 100%; +} +.rz-week:first-child .rz-slot { + border-block-start: none; +} + +.rz-month { + flex: 1; + font-size: 1rem; +} +.rz-month .rz-slots { + display: flex; + height: 100%; +} +.rz-month:nth-child(2) .rz-slot { + border-block-start: none; +} +.rz-month .rz-slot { + flex: 1; + height: 100%; + display: flex; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child { + position: sticky; + z-index: 9998; + inset-inline-start: 0; + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child .rz-slot-header { + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-month .rz-slot:nth-child(2) { + border-inline-start: none; +} + +.rz-day-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-day-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-week-view-content { + flex: 1; + display: flex; +} +.rz-week-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-week-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-slots.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-week-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-week-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-month-view .rz-view-content { + flex: 1; + flex-direction: column; +} +.rz-month-view .rz-slot { + flex: 1; + height: 100%; +} +.rz-month-view .rz-slot:first-child { + border-inline-start: none; +} + +.rz-planner-view { + overflow: auto; +} +.rz-planner-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 2.25rem; + z-index: 9999; +} +.rz-planner-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-planner-view .rz-month .rz-slot:first-child .rz-slot-header { + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +.rz-planner-view .rz-month .rz-slot:last-child { + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); +} +.rz-planner-view .rz-month .rz-slot:last-child .rz-slot-header { + writing-mode: vertical-rl; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-planner-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-planner-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-timeline-view { + flex: auto; + overflow: auto; + flex-wrap: wrap; + flex-direction: unset; +} +.rz-timeline-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 36px; + z-index: 9999; +} +.rz-timeline-view .rz-view-header .rz-slot-header { + min-width: var(--rz-scheduler-timeline-slot-width); + flex: 0 0 auto; +} +.rz-timeline-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-timeline-view .rz-month { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slots { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slot { + width: var(--rz-scheduler-timeline-slot-width); + height: var(--rz-scheduler-timeline-slot-height); +} +.rz-timeline-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-timeline-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-year-view { + overflow: auto; + padding: var(--rz-scheduler-year-padding); + --rz-gap: var(--rz-scheduler-year-padding); +} +.rz-year-view .rz-flex-column, +.rz-year-view .rz-week { + min-width: fit-content; +} +.rz-year-view .rz-slot { + flex: 1; + border-block-start: none; + justify-content: center; + height: initial; + padding: var(--rz-scheduler-year-slot-padding); + cursor: pointer; +} +.rz-year-view .rz-slot .rz-slot-title { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-align: center; + width: var(--rz-scheduler-year-slot-title-width); + min-width: 2rem; + min-height: 2rem; + border-radius: var(--rz-scheduler-year-slot-title-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-year-view .rz-slot .rz-slot-title.rz-other-month { + opacity: 0.5; +} +.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments { + color: var(--rz-scheduler-event-color); + background-color: var(--rz-scheduler-event-background-color); +} +.rz-year-view .rz-slot .rz-slot-title.rz-state-focused { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} +.rz-year-view .rz-slot:hover .rz-slot-title:not(.rz-has-appointments) { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} + +.rz-year-month:focus { + outline: var(--rz-outline-normal); +} +.rz-year-month:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); + border-radius: var(--rz-border-radius); +} + +@container scheduler (width < 640px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@container scheduler (width < 1400px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +@media (max-width: 576px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@media (max-width: 1399px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +.rz-tabview { + box-sizing: border-box; + display: flex; +} +.rz-tabview:focus { + outline: var(--rz-outline-normal); +} +.rz-tabview:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-tabview:focus-visible .rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + outline: var(--rz-tabs-tab-focus-outline); + outline-offset: var(--rz-tabs-tab-focus-outline-offset); +} +.rz-tabview.rz-tabview-top { + flex-direction: column; +} +.rz-tabview.rz-tabview-top-right { + flex-direction: column; +} +.rz-tabview.rz-tabview-bottom { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-bottom-right { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-left { + flex-direction: row; +} +.rz-tabview.rz-tabview-right { + flex-direction: row-reverse; +} + +.rz-tabview-nav { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} +.rz-tabview-nav li { + border: var(--rz-tabs-border); + background-color: var(--rz-tabs-tab-background-color); + color: var(--rz-tabs-tab-color); + transition: var(--rz-tabs-transition); +} +.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-hover-background-color); + color: var(--rz-tabs-tab-hover-color); +} +.rz-tabview-nav li a, +.rz-tabview-nav li a:not([href]):not([class]) { + display: flex; + align-items: center; + color: inherit; + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); + font-size: var(--rz-tabs-tab-font-size); + line-height: var(--rz-tabs-tab-line-height); + font-weight: var(--rz-tabs-tab-font-weight); + text-transform: var(--rz-tabs-tab-text-transform); + letter-spacing: var(--rz-tabs-tab-letter-spacing); + text-decoration: none; + cursor: pointer; +} +.rz-tabview-nav li a:hover, +.rz-tabview-nav li a:not([href]):not([class]):hover { + text-decoration: none; +} +.rz-tabview-nav li.rz-state-disabled { + opacity: 0.5; +} +.rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-focus-background-color); + border-color: var(--rz-tabs-tab-focus-background-color); + color: var(--rz-tabs-tab-focus-color); +} +.rz-tabview-nav .rz-tabview-selected { + background-color: var(--rz-tabs-tab-selected-background-color); + color: var(--rz-tabs-tab-selected-color); + position: relative; +} +.rz-tabview-top > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-top > .rz-tabview-nav li { + border-top-width: 2px; + border-bottom-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-bottom-color: var(--rz-tabs-background-color); + margin-bottom: -1px; + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-bottom > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-bottom > .rz-tabview-nav li { + border-bottom-width: 2px; + border-top-color: var(--rz-tabs-tab-background-color); + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-top-color: var(--rz-tabs-background-color); + margin-top: -1px; + padding-top: 1px; + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-left > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-left > .rz-tabview-nav li { + border-left-width: 2px; + border-right-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} +.rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-right-color: var(--rz-tabs-background-color); + margin-right: -1px; + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-right > .rz-tabview-nav li { + border-right-width: 2px; + border-left-color: var(--rz-tabs-tab-background-color); + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-left-color: var(--rz-tabs-background-color); + margin-left: -1px; + padding-left: 1px; + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} + +.rz-tabview-panels { + background-color: var(--rz-tabs-background-color); + border: var(--rz-tabs-border); + box-shadow: var(--rz-tabs-shadow); + flex: 1; + overflow: auto; +} +.rz-tabview-top > .rz-tabview-panels { + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-left > .rz-tabview-panels { + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .rz-tabview-panels { + flex: auto; + } +} +.rz-tabview-panel { + padding: var(--rz-tabs-padding); +} + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); +} + +.rz-tooltip { + box-sizing: border-box; + position: absolute; + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-tooltip-content { + background: var(--rz-tooltip-background-color); + color: var(--rz-tooltip-color); + box-shadow: var(--rz-tooltip-shadow); + padding: var(--rz-tooltip-padding); + border-radius: var(--rz-tooltip-border-radius); + font-size: var(--rz-tooltip-font-size); + white-space: nowrap; +} + +.rz-tooltip .rz-top-tooltip-content { + margin-bottom: 16px; +} + +.rz-tooltip .rz-top-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-end: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-bottom-tooltip-content { + margin-top: -8px; +} + +.rz-tooltip .rz-bottom-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-start: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-left-tooltip-content { + margin-right: 8px; +} + +.rz-tooltip .rz-left-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + right: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-right-tooltip-content { + margin-left: 0; +} + +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-dialog-wrapper { + box-sizing: border-box; + display: flex; + position: fixed; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + z-index: var(--rz-dialog-zindex); + align-items: center; + justify-content: center; +} + +.rz-dialog { + box-sizing: border-box; + position: absolute; + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 150px; + max-height: 100%; + min-height: 150px; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); +} + +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); + font-size: var(--rz-dialog-title-font-size); + line-height: var(--rz-dialog-title-line-height); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); +} + +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; + font-weight: var(--rz-dialog-title-font-weight); + letter-spacing: var(--rz-dialog-title-letter-spacing); + color: var(--rz-dialog-title-color); + user-select: none; +} + +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { + font-size: var(--rz-dialog-close-font-size); + color: var(--rz-dialog-close-color); + vertical-align: var(--rz-dialog-close-vertical-align); +} +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { + content: "close"; +} +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { + color: var(--rz-dialog-close-hover-color); +} + +.rz-dialog-content, +.rz-dialog-side-content { + flex: 0 1 auto; + padding: var(--rz-dialog-content-padding); + overflow: auto; +} + +.rz-dialog-confirm, .rz-dialog-alert { + max-width: 400px; + margin: 0.75rem; +} + +.rz-dialog-confirm-message, .rz-dialog-alert-message { + margin-block-end: 1.5rem; +} + +.rz-dialog-confirm-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.rz-dialog-confirm-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-alert-buttons { + text-align: end; + gap: 0.5rem; +} +.rz-dialog-alert-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-mask { + position: fixed; + z-index: var(--rz-dialog-mask-zindex); + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--rz-dialog-mask-background-color); + opacity: 0.5; +} + +.no-scroll { + overflow: hidden; + padding-inline-end: 15px; +} + +.rz-dialog-side-position-right { + right: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-left { + left: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-top { + top: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +.rz-dialog-side-position-bottom { + bottom: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; +} + +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; +} + +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); +} +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); +} +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); +} +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); +} + +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); +} + +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.rz-notification-title { + font-weight: bold; +} + +.rz-notification-icon { + margin: var(--rz-notification-icon-margin); +} +.rz-notification-icon.rzi-check { + color: var(--rz-notification-success-icon-color); +} +.rz-notification-icon.rzi-check:before { + content: "check"; +} +.rz-notification-icon.rzi-exclamation-triangle { + color: var(--rz-notification-warning-icon-color); +} +.rz-notification-icon.rzi-exclamation-triangle:before { + content: "warning"; +} +.rz-notification-icon.rzi-info-circle { + color: var(--rz-notification-info-icon-color); +} +.rz-notification-icon.rzi-info-circle:before { + content: "info"; +} +.rz-notification-icon.rzi-times { + color: var(--rz-notification-error-icon-color); +} +.rz-notification-icon.rzi-times:before { + content: "error"; +} + +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; +} + +.rz-form { + box-sizing: border-box; +} + +.rz-message { + box-sizing: border-box; +} + +.rz-messages-error { + display: inline-block; + color: var(--rz-form-error-color); + font-size: var(--rz-form-error-font-size); + padding: var(--rz-validator-text-padding); +} + +.rz-message-popup { + position: absolute; + background-color: var(--rz-validator-background-color); + transform: var(--rz-validator-transform); + box-shadow: var(--rz-validator-shadow); + padding: var(--rz-validator-padding); + border-radius: var(--rz-border-radius); + color: var(--rz-validator-color); + pointer-events: none; +} +.rz-message-popup:before { + content: ""; + border: var(--rz-validator-pointer-size) solid transparent; + border-bottom-color: var(--rz-validator-background-color); + position: absolute; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); +} + +body:not(.rz-default-scrollbars)::-webkit-scrollbar, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +body:not(.rz-default-scrollbars)::-webkit-scrollbar-corner, +body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-layout::-webkit-scrollbar, +.rz-layout ::-webkit-scrollbar, +.rz-scrollbars::-webkit-scrollbar, +.rz-scrollbars ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-thumb, +.rz-layout ::-webkit-scrollbar-thumb, +.rz-scrollbars::-webkit-scrollbar-thumb, +.rz-scrollbars ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-corner, +.rz-layout ::-webkit-scrollbar-corner, +.rz-scrollbars::-webkit-scrollbar-corner, +.rz-scrollbars ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-login { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rz-login .rz-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.rz-login .rz-form .rz-form-row { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} +.rz-login .rz-form .rz-form-row .rz-label { + flex: 1 8rem; +} +.rz-login .rz-form .rz-form-row .rz-form-input-wrapper { + flex: 3 14rem; +} +.rz-login .rz-form .rz-form-row .rz-textbox { + display: block; + width: 100%; +} +.rz-login .rz-form .rz-form-row .rz-textbox.invalid { + border: var(--rz-border-danger); +} +.rz-login .rz-form .rz-form-row .rz-switch { + margin-inline-end: 0.5rem; +} +.rz-login .rz-form .rz-messages-error { + position: absolute; +} +.rz-login .rz-register { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: var(--rz-login-register-background-color); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); + border-radius: var(--rz-border-radius); +} +.rz-login .rz-register .rz-button { + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); +} +.rz-login .rz-login-buttons { + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.rz-lookup-panel { + background-color: var(--rz-lookup-panel-background-color); + padding: var(--rz-lookup-panel-padding); + container-type: inline-size; + container-name: rz-lookup-panel; +} + +.rz-lookup-search { + display: flex; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); +} +.rz-lookup-search input { + flex: auto; +} + +.ssrsviewer { + display: flex; +} +.ssrsviewer iframe { + flex: auto; +} + +.rz-map { + box-sizing: border-box; + height: var(--rz-map-height); + padding: var(--rz-map-padding); + background-color: var(--rz-map-background-color); + box-shadow: var(--rz-map-shadow); + border-radius: var(--rz-border-radius); +} + +.rz-map-container { + height: 100%; +} + +.rz-gauge, +.rz-arc-gauge { + box-sizing: border-box; + position: relative; + display: inline-block; + width: 300px; + height: 300px; +} + +.rz-gauge .rz-line, +.rz-gauge .rz-tick { + stroke: var(--rz-gauge-scale-color); +} +.rz-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-scale-label-color); +} + +.rz-arc-gauge .rz-line, +.rz-arc-gauge .rz-tick { + stroke: var(--rz-gauge-arc-scale-color); +} +.rz-arc-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-arc-scale-label-color); +} + +.rz-gauge-value { + position: absolute; + transform: translateX(-50%); + padding: 0.5rem; +} + +.rz-arc-gauge-value { + position: absolute; + transform: translate(-50%, -50%); + padding: 0.5rem; +} + +.rz-gauge-pointer { + fill: var(--rz-gauge-pointer-color); +} + +.rz-arc-gauge-scale-value { + fill: var(--rz-gauge-arc-value-color); +} + +.rz-arc-gauge-scale { + fill: var(--rz-gauge-arc-scale-color); +} + +.rz-progressbar { + box-sizing: border-box; + border-radius: var(--rz-progressbar-border-radius); + height: var(--rz-progressbar-height); + position: relative; + background-color: var(--rz-progressbar-background-color); + text-align: center; + display: flex; + align-items: center; +} + +.rz-progressbar-value { + border-radius: var(--rz-progressbar-border-radius); + position: absolute; + background-color: var(--rz-progressbar-value-background-color); + height: 100%; + width: 100%; + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-label { + position: relative; + width: 100%; + text-align: center; + font-size: var(--rz-progressbar-font-size); + line-height: var(--rz-progressbar-font-size); +} + +.rz-progressbar-circular { + box-sizing: border-box; + position: relative; +} + +.rz-progressbar-circular-viewbox { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.rz-progressbar-circular-label { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +.rz-progressbar-circular-background { + stroke: var(--rz-progressbar-background-color); + stroke-width: var(--rz-progressbar-circular-stroke-width); +} + +.rz-progressbar-circular-value { + stroke-linecap: var(--rz-progressbar-circular-value-endpoint); + stroke-width: var(--rz-progressbar-circular-value-stroke-width); + stroke: var(--rz-progressbar-value-background-color); + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-determinate .rz-progressbar-circular-value { + stroke-dasharray: 100; + transform: rotate(-0.25turn); +} + +.rz-progressbar-indeterminate { + overflow: hidden; +} +.rz-progressbar-indeterminate .rz-progressbar-value { + background-color: transparent; +} +.rz-progressbar-indeterminate .rz-progressbar-value:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} +.rz-progressbar-indeterminate .rz-progressbar-value:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; + animation-delay: 1.15s; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} +@keyframes rz-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 100%, 60% { + left: 100%; + right: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} +.rz-progressbar-indeterminate .rz-progressbar-circular-value { + animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + transform-origin: 0 0; +} +@keyframes rz-progressbar-circular-indeterminate-anim-rotate { + 100% { + transform: rotate(1turn); + } +} +@keyframes rz-progressbar-circular-indeterminate-anim-dash { + 0% { + stroke-dasharray: 1, 100; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -28; + } + 100% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -99; + } +} + +.rz-progressbar.rz-progressbar-primary { + color: var(--rz-on-primary); +} + +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value { + background-color: var(--rz-primary); +} +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:before { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:after { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); +} + +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); +} +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:before { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:after { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar.rz-progressbar-info { + color: var(--rz-on-info); +} + +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-value { + background-color: var(--rz-info); +} +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:before { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:after { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar.rz-progressbar-warning { + color: var(--rz-on-warning); +} + +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-value { + background-color: var(--rz-warning); +} +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:before { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:after { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-danger { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-success { + color: var(--rz-on-success); +} + +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value { + background-color: var(--rz-success); +} +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:before { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:after { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} + +.rz-scheme-pastel .rz-series-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} + +.rz-scheme-pastel .rz-series-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} + +.rz-scheme-pastel .rz-series-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} + +.rz-scheme-pastel .rz-series-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} + +.rz-scheme-pastel .rz-series-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} + +.rz-scheme-pastel .rz-series-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} + +.rz-scheme-pastel .rz-series-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} + +.rz-scheme-pastel .rz-series-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} + +.rz-scheme-pastel .rz-series-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-9-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} + +.rz-scheme-pastel .rz-series-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-10-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} + +.rz-scheme-pastel .rz-series-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-11-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} + +.rz-scheme-pastel .rz-series-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-12-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} + +.rz-scheme-pastel .rz-series-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-13-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} + +.rz-scheme-pastel .rz-series-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-14-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} + +.rz-scheme-pastel .rz-series-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-15-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} + +.rz-scheme-pastel .rz-series-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-16-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} + +.rz-scheme-pastel .rz-series-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-17-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} + +.rz-scheme-pastel .rz-series-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-18-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} + +.rz-scheme-pastel .rz-series-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-19-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} + +.rz-scheme-pastel .rz-series-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-20-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} + +.rz-scheme-pastel .rz-series-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-21-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} + +.rz-scheme-pastel .rz-series-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-22-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} + +.rz-scheme-pastel .rz-series-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-23-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} + +.rz-scheme-palette .rz-series-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} +.rz-scheme-palette .rz-series-item-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} + +.rz-scheme-palette .rz-series-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} + +.rz-scheme-palette .rz-series-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #665191; +} +.rz-scheme-palette .rz-series-item-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #665191; +} + +.rz-scheme-palette .rz-series-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #a05195; +} +.rz-scheme-palette .rz-series-item-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #a05195; +} + +.rz-scheme-palette .rz-series-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #d45087; +} +.rz-scheme-palette .rz-series-item-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #d45087; +} + +.rz-scheme-palette .rz-series-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} + +.rz-scheme-palette .rz-series-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} + +.rz-scheme-palette .rz-series-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} +.rz-scheme-palette .rz-series-item-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} + +.rz-scheme-monochrome .rz-series-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} + +.rz-scheme-monochrome .rz-series-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #296080; +} +.rz-scheme-monochrome .rz-series-item-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #296080; +} + +.rz-scheme-monochrome .rz-series-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #437594; +} +.rz-scheme-monochrome .rz-series-item-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #437594; +} + +.rz-scheme-monochrome .rz-series-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} + +.rz-scheme-monochrome .rz-series-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} + +.rz-scheme-monochrome .rz-series-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} + +.rz-scheme-monochrome .rz-series-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} + +.rz-scheme-monochrome .rz-series-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} + +.rz-scheme-divergent .rz-series-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #00876c; +} +.rz-scheme-divergent .rz-series-item-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #00876c; +} + +.rz-scheme-divergent .rz-series-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} + +.rz-scheme-divergent .rz-series-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} + +.rz-scheme-divergent .rz-series-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} + +.rz-scheme-divergent .rz-series-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} + +.rz-scheme-divergent .rz-series-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} + +.rz-scheme-divergent .rz-series-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} + +.rz-scheme-divergent .rz-series-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #e27076; +} +.rz-scheme-divergent .rz-series-item-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #e27076; +} + +.rz-scheme-divergent .rz-series-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} + +.rz-marker { + stroke: var(--rz-chart-marker-stroke); +} + +.rz-area-series .rz-marker { + fill-opacity: 1; +} + +.rz-axis { + stroke: var(--rz-chart-axis-color); + font-size: var(--rz-chart-axis-font-size); +} + +.rz-axis .rz-grid-line { + stroke: var(--rz-chart-axis-color); +} + +.rz-tick-text { + stroke: none; + fill: var(--rz-chart-axis-label-color); +} + +.rz-series-data-label { + fill: var(--rz-chart-axis-label-color); +} + +.rz-value-axis .rz-tick-text { + text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; +} + +.rz-category-axis .rz-tick-text { + text-anchor: middle; +} + +.rz-axis .rz-axis-title { + stroke: none; + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-title { + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-content { + height: 100%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rz-legend { + position: absolute; + display: flex; + font-size: var(--rz-chart-legend-font-size); +} + +.rz-legend-right { + right: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-left { + left: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-top { + top: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-bottom { + bottom: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-items { + padding: 0; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; +} + +.rz-legend-item { + display: flex; + align-items: center; + gap: 4px; + margin: 4px; + cursor: pointer; +} +.rz-legend-item:focus { + outline: var(--rz-outline-normal); +} +.rz-legend-item:focus-visible { + outline: var(--rz-chart-legend-focus-outline); + outline-offset: var(--rz-chart-legend-focus-outline-offset); + border-radius: var(--rz-border-radius); +} + +.rz-legend-top .rz-legend-item, +.rz-legend-bottom .rz-legend-item { + display: inline-flex; +} + +.rz-chart-tooltip { + position: absolute; + transform: translate(-50%, -100%); + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-chart-tooltip-content { + background: var(--rz-chart-tooltip-background); + color: var(--rz-chart-tooltip-color); + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + padding: 0.25rem 0.5rem; + border-radius: var(--rz-border-radius); + white-space: nowrap; +} + +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content { + margin-bottom: 15px; +} +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + left: 50%; + bottom: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -11px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-link { + box-sizing: border-box; + color: var(--rz-link-color); + text-decoration: none; + cursor: pointer; +} +.rz-link .rz-link-text { + text-decoration: var(--rz-link-text-decoration); +} +.rz-link .rzi { + font-size: inherit; + vertical-align: middle; +} +.rz-link:hover, .rz-link:focus { + color: var(--rz-link-hover-color); + text-decoration: none; +} +.rz-link:hover .rz-link-text, .rz-link:focus .rz-link-text { + text-decoration: var(--rz-link-hover-text-decoration); +} +.rz-link:focus-visible { + outline: var(--rz-link-focus-outline); +} + +.rz-state-highlight .link { + color: var(--rz-text-contrast-color); +} + +.rz-html-editor { + box-sizing: border-box; + display: flex; + flex-direction: column; + border-radius: var(--rz-editor-border-radius); + border: var(--rz-editor-border); + overflow: hidden; +} +.rz-html-editor:focus-within { + outline: var(--rz-editor-focus-outline); + outline-offset: var(--rz-editor-focus-outline-offset); +} + +.rz-html-editor-content { + flex: 1; + overflow: auto; + padding: 0.5rem; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-source.rz-textarea { + --rz-input-hover-shadow: none; + --rz-input-border: none; + --rz-input-hover-border: none; + --rz-input-focus-shadow: none; + --rz-input-focus-border: none; + flex: 1; + padding: 0.5rem; + overflow: auto; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-toolbar { + border-bottom: var(--rz-editor-border); + display: flex; + line-height: 1rem; + flex-wrap: wrap; + background-color: var(--rz-editor-toolbar-background-color); +} +.rz-html-editor-toolbar .rzi { + font-size: 1rem; +} +.rz-html-editor-toolbar > * { + margin: var(--rz-editor-toolbar-item-margin); +} + +.rz-html-editor-colorpicker { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger { + color: inherit; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} +.rz-html-editor-colorpicker .rz-colorpicker-value { + display: none; +} +.rz-html-editor-colorpicker .rz-colorpicker { + border: none; + box-shadow: none; + padding: 0; + height: auto; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} + +.rz-html-editor-color { + border: none; + display: flex; + flex-direction: column; + background: inherit; + color: inherit; + appearance: none; + padding: 0; + position: relative; +} +.rz-html-editor-color:disabled { + color: var(--rz-input-disabled-color); +} + +.rz-html-editor-color-value { + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; +} + +.rz-html-editor-button { + color: var(--rz-editor-button-color); + appearance: none; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-button.rz-selected { + background-color: var(--rz-editor-button-selected-background-color); + color: var(--rz-editor-button-selected-color); + border-radius: var(--rz-editor-border-radius); +} +.rz-html-editor-button:disabled { + color: var(--rz-editor-button-disabled-color); +} + +.rz-html-editor-dropdown { + display: inline-flex; + padding: var(--rz-editor-button-padding); + align-items: center; + cursor: pointer; +} +.rz-html-editor-dropdown.rz-disabled { + color: var(--rz-input-disabled-color); + cursor: default; +} + +.rz-html-editor-dropdown-item { + cursor: default; + font-size: var(--rz-dropdown-item-font-size); + padding: var(--rz-dropdown-item-padding); + white-space: nowrap; +} +.rz-html-editor-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-html-editor-dropdown-item.rz-selected { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); +} + +.rz-html-editor-dropdown-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: inherit; + background-color: inherit; +} +.rz-html-editor-dropdown-trigger .rzi:before { + content: "arrow_drop_down"; +} + +.rz-html-editor-dropdown-items { + display: none; +} + +.rz-html-editor-dialog-item { + margin-bottom: 1rem; +} +.rz-html-editor-dialog-item label:first-child { + display: block; +} + +.rz-html-editor-dialog-buttons { + text-align: right; +} + +.rz-html-editor-separator { + width: 1px; + background-color: var(--rz-editor-separator-background-color); +} + +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; +} +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} + +.rz-colorpicker { + display: inline-flex; + align-items: center; + cursor: pointer; +} +.rz-colorpicker.rz-state-disabled { + cursor: default; +} + +button.rz-colorpicker-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: var(--rz-text-color); + background-color: inherit; + outline: none; +} +button.rz-colorpicker-trigger .rzi { + font-size: var(--rz-icon-size); +} +button.rz-colorpicker-trigger .rzi:before { + content: "arrow_drop_down"; +} +.rz-state-disabled button.rz-colorpicker-trigger { + color: var(--rz-input-disabled-color); +} + +.rz-colorpicker-popup { + display: none; + position: absolute; + border: var(--rz-colorpicker-panel-border); + background-color: var(--rz-colorpicker-panel-background-color); + box-shadow: var(--rz-colorpicker-panel-shadow); + min-width: 200px; + max-width: var(--rz-colorpicker-panel-max-width); + padding: var(--rz-colorpicker-panel-padding); + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-value { + flex: 1; + border-radius: var(--rz-colorpicker-value-border-radius); + border: var(--rz-colorpicker-panel-border); + min-width: 20px; + min-height: 20px; +} + +.rz-saturation-picker { + height: var(--rz-colorpicker-saturation-height); + position: relative; + touch-action: none; + border-radius: var(--rz-border-radius); +} +.rz-saturation-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-saturation-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-saturation-white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} + +.rz-saturation-black, +.rz-saturation-white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--rz-border-radius); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); +} + +.rz-saturation-black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} + +.rz-saturation-handle { + position: absolute; + width: var(--rz-colorpicker-handle-size); + height: var(--rz-colorpicker-handle-size); + border: var(--rz-colorpicker-handle-border); + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-hue-picker { + margin-bottom: 8px; + touch-action: none; + position: relative; + background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-hue-picker:active { + cursor: none; +} +.rz-hue-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-hue-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-alpha-picker { + touch-action: none; + position: relative; + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-alpha-picker:active { + cursor: none; +} +.rz-alpha-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-alpha-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-hue-handle, +.rz-alpha-handle { + position: absolute; + height: 100%; + width: 8px; + border: var(--rz-colorpicker-handle-border); + border-radius: calc(var(--rz-border-radius) / 2); + transform: translateX(-50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-colorpicker-preview-area { + display: flex; +} + +.rz-hue-and-alpha { + flex: 1; + padding-inline-end: 8px; +} + +.rz-alpha-picker:before, +.rz-colorpicker-preview:before { + position: absolute; + z-index: -1; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--rz-border-radius); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); + background-size: 8px 8px; + background-position: 0 0, 0 4px, 4px -4px, -4px 0px; +} + +.rz-colorpicker-preview { + position: relative; + width: 32px; + height: 32px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-rgba { + display: flex; + gap: 4px; +} + +.rz-color-box { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + color: var(--rz-colorpicker-input-labels-color); + font-size: 0.75rem; + text-transform: uppercase; +} +.rz-color-box .rz-textbox { + width: 80px; + margin-inline-end: 4px; + padding: var(--rz-colorpicker-hex-input-padding); + height: var(--rz-colorpicker-hex-input-height); +} +.rz-color-box .rz-numeric { + padding: var(--rz-colorpicker-rgba-input-padding); + height: var(--rz-colorpicker-rgba-input-height); +} +.rz-color-box .rz-numeric .rz-numeric-input { + padding: 0; + outline: none; +} +.rz-color-box .rz-numeric button { + display: none; +} +.rz-color-box .rz-numeric button:hover { + display: initial; +} + +.rz-colorpicker-button { + justify-content: flex-end; + display: flex; +} + +.rz-colorpicker-section:not(:last-child) { + margin-bottom: 8px; +} + +.rz-colorpicker-colors { + display: flex; + flex-wrap: wrap; + gap: var(--rz-colorpicker-items-gap); +} + +.rz-colorpicker-item { + width: var(--rz-colorpicker-item-size); + height: var(--rz-colorpicker-item-size); + border-radius: var(--rz-colorpicker-item-border-radius); + box-shadow: var(--rz-colorpicker-item-shadow); + cursor: pointer; +} +.rz-colorpicker-item:focus { + outline: var(--rz-outline-normal); +} +.rz-colorpicker-item:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-splitter { + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 100%; +} +.rz-splitter > .rz-splitter-bar { + flex: 0 0 auto; + position: relative; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--rz-splitter-bar-color); + background-color: var(--rz-splitter-bar-background-color); + opacity: 0.4; + user-select: none; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color); + border-radius: 1px; +} +.rz-splitter > .rz-splitter-bar > .rz-expand { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar-resizable:hover { + background-color: var(--rz-splitter-bar-background-color); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active { + background-color: var(--rz-splitter-bar-background-color-active); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-expand, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-collapse { + color: var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:disabled { + opacity: 0.2; +} +.rz-splitter-horizontal { + flex-direction: row; +} +.rz-splitter-horizontal > .rz-splitter-bar { + flex-direction: column; + width: 8px; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_left"; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-resize { + height: 16px; + margin: 2px 0; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before { + content: "arrow_right"; +} +.rz-splitter-horizontal > .rz-splitter-bar-resizable:hover { + cursor: col-resize; +} +.rz-splitter-vertical { + flex-direction: column; +} +.rz-splitter-vertical > .rz-splitter-bar { + flex-direction: row; + height: 8px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_drop_up"; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-resize { + width: 16px; + margin: 0 2px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-expand:before { + content: "arrow_drop_down"; +} +.rz-splitter-vertical > .rz-splitter-bar-resizable:hover { + cursor: row-resize; +} +.rz-splitter-pane { + overflow: hidden; + position: relative; + flex: 0 0 auto; +} +.rz-splitter-pane-collapsed { + flex: 0 1 0% !important; + overflow: hidden !important; + display: block !important; +} +.rz-splitter-pane-lastresizable { + flex: 1 1 auto; +} + +.rz-splitter-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* RadzenLayout styles */ +.rz-layout { + box-sizing: border-box; + height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; + background-color: var(--rz-layout-background-color); +} +.rz-layout .rz-body { + grid-area: rz-body; + overflow: auto; +} +.rz-layout .rz-sidebar { + grid-area: rz-sidebar; + position: static; +} +.rz-layout .rz-header { + grid-area: rz-header; + z-index: 2; +} +.rz-layout .rz-footer { + grid-area: rz-footer; +} + +@media (max-width: 768px) { + body:has(> .rz-layout) { + overflow-x: hidden; + } + .rz-header, + .rz-footer, + .rz-body { + width: 100vw; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } +} +.rz-breadcrumb { + box-sizing: border-box; + display: flex; + align-items: center; +} + +.rz-breadcrumb-item + .rz-breadcrumb-item::before { + content: "»"; + display: inline-block; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + font-size: 1rem; + line-height: 1.25rem; +} + +.rz-breadcrumb-item { + display: inline-flex; + align-items: center; +} +.rz-breadcrumb-item .rz-link { + display: inline-flex; + align-items: center; +} + +.rz-alert { + box-sizing: border-box; + display: flex; + align-items: flex-start; + gap: var(--rz-alert-gap); + margin: var(--rz-alert-margin); + padding: var(--rz-alert-padding); + width: 100%; + border-radius: var(--rz-alert-border-radius); + background-color: var(--rz-alert-background-color); + color: var(--rz-alert-color); +} +.rz-alert-lg { + --rz-alert-gap: 1.5rem; + --rz-alert-margin: 1.5rem 0; + --rz-alert-padding: 1.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-md { + --rz-alert-gap: 1rem; + --rz-alert-margin: 1rem 0; + --rz-alert-padding: 1rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-sm { + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 0.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-xs { + --rz-alert-gap: 0.25rem; + --rz-alert-margin: 0.25rem 0; + --rz-alert-padding: 0.25rem; + --rz-alert-message-margin: 0; + --rz-alert-icon-margin: 0; +} +.rz-alert .rz-alert-item { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-alert-gap); +} +.rz-alert .rz-alert-icon { + color: var(--rz-alert-icon-color); + margin: var(--rz-alert-icon-margin); + font-size: var(--rz-alert-icon-size); +} +.rz-alert .rz-alert-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + margin: var(--rz-alert-message-margin); +} +.rz-alert .rz-alert-title { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-alert-title-color); + margin-bottom: var(--rz-text-h6-margin-bottom); +} +.rz-alert.rz-variant-filled { + box-shadow: var(--rz-alert-box-shadow); +} +.rz-alert.rz-variant-text { + --rz-alert-padding: 0; + --rz-alert-background-color: transparent; + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0; +} +.rz-alert.rz-variant-text .rz-alert-item { + flex: unset; +} +.rz-alert.rz-variant-text .rz-alert-message { + flex-direction: row; +} +.rz-alert.rz-variant-text .rz-alert-title { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + margin-bottom: 0; + margin-right: 0.5rem; +} +.rz-alert.rz-primary { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-primary-lighter); + --rz-alert-color: var(--rz-on-primary-lighter); + --rz-alert-title-color: var(--rz-on-primary-lighter); + --rz-alert-icon-color: var(--rz-on-primary-lighter); +} +.rz-alert.rz-primary.rz-shade-light { + --rz-alert-background-color: var(--rz-primary-light); + --rz-alert-color: var(--rz-on-primary-light); + --rz-alert-title-color: var(--rz-on-primary-light); + --rz-alert-icon-color: var(--rz-on-primary-light); +} +.rz-alert.rz-primary.rz-shade-default { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-dark { + --rz-alert-background-color: var(--rz-primary-dark); + --rz-alert-color: var(--rz-on-primary-dark); + --rz-alert-title-color: var(--rz-on-primary-dark); + --rz-alert-icon-color: var(--rz-on-primary-dark); +} +.rz-alert.rz-primary.rz-shade-darker { + --rz-alert-background-color: var(--rz-primary-darker); + --rz-alert-color: var(--rz-on-primary-darker); + --rz-alert-title-color: var(--rz-on-primary-darker); + --rz-alert-icon-color: var(--rz-on-primary-darker); +} +.rz-alert.rz-variant-outlined.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + --rz-alert-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-variant-text.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-default { + --rz-alert-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-lighter { + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-light { + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-dark { + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-darker { + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-secondary { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-on-secondary-lighter); + --rz-alert-title-color: var(--rz-on-secondary-lighter); + --rz-alert-icon-color: var(--rz-on-secondary-lighter); +} +.rz-alert.rz-secondary.rz-shade-light { + --rz-alert-background-color: var(--rz-secondary-light); + --rz-alert-color: var(--rz-on-secondary-light); + --rz-alert-title-color: var(--rz-on-secondary-light); + --rz-alert-icon-color: var(--rz-on-secondary-light); +} +.rz-alert.rz-secondary.rz-shade-default { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-dark { + --rz-alert-background-color: var(--rz-secondary-dark); + --rz-alert-color: var(--rz-on-secondary-dark); + --rz-alert-title-color: var(--rz-on-secondary-dark); + --rz-alert-icon-color: var(--rz-on-secondary-dark); +} +.rz-alert.rz-secondary.rz-shade-darker { + --rz-alert-background-color: var(--rz-secondary-darker); + --rz-alert-color: var(--rz-on-secondary-darker); + --rz-alert-title-color: var(--rz-on-secondary-darker); + --rz-alert-icon-color: var(--rz-on-secondary-darker); +} +.rz-alert.rz-variant-outlined.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + --rz-alert-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-variant-text.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-default { + --rz-alert-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-lighter { + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-light { + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-dark { + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-darker { + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-info { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-lighter { + --rz-alert-background-color: var(--rz-info-lighter); + --rz-alert-color: var(--rz-on-info-lighter); + --rz-alert-title-color: var(--rz-on-info-lighter); + --rz-alert-icon-color: var(--rz-on-info-lighter); +} +.rz-alert.rz-info.rz-shade-light { + --rz-alert-background-color: var(--rz-info-light); + --rz-alert-color: var(--rz-on-info-light); + --rz-alert-title-color: var(--rz-on-info-light); + --rz-alert-icon-color: var(--rz-on-info-light); +} +.rz-alert.rz-info.rz-shade-default { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-dark { + --rz-alert-background-color: var(--rz-info-dark); + --rz-alert-color: var(--rz-on-info-dark); + --rz-alert-title-color: var(--rz-on-info-dark); + --rz-alert-icon-color: var(--rz-on-info-dark); +} +.rz-alert.rz-info.rz-shade-darker { + --rz-alert-background-color: var(--rz-info-darker); + --rz-alert-color: var(--rz-on-info-darker); + --rz-alert-title-color: var(--rz-on-info-darker); + --rz-alert-icon-color: var(--rz-on-info-darker); +} +.rz-alert.rz-variant-outlined.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + --rz-alert-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-variant-text.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-info.rz-shade-default { + --rz-alert-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-lighter { + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-light { + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-dark { + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-darker { + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-warning { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-lighter { + --rz-alert-background-color: var(--rz-warning-lighter); + --rz-alert-color: var(--rz-on-warning-lighter); + --rz-alert-title-color: var(--rz-on-warning-lighter); + --rz-alert-icon-color: var(--rz-on-warning-lighter); +} +.rz-alert.rz-warning.rz-shade-light { + --rz-alert-background-color: var(--rz-warning-light); + --rz-alert-color: var(--rz-on-warning-light); + --rz-alert-title-color: var(--rz-on-warning-light); + --rz-alert-icon-color: var(--rz-on-warning-light); +} +.rz-alert.rz-warning.rz-shade-default { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-dark { + --rz-alert-background-color: var(--rz-warning-dark); + --rz-alert-color: var(--rz-on-warning-dark); + --rz-alert-title-color: var(--rz-on-warning-dark); + --rz-alert-icon-color: var(--rz-on-warning-dark); +} +.rz-alert.rz-warning.rz-shade-darker { + --rz-alert-background-color: var(--rz-warning-darker); + --rz-alert-color: var(--rz-on-warning-darker); + --rz-alert-title-color: var(--rz-on-warning-darker); + --rz-alert-icon-color: var(--rz-on-warning-darker); +} +.rz-alert.rz-variant-outlined.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + --rz-alert-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-variant-text.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-default { + --rz-alert-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-lighter { + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-light { + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-dark { + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-darker { + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-error { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-error.rz-shade-lighter { + --rz-alert-background-color: var(--rz-error-lighter); + --rz-alert-color: var(--rz-on-error-lighter); + --rz-alert-title-color: var(--rz-on-error-lighter); + --rz-alert-icon-color: var(--rz-on-error-lighter); +} +.rz-alert.rz-error.rz-shade-light { + --rz-alert-background-color: var(--rz-error-light); + --rz-alert-color: var(--rz-on-error-light); + --rz-alert-title-color: var(--rz-on-error-light); + --rz-alert-icon-color: var(--rz-on-error-light); +} +.rz-alert.rz-error.rz-shade-default { + --rz-alert-background-color: var(--rz-error); + --rz-alert-color: var(--rz-on-error); + --rz-alert-title-color: var(--rz-on-error); + --rz-alert-icon-color: var(--rz-on-error); +} +.rz-alert.rz-error.rz-shade-dark { + --rz-alert-background-color: var(--rz-error-dark); + --rz-alert-color: var(--rz-on-error-dark); + --rz-alert-title-color: var(--rz-on-error-dark); + --rz-alert-icon-color: var(--rz-on-error-dark); +} +.rz-alert.rz-error.rz-shade-darker { + --rz-alert-background-color: var(--rz-error-darker); + --rz-alert-color: var(--rz-on-error-darker); + --rz-alert-title-color: var(--rz-on-error-darker); + --rz-alert-icon-color: var(--rz-on-error-darker); +} +.rz-alert.rz-variant-outlined.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-variant-text.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-error.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-lighter { + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-light { + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-dark { + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-darker { + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-danger { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-lighter { + --rz-alert-background-color: var(--rz-danger-lighter); + --rz-alert-color: var(--rz-on-danger-lighter); + --rz-alert-title-color: var(--rz-on-danger-lighter); + --rz-alert-icon-color: var(--rz-on-danger-lighter); +} +.rz-alert.rz-danger.rz-shade-light { + --rz-alert-background-color: var(--rz-danger-light); + --rz-alert-color: var(--rz-on-danger-light); + --rz-alert-title-color: var(--rz-on-danger-light); + --rz-alert-icon-color: var(--rz-on-danger-light); +} +.rz-alert.rz-danger.rz-shade-default { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-dark { + --rz-alert-background-color: var(--rz-danger-dark); + --rz-alert-color: var(--rz-on-danger-dark); + --rz-alert-title-color: var(--rz-on-danger-dark); + --rz-alert-icon-color: var(--rz-on-danger-dark); +} +.rz-alert.rz-danger.rz-shade-darker { + --rz-alert-background-color: var(--rz-danger-darker); + --rz-alert-color: var(--rz-on-danger-darker); + --rz-alert-title-color: var(--rz-on-danger-darker); + --rz-alert-icon-color: var(--rz-on-danger-darker); +} +.rz-alert.rz-variant-outlined.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-variant-text.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-lighter { + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-light { + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-dark { + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-darker { + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-success { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-lighter { + --rz-alert-background-color: var(--rz-success-lighter); + --rz-alert-color: var(--rz-on-success-lighter); + --rz-alert-title-color: var(--rz-on-success-lighter); + --rz-alert-icon-color: var(--rz-on-success-lighter); +} +.rz-alert.rz-success.rz-shade-light { + --rz-alert-background-color: var(--rz-success-light); + --rz-alert-color: var(--rz-on-success-light); + --rz-alert-title-color: var(--rz-on-success-light); + --rz-alert-icon-color: var(--rz-on-success-light); +} +.rz-alert.rz-success.rz-shade-default { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-dark { + --rz-alert-background-color: var(--rz-success-dark); + --rz-alert-color: var(--rz-on-success-dark); + --rz-alert-title-color: var(--rz-on-success-dark); + --rz-alert-icon-color: var(--rz-on-success-dark); +} +.rz-alert.rz-success.rz-shade-darker { + --rz-alert-background-color: var(--rz-success-darker); + --rz-alert-color: var(--rz-on-success-darker); + --rz-alert-title-color: var(--rz-on-success-darker); + --rz-alert-icon-color: var(--rz-on-success-darker); +} +.rz-alert.rz-variant-outlined.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + --rz-alert-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-variant-text.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-success.rz-shade-default { + --rz-alert-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-lighter { + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-light { + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-dark { + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-darker { + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-base { + --rz-alert-background-color: var(--rz-base); + --rz-alert-color: var(--rz-on-base); + --rz-alert-title-color: var(--rz-on-base); + --rz-alert-icon-color: var(--rz-on-base); +} +.rz-alert.rz-variant-outlined.rz-base { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-on-base); + --rz-alert-color: var(--rz-on-base); + --rz-alert-title-color: var(--rz-on-base); + --rz-alert-icon-color: var(--rz-on-base); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-base { + --rz-alert-color: var(--rz-on-base); + --rz-alert-title-color: var(--rz-on-base); + --rz-alert-icon-color: var(--rz-on-base); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-light { + --rz-alert-background-color: var(--rz-base-500); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); +} +.rz-alert.rz-variant-outlined.rz-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-500); + --rz-alert-color: var(--rz-base-500); + --rz-alert-title-color: var(--rz-base-500); + --rz-alert-icon-color: var(--rz-base-500); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-light { + --rz-alert-color: var(--rz-base-500); + --rz-alert-title-color: var(--rz-base-500); + --rz-alert-icon-color: var(--rz-base-500); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-dark { + --rz-alert-background-color: var(--rz-base-900); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-dark { + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} + +@keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +@-webkit-keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +.rz-button.rz-speech-to-text-button-recording { + -webkit-animation: mic-blink 2s linear infinite; + -moz-animation: mic-blink 2s linear infinite; + animation: mic-blink 2s linear infinite; +} + +.rz-flex-row { + flex-direction: row !important; +} + +.rz-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.rz-flex-column { + flex-direction: column !important; +} + +.rz-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.rz-stack { + box-sizing: border-box; + gap: var(--rz-gap); +} + +.rz-row { + box-sizing: border-box; + flex-wrap: wrap; + gap: var(--rz-gap); + row-gap: var(--rz-row-gap); +} + +.rz-row > [class^=rz-col] { + flex: 1 0 0%; +} + +.rz-row > [class*=rz-col-] { + flex: 0 0 auto; + width: 100%; +} + +.rz-row > .rz-col-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); +} + +.rz-row > .rz-col-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-row > .rz-col-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-row > .rz-col-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-row > .rz-col-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-row > .rz-col-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-row > .rz-col-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-row > .rz-col-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-row > .rz-col-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-row > .rz-col-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-row > .rz-col-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-row > .rz-col-12 { + max-width: 100%; + flex-basis: 100%; +} + +@media (min-width: 576px) { + .rz-row > .rz-col-xs-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xs-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 768px) { + .rz-row > .rz-col-sm-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-sm-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1024px) { + .rz-row > .rz-col-md-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-md-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-md-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-md-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-md-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-md-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-md-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-md-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-md-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-md-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-md-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-md-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1280px) { + .rz-row > .rz-col-lg-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-lg-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1920px) { + .rz-row > .rz-col-xl-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xl-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 2560px) { + .rz-row > .rz-col-xx-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xx-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-12 { + max-width: 100%; + flex-basis: 100%; + } +} +.rz-offset-0 { + margin-inline-start: 0; +} + +.rz-offset-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-offset-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-offset-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-offset-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-offset-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-offset-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-offset-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-offset-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-offset-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-offset-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-offset-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); +} + +@media (min-width: 576px) { + .rz-offset-xs-0 { + margin-inline-start: 0; + } + .rz-offset-xs-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xs-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xs-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xs-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xs-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xs-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xs-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xs-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xs-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xs-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xs-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 768px) { + .rz-offset-sm-0 { + margin-inline-start: 0; + } + .rz-offset-sm-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-sm-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-sm-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-sm-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-sm-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-sm-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-sm-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-sm-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-sm-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-sm-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-sm-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1024px) { + .rz-offset-md-0 { + margin-inline-start: 0; + } + .rz-offset-md-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-md-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-md-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-md-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-md-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-md-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-md-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-md-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-md-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-md-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-md-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1280px) { + .rz-offset-lg-0 { + margin-inline-start: 0; + } + .rz-offset-lg-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-lg-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-lg-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-lg-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-lg-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-lg-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-lg-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-lg-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-lg-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-lg-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-lg-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1920px) { + .rz-offset-xl-0 { + margin-inline-start: 0; + } + .rz-offset-xl-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xl-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xl-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xl-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xl-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xl-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xl-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xl-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xl-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xl-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xl-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 2560px) { + .rz-offset-xx-0 { + margin-inline-start: 0; + } + .rz-offset-xx-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xx-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xx-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xx-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xx-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xx-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xx-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xx-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xx-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xx-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xx-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +.rz-order-first { + order: -1 !important; +} + +.rz-order-last { + order: 13 !important; +} + +.rz-order-0 { + order: 0 !important; +} + +.rz-order-1 { + order: 1 !important; +} + +.rz-order-2 { + order: 2 !important; +} + +.rz-order-3 { + order: 3 !important; +} + +.rz-order-4 { + order: 4 !important; +} + +.rz-order-5 { + order: 5 !important; +} + +.rz-order-6 { + order: 6 !important; +} + +.rz-order-7 { + order: 7 !important; +} + +.rz-order-8 { + order: 8 !important; +} + +.rz-order-9 { + order: 9 !important; +} + +.rz-order-10 { + order: 10 !important; +} + +.rz-order-11 { + order: 11 !important; +} + +.rz-order-12 { + order: 12 !important; +} + +@media (min-width: 576px) { + .rz-order-xs-first { + order: -1 !important; + } + .rz-order-xs-last { + order: 13 !important; + } + .rz-order-xs-0 { + order: 0 !important; + } + .rz-order-xs-1 { + order: 1 !important; + } + .rz-order-xs-2 { + order: 2 !important; + } + .rz-order-xs-3 { + order: 3 !important; + } + .rz-order-xs-4 { + order: 4 !important; + } + .rz-order-xs-5 { + order: 5 !important; + } + .rz-order-xs-6 { + order: 6 !important; + } + .rz-order-xs-7 { + order: 7 !important; + } + .rz-order-xs-8 { + order: 8 !important; + } + .rz-order-xs-9 { + order: 9 !important; + } + .rz-order-xs-10 { + order: 10 !important; + } + .rz-order-xs-11 { + order: 11 !important; + } + .rz-order-xs-12 { + order: 12 !important; + } +} +@media (min-width: 768px) { + .rz-order-sm-first { + order: -1 !important; + } + .rz-order-sm-last { + order: 13 !important; + } + .rz-order-sm-0 { + order: 0 !important; + } + .rz-order-sm-1 { + order: 1 !important; + } + .rz-order-sm-2 { + order: 2 !important; + } + .rz-order-sm-3 { + order: 3 !important; + } + .rz-order-sm-4 { + order: 4 !important; + } + .rz-order-sm-5 { + order: 5 !important; + } + .rz-order-sm-6 { + order: 6 !important; + } + .rz-order-sm-7 { + order: 7 !important; + } + .rz-order-sm-8 { + order: 8 !important; + } + .rz-order-sm-9 { + order: 9 !important; + } + .rz-order-sm-10 { + order: 10 !important; + } + .rz-order-sm-11 { + order: 11 !important; + } + .rz-order-sm-12 { + order: 12 !important; + } +} +@media (min-width: 1024px) { + .rz-order-md-first { + order: -1 !important; + } + .rz-order-md-last { + order: 13 !important; + } + .rz-order-md-0 { + order: 0 !important; + } + .rz-order-md-1 { + order: 1 !important; + } + .rz-order-md-2 { + order: 2 !important; + } + .rz-order-md-3 { + order: 3 !important; + } + .rz-order-md-4 { + order: 4 !important; + } + .rz-order-md-5 { + order: 5 !important; + } + .rz-order-md-6 { + order: 6 !important; + } + .rz-order-md-7 { + order: 7 !important; + } + .rz-order-md-8 { + order: 8 !important; + } + .rz-order-md-9 { + order: 9 !important; + } + .rz-order-md-10 { + order: 10 !important; + } + .rz-order-md-11 { + order: 11 !important; + } + .rz-order-md-12 { + order: 12 !important; + } +} +@media (min-width: 1280px) { + .rz-order-lg-first { + order: -1 !important; + } + .rz-order-lg-last { + order: 13 !important; + } + .rz-order-lg-0 { + order: 0 !important; + } + .rz-order-lg-1 { + order: 1 !important; + } + .rz-order-lg-2 { + order: 2 !important; + } + .rz-order-lg-3 { + order: 3 !important; + } + .rz-order-lg-4 { + order: 4 !important; + } + .rz-order-lg-5 { + order: 5 !important; + } + .rz-order-lg-6 { + order: 6 !important; + } + .rz-order-lg-7 { + order: 7 !important; + } + .rz-order-lg-8 { + order: 8 !important; + } + .rz-order-lg-9 { + order: 9 !important; + } + .rz-order-lg-10 { + order: 10 !important; + } + .rz-order-lg-11 { + order: 11 !important; + } + .rz-order-lg-12 { + order: 12 !important; + } +} +@media (min-width: 1920px) { + .rz-order-xl-first { + order: -1 !important; + } + .rz-order-xl-last { + order: 13 !important; + } + .rz-order-xl-0 { + order: 0 !important; + } + .rz-order-xl-1 { + order: 1 !important; + } + .rz-order-xl-2 { + order: 2 !important; + } + .rz-order-xl-3 { + order: 3 !important; + } + .rz-order-xl-4 { + order: 4 !important; + } + .rz-order-xl-5 { + order: 5 !important; + } + .rz-order-xl-6 { + order: 6 !important; + } + .rz-order-xl-7 { + order: 7 !important; + } + .rz-order-xl-8 { + order: 8 !important; + } + .rz-order-xl-9 { + order: 9 !important; + } + .rz-order-xl-10 { + order: 10 !important; + } + .rz-order-xl-11 { + order: 11 !important; + } + .rz-order-xl-12 { + order: 12 !important; + } +} +@media (min-width: 2560px) { + .rz-order-xx-first { + order: -1 !important; + } + .rz-order-xx-last { + order: 13 !important; + } + .rz-order-xx-0 { + order: 0 !important; + } + .rz-order-xx-1 { + order: 1 !important; + } + .rz-order-xx-2 { + order: 2 !important; + } + .rz-order-xx-3 { + order: 3 !important; + } + .rz-order-xx-4 { + order: 4 !important; + } + .rz-order-xx-5 { + order: 5 !important; + } + .rz-order-xx-6 { + order: 6 !important; + } + .rz-order-xx-7 { + order: 7 !important; + } + .rz-order-xx-8 { + order: 8 !important; + } + .rz-order-xx-9 { + order: 9 !important; + } + .rz-order-xx-10 { + order: 10 !important; + } + .rz-order-xx-11 { + order: 11 !important; + } + .rz-order-xx-12 { + order: 12 !important; + } +} +.rz-form-field-helper { + padding: var(--rz-form-field-helper-padding); +} + +.rz-form-field-content { + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); + box-shadow: var(--rz-form-field-shadow); + transition: var(--rz-input-transition); +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + flex: 1; +} +.rz-form-field-content .rz-form-field-start, +.rz-form-field-content .rz-form-field-end { + display: flex; + flex: 0; + align-items: center; + white-space: nowrap; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); +} + +.rz-form-field { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + vertical-align: top; +} +.rz-form-field:hover .rz-form-field-content { + box-shadow: var(--rz-form-field-hover-shadow); +} +.rz-form-field.rz-state-focused .rz-form-field-content { + box-shadow: var(--rz-form-field-focus-shadow); +} +.rz-form-field.rz-state-disabled .rz-form-field-content { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); +} +.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content { + border: var(--rz-input-disabled-border); +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled { + color: var(--rz-input-disabled-color); + opacity: 1; +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled::placeholder, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +.rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { + margin: 0; + --rz-input-height: var(--rz-form-field-filled-height); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); + --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); + box-shadow: var(--rz-input-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { + top: calc(var(--rz-numeric-button-offset) + 1rem); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end { + padding-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-textarea, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-textarea { + margin-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-datepicker-trigger, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-datepicker-trigger { + top: calc(50% + 0.4375rem); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-input-hover-border); + box-shadow: var(--rz-input-hover-shadow); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content { + border: var(--rz-input-focus-border); + box-shadow: var(--rz-input-focus-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content { + border: var(--rz-form-field-filled-border); + border-radius: var(--rz-form-field-filled-border-radius); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-filled .rz-form-field-content:after { + display: var(--rz-form-field-filled-underline-display); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-form-field-filled-hover-border); + box-shadow: var(--rz-form-field-filled-hover-shadow); + background-color: var(--rz-form-field-filled-hover-background-color); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused .rz-form-field-content, .rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused:hover .rz-form-field-content { + border: var(--rz-form-field-filled-focus-border); + box-shadow: var(--rz-form-field-filled-focus-shadow); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-text .rz-form-field-content { + border-color: transparent; + box-shadow: none; + --rz-input-background-color: transparent; + --rz-input-border-radius: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; + --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); +} +.rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { + padding: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-start { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-end { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { + content: ""; + position: absolute; + z-index: 1; + inset-inline-start: 50%; + inset-inline-end: 50%; + bottom: calc(-1 * var(--rz-border-width)); + height: calc(var(--rz-border-width) + 1px); + border: var(--rz-input-focus-border); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { + content: ""; + position: absolute; + inset: calc(-1 * var(--rz-border-width)); + top: auto; + height: var(--rz-border-width); + border-bottom: var(--rz-input-border); +} +.rz-form-field.rz-variant-filled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-hover-border); +} +.rz-form-field.rz-variant-filled.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-filled.rz-state-disabled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-disabled-border); +} +.rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); + border: var(--rz-input-focus-border); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); +} +.rz-form-field .rz-numeric-button { + display: none; +} +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { + display: block; +} + +.rz-form-field-label { + position: absolute; + pointer-events: none; + padding: var(--rz-form-field-label-padding); + inset-block-start: 50%; + inset-inline-end: auto; + border-radius: var(--rz-border-radius); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); + max-width: calc(100% - 1.5rem); + transform: translate(0, -50%); + background-color: transparent; + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); +} +.rz-state-disabled .rz-form-field-content > .rz-form-field-label { + color: var(--rz-input-disabled-color) !important; +} +.rz-form-field-label:last-child { + inset-inline-end: 1.5rem; +} +.rz-textarea ~ .rz-form-field-label { + inset-block-start: var(--rz-form-field-label-textarea-top); + transform: translate(0, 0); +} +.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { + transform: translate(0, 0.625rem); +} +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; + transform: translate(0, 0); + color: var(--rz-input-placeholder-color); + background-color: var(--rz-form-field-label-floating-background-color); + font-size: 0.75rem; + line-height: 1rem; + max-width: calc(100% - 1.5rem); +} +.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + background-color: inherit !important; +} +.invalid ~ .rz-form-field-label { + color: var(--rz-danger) !important; +} +.rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} + +.rz-timeline { + box-sizing: border-box; + display: flex; +} +.rz-timeline.rz-timeline-column { + flex-direction: column; +} +.rz-timeline.rz-timeline-column .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row { + flex-direction: row; +} +.rz-timeline.rz-timeline-row .rz-timeline-item { + flex-direction: column; + justify-content: end; + width: 100%; +} +.rz-timeline.rz-timeline-row.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: column-reverse; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse .rz-timeline-item { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column; + justify-content: end; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item { + flex-direction: column; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-end { + display: none; +} + +.rz-timeline-item { + display: flex; + padding: var(--rz-timeline-item-padding); + position: relative; +} +.rz-timeline-align-items-center .rz-timeline-item { + align-items: center; +} +.rz-timeline-align-items-normal .rz-timeline-item { + align-items: normal; +} +.rz-timeline-align-items-start .rz-timeline-item { + align-items: start; +} +.rz-timeline-align-items-end .rz-timeline-item { + align-items: end; +} +.rz-timeline-align-items-stretch .rz-timeline-item { + align-items: stretch; +} +.rz-timeline-item:before { + content: ""; + position: absolute; + background-color: var(--rz-timeline-line-color); +} +.rz-timeline-column .rz-timeline-item:before { + width: var(--rz-timeline-line-width); + top: 0; + bottom: 0; + left: calc(50% - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline-column .rz-timeline-item:first-child:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-top-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + top: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column .rz-timeline-item:last-child:before { + bottom: calc(50% - var(--rz-timeline-line-width) / 2); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + bottom: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + bottom: auto; + left: 0; + right: 0; + height: var(--rz-timeline-line-width); +} +.rz-timeline-row .rz-timeline-item:first-child:before { + left: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + left: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:last-child:before { + right: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-right-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + right: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} + +.rz-timeline-content-start { + text-align: center; +} +.rz-timeline-column .rz-timeline-content-start { + flex: 1 1 auto; + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-content-end { + flex: 1 1 auto; + text-align: center; +} +.rz-timeline-column .rz-timeline-content-end { + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} +.rz-timeline-row .rz-timeline-content-end { + max-height: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-axis { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 var(--rz-timeline-axis-size); +} +.rz-timeline-column .rz-timeline-axis { + width: var(--rz-timeline-axis-size); +} +.rz-timeline-row .rz-timeline-axis { + height: var(--rz-timeline-axis-size); +} + +.rz-timeline-point { + position: relative; + display: flex; + flex: 0 1 var(--rz-timeline-point-size); + align-items: center; + justify-content: center; + height: var(--rz-timeline-point-size); + width: var(--rz-timeline-point-size); + border: var(--rz-timeline-point-border); + border-radius: var(--rz-timeline-point-border-radius); + background-color: var(--rz-timeline-point-background-color); + color: var(--rz-timeline-point-color); +} + +.rz-timeline-point-outlined { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border-color: var(--rz-timeline-point-background-color); +} + +.rz-timeline-point-flat { + border: 0; +} + +.rz-timeline-point-text { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border: 0; +} + +.rz-timeline-point-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} + +.rz-timeline-point-outlined.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); + border-color: var(--rz-primary); +} + +.rz-timeline-point-text.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); +} + +.rz-timeline-point-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} + +.rz-timeline-point-outlined.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); + border-color: var(--rz-secondary); +} + +.rz-timeline-point-text.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); +} + +.rz-timeline-point-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} + +.rz-timeline-point-outlined.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); + border-color: var(--rz-info); +} + +.rz-timeline-point-text.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); +} + +.rz-timeline-point-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} + +.rz-timeline-point-outlined.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); + border-color: var(--rz-warning); +} + +.rz-timeline-point-text.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); +} + +.rz-timeline-point-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} + +.rz-timeline-point-outlined.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); + border-color: var(--rz-success); +} + +.rz-timeline-point-text.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); +} + +.rz-timeline-point-base { + background-color: var(--rz-base); + color: var(--rz-on-base); +} + +.rz-timeline-point-outlined.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base); + border-color: var(--rz-base); +} + +.rz-timeline-point-text.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base); +} + +.rz-timeline-point-light { + background-color: var(--rz-base-500); + color: var(--rz-text-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-500); + border-color: var(--rz-base-500); +} + +.rz-timeline-point-text.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-500); +} + +.rz-timeline-point-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); + border-color: var(--rz-base-900); +} + +.rz-timeline-point-text.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); +} + +.rz-timeline-axis-lg { + --rz-timeline-point-size: 3rem; +} +.rz-timeline-axis-lg .rzi { + font-size: 2rem; +} + +.rz-timeline-axis-md { + --rz-timeline-point-size: 1.5rem; +} +.rz-timeline-axis-md .rzi { + font-size: 1rem; +} + +.rz-timeline-axis-sm { + --rz-timeline-point-size: 1rem; +} +.rz-timeline-axis-sm .rzi { + font-size: 0.625rem; +} + +.rz-timeline-axis-xs { + --rz-timeline-point-size: 0.75rem; +} +.rz-timeline-axis-xs .rzi { + font-size: 0.5rem; +} + +.rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { + width: 100%; + height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #4f5154; + --rz-base-50: #f6f6f7; + --rz-base-100: #eaebec; + --rz-base-200: #e1e2e3; + --rz-base-300: #c9cacd; + --rz-base-400: #b0b2b5; + --rz-base-500: #6d6f74; + --rz-base-600: #4f5154; + --rz-base-700: #3b3c3f; + --rz-base-800: #242527; + --rz-base-900: #19191a; + --rz-base-light: #e1e2e3; + --rz-base-lighter: #ffffff; + --rz-base-dark: #3b3c3f; + --rz-base-darker: #000000; + --rz-primary: #3871ff; + --rz-primary-light: #88aaff; + --rz-primary-lighter: rgba(56, 113, 255, 0.2); + --rz-primary-dark: #2f5fd6; + --rz-primary-darker: #2b56c2; + --rz-secondary: #2a3c68; + --rz-secondary-light: #4c5b80; + --rz-secondary-lighter: rgba(42, 60, 104, 0.2); + --rz-secondary-dark: #233257; + --rz-secondary-darker: #202e4f; + --rz-info: #12a4f5; + --rz-info-light: #38b3f7; + --rz-info-lighter: rgba(18, 164, 245, 0.2); + --rz-info-dark: #0f8ace; + --rz-info-darker: #0e7dba; + --rz-success: #009b51; + --rz-success-light: #29ab6d; + --rz-success-lighter: rgba(0, 155, 81, 0.2); + --rz-success-dark: #008244; + --rz-success-darker: #00763e; + --rz-warning: #ffae11; + --rz-warning-light: #ffbb37; + --rz-warning-lighter: rgba(255, 174, 17, 0.2); + --rz-warning-dark: #d6920e; + --rz-warning-darker: #c2840d; + --rz-danger: #f31155; + --rz-danger-light: #f53770; + --rz-danger-lighter: rgba(243, 17, 85, 0.2); + --rz-danger-dark: #cc0e47; + --rz-danger-darker: #b90d41; + --rz-on-base: #ffffff; + --rz-on-base-light: #19191a; + --rz-on-base-lighter: #19191a; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #000000; + --rz-on-primary-lighter: #88aaff; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #ffffff; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #12a4f5; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #009b51; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #ffae11; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f31155; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 1px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary-light); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-100); + --rz-text-secondary-color: var(--rz-base-300); + --rz-text-tertiary-color: var(--rz-base-400); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-primary-light); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-primary); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.14), 0px 8px 20px rgba(0, 0, 0, 0.21); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.14), 0px 4px 6px rgba(0, 0, 0, 0.14), 0px 12px 24px rgba(0, 0, 0, 0.22); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.14), 0px 5px 8px rgba(0, 0, 0, 0.14), 0px 14px 28px rgba(0, 0, 0, 0.23); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.14), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 16px 32px rgba(0, 0, 0, 0.24); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.14), 0px 7px 12px rgba(0, 0, 0, 0.14), 0px 18px 40px rgba(0, 0, 0, 0.25); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.14), 0px 8px 16px rgba(0, 0, 0, 0.14), 0px 20px 48px rgba(0, 0, 0, 0.26); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.14), 0px 9px 20px rgba(0, 0, 0, 0.14), 0px 22px 64px rgba(0, 0, 0, 0.3); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-base-900); + --rz-accordion-hover-color: var(--rz-primary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: #3b3c3f; + --rz-button-base-color: #242527; + --rz-button-background-size: 100% 0%, 100% 0%; + --rz-button-border-radius: 4px; + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: none; + --rz-button-hover-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-hover-background-size: 100% 200%, 100% 0%; + --rz-button-focus-shadow: none; + --rz-button-focus-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-focus-background-size: 100% 200%, 100% 0%; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: none; + --rz-button-active-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-active-background-size: 100% 0%, 100% 200%; + --rz-button-disabled-opacity: 0.5; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-800); + --rz-card-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-600); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: var(--rz-border-radius); + --rz-checkbox-border-width: 1px; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-hover-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-disabled-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-color: var(--rz-primary-light); + --rz-checkbox-checked-shadow: none; + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-hover-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-icon-border-radius: calc(var(--rz-border-radius) / 2); + --rz-checkbox-icon-width: 1rem; + --rz-checkbox-icon-height: 1rem; + --rz-checkbox-icon-font-size: 1rem; + --rz-checkbox-tri-icon-width: 1rem; + --rz-checkbox-tri-icon-height: 1rem; + --rz-checkbox-tri-icon-font-size: 1rem; + /* Chip */ + --rz-chip-background-color: var(--rz-base-600); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: 1rem; + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: 1rem; + --rz-colorpicker-item-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3); + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3), 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.08); + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: transparent; + --rz-datalist-shadow: none; + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-700); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: none; + --rz-datalist-item-border: var(--rz-border-base-700); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-text-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-color); + --rz-datepicker-header-background-color: var(--rz-base-background-color); + --rz-datepicker-header-padding-block: 0.5rem; + --rz-datepicker-header-padding-inline: 0.5rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0 0.5rem; + --rz-datepicker-calendar-padding-inline: 0.5rem; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-primary-lighter); + --rz-datepicker-calendar-hover-background-color: var(--rz-primary-lighter); + --rz-datepicker-calendar-selected-color: var(--rz-on-primary); + --rz-datepicker-calendar-selected-background-color: var(--rz-primary); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-dark); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-dark); + --rz-datepicker-calendar-border: none; + --rz-datepicker-calendar-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-primary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-primary); + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-background-color); + --rz-timepicker-separator-color: var(--rz-text-disabled-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-primary); + --rz-timepicker-button-background-color: var(--rz-primary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: var(--rz-border-radius); + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 1.25rem 0.5rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.5rem; + --rz-dialog-title-line-height: 1.25em; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: top; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-600); + --rz-dialog-border-radius: calc(2 * var(--rz-border-radius)); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-shadow: none; + --rz-dropdown-item-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-transition: var(--rz-transition-all); + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-700); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-700); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-700); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-primary); + --rz-editor-button-selected-color: var(--rz-on-primary); + --rz-editor-separator-background-color: var(--rz-base-600); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-700); + --rz-fieldset-border-radius: var(--rz-border-radius); + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-700); + --rz-fieldset-toggle-color: var(--rz-text-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: none; + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-700); + --rz-form-field-filled-hover-background-color: var(--rz-base-600); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary-light); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(243, 17, 85, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-primary); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-primary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3); + /* Grid */ + --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-600), 0 -1px 0 0 var(--rz-base-600); + --rz-grid-cell-border: var(--rz-border-base-700); + --rz-grid-right-cell-border: var(--rz-border-base-700); + --rz-grid-bottom-cell-border: var(--rz-border-base-700); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-primary-lighter); + --rz-grid-hover-color: var(--rz-on-primary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-primary-lighter); + --rz-grid-selected-color: var(--rz-on-primary-lighter); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-base-700); + --rz-grid-header-cell-border-bottom: var(--rz-border-normal); + --rz-grid-header-background-color: var(--rz-base-800); + --rz-grid-header-font-size: 0.875rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: none; + --rz-grid-header-color: var(--rz-text-title-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-800); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-title-color); + --rz-grid-foot-background-color: var(--rz-base-700); + --rz-grid-filter-background-color: var(--rz-base-700); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: none; + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-base-300); + --rz-grid-filter-focus-color: var(--rz-text-title-color); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-700); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: none; + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-color); + --rz-grid-shadow: none; + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-900); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-primary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: var(--rz-on-primary-lighter); + --rz-grid-loading-indicator-background-color: var(--rz-primary-lighter); + --rz-grid-frozen-cell-border: var(--rz-border-base-700); + --rz-grid-frozen-cell-background-color: var(--rz-base-800); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-base-700); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-disabled-color); + --rz-column-drag-handle-hover-color: var(--rz-text-title-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-800); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-800); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: none; + --rz-input-hover-shadow: none; + --rz-input-hover-border: var(--rz-border-primary-light); + --rz-input-focus-shadow: 0px 0px 0px 1px var(--rz-base-900), 0px 0px 0px 3px rgba(56, 113, 255, 0.4); + --rz-input-focus-border: var(--rz-border-primary-light); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: none; + --rz-input-disabled-background-color: var(--rz-base-900); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 0.5; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: transparent; + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-700); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-900); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: none; + --rz-menu-border-radius: 0; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-primary-lighter); + --rz-menu-item-hover-background-color: var(--rz-primary-lighter); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-on-primary-lighter); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-primary-lighter); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: var(--rz-transition-all); + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: transparent; + --rz-menu-top-item-hover-color: var(--rz-on-primary-lighter); + --rz-menu-top-item-hover-background-color: var(--rz-primary-lighter); + --rz-menu-top-item-selected-color: var(--rz-on-primary-lighter); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-on-primary-lighter); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-base-background-color); + --rz-numeric-button-disabled-background-color: var(--rz-base-100); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-text-tertiary-color); + /* Overlay */ + --rz-overlay-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-700); + /* Pager */ + --rz-pager-background-color: transparent; + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: none; + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-700); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-700); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-primary-lighter); + --rz-pager-numeric-button-selected-color: var(--rz-on-primary-lighter); + --rz-pager-numeric-button-selected-border: 1px solid transparent; + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-700); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-700); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-tertiary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-800); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(rz-text-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: inherit; + --rz-panel-menu-item-hover-background-color: var(--rz-base-700); + --rz-panel-menu-item-active-color: inherit; + --rz-panel-menu-item-active-background-color: var(--rz-base-700); + --rz-panel-menu-item-active-indicator: #3871ff; + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-700); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-base-700); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-700); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-base-700); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: var(rz-text-color); + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 0.4; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: var(--rz-border-radius); + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-primary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: transparent; + --rz-profile-menu-border: var(--rz-base-800); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-primary-lighter); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-700); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-primary-lighter); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-base-background-color); + --rz-radio-active-shadow: none; + --rz-radio-checked-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-shadow: none; + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-primary-light); + --rz-radio-circle-shadow: none; + --rz-radio-circle-hover-background-color: var(--rz-primary); + --rz-radio-icon-width: 0.625rem; + --rz-radio-icon-height: 0.625rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-text-tertiary-color); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.5; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-text-tertiary-color); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-600); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: none; + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-700); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-base-600); + --rz-scheduler-prev-next-button-color: var(--rz-text-color); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-color); + --rz-scheduler-view-button-background-color: transparent; + --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); + --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); + --rz-scheduler-view-selected-border-color: transparent; + --rz-scheduler-header-background-color: var(--rz-base-700); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: var(--rz-text-tertiary-color); + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-700); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: var(--rz-info-lighter); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: rgba(109, 111, 116, 0.5); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: transparent; + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-primary-lighter); + --rz-selectbar-selected-color: var(--rz-primary-light); + --rz-selectbar-selected-border: var(--rz-border-normal); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-700); + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-text-title-color); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-700); + --rz-sidebar-background-color: var(--rz-base-800); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: calc(2 * var(--rz-border-radius)); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-primary-lighter); + --rz-slider-range-border: var(--rz-border-primary-lighter); + --rz-slider-handle-width: 1.25rem; + --rz-slider-handle-height: 1.25rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-base-800); + --rz-slider-handle-border: 0.25rem solid var(--rz-primary); + --rz-slider-handle-border-radius: calc(4 * var(--rz-border-radius)); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-primary); + --rz-slider-handle-hover-border: 0.25rem solid var(--rz-primary); + --rz-slider-handle-hover-shadow: none; + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-600); + --rz-slider-disabled-range-border: var(--rz-border-base-600); + --rz-slider-disabled-handle-border: 0.25rem solid var(--rz-base-600); + --rz-slider-disabled-handle-background-color: var(--rz-base-800); + /* SplitButton */ + --rz-splitbutton-menu-shadow: none; + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-primary); + --rz-splitter-bar-background-color: var(--rz-base-700); + --rz-splitter-bar-background-color-active: var(--rz-primary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-700); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-primary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-primary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-primary); + /* Switch */ + --rz-switch-background-color: var(--rz-base-600); + --rz-switch-checked-background-color: var(--rz-primary); + --rz-switch-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14); + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: none; + --rz-tabs-border: var(--rz-border-base-700); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-700); + --rz-tabs-tab-color: var(--rz-text-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-primary); + --rz-tabs-tab-hover-background-color: var(--rz-base-600); + --rz-tabs-tab-hover-color: var(--rz-text-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-600); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-black); + --rz-tooltip-color: var(--rz-white); + --rz-tooltip-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.14), 0px 8px 20px rgba(0, 0, 0, 0.21); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-primary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: var(--rz-border-radius); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-primary-lighter); + --rz-tree-node-hover-color: var(--rz-primary); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-title-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-base); + --rz-upload-choose-color: var(--rz-on-base); + --rz-upload-choose-hover-background-color: var(--rz-base-700); + --rz-upload-choose-hover-color: var(--rz-text-color); + --rz-upload-choose-active-background-color: var(--rz-base-900); + --rz-upload-choose-active-color: var(--rz-text-color); + --rz-upload-cancel-background-color: var(--rz-base-600); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} + +body { + background: #19191a no-repeat 180% 0/60% fixed url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwNCIgaGVpZ2h0PSIxNDU4IiB2aWV3Qm94PSIwIDAgMTIwNCAxNDU4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfNDkzXzEwMTM0KSI+CjxjaXJjbGUgY3g9IjcyMi4xMjgiIGN5PSI4MzkuMDIiIHI9IjQ4MS40MTkiIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF80OTNfMTAxMzQpIi8+CjwvZz4KPGcgb3BhY2l0eT0iMC41IiBmaWx0ZXI9InVybCgjZmlsdGVyMV9mXzQ5M18xMDEzNCkiPgo8Y2lyY2xlIGN4PSI0NzAuMzMzIiBjeT0iNTcwLjMzMyIgcj0iNDcwLjMzMyIgZmlsbD0idXJsKCNwYWludDFfcmFkaWFsXzQ5M18xMDEzNCkiLz4KPC9nPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIyX2ZfNDkzXzEwMTM0KSI+CjxjaXJjbGUgY3g9IjY5MS41MTEiIGN5PSI1MjIuMjk3IiByPSIzMzEuNTAzIiBmaWxsPSJ1cmwoI3BhaW50Ml9yYWRpYWxfNDkzXzEwMTM0KSIvPgo8L2c+CjxnIG9wYWNpdHk9IjAuNSIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjNfZl80OTNfMTAxMzQpIj4KPGNpcmNsZSBjeD0iNjA4LjI0NCIgY3k9IjEwNzkuOTciIHI9IjMzMS41MDMiIHRyYW5zZm9ybT0icm90YXRlKC04MS4yMjQ0IDYwOC4yNDQgMTA3OS45NykiIGZpbGw9InVybCgjcGFpbnQzX3JhZGlhbF80OTNfMTAxMzQpIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl80OTNfMTAxMzQiIHg9IjE0MC43MDkiIHk9IjI1Ny42MDEiIHdpZHRoPSIxMTYyLjg0IiBoZWlnaHQ9IjExNjIuODQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZl80OTNfMTAxMzQiIHg9Ii0xMDAiIHk9IjAiIHdpZHRoPSIxMTQwLjY3IiBoZWlnaHQ9IjExNDAuNjciIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjJfZl80OTNfMTAxMzQiIHg9IjI2MC4wMDgiIHk9IjkwLjc5MzkiIHdpZHRoPSI4NjMuMDA2IiBoZWlnaHQ9Ijg2My4wMDYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjNfZl80OTNfMTAxMzQiIHg9IjE3Ni42OTQiIHk9IjY0OC40MjMiIHdpZHRoPSI4NjMuMSIgaGVpZ2h0PSI4NjMuMSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzQ5M18xMDEzNCIvPgo8L2ZpbHRlcj4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzQ5M18xMDEzNCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg3MjIuMTI4IDgzOS4wMikgcm90YXRlKDkwKSBzY2FsZSg0ODEuNDE5KSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRjFBNkMiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkYxQTZDIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDFfcmFkaWFsXzQ5M18xMDEzNCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg0NzAuMzMzIDU3MC4zMzMpIHJvdGF0ZSg5MCkgc2NhbGUoNDcwLjMzMykiPgo8c3RvcCBzdG9wLWNvbG9yPSIjM0FBQ0ZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzNBOTVGRiIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQyX3JhZGlhbF80OTNfMTAxMzQiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjkxLjUxMSA1MjIuMjk3KSByb3RhdGUoOTApIHNjYWxlKDMzMS41MDMpIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzQ4M0FGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ODNBRkYiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50M19yYWRpYWxfNDkzXzEwMTM0IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwOC4yNDQgMTA3OS45Nykgcm90YXRlKDkwKSBzY2FsZSgzMzEuNTAzKSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkM4M0EiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkZDODNBIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K"); +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/standard-dark-wcag.css b/_content/Radzen.Blazor/css/standard-dark-wcag.css new file mode 100755 index 0000000..3b4e685 --- /dev/null +++ b/_content/Radzen.Blazor/css/standard-dark-wcag.css @@ -0,0 +1,85 @@ +:root, +.rz-standard-dark { + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #4f5154; + --rz-base-50: #f6f6f7; + --rz-base-100: #eaebec; + --rz-base-200: #e1e2e3; + --rz-base-300: #c9cacd; + --rz-base-400: #b0b2b5; + --rz-base-500: #6d6f74; + --rz-base-600: #4f5154; + --rz-base-700: #3b3c3f; + --rz-base-800: #242527; + --rz-base-900: #19191a; + --rz-base-light: #e1e2e3; + --rz-base-lighter: #ffffff; + --rz-base-dark: #3b3c3f; + --rz-base-darker: #000000; + --rz-primary: #2965ff; + --rz-primary-light: #88aaff; + --rz-primary-lighter: rgba(56, 113, 255, 0.2); + --rz-primary-dark: #2254d3; + --rz-primary-darker: #1948bd; + --rz-secondary: #2a3c68; + --rz-secondary-light: #4c5b80; + --rz-secondary-lighter: rgba(42, 60, 104, 0.2); + --rz-secondary-dark: #233257; + --rz-secondary-darker: #202e4f; + --rz-info: #006094; + --rz-info-light: #2979a5; + --rz-info-lighter: rgba(0, 96, 148, 0.16); + --rz-info-dark: #00517c; + --rz-info-darker: #004970; + --rz-success: #006b37; + --rz-success-light: #298357; + --rz-success-lighter: rgba(0, 107, 55, 0.16); + --rz-success-dark: #005a2e; + --rz-success-darker: #00512a; + --rz-warning: #ffae11; + --rz-warning-light: #ffbb37; + --rz-warning-lighter: rgba(255, 174, 17, 0.16); + --rz-warning-dark: #d6920e; + --rz-warning-darker: #c2840d; + --rz-danger: #c40e44; + --rz-danger-light: #cd3562; + --rz-danger-lighter: rgba(196, 14, 68, 0.16); + --rz-danger-dark: #a50c39; + --rz-danger-darker: #950b34; + --rz-on-base: #ffffff; + --rz-on-base-light: #19191a; + --rz-on-base-lighter: #19191a; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #000000; + --rz-on-primary-lighter: #88aaff; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #ffffff; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #006094; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #006b37; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #000000; + --rz-on-warning-light: #000000; + --rz-on-warning-lighter: #ffae11; + --rz-on-warning-dark: #000000; + --rz-on-warning-darker: #000000; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #c40e44; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/standard-dark.css b/_content/Radzen.Blazor/css/standard-dark.css new file mode 100755 index 0000000..11ac961 --- /dev/null +++ b/_content/Radzen.Blazor/css/standard-dark.css @@ -0,0 +1,21237 @@ +@charset "UTF-8"; +.rz-selectable .rz-datatable-even td, +.rz-selectable .rz-datatable-even .rz-cell-data, +.rz-selectable .rz-datatable-odd td, +.rz-selectable .rz-datatable-odd .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable .rz-datatable-even:hover > td:not(.rz-frozen-cell), +.rz-selectable .rz-datatable-odd:hover > td:not(.rz-frozen-cell) { + background-color: var(--rz-primary-lighter); +} +.rz-selectable .rz-datatable-even:hover .rz-cell-data, +.rz-selectable .rz-datatable-odd:hover .rz-cell-data { + color: var(--rz-on-primary-lighter); +} + +.rz-checkbox-list-vertical.rz-state-disabled > div > .rz-chkbox-label, +.rz-checkbox-list-horizontal.rz-state-disabled > div > .rz-chkbox-label { + opacity: 0.5; +} +.rz-checkbox-list-vertical:not(.rz-state-disabled) > div > .rz-chkbox-label:hover, +.rz-checkbox-list-horizontal:not(.rz-state-disabled) > div > .rz-chkbox-label:hover { + color: var(--rz-primary-light); + cursor: pointer; +} + +.rz-radio-button-list-vertical.rz-state-disabled > div > .rz-radiobutton-label, +.rz-radio-button-list-horizontal.rz-state-disabled > div > .rz-radiobutton-label { + opacity: 0.5; +} +.rz-radio-button-list-vertical:not(.rz-state-disabled) > div > .rz-radiobutton-label:hover, +.rz-radio-button-list-horizontal:not(.rz-state-disabled) > div > .rz-radiobutton-label:hover { + color: var(--rz-primary-light); + cursor: pointer; +} + +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 100 700; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; +} +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +.rz-text-title-color { + color: var(--rz-base-50) !important; +} + +.rz-text-color { + color: var(--rz-base-100) !important; +} + +.rz-text-secondary-color { + color: var(--rz-base-300) !important; +} + +.rz-text-tertiary-color { + color: var(--rz-base-400) !important; +} + +.rz-text-disabled-color { + color: var(--rz-base-500) !important; +} + +.rz-text-contrast-color { + color: var(--rz-white) !important; +} + +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; +} + +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; +} + +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; +} + +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; +} + +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; +} + +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; +} + +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; +} + +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; +} + +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; +} + +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; +} + +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; +} + +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; +} + +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; +} + +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; +} + +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; +} + +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; +} + +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; +} + +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; +} + +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; +} + +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; +} + +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; +} + +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; +} + +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; +} + +.rz-display-none { + display: none !important; +} + +.rz-display-block { + display: block !important; +} + +.rz-display-inline { + display: inline !important; +} + +.rz-display-inline-block { + display: inline-block !important; +} + +.rz-display-flex { + display: flex !important; +} + +.rz-display-inline-flex { + display: inline-flex !important; +} + +.rz-display-grid { + display: grid !important; +} + +.rz-display-inline-grid { + display: inline-grid !important; +} + +@media (min-width: 576px) { + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 768px) { + .rz-display-sm-none { + display: none !important; + } + .rz-display-sm-block { + display: block !important; + } + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} + +.rz-justify-content-stretch { + justify-content: stretch !important; +} + +.rz-justify-content-center { + justify-content: center !important; +} + +.rz-justify-content-start { + justify-content: start !important; +} + +.rz-justify-content-end { + justify-content: end !important; +} + +.rz-justify-content-flex-start { + justify-content: flex-start !important; +} + +.rz-justify-content-flex-end { + justify-content: flex-end !important; +} + +.rz-justify-content-left { + justify-content: left !important; +} + +.rz-justify-content-right { + justify-content: right !important; +} + +.rz-justify-content-space-between { + justify-content: space-between !important; +} + +.rz-justify-content-space-around { + justify-content: space-around !important; +} + +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.rz-align-items-normal { + align-items: normal !important; +} + +.rz-align-items-stretch { + align-items: stretch !important; +} + +.rz-align-items-center { + align-items: center !important; +} + +.rz-align-items-start { + align-items: start !important; +} + +.rz-align-items-end { + align-items: end !important; +} + +.rz-align-items-flex-start { + align-items: flex-start !important; +} + +.rz-align-items-flex-end { + align-items: flex-end !important; +} + +.rz-color-white { + color: var(--rz-white) !important; +} + +.rz-color-black { + color: var(--rz-black) !important; +} + +.rz-color-base { + color: var(--rz-base) !important; +} + +.rz-color-base-50 { + color: var(--rz-base-50) !important; +} + +.rz-color-base-100 { + color: var(--rz-base-100) !important; +} + +.rz-color-base-200 { + color: var(--rz-base-200) !important; +} + +.rz-color-base-300 { + color: var(--rz-base-300) !important; +} + +.rz-color-base-400 { + color: var(--rz-base-400) !important; +} + +.rz-color-base-500 { + color: var(--rz-base-500) !important; +} + +.rz-color-base-600 { + color: var(--rz-base-600) !important; +} + +.rz-color-base-700 { + color: var(--rz-base-700) !important; +} + +.rz-color-base-800 { + color: var(--rz-base-800) !important; +} + +.rz-color-base-900 { + color: var(--rz-base-900) !important; +} + +.rz-color-base-light { + color: var(--rz-base-light) !important; +} + +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; +} + +.rz-color-base-dark { + color: var(--rz-base-dark) !important; +} + +.rz-color-base-darker { + color: var(--rz-base-darker) !important; +} + +.rz-color-primary { + color: var(--rz-primary) !important; +} + +.rz-color-primary-light { + color: var(--rz-primary-light) !important; +} + +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; +} + +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; +} + +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; +} + +.rz-color-secondary { + color: var(--rz-secondary) !important; +} + +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; +} + +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; +} + +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; +} + +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; +} + +.rz-color-info { + color: var(--rz-info) !important; +} + +.rz-color-info-light { + color: var(--rz-info-light) !important; +} + +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; +} + +.rz-color-info-dark { + color: var(--rz-info-dark) !important; +} + +.rz-color-info-darker { + color: var(--rz-info-darker) !important; +} + +.rz-color-success { + color: var(--rz-success) !important; +} + +.rz-color-success-light { + color: var(--rz-success-light) !important; +} + +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; +} + +.rz-color-success-dark { + color: var(--rz-success-dark) !important; +} + +.rz-color-success-darker { + color: var(--rz-success-darker) !important; +} + +.rz-color-warning { + color: var(--rz-warning) !important; +} + +.rz-color-warning-light { + color: var(--rz-warning-light) !important; +} + +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; +} + +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; +} + +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; +} + +.rz-color-danger { + color: var(--rz-danger) !important; +} + +.rz-color-danger-light { + color: var(--rz-danger-light) !important; +} + +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; +} + +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; +} + +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; +} + +.rz-color-on-base { + color: var(--rz-on-base) !important; +} + +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; +} + +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; +} + +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; +} + +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; +} + +.rz-color-on-primary { + color: var(--rz-on-primary) !important; +} + +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; +} + +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; +} + +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; +} + +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; +} + +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; +} + +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; +} + +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; +} + +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; +} + +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; +} + +.rz-color-on-info { + color: var(--rz-on-info) !important; +} + +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; +} + +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; +} + +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; +} + +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; +} + +.rz-color-on-success { + color: var(--rz-on-success) !important; +} + +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; +} + +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; +} + +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; +} + +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; +} + +.rz-color-on-warning { + color: var(--rz-on-warning) !important; +} + +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; +} + +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; +} + +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; +} + +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; +} + +.rz-color-on-danger { + color: var(--rz-on-danger) !important; +} + +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; +} + +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; +} + +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; +} + +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; +} + +.rz-color-series-1 { + color: var(--rz-series-1) !important; +} + +.rz-color-series-2 { + color: var(--rz-series-2) !important; +} + +.rz-color-series-3 { + color: var(--rz-series-3) !important; +} + +.rz-color-series-4 { + color: var(--rz-series-4) !important; +} + +.rz-color-series-5 { + color: var(--rz-series-5) !important; +} + +.rz-color-series-6 { + color: var(--rz-series-6) !important; +} + +.rz-color-series-7 { + color: var(--rz-series-7) !important; +} + +.rz-color-series-8 { + color: var(--rz-series-8) !important; +} + +.rz-color-series-9 { + color: var(--rz-series-9) !important; +} + +.rz-color-series-10 { + color: var(--rz-series-10) !important; +} + +.rz-color-series-11 { + color: var(--rz-series-11) !important; +} + +.rz-color-series-12 { + color: var(--rz-series-12) !important; +} + +.rz-color-series-13 { + color: var(--rz-series-13) !important; +} + +.rz-color-series-14 { + color: var(--rz-series-14) !important; +} + +.rz-color-series-15 { + color: var(--rz-series-15) !important; +} + +.rz-color-series-16 { + color: var(--rz-series-16) !important; +} + +.rz-color-series-17 { + color: var(--rz-series-17) !important; +} + +.rz-color-series-18 { + color: var(--rz-series-18) !important; +} + +.rz-color-series-19 { + color: var(--rz-series-19) !important; +} + +.rz-color-series-20 { + color: var(--rz-series-20) !important; +} + +.rz-color-series-21 { + color: var(--rz-series-21) !important; +} + +.rz-color-series-22 { + color: var(--rz-series-22) !important; +} + +.rz-color-series-23 { + color: var(--rz-series-23) !important; +} + +.rz-color-series-24 { + color: var(--rz-series-24) !important; +} + +.rz-background-color-white { + background-color: var(--rz-white) !important; +} + +.rz-background-color-black { + background-color: var(--rz-black) !important; +} + +.rz-background-color-base { + background-color: var(--rz-base) !important; +} + +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; +} + +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; +} + +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; +} + +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; +} + +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; +} + +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; +} + +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; +} + +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; +} + +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; +} + +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; +} + +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; +} + +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; +} + +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; +} + +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; +} + +.rz-background-color-primary { + background-color: var(--rz-primary) !important; +} + +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; +} + +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; +} + +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; +} + +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; +} + +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; +} + +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; +} + +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; +} + +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; +} + +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; +} + +.rz-background-color-info { + background-color: var(--rz-info) !important; +} + +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; +} + +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; +} + +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; +} + +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; +} + +.rz-background-color-success { + background-color: var(--rz-success) !important; +} + +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; +} + +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; +} + +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; +} + +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; +} + +.rz-background-color-warning { + background-color: var(--rz-warning) !important; +} + +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; +} + +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; +} + +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; +} + +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; +} + +.rz-background-color-danger { + background-color: var(--rz-danger) !important; +} + +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; +} + +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; +} + +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; +} + +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; +} + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; +} + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; +} + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; +} + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; +} + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; +} + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; +} + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; +} + +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; +} + +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; +} + +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; +} + +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; +} + +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; +} + +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; +} + +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; +} + +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; +} + +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; +} + +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; +} + +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; +} + +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; +} + +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; +} + +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; +} + +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; +} + +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; +} + +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; +} + +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; +} + +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; +} + +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; +} + +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; +} + +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; +} + +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; +} + +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; +} + +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; +} + +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; +} + +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; +} + +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; +} + +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; +} + +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; +} + +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; +} + +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; +} + +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; +} + +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; +} + +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; +} + +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; +} + +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; +} + +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; +} + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; +} + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; +} + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; +} + +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; +} + +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; +} + +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; +} + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; +} + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; +} + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; +} + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; +} + +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; +} + +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; +} + +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; +} + +.rz-border-color-white { + border-color: var(--rz-white) !important; +} + +.rz-border-color-black { + border-color: var(--rz-black) !important; +} + +.rz-border-color-base { + border-color: var(--rz-base) !important; +} + +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; +} + +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; +} + +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; +} + +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; +} + +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; +} + +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; +} + +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; +} + +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; +} + +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; +} + +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; +} + +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; +} + +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; +} + +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; +} + +.rz-border-color-primary { + border-color: var(--rz-primary) !important; +} + +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; +} + +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; +} + +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-color-info { + border-color: var(--rz-info) !important; +} + +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; +} + +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; +} + +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; +} + +.rz-border-color-success { + border-color: var(--rz-success) !important; +} + +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; +} + +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; +} + +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; +} + +.rz-border-color-warning { + border-color: var(--rz-warning) !important; +} + +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; +} + +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-color-danger { + border-color: var(--rz-danger) !important; +} + +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; +} + +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; +} + +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; +} + +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; +} + +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; +} + +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; +} + +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; +} + +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; +} + +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; +} + +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; +} + +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; +} + +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; +} + +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; +} + +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; +} + +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; +} + +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; +} + +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; +} + +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; +} + +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; +} + +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; +} + +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; +} + +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; +} + +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; +} + +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; +} + +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; +} + +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; +} + +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; +} + +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; +} + +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; +} + +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; +} + +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; +} + +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; +} + +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; +} + +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; +} + +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; +} + +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; +} + +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; +} + +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; +} + +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; +} + +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; +} + +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; +} + +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; +} + +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; +} + +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; +} + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; +} + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; +} + +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; +} + +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; +} + +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; +} + +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; +} + +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; +} + +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; +} + +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; +} + +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; +} + +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; +} + +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; +} + +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; +} + +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; +} + +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; +} + +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; +} + +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; +} + +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; +} + +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; +} + +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; +} + +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; +} + +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; +} + +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; +} + +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; +} + +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; +} + +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; +} + +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; +} + +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; +} + +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; +} + +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; +} + +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; +} + +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; +} + +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; +} + +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; +} + +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; +} + +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; +} + +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; +} + +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; +} + +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; +} + +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; +} + +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; +} + +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; +} + +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; +} + +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; +} + +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; +} + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; +} + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; +} + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; +} + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; +} + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; +} + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; +} + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; +} + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; +} + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; +} + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; +} + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; +} + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; +} + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; +} + +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; +} + +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; +} + +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; +} + +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; +} + +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; +} + +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; +} + +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; +} + +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; +} + +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; +} + +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; +} + +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; +} + +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; +} + +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; +} + +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; +} + +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; +} + +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; +} + +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; +} + +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; +} + +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; +} + +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; +} + +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; +} + +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; +} + +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; +} + +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; +} + +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; +} + +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; +} + +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; +} + +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; +} + +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; +} + +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; +} + +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; +} + +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; +} + +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; +} + +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; +} + +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; +} + +.rz-ripple { + position: relative; + overflow: hidden; +} +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; +} +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; +} + +body { + margin: 0; +} + +.rz-m-0 { + margin: 0 !important; +} + +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; +} + +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; +} + +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; +} + +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; +} + +.rz-ms-0 { + margin-inline-start: 0 !important; +} + +.rz-me-0 { + margin-inline-end: 0 !important; +} + +.rz-m-05 { + margin: 0.125rem !important; +} + +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; +} + +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; +} + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; +} + +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; +} + +.rz-ms-05 { + margin-inline-start: 0.125rem !important; +} + +.rz-me-05 { + margin-inline-end: 0.125rem !important; +} + +.rz-m-1 { + margin: 0.25rem !important; +} + +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; +} + +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; +} + +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; +} + +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; +} + +.rz-ms-1 { + margin-inline-start: 0.25rem !important; +} + +.rz-me-1 { + margin-inline-end: 0.25rem !important; +} + +.rz-m-2 { + margin: 0.5rem !important; +} + +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; +} + +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; +} + +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; +} + +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; +} + +.rz-ms-2 { + margin-inline-start: 0.5rem !important; +} + +.rz-me-2 { + margin-inline-end: 0.5rem !important; +} + +.rz-m-3 { + margin: 0.75rem !important; +} + +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; +} + +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; +} + +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; +} + +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; +} + +.rz-ms-3 { + margin-inline-start: 0.75rem !important; +} + +.rz-me-3 { + margin-inline-end: 0.75rem !important; +} + +.rz-m-4 { + margin: 1rem !important; +} + +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; +} + +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; +} + +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; +} + +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; +} + +.rz-ms-4 { + margin-inline-start: 1rem !important; +} + +.rz-me-4 { + margin-inline-end: 1rem !important; +} + +.rz-m-5 { + margin: 1.25rem !important; +} + +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; +} + +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; +} + +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; +} + +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; +} + +.rz-ms-5 { + margin-inline-start: 1.25rem !important; +} + +.rz-me-5 { + margin-inline-end: 1.25rem !important; +} + +.rz-m-6 { + margin: 1.5rem !important; +} + +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; +} + +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; +} + +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; +} + +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; +} + +.rz-ms-6 { + margin-inline-start: 1.5rem !important; +} + +.rz-me-6 { + margin-inline-end: 1.5rem !important; +} + +.rz-m-7 { + margin: 1.75rem !important; +} + +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; +} + +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; +} + +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; +} + +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; +} + +.rz-ms-7 { + margin-inline-start: 1.75rem !important; +} + +.rz-me-7 { + margin-inline-end: 1.75rem !important; +} + +.rz-m-8 { + margin: 2rem !important; +} + +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; +} + +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; +} + +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; +} + +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; +} + +.rz-ms-8 { + margin-inline-start: 2rem !important; +} + +.rz-me-8 { + margin-inline-end: 2rem !important; +} + +.rz-m-9 { + margin: 2.25rem !important; +} + +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; +} + +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; +} + +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; +} + +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; +} + +.rz-ms-9 { + margin-inline-start: 2.25rem !important; +} + +.rz-me-9 { + margin-inline-end: 2.25rem !important; +} + +.rz-m-10 { + margin: 2.5rem !important; +} + +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; +} + +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; +} + +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; +} + +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; +} + +.rz-ms-10 { + margin-inline-start: 2.5rem !important; +} + +.rz-me-10 { + margin-inline-end: 2.5rem !important; +} + +.rz-m-11 { + margin: 2.75rem !important; +} + +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; +} + +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; +} + +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; +} + +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; +} + +.rz-ms-11 { + margin-inline-start: 2.75rem !important; +} + +.rz-me-11 { + margin-inline-end: 2.75rem !important; +} + +.rz-m-12 { + margin: 3rem !important; +} + +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; +} + +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; +} + +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; +} + +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; +} + +.rz-ms-12 { + margin-inline-start: 3rem !important; +} + +.rz-me-12 { + margin-inline-end: 3rem !important; +} + +.rz-p-0 { + padding: 0 !important; +} + +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; +} + +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; +} + +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; +} + +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; +} + +.rz-ps-0 { + padding-inline-start: 0 !important; +} + +.rz-pe-0 { + padding-inline-end: 0 !important; +} + +.rz-p-05 { + padding: 0.125rem !important; +} + +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; +} + +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; +} + +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; +} + +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; +} + +.rz-ps-05 { + padding-inline-start: 0.125rem !important; +} + +.rz-pe-05 { + padding-inline-end: 0.125rem !important; +} + +.rz-p-1 { + padding: 0.25rem !important; +} + +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; +} + +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; +} + +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; +} + +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; +} + +.rz-ps-1 { + padding-inline-start: 0.25rem !important; +} + +.rz-pe-1 { + padding-inline-end: 0.25rem !important; +} + +.rz-p-2 { + padding: 0.5rem !important; +} + +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; +} + +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; +} + +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; +} + +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; +} + +.rz-ps-2 { + padding-inline-start: 0.5rem !important; +} + +.rz-pe-2 { + padding-inline-end: 0.5rem !important; +} + +.rz-p-3 { + padding: 0.75rem !important; +} + +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; +} + +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; +} + +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; +} + +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; +} + +.rz-ps-3 { + padding-inline-start: 0.75rem !important; +} + +.rz-pe-3 { + padding-inline-end: 0.75rem !important; +} + +.rz-p-4 { + padding: 1rem !important; +} + +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; +} + +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; +} + +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; +} + +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; +} + +.rz-ps-4 { + padding-inline-start: 1rem !important; +} + +.rz-pe-4 { + padding-inline-end: 1rem !important; +} + +.rz-p-5 { + padding: 1.25rem !important; +} + +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; +} + +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; +} + +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; +} + +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; +} + +.rz-ps-5 { + padding-inline-start: 1.25rem !important; +} + +.rz-pe-5 { + padding-inline-end: 1.25rem !important; +} + +.rz-p-6 { + padding: 1.5rem !important; +} + +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; +} + +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; +} + +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; +} + +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; +} + +.rz-ps-6 { + padding-inline-start: 1.5rem !important; +} + +.rz-pe-6 { + padding-inline-end: 1.5rem !important; +} + +.rz-p-7 { + padding: 1.75rem !important; +} + +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; +} + +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; +} + +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; +} + +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; +} + +.rz-ps-7 { + padding-inline-start: 1.75rem !important; +} + +.rz-pe-7 { + padding-inline-end: 1.75rem !important; +} + +.rz-p-8 { + padding: 2rem !important; +} + +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; +} + +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; +} + +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; +} + +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; +} + +.rz-ps-8 { + padding-inline-start: 2rem !important; +} + +.rz-pe-8 { + padding-inline-end: 2rem !important; +} + +.rz-p-9 { + padding: 2.25rem !important; +} + +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; +} + +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; +} + +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; +} + +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; +} + +.rz-ps-9 { + padding-inline-start: 2.25rem !important; +} + +.rz-pe-9 { + padding-inline-end: 2.25rem !important; +} + +.rz-p-10 { + padding: 2.5rem !important; +} + +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; +} + +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; +} + +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; +} + +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; +} + +.rz-ps-10 { + padding-inline-start: 2.5rem !important; +} + +.rz-pe-10 { + padding-inline-end: 2.5rem !important; +} + +.rz-p-11 { + padding: 2.75rem !important; +} + +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; +} + +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; +} + +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; +} + +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; +} + +.rz-ps-11 { + padding-inline-start: 2.75rem !important; +} + +.rz-pe-11 { + padding-inline-end: 2.75rem !important; +} + +.rz-p-12 { + padding: 3rem !important; +} + +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; +} + +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; +} + +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; +} + +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; +} + +.rz-ps-12 { + padding-inline-start: 3rem !important; +} + +.rz-pe-12 { + padding-inline-end: 3rem !important; +} + +.rz-m-auto { + margin: auto !important; +} + +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; +} + +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; +} + +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; +} + +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; +} + +.rz-ms-auto { + margin-inline-start: auto !important; +} + +.rz-me-auto { + margin-inline-end: auto !important; +} + +@media (min-width: 576px) { + .rz-m-xs-0 { + margin: 0 !important; + } + .rz-my-xs-0, + .rz-mt-xs-0 { + margin-top: 0 !important; + } + .rz-mx-xs-0, + .rz-mr-xs-0 { + margin-right: 0 !important; + } + .rz-my-xs-0, + .rz-mb-xs-0 { + margin-bottom: 0 !important; + } + .rz-mx-xs-0, + .rz-ml-xs-0 { + margin-left: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xs-0 { + margin-inline-end: 0 !important; + } + .rz-m-xs-05 { + margin: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mt-xs-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-mr-xs-05 { + margin-right: 0.125rem !important; + } + .rz-my-xs-05, + .rz-mb-xs-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xs-05, + .rz-ml-xs-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xs-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xs-1 { + margin: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mt-xs-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-mr-xs-1 { + margin-right: 0.25rem !important; + } + .rz-my-xs-1, + .rz-mb-xs-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xs-1, + .rz-ml-xs-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xs-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xs-2 { + margin: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mt-xs-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-mr-xs-2 { + margin-right: 0.5rem !important; + } + .rz-my-xs-2, + .rz-mb-xs-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xs-2, + .rz-ml-xs-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xs-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xs-3 { + margin: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mt-xs-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-mr-xs-3 { + margin-right: 0.75rem !important; + } + .rz-my-xs-3, + .rz-mb-xs-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xs-3, + .rz-ml-xs-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xs-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xs-4 { + margin: 1rem !important; + } + .rz-my-xs-4, + .rz-mt-xs-4 { + margin-top: 1rem !important; + } + .rz-mx-xs-4, + .rz-mr-xs-4 { + margin-right: 1rem !important; + } + .rz-my-xs-4, + .rz-mb-xs-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xs-4, + .rz-ml-xs-4 { + margin-left: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xs-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xs-5 { + margin: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mt-xs-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-mr-xs-5 { + margin-right: 1.25rem !important; + } + .rz-my-xs-5, + .rz-mb-xs-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xs-5, + .rz-ml-xs-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xs-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xs-6 { + margin: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mt-xs-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-mr-xs-6 { + margin-right: 1.5rem !important; + } + .rz-my-xs-6, + .rz-mb-xs-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xs-6, + .rz-ml-xs-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xs-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xs-7 { + margin: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mt-xs-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-mr-xs-7 { + margin-right: 1.75rem !important; + } + .rz-my-xs-7, + .rz-mb-xs-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xs-7, + .rz-ml-xs-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xs-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xs-8 { + margin: 2rem !important; + } + .rz-my-xs-8, + .rz-mt-xs-8 { + margin-top: 2rem !important; + } + .rz-mx-xs-8, + .rz-mr-xs-8 { + margin-right: 2rem !important; + } + .rz-my-xs-8, + .rz-mb-xs-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xs-8, + .rz-ml-xs-8 { + margin-left: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xs-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xs-9 { + margin: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mt-xs-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-mr-xs-9 { + margin-right: 2.25rem !important; + } + .rz-my-xs-9, + .rz-mb-xs-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xs-9, + .rz-ml-xs-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xs-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xs-10 { + margin: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mt-xs-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-mr-xs-10 { + margin-right: 2.5rem !important; + } + .rz-my-xs-10, + .rz-mb-xs-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xs-10, + .rz-ml-xs-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xs-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xs-11 { + margin: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mt-xs-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-mr-xs-11 { + margin-right: 2.75rem !important; + } + .rz-my-xs-11, + .rz-mb-xs-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xs-11, + .rz-ml-xs-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xs-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xs-12 { + margin: 3rem !important; + } + .rz-my-xs-12, + .rz-mt-xs-12 { + margin-top: 3rem !important; + } + .rz-mx-xs-12, + .rz-mr-xs-12 { + margin-right: 3rem !important; + } + .rz-my-xs-12, + .rz-mb-xs-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xs-12, + .rz-ml-xs-12 { + margin-left: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xs-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xs-0 { + padding: 0 !important; + } + .rz-py-xs-0, + .rz-pt-xs-0 { + padding-top: 0 !important; + } + .rz-px-xs-0, + .rz-pr-xs-0 { + padding-right: 0 !important; + } + .rz-py-xs-0, + .rz-pb-xs-0 { + padding-bottom: 0 !important; + } + .rz-px-xs-0, + .rz-pl-xs-0 { + padding-left: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xs-0 { + padding-inline-end: 0 !important; + } + .rz-p-xs-05 { + padding: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pt-xs-05 { + padding-top: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pr-xs-05 { + padding-right: 0.125rem !important; + } + .rz-py-xs-05, + .rz-pb-xs-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xs-05, + .rz-pl-xs-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xs-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xs-1 { + padding: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pt-xs-1 { + padding-top: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pr-xs-1 { + padding-right: 0.25rem !important; + } + .rz-py-xs-1, + .rz-pb-xs-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xs-1, + .rz-pl-xs-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xs-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xs-2 { + padding: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pt-xs-2 { + padding-top: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pr-xs-2 { + padding-right: 0.5rem !important; + } + .rz-py-xs-2, + .rz-pb-xs-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xs-2, + .rz-pl-xs-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xs-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xs-3 { + padding: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pt-xs-3 { + padding-top: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pr-xs-3 { + padding-right: 0.75rem !important; + } + .rz-py-xs-3, + .rz-pb-xs-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xs-3, + .rz-pl-xs-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xs-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xs-4 { + padding: 1rem !important; + } + .rz-py-xs-4, + .rz-pt-xs-4 { + padding-top: 1rem !important; + } + .rz-px-xs-4, + .rz-pr-xs-4 { + padding-right: 1rem !important; + } + .rz-py-xs-4, + .rz-pb-xs-4 { + padding-bottom: 1rem !important; + } + .rz-px-xs-4, + .rz-pl-xs-4 { + padding-left: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xs-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xs-5 { + padding: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pt-xs-5 { + padding-top: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pr-xs-5 { + padding-right: 1.25rem !important; + } + .rz-py-xs-5, + .rz-pb-xs-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xs-5, + .rz-pl-xs-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xs-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xs-6 { + padding: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pt-xs-6 { + padding-top: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pr-xs-6 { + padding-right: 1.5rem !important; + } + .rz-py-xs-6, + .rz-pb-xs-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xs-6, + .rz-pl-xs-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xs-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xs-7 { + padding: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pt-xs-7 { + padding-top: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pr-xs-7 { + padding-right: 1.75rem !important; + } + .rz-py-xs-7, + .rz-pb-xs-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xs-7, + .rz-pl-xs-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xs-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xs-8 { + padding: 2rem !important; + } + .rz-py-xs-8, + .rz-pt-xs-8 { + padding-top: 2rem !important; + } + .rz-px-xs-8, + .rz-pr-xs-8 { + padding-right: 2rem !important; + } + .rz-py-xs-8, + .rz-pb-xs-8 { + padding-bottom: 2rem !important; + } + .rz-px-xs-8, + .rz-pl-xs-8 { + padding-left: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xs-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xs-9 { + padding: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pt-xs-9 { + padding-top: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pr-xs-9 { + padding-right: 2.25rem !important; + } + .rz-py-xs-9, + .rz-pb-xs-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xs-9, + .rz-pl-xs-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xs-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xs-10 { + padding: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pt-xs-10 { + padding-top: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pr-xs-10 { + padding-right: 2.5rem !important; + } + .rz-py-xs-10, + .rz-pb-xs-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xs-10, + .rz-pl-xs-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xs-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xs-11 { + padding: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pt-xs-11 { + padding-top: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pr-xs-11 { + padding-right: 2.75rem !important; + } + .rz-py-xs-11, + .rz-pb-xs-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xs-11, + .rz-pl-xs-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xs-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xs-12 { + padding: 3rem !important; + } + .rz-py-xs-12, + .rz-pt-xs-12 { + padding-top: 3rem !important; + } + .rz-px-xs-12, + .rz-pr-xs-12 { + padding-right: 3rem !important; + } + .rz-py-xs-12, + .rz-pb-xs-12 { + padding-bottom: 3rem !important; + } + .rz-px-xs-12, + .rz-pl-xs-12 { + padding-left: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xs-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xs-auto { + margin: auto !important; + } + .rz-my-xs-auto, + .rz-mt-xs-auto { + margin-top: auto !important; + } + .rz-mx-xs-auto, + .rz-mr-xs-auto { + margin-right: auto !important; + } + .rz-my-xs-auto, + .rz-mb-xs-auto { + margin-bottom: auto !important; + } + .rz-mx-xs-auto, + .rz-ml-xs-auto { + margin-left: auto !important; + } + .rz-ms-xs-auto { + margin-inline-start: auto !important; + } + .rz-me-xs-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 768px) { + .rz-m-sm-0 { + margin: 0 !important; + } + .rz-my-sm-0, + .rz-mt-sm-0 { + margin-top: 0 !important; + } + .rz-mx-sm-0, + .rz-mr-sm-0 { + margin-right: 0 !important; + } + .rz-my-sm-0, + .rz-mb-sm-0 { + margin-bottom: 0 !important; + } + .rz-mx-sm-0, + .rz-ml-sm-0 { + margin-left: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-start: 0 !important; + } + .rz-ms-sm-0 { + margin-inline-end: 0 !important; + } + .rz-m-sm-05 { + margin: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mt-sm-05 { + margin-top: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-mr-sm-05 { + margin-right: 0.125rem !important; + } + .rz-my-sm-05, + .rz-mb-sm-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-sm-05, + .rz-ml-sm-05 { + margin-left: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-sm-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-sm-1 { + margin: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mt-sm-1 { + margin-top: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-mr-sm-1 { + margin-right: 0.25rem !important; + } + .rz-my-sm-1, + .rz-mb-sm-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-sm-1, + .rz-ml-sm-1 { + margin-left: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-sm-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-sm-2 { + margin: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mt-sm-2 { + margin-top: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-mr-sm-2 { + margin-right: 0.5rem !important; + } + .rz-my-sm-2, + .rz-mb-sm-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-sm-2, + .rz-ml-sm-2 { + margin-left: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-sm-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-sm-3 { + margin: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mt-sm-3 { + margin-top: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-mr-sm-3 { + margin-right: 0.75rem !important; + } + .rz-my-sm-3, + .rz-mb-sm-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-sm-3, + .rz-ml-sm-3 { + margin-left: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-sm-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-sm-4 { + margin: 1rem !important; + } + .rz-my-sm-4, + .rz-mt-sm-4 { + margin-top: 1rem !important; + } + .rz-mx-sm-4, + .rz-mr-sm-4 { + margin-right: 1rem !important; + } + .rz-my-sm-4, + .rz-mb-sm-4 { + margin-bottom: 1rem !important; + } + .rz-mx-sm-4, + .rz-ml-sm-4 { + margin-left: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-sm-4 { + margin-inline-end: 1rem !important; + } + .rz-m-sm-5 { + margin: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mt-sm-5 { + margin-top: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-mr-sm-5 { + margin-right: 1.25rem !important; + } + .rz-my-sm-5, + .rz-mb-sm-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-sm-5, + .rz-ml-sm-5 { + margin-left: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-sm-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-sm-6 { + margin: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mt-sm-6 { + margin-top: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-mr-sm-6 { + margin-right: 1.5rem !important; + } + .rz-my-sm-6, + .rz-mb-sm-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-sm-6, + .rz-ml-sm-6 { + margin-left: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-sm-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-sm-7 { + margin: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mt-sm-7 { + margin-top: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-mr-sm-7 { + margin-right: 1.75rem !important; + } + .rz-my-sm-7, + .rz-mb-sm-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-sm-7, + .rz-ml-sm-7 { + margin-left: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-sm-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-sm-8 { + margin: 2rem !important; + } + .rz-my-sm-8, + .rz-mt-sm-8 { + margin-top: 2rem !important; + } + .rz-mx-sm-8, + .rz-mr-sm-8 { + margin-right: 2rem !important; + } + .rz-my-sm-8, + .rz-mb-sm-8 { + margin-bottom: 2rem !important; + } + .rz-mx-sm-8, + .rz-ml-sm-8 { + margin-left: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-sm-8 { + margin-inline-end: 2rem !important; + } + .rz-m-sm-9 { + margin: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mt-sm-9 { + margin-top: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-mr-sm-9 { + margin-right: 2.25rem !important; + } + .rz-my-sm-9, + .rz-mb-sm-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-sm-9, + .rz-ml-sm-9 { + margin-left: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-sm-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-sm-10 { + margin: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mt-sm-10 { + margin-top: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-mr-sm-10 { + margin-right: 2.5rem !important; + } + .rz-my-sm-10, + .rz-mb-sm-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-sm-10, + .rz-ml-sm-10 { + margin-left: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-sm-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-sm-11 { + margin: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mt-sm-11 { + margin-top: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-mr-sm-11 { + margin-right: 2.75rem !important; + } + .rz-my-sm-11, + .rz-mb-sm-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-sm-11, + .rz-ml-sm-11 { + margin-left: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-sm-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-sm-12 { + margin: 3rem !important; + } + .rz-my-sm-12, + .rz-mt-sm-12 { + margin-top: 3rem !important; + } + .rz-mx-sm-12, + .rz-mr-sm-12 { + margin-right: 3rem !important; + } + .rz-my-sm-12, + .rz-mb-sm-12 { + margin-bottom: 3rem !important; + } + .rz-mx-sm-12, + .rz-ml-sm-12 { + margin-left: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-sm-12 { + margin-inline-end: 3rem !important; + } + .rz-p-sm-0 { + padding: 0 !important; + } + .rz-py-sm-0, + .rz-pt-sm-0 { + padding-top: 0 !important; + } + .rz-px-sm-0, + .rz-pr-sm-0 { + padding-right: 0 !important; + } + .rz-py-sm-0, + .rz-pb-sm-0 { + padding-bottom: 0 !important; + } + .rz-px-sm-0, + .rz-pl-sm-0 { + padding-left: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-start: 0 !important; + } + .rz-ps-sm-0 { + padding-inline-end: 0 !important; + } + .rz-p-sm-05 { + padding: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pt-sm-05 { + padding-top: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pr-sm-05 { + padding-right: 0.125rem !important; + } + .rz-py-sm-05, + .rz-pb-sm-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-sm-05, + .rz-pl-sm-05 { + padding-left: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-sm-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-sm-1 { + padding: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pt-sm-1 { + padding-top: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pr-sm-1 { + padding-right: 0.25rem !important; + } + .rz-py-sm-1, + .rz-pb-sm-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-sm-1, + .rz-pl-sm-1 { + padding-left: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-sm-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-sm-2 { + padding: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pt-sm-2 { + padding-top: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pr-sm-2 { + padding-right: 0.5rem !important; + } + .rz-py-sm-2, + .rz-pb-sm-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-sm-2, + .rz-pl-sm-2 { + padding-left: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-sm-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-sm-3 { + padding: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pt-sm-3 { + padding-top: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pr-sm-3 { + padding-right: 0.75rem !important; + } + .rz-py-sm-3, + .rz-pb-sm-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-sm-3, + .rz-pl-sm-3 { + padding-left: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-sm-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-sm-4 { + padding: 1rem !important; + } + .rz-py-sm-4, + .rz-pt-sm-4 { + padding-top: 1rem !important; + } + .rz-px-sm-4, + .rz-pr-sm-4 { + padding-right: 1rem !important; + } + .rz-py-sm-4, + .rz-pb-sm-4 { + padding-bottom: 1rem !important; + } + .rz-px-sm-4, + .rz-pl-sm-4 { + padding-left: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-sm-4 { + padding-inline-end: 1rem !important; + } + .rz-p-sm-5 { + padding: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pt-sm-5 { + padding-top: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pr-sm-5 { + padding-right: 1.25rem !important; + } + .rz-py-sm-5, + .rz-pb-sm-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-sm-5, + .rz-pl-sm-5 { + padding-left: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-sm-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-sm-6 { + padding: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pt-sm-6 { + padding-top: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pr-sm-6 { + padding-right: 1.5rem !important; + } + .rz-py-sm-6, + .rz-pb-sm-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-sm-6, + .rz-pl-sm-6 { + padding-left: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-sm-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-sm-7 { + padding: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pt-sm-7 { + padding-top: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pr-sm-7 { + padding-right: 1.75rem !important; + } + .rz-py-sm-7, + .rz-pb-sm-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-sm-7, + .rz-pl-sm-7 { + padding-left: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-sm-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-sm-8 { + padding: 2rem !important; + } + .rz-py-sm-8, + .rz-pt-sm-8 { + padding-top: 2rem !important; + } + .rz-px-sm-8, + .rz-pr-sm-8 { + padding-right: 2rem !important; + } + .rz-py-sm-8, + .rz-pb-sm-8 { + padding-bottom: 2rem !important; + } + .rz-px-sm-8, + .rz-pl-sm-8 { + padding-left: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-sm-8 { + padding-inline-end: 2rem !important; + } + .rz-p-sm-9 { + padding: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pt-sm-9 { + padding-top: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pr-sm-9 { + padding-right: 2.25rem !important; + } + .rz-py-sm-9, + .rz-pb-sm-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-sm-9, + .rz-pl-sm-9 { + padding-left: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-sm-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-sm-10 { + padding: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pt-sm-10 { + padding-top: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pr-sm-10 { + padding-right: 2.5rem !important; + } + .rz-py-sm-10, + .rz-pb-sm-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-sm-10, + .rz-pl-sm-10 { + padding-left: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-sm-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-sm-11 { + padding: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pt-sm-11 { + padding-top: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pr-sm-11 { + padding-right: 2.75rem !important; + } + .rz-py-sm-11, + .rz-pb-sm-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-sm-11, + .rz-pl-sm-11 { + padding-left: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-sm-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-sm-12 { + padding: 3rem !important; + } + .rz-py-sm-12, + .rz-pt-sm-12 { + padding-top: 3rem !important; + } + .rz-px-sm-12, + .rz-pr-sm-12 { + padding-right: 3rem !important; + } + .rz-py-sm-12, + .rz-pb-sm-12 { + padding-bottom: 3rem !important; + } + .rz-px-sm-12, + .rz-pl-sm-12 { + padding-left: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-sm-12 { + padding-inline-end: 3rem !important; + } + .rz-m-sm-auto { + margin: auto !important; + } + .rz-my-sm-auto, + .rz-mt-sm-auto { + margin-top: auto !important; + } + .rz-mx-sm-auto, + .rz-mr-sm-auto { + margin-right: auto !important; + } + .rz-my-sm-auto, + .rz-mb-sm-auto { + margin-bottom: auto !important; + } + .rz-mx-sm-auto, + .rz-ml-sm-auto { + margin-left: auto !important; + } + .rz-ms-sm-auto { + margin-inline-start: auto !important; + } + .rz-me-sm-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1024px) { + .rz-m-md-0 { + margin: 0 !important; + } + .rz-my-md-0, + .rz-mt-md-0 { + margin-top: 0 !important; + } + .rz-mx-md-0, + .rz-mr-md-0 { + margin-right: 0 !important; + } + .rz-my-md-0, + .rz-mb-md-0 { + margin-bottom: 0 !important; + } + .rz-mx-md-0, + .rz-ml-md-0 { + margin-left: 0 !important; + } + .rz-ms-md-0 { + margin-inline-start: 0 !important; + } + .rz-ms-md-0 { + margin-inline-end: 0 !important; + } + .rz-m-md-05 { + margin: 0.125rem !important; + } + .rz-my-md-05, + .rz-mt-md-05 { + margin-top: 0.125rem !important; + } + .rz-mx-md-05, + .rz-mr-md-05 { + margin-right: 0.125rem !important; + } + .rz-my-md-05, + .rz-mb-md-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-md-05, + .rz-ml-md-05 { + margin-left: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-md-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-md-1 { + margin: 0.25rem !important; + } + .rz-my-md-1, + .rz-mt-md-1 { + margin-top: 0.25rem !important; + } + .rz-mx-md-1, + .rz-mr-md-1 { + margin-right: 0.25rem !important; + } + .rz-my-md-1, + .rz-mb-md-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-md-1, + .rz-ml-md-1 { + margin-left: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-md-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-md-2 { + margin: 0.5rem !important; + } + .rz-my-md-2, + .rz-mt-md-2 { + margin-top: 0.5rem !important; + } + .rz-mx-md-2, + .rz-mr-md-2 { + margin-right: 0.5rem !important; + } + .rz-my-md-2, + .rz-mb-md-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-md-2, + .rz-ml-md-2 { + margin-left: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-md-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-md-3 { + margin: 0.75rem !important; + } + .rz-my-md-3, + .rz-mt-md-3 { + margin-top: 0.75rem !important; + } + .rz-mx-md-3, + .rz-mr-md-3 { + margin-right: 0.75rem !important; + } + .rz-my-md-3, + .rz-mb-md-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-md-3, + .rz-ml-md-3 { + margin-left: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-md-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-md-4 { + margin: 1rem !important; + } + .rz-my-md-4, + .rz-mt-md-4 { + margin-top: 1rem !important; + } + .rz-mx-md-4, + .rz-mr-md-4 { + margin-right: 1rem !important; + } + .rz-my-md-4, + .rz-mb-md-4 { + margin-bottom: 1rem !important; + } + .rz-mx-md-4, + .rz-ml-md-4 { + margin-left: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-md-4 { + margin-inline-end: 1rem !important; + } + .rz-m-md-5 { + margin: 1.25rem !important; + } + .rz-my-md-5, + .rz-mt-md-5 { + margin-top: 1.25rem !important; + } + .rz-mx-md-5, + .rz-mr-md-5 { + margin-right: 1.25rem !important; + } + .rz-my-md-5, + .rz-mb-md-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-md-5, + .rz-ml-md-5 { + margin-left: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-md-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-md-6 { + margin: 1.5rem !important; + } + .rz-my-md-6, + .rz-mt-md-6 { + margin-top: 1.5rem !important; + } + .rz-mx-md-6, + .rz-mr-md-6 { + margin-right: 1.5rem !important; + } + .rz-my-md-6, + .rz-mb-md-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-md-6, + .rz-ml-md-6 { + margin-left: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-md-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-md-7 { + margin: 1.75rem !important; + } + .rz-my-md-7, + .rz-mt-md-7 { + margin-top: 1.75rem !important; + } + .rz-mx-md-7, + .rz-mr-md-7 { + margin-right: 1.75rem !important; + } + .rz-my-md-7, + .rz-mb-md-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-md-7, + .rz-ml-md-7 { + margin-left: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-md-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-md-8 { + margin: 2rem !important; + } + .rz-my-md-8, + .rz-mt-md-8 { + margin-top: 2rem !important; + } + .rz-mx-md-8, + .rz-mr-md-8 { + margin-right: 2rem !important; + } + .rz-my-md-8, + .rz-mb-md-8 { + margin-bottom: 2rem !important; + } + .rz-mx-md-8, + .rz-ml-md-8 { + margin-left: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-md-8 { + margin-inline-end: 2rem !important; + } + .rz-m-md-9 { + margin: 2.25rem !important; + } + .rz-my-md-9, + .rz-mt-md-9 { + margin-top: 2.25rem !important; + } + .rz-mx-md-9, + .rz-mr-md-9 { + margin-right: 2.25rem !important; + } + .rz-my-md-9, + .rz-mb-md-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-md-9, + .rz-ml-md-9 { + margin-left: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-md-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-md-10 { + margin: 2.5rem !important; + } + .rz-my-md-10, + .rz-mt-md-10 { + margin-top: 2.5rem !important; + } + .rz-mx-md-10, + .rz-mr-md-10 { + margin-right: 2.5rem !important; + } + .rz-my-md-10, + .rz-mb-md-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-md-10, + .rz-ml-md-10 { + margin-left: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-md-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-md-11 { + margin: 2.75rem !important; + } + .rz-my-md-11, + .rz-mt-md-11 { + margin-top: 2.75rem !important; + } + .rz-mx-md-11, + .rz-mr-md-11 { + margin-right: 2.75rem !important; + } + .rz-my-md-11, + .rz-mb-md-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-md-11, + .rz-ml-md-11 { + margin-left: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-md-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-md-12 { + margin: 3rem !important; + } + .rz-my-md-12, + .rz-mt-md-12 { + margin-top: 3rem !important; + } + .rz-mx-md-12, + .rz-mr-md-12 { + margin-right: 3rem !important; + } + .rz-my-md-12, + .rz-mb-md-12 { + margin-bottom: 3rem !important; + } + .rz-mx-md-12, + .rz-ml-md-12 { + margin-left: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-md-12 { + margin-inline-end: 3rem !important; + } + .rz-p-md-0 { + padding: 0 !important; + } + .rz-py-md-0, + .rz-pt-md-0 { + padding-top: 0 !important; + } + .rz-px-md-0, + .rz-pr-md-0 { + padding-right: 0 !important; + } + .rz-py-md-0, + .rz-pb-md-0 { + padding-bottom: 0 !important; + } + .rz-px-md-0, + .rz-pl-md-0 { + padding-left: 0 !important; + } + .rz-ps-md-0 { + padding-inline-start: 0 !important; + } + .rz-ps-md-0 { + padding-inline-end: 0 !important; + } + .rz-p-md-05 { + padding: 0.125rem !important; + } + .rz-py-md-05, + .rz-pt-md-05 { + padding-top: 0.125rem !important; + } + .rz-px-md-05, + .rz-pr-md-05 { + padding-right: 0.125rem !important; + } + .rz-py-md-05, + .rz-pb-md-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-md-05, + .rz-pl-md-05 { + padding-left: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-md-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-md-1 { + padding: 0.25rem !important; + } + .rz-py-md-1, + .rz-pt-md-1 { + padding-top: 0.25rem !important; + } + .rz-px-md-1, + .rz-pr-md-1 { + padding-right: 0.25rem !important; + } + .rz-py-md-1, + .rz-pb-md-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-md-1, + .rz-pl-md-1 { + padding-left: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-md-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-md-2 { + padding: 0.5rem !important; + } + .rz-py-md-2, + .rz-pt-md-2 { + padding-top: 0.5rem !important; + } + .rz-px-md-2, + .rz-pr-md-2 { + padding-right: 0.5rem !important; + } + .rz-py-md-2, + .rz-pb-md-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-md-2, + .rz-pl-md-2 { + padding-left: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-md-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-md-3 { + padding: 0.75rem !important; + } + .rz-py-md-3, + .rz-pt-md-3 { + padding-top: 0.75rem !important; + } + .rz-px-md-3, + .rz-pr-md-3 { + padding-right: 0.75rem !important; + } + .rz-py-md-3, + .rz-pb-md-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-md-3, + .rz-pl-md-3 { + padding-left: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-md-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-md-4 { + padding: 1rem !important; + } + .rz-py-md-4, + .rz-pt-md-4 { + padding-top: 1rem !important; + } + .rz-px-md-4, + .rz-pr-md-4 { + padding-right: 1rem !important; + } + .rz-py-md-4, + .rz-pb-md-4 { + padding-bottom: 1rem !important; + } + .rz-px-md-4, + .rz-pl-md-4 { + padding-left: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-md-4 { + padding-inline-end: 1rem !important; + } + .rz-p-md-5 { + padding: 1.25rem !important; + } + .rz-py-md-5, + .rz-pt-md-5 { + padding-top: 1.25rem !important; + } + .rz-px-md-5, + .rz-pr-md-5 { + padding-right: 1.25rem !important; + } + .rz-py-md-5, + .rz-pb-md-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-md-5, + .rz-pl-md-5 { + padding-left: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-md-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-md-6 { + padding: 1.5rem !important; + } + .rz-py-md-6, + .rz-pt-md-6 { + padding-top: 1.5rem !important; + } + .rz-px-md-6, + .rz-pr-md-6 { + padding-right: 1.5rem !important; + } + .rz-py-md-6, + .rz-pb-md-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-md-6, + .rz-pl-md-6 { + padding-left: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-md-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-md-7 { + padding: 1.75rem !important; + } + .rz-py-md-7, + .rz-pt-md-7 { + padding-top: 1.75rem !important; + } + .rz-px-md-7, + .rz-pr-md-7 { + padding-right: 1.75rem !important; + } + .rz-py-md-7, + .rz-pb-md-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-md-7, + .rz-pl-md-7 { + padding-left: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-md-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-md-8 { + padding: 2rem !important; + } + .rz-py-md-8, + .rz-pt-md-8 { + padding-top: 2rem !important; + } + .rz-px-md-8, + .rz-pr-md-8 { + padding-right: 2rem !important; + } + .rz-py-md-8, + .rz-pb-md-8 { + padding-bottom: 2rem !important; + } + .rz-px-md-8, + .rz-pl-md-8 { + padding-left: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-md-8 { + padding-inline-end: 2rem !important; + } + .rz-p-md-9 { + padding: 2.25rem !important; + } + .rz-py-md-9, + .rz-pt-md-9 { + padding-top: 2.25rem !important; + } + .rz-px-md-9, + .rz-pr-md-9 { + padding-right: 2.25rem !important; + } + .rz-py-md-9, + .rz-pb-md-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-md-9, + .rz-pl-md-9 { + padding-left: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-md-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-md-10 { + padding: 2.5rem !important; + } + .rz-py-md-10, + .rz-pt-md-10 { + padding-top: 2.5rem !important; + } + .rz-px-md-10, + .rz-pr-md-10 { + padding-right: 2.5rem !important; + } + .rz-py-md-10, + .rz-pb-md-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-md-10, + .rz-pl-md-10 { + padding-left: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-md-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-md-11 { + padding: 2.75rem !important; + } + .rz-py-md-11, + .rz-pt-md-11 { + padding-top: 2.75rem !important; + } + .rz-px-md-11, + .rz-pr-md-11 { + padding-right: 2.75rem !important; + } + .rz-py-md-11, + .rz-pb-md-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-md-11, + .rz-pl-md-11 { + padding-left: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-md-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-md-12 { + padding: 3rem !important; + } + .rz-py-md-12, + .rz-pt-md-12 { + padding-top: 3rem !important; + } + .rz-px-md-12, + .rz-pr-md-12 { + padding-right: 3rem !important; + } + .rz-py-md-12, + .rz-pb-md-12 { + padding-bottom: 3rem !important; + } + .rz-px-md-12, + .rz-pl-md-12 { + padding-left: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-md-12 { + padding-inline-end: 3rem !important; + } + .rz-m-md-auto { + margin: auto !important; + } + .rz-my-md-auto, + .rz-mt-md-auto { + margin-top: auto !important; + } + .rz-mx-md-auto, + .rz-mr-md-auto { + margin-right: auto !important; + } + .rz-my-md-auto, + .rz-mb-md-auto { + margin-bottom: auto !important; + } + .rz-mx-md-auto, + .rz-ml-md-auto { + margin-left: auto !important; + } + .rz-ms-md-auto { + margin-inline-start: auto !important; + } + .rz-me-md-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1280px) { + .rz-m-lg-0 { + margin: 0 !important; + } + .rz-my-lg-0, + .rz-mt-lg-0 { + margin-top: 0 !important; + } + .rz-mx-lg-0, + .rz-mr-lg-0 { + margin-right: 0 !important; + } + .rz-my-lg-0, + .rz-mb-lg-0 { + margin-bottom: 0 !important; + } + .rz-mx-lg-0, + .rz-ml-lg-0 { + margin-left: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-start: 0 !important; + } + .rz-ms-lg-0 { + margin-inline-end: 0 !important; + } + .rz-m-lg-05 { + margin: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mt-lg-05 { + margin-top: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-mr-lg-05 { + margin-right: 0.125rem !important; + } + .rz-my-lg-05, + .rz-mb-lg-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-lg-05, + .rz-ml-lg-05 { + margin-left: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-lg-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-lg-1 { + margin: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mt-lg-1 { + margin-top: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-mr-lg-1 { + margin-right: 0.25rem !important; + } + .rz-my-lg-1, + .rz-mb-lg-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-lg-1, + .rz-ml-lg-1 { + margin-left: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-lg-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-lg-2 { + margin: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mt-lg-2 { + margin-top: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-mr-lg-2 { + margin-right: 0.5rem !important; + } + .rz-my-lg-2, + .rz-mb-lg-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-lg-2, + .rz-ml-lg-2 { + margin-left: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-lg-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-lg-3 { + margin: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mt-lg-3 { + margin-top: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-mr-lg-3 { + margin-right: 0.75rem !important; + } + .rz-my-lg-3, + .rz-mb-lg-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-lg-3, + .rz-ml-lg-3 { + margin-left: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-lg-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-lg-4 { + margin: 1rem !important; + } + .rz-my-lg-4, + .rz-mt-lg-4 { + margin-top: 1rem !important; + } + .rz-mx-lg-4, + .rz-mr-lg-4 { + margin-right: 1rem !important; + } + .rz-my-lg-4, + .rz-mb-lg-4 { + margin-bottom: 1rem !important; + } + .rz-mx-lg-4, + .rz-ml-lg-4 { + margin-left: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-lg-4 { + margin-inline-end: 1rem !important; + } + .rz-m-lg-5 { + margin: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mt-lg-5 { + margin-top: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-mr-lg-5 { + margin-right: 1.25rem !important; + } + .rz-my-lg-5, + .rz-mb-lg-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-lg-5, + .rz-ml-lg-5 { + margin-left: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-lg-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-lg-6 { + margin: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mt-lg-6 { + margin-top: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-mr-lg-6 { + margin-right: 1.5rem !important; + } + .rz-my-lg-6, + .rz-mb-lg-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-lg-6, + .rz-ml-lg-6 { + margin-left: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-lg-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-lg-7 { + margin: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mt-lg-7 { + margin-top: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-mr-lg-7 { + margin-right: 1.75rem !important; + } + .rz-my-lg-7, + .rz-mb-lg-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-lg-7, + .rz-ml-lg-7 { + margin-left: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-lg-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-lg-8 { + margin: 2rem !important; + } + .rz-my-lg-8, + .rz-mt-lg-8 { + margin-top: 2rem !important; + } + .rz-mx-lg-8, + .rz-mr-lg-8 { + margin-right: 2rem !important; + } + .rz-my-lg-8, + .rz-mb-lg-8 { + margin-bottom: 2rem !important; + } + .rz-mx-lg-8, + .rz-ml-lg-8 { + margin-left: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-lg-8 { + margin-inline-end: 2rem !important; + } + .rz-m-lg-9 { + margin: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mt-lg-9 { + margin-top: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-mr-lg-9 { + margin-right: 2.25rem !important; + } + .rz-my-lg-9, + .rz-mb-lg-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-lg-9, + .rz-ml-lg-9 { + margin-left: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-lg-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-lg-10 { + margin: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mt-lg-10 { + margin-top: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-mr-lg-10 { + margin-right: 2.5rem !important; + } + .rz-my-lg-10, + .rz-mb-lg-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-lg-10, + .rz-ml-lg-10 { + margin-left: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-lg-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-lg-11 { + margin: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mt-lg-11 { + margin-top: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-mr-lg-11 { + margin-right: 2.75rem !important; + } + .rz-my-lg-11, + .rz-mb-lg-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-lg-11, + .rz-ml-lg-11 { + margin-left: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-lg-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-lg-12 { + margin: 3rem !important; + } + .rz-my-lg-12, + .rz-mt-lg-12 { + margin-top: 3rem !important; + } + .rz-mx-lg-12, + .rz-mr-lg-12 { + margin-right: 3rem !important; + } + .rz-my-lg-12, + .rz-mb-lg-12 { + margin-bottom: 3rem !important; + } + .rz-mx-lg-12, + .rz-ml-lg-12 { + margin-left: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-lg-12 { + margin-inline-end: 3rem !important; + } + .rz-p-lg-0 { + padding: 0 !important; + } + .rz-py-lg-0, + .rz-pt-lg-0 { + padding-top: 0 !important; + } + .rz-px-lg-0, + .rz-pr-lg-0 { + padding-right: 0 !important; + } + .rz-py-lg-0, + .rz-pb-lg-0 { + padding-bottom: 0 !important; + } + .rz-px-lg-0, + .rz-pl-lg-0 { + padding-left: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-start: 0 !important; + } + .rz-ps-lg-0 { + padding-inline-end: 0 !important; + } + .rz-p-lg-05 { + padding: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pt-lg-05 { + padding-top: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pr-lg-05 { + padding-right: 0.125rem !important; + } + .rz-py-lg-05, + .rz-pb-lg-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-lg-05, + .rz-pl-lg-05 { + padding-left: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-lg-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-lg-1 { + padding: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pt-lg-1 { + padding-top: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pr-lg-1 { + padding-right: 0.25rem !important; + } + .rz-py-lg-1, + .rz-pb-lg-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-lg-1, + .rz-pl-lg-1 { + padding-left: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-lg-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-lg-2 { + padding: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pt-lg-2 { + padding-top: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pr-lg-2 { + padding-right: 0.5rem !important; + } + .rz-py-lg-2, + .rz-pb-lg-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-lg-2, + .rz-pl-lg-2 { + padding-left: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-lg-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-lg-3 { + padding: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pt-lg-3 { + padding-top: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pr-lg-3 { + padding-right: 0.75rem !important; + } + .rz-py-lg-3, + .rz-pb-lg-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-lg-3, + .rz-pl-lg-3 { + padding-left: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-lg-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-lg-4 { + padding: 1rem !important; + } + .rz-py-lg-4, + .rz-pt-lg-4 { + padding-top: 1rem !important; + } + .rz-px-lg-4, + .rz-pr-lg-4 { + padding-right: 1rem !important; + } + .rz-py-lg-4, + .rz-pb-lg-4 { + padding-bottom: 1rem !important; + } + .rz-px-lg-4, + .rz-pl-lg-4 { + padding-left: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-lg-4 { + padding-inline-end: 1rem !important; + } + .rz-p-lg-5 { + padding: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pt-lg-5 { + padding-top: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pr-lg-5 { + padding-right: 1.25rem !important; + } + .rz-py-lg-5, + .rz-pb-lg-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-lg-5, + .rz-pl-lg-5 { + padding-left: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-lg-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-lg-6 { + padding: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pt-lg-6 { + padding-top: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pr-lg-6 { + padding-right: 1.5rem !important; + } + .rz-py-lg-6, + .rz-pb-lg-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-lg-6, + .rz-pl-lg-6 { + padding-left: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-lg-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-lg-7 { + padding: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pt-lg-7 { + padding-top: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pr-lg-7 { + padding-right: 1.75rem !important; + } + .rz-py-lg-7, + .rz-pb-lg-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-lg-7, + .rz-pl-lg-7 { + padding-left: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-lg-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-lg-8 { + padding: 2rem !important; + } + .rz-py-lg-8, + .rz-pt-lg-8 { + padding-top: 2rem !important; + } + .rz-px-lg-8, + .rz-pr-lg-8 { + padding-right: 2rem !important; + } + .rz-py-lg-8, + .rz-pb-lg-8 { + padding-bottom: 2rem !important; + } + .rz-px-lg-8, + .rz-pl-lg-8 { + padding-left: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-lg-8 { + padding-inline-end: 2rem !important; + } + .rz-p-lg-9 { + padding: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pt-lg-9 { + padding-top: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pr-lg-9 { + padding-right: 2.25rem !important; + } + .rz-py-lg-9, + .rz-pb-lg-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-lg-9, + .rz-pl-lg-9 { + padding-left: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-lg-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-lg-10 { + padding: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pt-lg-10 { + padding-top: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pr-lg-10 { + padding-right: 2.5rem !important; + } + .rz-py-lg-10, + .rz-pb-lg-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-lg-10, + .rz-pl-lg-10 { + padding-left: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-lg-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-lg-11 { + padding: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pt-lg-11 { + padding-top: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pr-lg-11 { + padding-right: 2.75rem !important; + } + .rz-py-lg-11, + .rz-pb-lg-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-lg-11, + .rz-pl-lg-11 { + padding-left: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-lg-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-lg-12 { + padding: 3rem !important; + } + .rz-py-lg-12, + .rz-pt-lg-12 { + padding-top: 3rem !important; + } + .rz-px-lg-12, + .rz-pr-lg-12 { + padding-right: 3rem !important; + } + .rz-py-lg-12, + .rz-pb-lg-12 { + padding-bottom: 3rem !important; + } + .rz-px-lg-12, + .rz-pl-lg-12 { + padding-left: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-lg-12 { + padding-inline-end: 3rem !important; + } + .rz-m-lg-auto { + margin: auto !important; + } + .rz-my-lg-auto, + .rz-mt-lg-auto { + margin-top: auto !important; + } + .rz-mx-lg-auto, + .rz-mr-lg-auto { + margin-right: auto !important; + } + .rz-my-lg-auto, + .rz-mb-lg-auto { + margin-bottom: auto !important; + } + .rz-mx-lg-auto, + .rz-ml-lg-auto { + margin-left: auto !important; + } + .rz-ms-lg-auto { + margin-inline-start: auto !important; + } + .rz-me-lg-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 1920px) { + .rz-m-xl-0 { + margin: 0 !important; + } + .rz-my-xl-0, + .rz-mt-xl-0 { + margin-top: 0 !important; + } + .rz-mx-xl-0, + .rz-mr-xl-0 { + margin-right: 0 !important; + } + .rz-my-xl-0, + .rz-mb-xl-0 { + margin-bottom: 0 !important; + } + .rz-mx-xl-0, + .rz-ml-xl-0 { + margin-left: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xl-0 { + margin-inline-end: 0 !important; + } + .rz-m-xl-05 { + margin: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mt-xl-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-mr-xl-05 { + margin-right: 0.125rem !important; + } + .rz-my-xl-05, + .rz-mb-xl-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xl-05, + .rz-ml-xl-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xl-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xl-1 { + margin: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mt-xl-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-mr-xl-1 { + margin-right: 0.25rem !important; + } + .rz-my-xl-1, + .rz-mb-xl-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xl-1, + .rz-ml-xl-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xl-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xl-2 { + margin: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mt-xl-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-mr-xl-2 { + margin-right: 0.5rem !important; + } + .rz-my-xl-2, + .rz-mb-xl-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xl-2, + .rz-ml-xl-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xl-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xl-3 { + margin: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mt-xl-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-mr-xl-3 { + margin-right: 0.75rem !important; + } + .rz-my-xl-3, + .rz-mb-xl-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xl-3, + .rz-ml-xl-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xl-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xl-4 { + margin: 1rem !important; + } + .rz-my-xl-4, + .rz-mt-xl-4 { + margin-top: 1rem !important; + } + .rz-mx-xl-4, + .rz-mr-xl-4 { + margin-right: 1rem !important; + } + .rz-my-xl-4, + .rz-mb-xl-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xl-4, + .rz-ml-xl-4 { + margin-left: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xl-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xl-5 { + margin: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mt-xl-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-mr-xl-5 { + margin-right: 1.25rem !important; + } + .rz-my-xl-5, + .rz-mb-xl-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xl-5, + .rz-ml-xl-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xl-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xl-6 { + margin: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mt-xl-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-mr-xl-6 { + margin-right: 1.5rem !important; + } + .rz-my-xl-6, + .rz-mb-xl-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xl-6, + .rz-ml-xl-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xl-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xl-7 { + margin: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mt-xl-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-mr-xl-7 { + margin-right: 1.75rem !important; + } + .rz-my-xl-7, + .rz-mb-xl-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xl-7, + .rz-ml-xl-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xl-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xl-8 { + margin: 2rem !important; + } + .rz-my-xl-8, + .rz-mt-xl-8 { + margin-top: 2rem !important; + } + .rz-mx-xl-8, + .rz-mr-xl-8 { + margin-right: 2rem !important; + } + .rz-my-xl-8, + .rz-mb-xl-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xl-8, + .rz-ml-xl-8 { + margin-left: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xl-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xl-9 { + margin: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mt-xl-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-mr-xl-9 { + margin-right: 2.25rem !important; + } + .rz-my-xl-9, + .rz-mb-xl-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xl-9, + .rz-ml-xl-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xl-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xl-10 { + margin: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mt-xl-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-mr-xl-10 { + margin-right: 2.5rem !important; + } + .rz-my-xl-10, + .rz-mb-xl-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xl-10, + .rz-ml-xl-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xl-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xl-11 { + margin: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mt-xl-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-mr-xl-11 { + margin-right: 2.75rem !important; + } + .rz-my-xl-11, + .rz-mb-xl-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xl-11, + .rz-ml-xl-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xl-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xl-12 { + margin: 3rem !important; + } + .rz-my-xl-12, + .rz-mt-xl-12 { + margin-top: 3rem !important; + } + .rz-mx-xl-12, + .rz-mr-xl-12 { + margin-right: 3rem !important; + } + .rz-my-xl-12, + .rz-mb-xl-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xl-12, + .rz-ml-xl-12 { + margin-left: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xl-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xl-0 { + padding: 0 !important; + } + .rz-py-xl-0, + .rz-pt-xl-0 { + padding-top: 0 !important; + } + .rz-px-xl-0, + .rz-pr-xl-0 { + padding-right: 0 !important; + } + .rz-py-xl-0, + .rz-pb-xl-0 { + padding-bottom: 0 !important; + } + .rz-px-xl-0, + .rz-pl-xl-0 { + padding-left: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xl-0 { + padding-inline-end: 0 !important; + } + .rz-p-xl-05 { + padding: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pt-xl-05 { + padding-top: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pr-xl-05 { + padding-right: 0.125rem !important; + } + .rz-py-xl-05, + .rz-pb-xl-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xl-05, + .rz-pl-xl-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xl-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xl-1 { + padding: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pt-xl-1 { + padding-top: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pr-xl-1 { + padding-right: 0.25rem !important; + } + .rz-py-xl-1, + .rz-pb-xl-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xl-1, + .rz-pl-xl-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xl-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xl-2 { + padding: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pt-xl-2 { + padding-top: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pr-xl-2 { + padding-right: 0.5rem !important; + } + .rz-py-xl-2, + .rz-pb-xl-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xl-2, + .rz-pl-xl-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xl-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xl-3 { + padding: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pt-xl-3 { + padding-top: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pr-xl-3 { + padding-right: 0.75rem !important; + } + .rz-py-xl-3, + .rz-pb-xl-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xl-3, + .rz-pl-xl-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xl-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xl-4 { + padding: 1rem !important; + } + .rz-py-xl-4, + .rz-pt-xl-4 { + padding-top: 1rem !important; + } + .rz-px-xl-4, + .rz-pr-xl-4 { + padding-right: 1rem !important; + } + .rz-py-xl-4, + .rz-pb-xl-4 { + padding-bottom: 1rem !important; + } + .rz-px-xl-4, + .rz-pl-xl-4 { + padding-left: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xl-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xl-5 { + padding: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pt-xl-5 { + padding-top: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pr-xl-5 { + padding-right: 1.25rem !important; + } + .rz-py-xl-5, + .rz-pb-xl-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xl-5, + .rz-pl-xl-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xl-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xl-6 { + padding: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pt-xl-6 { + padding-top: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pr-xl-6 { + padding-right: 1.5rem !important; + } + .rz-py-xl-6, + .rz-pb-xl-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xl-6, + .rz-pl-xl-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xl-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xl-7 { + padding: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pt-xl-7 { + padding-top: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pr-xl-7 { + padding-right: 1.75rem !important; + } + .rz-py-xl-7, + .rz-pb-xl-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xl-7, + .rz-pl-xl-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xl-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xl-8 { + padding: 2rem !important; + } + .rz-py-xl-8, + .rz-pt-xl-8 { + padding-top: 2rem !important; + } + .rz-px-xl-8, + .rz-pr-xl-8 { + padding-right: 2rem !important; + } + .rz-py-xl-8, + .rz-pb-xl-8 { + padding-bottom: 2rem !important; + } + .rz-px-xl-8, + .rz-pl-xl-8 { + padding-left: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xl-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xl-9 { + padding: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pt-xl-9 { + padding-top: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pr-xl-9 { + padding-right: 2.25rem !important; + } + .rz-py-xl-9, + .rz-pb-xl-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xl-9, + .rz-pl-xl-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xl-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xl-10 { + padding: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pt-xl-10 { + padding-top: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pr-xl-10 { + padding-right: 2.5rem !important; + } + .rz-py-xl-10, + .rz-pb-xl-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xl-10, + .rz-pl-xl-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xl-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xl-11 { + padding: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pt-xl-11 { + padding-top: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pr-xl-11 { + padding-right: 2.75rem !important; + } + .rz-py-xl-11, + .rz-pb-xl-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xl-11, + .rz-pl-xl-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xl-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xl-12 { + padding: 3rem !important; + } + .rz-py-xl-12, + .rz-pt-xl-12 { + padding-top: 3rem !important; + } + .rz-px-xl-12, + .rz-pr-xl-12 { + padding-right: 3rem !important; + } + .rz-py-xl-12, + .rz-pb-xl-12 { + padding-bottom: 3rem !important; + } + .rz-px-xl-12, + .rz-pl-xl-12 { + padding-left: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xl-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xl-auto { + margin: auto !important; + } + .rz-my-xl-auto, + .rz-mt-xl-auto { + margin-top: auto !important; + } + .rz-mx-xl-auto, + .rz-mr-xl-auto { + margin-right: auto !important; + } + .rz-my-xl-auto, + .rz-mb-xl-auto { + margin-bottom: auto !important; + } + .rz-mx-xl-auto, + .rz-ml-xl-auto { + margin-left: auto !important; + } + .rz-ms-xl-auto { + margin-inline-start: auto !important; + } + .rz-me-xl-auto { + margin-inline-end: auto !important; + } +} +@media (min-width: 2560px) { + .rz-m-xx-0 { + margin: 0 !important; + } + .rz-my-xx-0, + .rz-mt-xx-0 { + margin-top: 0 !important; + } + .rz-mx-xx-0, + .rz-mr-xx-0 { + margin-right: 0 !important; + } + .rz-my-xx-0, + .rz-mb-xx-0 { + margin-bottom: 0 !important; + } + .rz-mx-xx-0, + .rz-ml-xx-0 { + margin-left: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-start: 0 !important; + } + .rz-ms-xx-0 { + margin-inline-end: 0 !important; + } + .rz-m-xx-05 { + margin: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mt-xx-05 { + margin-top: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-mr-xx-05 { + margin-right: 0.125rem !important; + } + .rz-my-xx-05, + .rz-mb-xx-05 { + margin-bottom: 0.125rem !important; + } + .rz-mx-xx-05, + .rz-ml-xx-05 { + margin-left: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-start: 0.125rem !important; + } + .rz-ms-xx-05 { + margin-inline-end: 0.125rem !important; + } + .rz-m-xx-1 { + margin: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mt-xx-1 { + margin-top: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-mr-xx-1 { + margin-right: 0.25rem !important; + } + .rz-my-xx-1, + .rz-mb-xx-1 { + margin-bottom: 0.25rem !important; + } + .rz-mx-xx-1, + .rz-ml-xx-1 { + margin-left: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-start: 0.25rem !important; + } + .rz-ms-xx-1 { + margin-inline-end: 0.25rem !important; + } + .rz-m-xx-2 { + margin: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mt-xx-2 { + margin-top: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-mr-xx-2 { + margin-right: 0.5rem !important; + } + .rz-my-xx-2, + .rz-mb-xx-2 { + margin-bottom: 0.5rem !important; + } + .rz-mx-xx-2, + .rz-ml-xx-2 { + margin-left: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-start: 0.5rem !important; + } + .rz-ms-xx-2 { + margin-inline-end: 0.5rem !important; + } + .rz-m-xx-3 { + margin: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mt-xx-3 { + margin-top: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-mr-xx-3 { + margin-right: 0.75rem !important; + } + .rz-my-xx-3, + .rz-mb-xx-3 { + margin-bottom: 0.75rem !important; + } + .rz-mx-xx-3, + .rz-ml-xx-3 { + margin-left: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-start: 0.75rem !important; + } + .rz-ms-xx-3 { + margin-inline-end: 0.75rem !important; + } + .rz-m-xx-4 { + margin: 1rem !important; + } + .rz-my-xx-4, + .rz-mt-xx-4 { + margin-top: 1rem !important; + } + .rz-mx-xx-4, + .rz-mr-xx-4 { + margin-right: 1rem !important; + } + .rz-my-xx-4, + .rz-mb-xx-4 { + margin-bottom: 1rem !important; + } + .rz-mx-xx-4, + .rz-ml-xx-4 { + margin-left: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-start: 1rem !important; + } + .rz-ms-xx-4 { + margin-inline-end: 1rem !important; + } + .rz-m-xx-5 { + margin: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mt-xx-5 { + margin-top: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-mr-xx-5 { + margin-right: 1.25rem !important; + } + .rz-my-xx-5, + .rz-mb-xx-5 { + margin-bottom: 1.25rem !important; + } + .rz-mx-xx-5, + .rz-ml-xx-5 { + margin-left: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-start: 1.25rem !important; + } + .rz-ms-xx-5 { + margin-inline-end: 1.25rem !important; + } + .rz-m-xx-6 { + margin: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mt-xx-6 { + margin-top: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-mr-xx-6 { + margin-right: 1.5rem !important; + } + .rz-my-xx-6, + .rz-mb-xx-6 { + margin-bottom: 1.5rem !important; + } + .rz-mx-xx-6, + .rz-ml-xx-6 { + margin-left: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-start: 1.5rem !important; + } + .rz-ms-xx-6 { + margin-inline-end: 1.5rem !important; + } + .rz-m-xx-7 { + margin: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mt-xx-7 { + margin-top: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-mr-xx-7 { + margin-right: 1.75rem !important; + } + .rz-my-xx-7, + .rz-mb-xx-7 { + margin-bottom: 1.75rem !important; + } + .rz-mx-xx-7, + .rz-ml-xx-7 { + margin-left: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-start: 1.75rem !important; + } + .rz-ms-xx-7 { + margin-inline-end: 1.75rem !important; + } + .rz-m-xx-8 { + margin: 2rem !important; + } + .rz-my-xx-8, + .rz-mt-xx-8 { + margin-top: 2rem !important; + } + .rz-mx-xx-8, + .rz-mr-xx-8 { + margin-right: 2rem !important; + } + .rz-my-xx-8, + .rz-mb-xx-8 { + margin-bottom: 2rem !important; + } + .rz-mx-xx-8, + .rz-ml-xx-8 { + margin-left: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-start: 2rem !important; + } + .rz-ms-xx-8 { + margin-inline-end: 2rem !important; + } + .rz-m-xx-9 { + margin: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mt-xx-9 { + margin-top: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-mr-xx-9 { + margin-right: 2.25rem !important; + } + .rz-my-xx-9, + .rz-mb-xx-9 { + margin-bottom: 2.25rem !important; + } + .rz-mx-xx-9, + .rz-ml-xx-9 { + margin-left: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-start: 2.25rem !important; + } + .rz-ms-xx-9 { + margin-inline-end: 2.25rem !important; + } + .rz-m-xx-10 { + margin: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mt-xx-10 { + margin-top: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-mr-xx-10 { + margin-right: 2.5rem !important; + } + .rz-my-xx-10, + .rz-mb-xx-10 { + margin-bottom: 2.5rem !important; + } + .rz-mx-xx-10, + .rz-ml-xx-10 { + margin-left: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-start: 2.5rem !important; + } + .rz-ms-xx-10 { + margin-inline-end: 2.5rem !important; + } + .rz-m-xx-11 { + margin: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mt-xx-11 { + margin-top: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-mr-xx-11 { + margin-right: 2.75rem !important; + } + .rz-my-xx-11, + .rz-mb-xx-11 { + margin-bottom: 2.75rem !important; + } + .rz-mx-xx-11, + .rz-ml-xx-11 { + margin-left: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-start: 2.75rem !important; + } + .rz-ms-xx-11 { + margin-inline-end: 2.75rem !important; + } + .rz-m-xx-12 { + margin: 3rem !important; + } + .rz-my-xx-12, + .rz-mt-xx-12 { + margin-top: 3rem !important; + } + .rz-mx-xx-12, + .rz-mr-xx-12 { + margin-right: 3rem !important; + } + .rz-my-xx-12, + .rz-mb-xx-12 { + margin-bottom: 3rem !important; + } + .rz-mx-xx-12, + .rz-ml-xx-12 { + margin-left: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-start: 3rem !important; + } + .rz-ms-xx-12 { + margin-inline-end: 3rem !important; + } + .rz-p-xx-0 { + padding: 0 !important; + } + .rz-py-xx-0, + .rz-pt-xx-0 { + padding-top: 0 !important; + } + .rz-px-xx-0, + .rz-pr-xx-0 { + padding-right: 0 !important; + } + .rz-py-xx-0, + .rz-pb-xx-0 { + padding-bottom: 0 !important; + } + .rz-px-xx-0, + .rz-pl-xx-0 { + padding-left: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-start: 0 !important; + } + .rz-ps-xx-0 { + padding-inline-end: 0 !important; + } + .rz-p-xx-05 { + padding: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pt-xx-05 { + padding-top: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pr-xx-05 { + padding-right: 0.125rem !important; + } + .rz-py-xx-05, + .rz-pb-xx-05 { + padding-bottom: 0.125rem !important; + } + .rz-px-xx-05, + .rz-pl-xx-05 { + padding-left: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-start: 0.125rem !important; + } + .rz-ps-xx-05 { + padding-inline-end: 0.125rem !important; + } + .rz-p-xx-1 { + padding: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pt-xx-1 { + padding-top: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pr-xx-1 { + padding-right: 0.25rem !important; + } + .rz-py-xx-1, + .rz-pb-xx-1 { + padding-bottom: 0.25rem !important; + } + .rz-px-xx-1, + .rz-pl-xx-1 { + padding-left: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-start: 0.25rem !important; + } + .rz-ps-xx-1 { + padding-inline-end: 0.25rem !important; + } + .rz-p-xx-2 { + padding: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pt-xx-2 { + padding-top: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pr-xx-2 { + padding-right: 0.5rem !important; + } + .rz-py-xx-2, + .rz-pb-xx-2 { + padding-bottom: 0.5rem !important; + } + .rz-px-xx-2, + .rz-pl-xx-2 { + padding-left: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-start: 0.5rem !important; + } + .rz-ps-xx-2 { + padding-inline-end: 0.5rem !important; + } + .rz-p-xx-3 { + padding: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pt-xx-3 { + padding-top: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pr-xx-3 { + padding-right: 0.75rem !important; + } + .rz-py-xx-3, + .rz-pb-xx-3 { + padding-bottom: 0.75rem !important; + } + .rz-px-xx-3, + .rz-pl-xx-3 { + padding-left: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-start: 0.75rem !important; + } + .rz-ps-xx-3 { + padding-inline-end: 0.75rem !important; + } + .rz-p-xx-4 { + padding: 1rem !important; + } + .rz-py-xx-4, + .rz-pt-xx-4 { + padding-top: 1rem !important; + } + .rz-px-xx-4, + .rz-pr-xx-4 { + padding-right: 1rem !important; + } + .rz-py-xx-4, + .rz-pb-xx-4 { + padding-bottom: 1rem !important; + } + .rz-px-xx-4, + .rz-pl-xx-4 { + padding-left: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-start: 1rem !important; + } + .rz-ps-xx-4 { + padding-inline-end: 1rem !important; + } + .rz-p-xx-5 { + padding: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pt-xx-5 { + padding-top: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pr-xx-5 { + padding-right: 1.25rem !important; + } + .rz-py-xx-5, + .rz-pb-xx-5 { + padding-bottom: 1.25rem !important; + } + .rz-px-xx-5, + .rz-pl-xx-5 { + padding-left: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-start: 1.25rem !important; + } + .rz-ps-xx-5 { + padding-inline-end: 1.25rem !important; + } + .rz-p-xx-6 { + padding: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pt-xx-6 { + padding-top: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pr-xx-6 { + padding-right: 1.5rem !important; + } + .rz-py-xx-6, + .rz-pb-xx-6 { + padding-bottom: 1.5rem !important; + } + .rz-px-xx-6, + .rz-pl-xx-6 { + padding-left: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-start: 1.5rem !important; + } + .rz-ps-xx-6 { + padding-inline-end: 1.5rem !important; + } + .rz-p-xx-7 { + padding: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pt-xx-7 { + padding-top: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pr-xx-7 { + padding-right: 1.75rem !important; + } + .rz-py-xx-7, + .rz-pb-xx-7 { + padding-bottom: 1.75rem !important; + } + .rz-px-xx-7, + .rz-pl-xx-7 { + padding-left: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-start: 1.75rem !important; + } + .rz-ps-xx-7 { + padding-inline-end: 1.75rem !important; + } + .rz-p-xx-8 { + padding: 2rem !important; + } + .rz-py-xx-8, + .rz-pt-xx-8 { + padding-top: 2rem !important; + } + .rz-px-xx-8, + .rz-pr-xx-8 { + padding-right: 2rem !important; + } + .rz-py-xx-8, + .rz-pb-xx-8 { + padding-bottom: 2rem !important; + } + .rz-px-xx-8, + .rz-pl-xx-8 { + padding-left: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-start: 2rem !important; + } + .rz-ps-xx-8 { + padding-inline-end: 2rem !important; + } + .rz-p-xx-9 { + padding: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pt-xx-9 { + padding-top: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pr-xx-9 { + padding-right: 2.25rem !important; + } + .rz-py-xx-9, + .rz-pb-xx-9 { + padding-bottom: 2.25rem !important; + } + .rz-px-xx-9, + .rz-pl-xx-9 { + padding-left: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-start: 2.25rem !important; + } + .rz-ps-xx-9 { + padding-inline-end: 2.25rem !important; + } + .rz-p-xx-10 { + padding: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pt-xx-10 { + padding-top: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pr-xx-10 { + padding-right: 2.5rem !important; + } + .rz-py-xx-10, + .rz-pb-xx-10 { + padding-bottom: 2.5rem !important; + } + .rz-px-xx-10, + .rz-pl-xx-10 { + padding-left: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-start: 2.5rem !important; + } + .rz-ps-xx-10 { + padding-inline-end: 2.5rem !important; + } + .rz-p-xx-11 { + padding: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pt-xx-11 { + padding-top: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pr-xx-11 { + padding-right: 2.75rem !important; + } + .rz-py-xx-11, + .rz-pb-xx-11 { + padding-bottom: 2.75rem !important; + } + .rz-px-xx-11, + .rz-pl-xx-11 { + padding-left: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-start: 2.75rem !important; + } + .rz-ps-xx-11 { + padding-inline-end: 2.75rem !important; + } + .rz-p-xx-12 { + padding: 3rem !important; + } + .rz-py-xx-12, + .rz-pt-xx-12 { + padding-top: 3rem !important; + } + .rz-px-xx-12, + .rz-pr-xx-12 { + padding-right: 3rem !important; + } + .rz-py-xx-12, + .rz-pb-xx-12 { + padding-bottom: 3rem !important; + } + .rz-px-xx-12, + .rz-pl-xx-12 { + padding-left: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-start: 3rem !important; + } + .rz-ps-xx-12 { + padding-inline-end: 3rem !important; + } + .rz-m-xx-auto { + margin: auto !important; + } + .rz-my-xx-auto, + .rz-mt-xx-auto { + margin-top: auto !important; + } + .rz-mx-xx-auto, + .rz-mr-xx-auto { + margin-right: auto !important; + } + .rz-my-xx-auto, + .rz-mb-xx-auto { + margin-bottom: auto !important; + } + .rz-mx-xx-auto, + .rz-ml-xx-auto { + margin-left: auto !important; + } + .rz-ms-xx-auto { + margin-inline-start: auto !important; + } + .rz-me-xx-auto { + margin-inline-end: auto !important; + } +} +h1.rz-heading { + font-size: 2rem; + line-height: 1.1875em; + font-weight: 700; + letter-spacing: -0.04em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h2.rz-heading { + font-size: 1.5rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.03em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 1rem; +} + +h3.rz-heading { + font-size: 1.125rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.75rem; +} + +h4.rz-heading { + font-size: 1rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h5.rz-heading { + font-size: 0.875rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6.rz-heading { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +.rz-text-display-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h1-font-size); + line-height: var(--rz-text-display-h1-line-height); + font-weight: var(--rz-text-display-h1-font-weight); + letter-spacing: var(--rz-text-display-h1-letter-spacing); + color: var(--rz-text-display-h1-color); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); +} + +.rz-text-display-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h2-font-size); + line-height: var(--rz-text-display-h2-line-height); + font-weight: var(--rz-text-display-h2-font-weight); + letter-spacing: var(--rz-text-display-h2-letter-spacing); + color: var(--rz-text-display-h2-color); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); +} + +.rz-text-display-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h3-font-size); + line-height: var(--rz-text-display-h3-line-height); + font-weight: var(--rz-text-display-h3-font-weight); + letter-spacing: var(--rz-text-display-h3-letter-spacing); + color: var(--rz-text-display-h3-color); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); +} + +.rz-text-display-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h4-font-size); + line-height: var(--rz-text-display-h4-line-height); + font-weight: var(--rz-text-display-h4-font-weight); + letter-spacing: var(--rz-text-display-h4-letter-spacing); + color: var(--rz-text-display-h4-color); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); +} + +.rz-text-display-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h5-font-size); + line-height: var(--rz-text-display-h5-line-height); + font-weight: var(--rz-text-display-h5-font-weight); + letter-spacing: var(--rz-text-display-h5-letter-spacing); + color: var(--rz-text-display-h5-color); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); +} + +.rz-text-display-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-display-h6-font-size); + line-height: var(--rz-text-display-h6-line-height); + font-weight: var(--rz-text-display-h6-font-weight); + letter-spacing: var(--rz-text-display-h6-letter-spacing); + color: var(--rz-text-display-h6-color); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); +} + +.rz-text-h1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h1-font-size); + line-height: var(--rz-text-h1-line-height); + font-weight: var(--rz-text-h1-font-weight); + letter-spacing: var(--rz-text-h1-letter-spacing); + color: var(--rz-text-h1-color); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); +} + +.rz-text-h2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h2-font-size); + line-height: var(--rz-text-h2-line-height); + font-weight: var(--rz-text-h2-font-weight); + letter-spacing: var(--rz-text-h2-letter-spacing); + color: var(--rz-text-h2-color); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); +} + +.rz-text-h3 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h3-font-size); + line-height: var(--rz-text-h3-line-height); + font-weight: var(--rz-text-h3-font-weight); + letter-spacing: var(--rz-text-h3-letter-spacing); + color: var(--rz-text-h3-color); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); +} + +.rz-text-h4 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h4-font-size); + line-height: var(--rz-text-h4-line-height); + font-weight: var(--rz-text-h4-font-weight); + letter-spacing: var(--rz-text-h4-letter-spacing); + color: var(--rz-text-h4-color); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); +} + +.rz-text-h5 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h5-font-size); + line-height: var(--rz-text-h5-line-height); + font-weight: var(--rz-text-h5-font-weight); + letter-spacing: var(--rz-text-h5-letter-spacing); + color: var(--rz-text-h5-color); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); +} + +.rz-text-h6 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-text-h6-color); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); +} + +.rz-text-subtitle1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle1-font-size); + line-height: var(--rz-text-subtitle1-line-height); + font-weight: var(--rz-text-subtitle1-font-weight); + letter-spacing: var(--rz-text-subtitle1-letter-spacing); + color: var(--rz-text-subtitle1-color); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); +} + +.rz-text-subtitle2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-subtitle2-font-size); + line-height: var(--rz-text-subtitle2-line-height); + font-weight: var(--rz-text-subtitle2-font-weight); + letter-spacing: var(--rz-text-subtitle2-letter-spacing); + color: var(--rz-text-subtitle2-color); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); +} + +.rz-text-body1 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body1-font-size); + line-height: var(--rz-text-body1-line-height); + font-weight: var(--rz-text-body1-font-weight); + letter-spacing: var(--rz-text-body1-letter-spacing); + color: var(--rz-text-body1-color); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); +} + +.rz-text-body2 { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-body2-font-size); + line-height: var(--rz-text-body2-line-height); + font-weight: var(--rz-text-body2-font-weight); + letter-spacing: var(--rz-text-body2-letter-spacing); + color: var(--rz-text-body2-color); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); +} + +.rz-text-button { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-button-font-size); + line-height: var(--rz-text-button-line-height); + font-weight: var(--rz-text-button-font-weight); + letter-spacing: var(--rz-text-button-letter-spacing); + color: var(--rz-text-button-color); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); +} + +.rz-text-caption { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-caption-font-size); + line-height: var(--rz-text-caption-line-height); + font-weight: var(--rz-text-caption-font-weight); + letter-spacing: var(--rz-text-caption-letter-spacing); + color: var(--rz-text-caption-color); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); +} + +.rz-text-overline { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-overline-font-size); + line-height: var(--rz-text-overline-line-height); + font-weight: var(--rz-text-overline-font-weight); + letter-spacing: var(--rz-text-overline-letter-spacing); + text-transform: var(--rz-text-overline-text-transform); + color: var(--rz-text-overline-color); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); +} + +.rz-text-align-start { + text-align: start; +} + +.rz-text-align-end { + text-align: end; +} + +.rz-text-align-left { + text-align: left; +} + +.rz-text-align-right { + text-align: right; +} + +.rz-text-align-center { + text-align: center; +} + +.rz-text-align-justify { + text-align: justify; +} + +.rz-text-align-justify-all { + text-align: justify-all; +} + +.rz-text-align-match-parent { + text-align: match-parent; +} + +@media (min-width: 576px) { + .rz-text-align-xs-start { + text-align: start !important; + } + .rz-text-align-xs-end { + text-align: end !important; + } + .rz-text-align-xs-left { + text-align: left !important; + } + .rz-text-align-xs-right { + text-align: right !important; + } + .rz-text-align-xs-center { + text-align: center !important; + } + .rz-text-align-xs-justify { + text-align: justify !important; + } + .rz-text-align-xs-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xs-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 768px) { + .rz-text-align-sm-start { + text-align: start !important; + } + .rz-text-align-sm-end { + text-align: end !important; + } + .rz-text-align-sm-left { + text-align: left !important; + } + .rz-text-align-sm-right { + text-align: right !important; + } + .rz-text-align-sm-center { + text-align: center !important; + } + .rz-text-align-sm-justify { + text-align: justify !important; + } + .rz-text-align-sm-justify-all { + text-align: justify-all !important; + } + .rz-text-align-sm-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1024px) { + .rz-text-align-md-start { + text-align: start !important; + } + .rz-text-align-md-end { + text-align: end !important; + } + .rz-text-align-md-left { + text-align: left !important; + } + .rz-text-align-md-right { + text-align: right !important; + } + .rz-text-align-md-center { + text-align: center !important; + } + .rz-text-align-md-justify { + text-align: justify !important; + } + .rz-text-align-md-justify-all { + text-align: justify-all !important; + } + .rz-text-align-md-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1280px) { + .rz-text-align-lg-start { + text-align: start !important; + } + .rz-text-align-lg-end { + text-align: end !important; + } + .rz-text-align-lg-left { + text-align: left !important; + } + .rz-text-align-lg-right { + text-align: right !important; + } + .rz-text-align-lg-center { + text-align: center !important; + } + .rz-text-align-lg-justify { + text-align: justify !important; + } + .rz-text-align-lg-justify-all { + text-align: justify-all !important; + } + .rz-text-align-lg-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 1920px) { + .rz-text-align-xl-start { + text-align: start !important; + } + .rz-text-align-xl-end { + text-align: end !important; + } + .rz-text-align-xl-left { + text-align: left !important; + } + .rz-text-align-xl-right { + text-align: right !important; + } + .rz-text-align-xl-center { + text-align: center !important; + } + .rz-text-align-xl-justify { + text-align: justify !important; + } + .rz-text-align-xl-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xl-match-parent { + text-align: match-parent !important; + } +} +@media (min-width: 2560px) { + .rz-text-align-xx-start { + text-align: start !important; + } + .rz-text-align-xx-end { + text-align: end !important; + } + .rz-text-align-xx-left { + text-align: left !important; + } + .rz-text-align-xx-right { + text-align: right !important; + } + .rz-text-align-xx-center { + text-align: center !important; + } + .rz-text-align-xx-justify { + text-align: justify !important; + } + .rz-text-align-xx-justify-all { + text-align: justify-all !important; + } + .rz-text-align-xx-match-parent { + text-align: match-parent !important; + } +} +.rz-text-wrap { + white-space: normal !important; +} + +.rz-text-nowrap { + white-space: nowrap !important; +} + +.rz-text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rz-text-capitalize { + text-transform: capitalize; +} + +.rz-text-uppercase { + text-transform: uppercase; +} + +.rz-text-lowercase { + text-transform: lowercase; +} + +.rz-label { + vertical-align: middle; + margin-block-start: 0; + margin-block-end: 0; +} + +.rz-form .row .rz-label { + min-height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; + border-top: var(--rz-input-border); + border-bottom: var(--rz-input-border); + border-color: transparent; +} + +.rz-layout ::selection { + background-color: var(--rz-text-selection-background-color); + color: var(--rz-text-selection-color); +} + +.rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; + font-family: var(--rz-icon-font-family); + font-weight: var(--rz-icon-weight, inherit); + font-style: normal; + font-size: var(--rz-icon-size); + display: inline-block; + width: 1em; + height: 1em; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: "liga"; +} + +i.rzi { + display: inline-flex; + justify-content: center; + align-items: center; +} + +.rzi-primary { + color: var(--rz-primary); +} + +.rzi-secondary { + color: var(--rz-secondary); +} + +.rzi-info { + color: var(--rz-info); +} + +.rzi-warning { + color: var(--rz-warning); +} + +.rzi-error { + color: var(--rz-danger); +} + +.rzi-danger { + color: var(--rz-danger); +} + +.rzi-success { + color: var(--rz-success); +} + +.rzi-base { + color: var(--rz-base); +} + +.rzi-light { + color: var(--rz-base-500); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + +.rz-helper-hidden-accessible { + opacity: 0; + height: 0; +} +.rz-helper-hidden-accessible input { + height: 0; + padding: 0; + margin: 0; + border: 0; +} + +.rz-helper-hidden { + display: none; +} + +.rz-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; +} + +.rz-pager-element, .rz-button { + box-sizing: border-box; + display: inline-block; + margin: 0; + color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; + border: none; + border-radius: var(--rz-button-border-radius); + outline: none; + box-shadow: var(--rz-button-shadow); + font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); + text-decoration: none; + transition: var(--rz-button-transition); + -webkit-appearance: none; +} +.rz-pager-element:focus, .rz-button:focus { + outline: var(--rz-outline-normal); +} +.rz-pager-element:focus-visible, .rz-button:focus-visible { + outline: var(--rz-button-focus-outline); + outline-offset: var(--rz-button-focus-outline-offset); +} +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { + cursor: pointer; +} +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { + text-decoration: none; + background-image: var(--rz-button-hover-gradient); + background-size: var(--rz-button-hover-background-size); + box-shadow: var(--rz-button-hover-shadow); +} +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { + text-decoration: none; + background-image: var(--rz-button-focus-gradient); + background-size: var(--rz-button-focus-background-size); + box-shadow: var(--rz-button-focus-shadow); +} +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { + text-decoration: none; + background-image: var(--rz-button-active-gradient); + background-size: var(--rz-button-active-background-size); + box-shadow: var(--rz-button-active-shadow); +} +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { + opacity: var(--rz-button-disabled-opacity); + cursor: initial; +} +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { + opacity: var(--rz-button-empty-opacity); + cursor: initial; +} +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: var(--rz-button-vertical-align); + line-height: var(--rz-button-line-height); +} +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { + vertical-align: var(--rz-button-vertical-align); +} +.rz-pager-element .rzi, .rz-button .rzi { + vertical-align: var(--rz-button-vertical-align); +} + +.rz-button.rz-primary:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-button.rz-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-button.rz-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-button.rz-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-button.rz-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} +.rz-button.rz-primary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-primary.rz-variant-flat:focus-visible { + outline-color: var(--rz-primary); +} + +.rz-button.rz-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-button.rz-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-button.rz-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-button.rz-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-button.rz-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} +.rz-button.rz-secondary.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-secondary.rz-variant-flat:focus-visible { + outline-color: var(--rz-secondary); +} + +.rz-button.rz-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-button.rz-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-button.rz-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-button.rz-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-button.rz-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} +.rz-button.rz-info.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-info.rz-variant-flat:focus-visible { + outline-color: var(--rz-info); +} + +.rz-button.rz-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-button.rz-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-button.rz-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-button.rz-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-button.rz-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} +.rz-button.rz-warning.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-warning.rz-variant-flat:focus-visible { + outline-color: var(--rz-warning); +} + +.rz-button.rz-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-button.rz-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-button.rz-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-button.rz-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-button.rz-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} +.rz-button.rz-error.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-error.rz-variant-flat:focus-visible { + outline-color: var(--rz-error); +} + +.rz-button.rz-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-button.rz-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-button.rz-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-button.rz-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-button.rz-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light { + background-color: var(--rz-base-500); + color: var(--rz-text-color); +} +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} +.rz-button.rz-dark.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-variant-outlined.rz-primary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-secondary { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-info { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-button.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} +.rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-warning { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-error { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-button.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} +.rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-danger { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-success { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-button.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} +.rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-base { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-light { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-500); + color: var(--rz-base-500); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; +} + +.rz-button.rz-variant-outlined.rz-dark { + background-color: transparent; +} +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; +} + +.rz-button.rz-variant-text.rz-primary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-secondary { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-button.rz-variant-text.rz-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} +.rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):active { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-info { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-button.rz-variant-text.rz-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-button.rz-variant-text.rz-info.rz-shade-default { + color: var(--rz-info); +} +.rz-button.rz-variant-text.rz-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-button.rz-variant-text.rz-info.rz-shade-darker { + color: var(--rz-info-darker); +} +.rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-info:not(.rz-state-disabled):active { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-warning { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-button.rz-variant-text.rz-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} +.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-error { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-button.rz-variant-text.rz-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-button.rz-variant-text.rz-error.rz-shade-default { + color: var(--rz-error); +} +.rz-button.rz-variant-text.rz-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-button.rz-variant-text.rz-error.rz-shade-darker { + color: var(--rz-error-darker); +} +.rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-error:not(.rz-state-disabled):active { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-danger { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-button.rz-variant-text.rz-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} +.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):active { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-success { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-button.rz-variant-text.rz-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-button.rz-variant-text.rz-success.rz-shade-default { + color: var(--rz-success); +} +.rz-button.rz-variant-text.rz-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-button.rz-variant-text.rz-success.rz-shade-darker { + color: var(--rz-success-darker); +} +.rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-success:not(.rz-state-disabled):active { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-500); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button-lg { + padding: 0.875rem 1.5rem; + height: auto; + line-height: 1.5rem; + min-height: 3.25rem; + min-width: 3.25rem; + border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; +} +.rz-button-lg .rz-button-box { + line-height: 1.5rem; + gap: 0.25rem; +} +.rz-button-lg.rz-button-icon-left { + padding: 0 1.375rem; +} +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { + padding: 0.875rem; +} +.rz-button-lg .rzi { + font-size: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + width: 1.5rem; +} + +.rz-pager-element, .rz-button-md { + padding: 0.5rem 1rem; + height: auto; + line-height: 1.25rem; + min-height: 2.25rem; + min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; +} +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { + padding: 0.5rem 1rem 0.5rem 0.5rem; +} +.rz-pager-element, .rz-button-md.rz-button-icon-only { + padding: 0.5rem; +} +.rz-pager-element .rzi, .rz-button-md .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { + padding: 0.25rem 0.75rem; + height: auto; + line-height: 1.25rem; + min-height: 1.75rem; + min-width: 1.75rem; + font-size: var(--rz-body-font-size); +} +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { + line-height: 1.25rem; + gap: 0.25rem; +} +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { + padding: 0.25rem 0.75rem 0.25rem 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { + padding: 0.25rem; +} +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { + font-size: var(--rz-icon-size); + line-height: var(--rz-icon-size); + width: var(--rz-icon-size); + height: var(--rz-icon-size); +} + +.rz-button-xs { + padding: 0.125rem 0.25rem; + height: auto; + line-height: 1rem; + min-height: 1.25rem; + min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; +} +.rz-button-xs .rz-button-box { + line-height: 1rem; + gap: 0.125rem; +} +.rz-button-xs.rz-button-icon-left { + padding: 0.125rem 0.5rem 0.125rem 0.125rem; +} +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { + padding: 0.125rem; +} +.rz-button-xs .rzi { + font-size: calc(0.8 * var(--rz-icon-size)); + line-height: calc(0.8 * var(--rz-icon-size)); + width: calc(0.8 * var(--rz-icon-size)); + height: calc(0.8 * var(--rz-icon-size)); +} + +@keyframes button-icon-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.rz-badge { + box-sizing: border-box; + color: var(--rz-text-contrast-color); + display: inline-block; + padding: var(--rz-badge-padding); + font-size: var(--rz-badge-font-size); + font-weight: var(--rz-badge-font-weight); + line-height: var(--rz-badge-line-height); + text-align: center; + text-transform: var(--rz-badge-text-transform); + white-space: nowrap; + border-radius: var(--rz-badge-border-radius); + letter-spacing: var(--rz-badge-letter-spacing); +} +.rz-button .rz-badge { + vertical-align: top; +} + +.rz-badge-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-lighter { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); +} +.rz-badge-primary.rz-shade-light { + background-color: var(--rz-primary-light); + color: var(--rz-on-primary-light); +} +.rz-badge-primary.rz-shade-default { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} +.rz-badge-primary.rz-shade-dark { + background-color: var(--rz-primary-dark); + color: var(--rz-on-primary-dark); +} +.rz-badge-primary.rz-shade-darker { + background-color: var(--rz-primary-darker); + color: var(--rz-on-primary-darker); +} + +.rz-badge-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-lighter { + background-color: var(--rz-secondary-lighter); + color: var(--rz-on-secondary-lighter); +} +.rz-badge-secondary.rz-shade-light { + background-color: var(--rz-secondary-light); + color: var(--rz-on-secondary-light); +} +.rz-badge-secondary.rz-shade-default { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} +.rz-badge-secondary.rz-shade-dark { + background-color: var(--rz-secondary-dark); + color: var(--rz-on-secondary-dark); +} +.rz-badge-secondary.rz-shade-darker { + background-color: var(--rz-secondary-darker); + color: var(--rz-on-secondary-darker); +} + +.rz-badge-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-lighter { + background-color: var(--rz-info-lighter); + color: var(--rz-on-info-lighter); +} +.rz-badge-info.rz-shade-light { + background-color: var(--rz-info-light); + color: var(--rz-on-info-light); +} +.rz-badge-info.rz-shade-default { + background-color: var(--rz-info); + color: var(--rz-on-info); +} +.rz-badge-info.rz-shade-dark { + background-color: var(--rz-info-dark); + color: var(--rz-on-info-dark); +} +.rz-badge-info.rz-shade-darker { + background-color: var(--rz-info-darker); + color: var(--rz-on-info-darker); +} + +.rz-badge-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-lighter { + background-color: var(--rz-warning-lighter); + color: var(--rz-on-warning-lighter); +} +.rz-badge-warning.rz-shade-light { + background-color: var(--rz-warning-light); + color: var(--rz-on-warning-light); +} +.rz-badge-warning.rz-shade-default { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} +.rz-badge-warning.rz-shade-dark { + background-color: var(--rz-warning-dark); + color: var(--rz-on-warning-dark); +} +.rz-badge-warning.rz-shade-darker { + background-color: var(--rz-warning-darker); + color: var(--rz-on-warning-darker); +} + +.rz-badge-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-error.rz-shade-lighter { + background-color: var(--rz-error-lighter); + color: var(--rz-on-error-lighter); +} +.rz-badge-error.rz-shade-light { + background-color: var(--rz-error-light); + color: var(--rz-on-error-light); +} +.rz-badge-error.rz-shade-default { + background-color: var(--rz-error); + color: var(--rz-on-error); +} +.rz-badge-error.rz-shade-dark { + background-color: var(--rz-error-dark); + color: var(--rz-on-error-dark); +} +.rz-badge-error.rz-shade-darker { + background-color: var(--rz-error-darker); + color: var(--rz-on-error-darker); +} + +.rz-badge-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-lighter { + background-color: var(--rz-danger-lighter); + color: var(--rz-on-danger-lighter); +} +.rz-badge-danger.rz-shade-light { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); +} +.rz-badge-danger.rz-shade-default { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} +.rz-badge-danger.rz-shade-dark { + background-color: var(--rz-danger-dark); + color: var(--rz-on-danger-dark); +} +.rz-badge-danger.rz-shade-darker { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); +} + +.rz-badge-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-badge-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-badge-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-badge-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-badge-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} + +.rz-badge-base { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-500); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-variant-outlined.rz-badge-primary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + color: var(--rz-primary-lighter); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + color: var(--rz-primary-light); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + color: var(--rz-primary); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + color: var(--rz-primary-dark); +} +.rz-variant-outlined.rz-badge-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + color: var(--rz-primary-darker); +} + +.rz-variant-outlined.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + color: var(--rz-secondary-lighter); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + color: var(--rz-secondary-light); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + color: var(--rz-secondary); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + color: var(--rz-secondary-dark); +} +.rz-variant-outlined.rz-badge-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + color: var(--rz-secondary-darker); +} + +.rz-variant-outlined.rz-badge-info { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + color: var(--rz-info-lighter); +} +.rz-variant-outlined.rz-badge-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + color: var(--rz-info-light); +} +.rz-variant-outlined.rz-badge-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + color: var(--rz-info); +} +.rz-variant-outlined.rz-badge-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + color: var(--rz-info-dark); +} +.rz-variant-outlined.rz-badge-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + color: var(--rz-info-darker); +} + +.rz-variant-outlined.rz-badge-warning { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + color: var(--rz-warning-lighter); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + color: var(--rz-warning-light); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + color: var(--rz-warning); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + color: var(--rz-warning-dark); +} +.rz-variant-outlined.rz-badge-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + color: var(--rz-warning-darker); +} + +.rz-variant-outlined.rz-badge-error { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + color: var(--rz-error-lighter); +} +.rz-variant-outlined.rz-badge-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + color: var(--rz-error-light); +} +.rz-variant-outlined.rz-badge-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error); + color: var(--rz-error); +} +.rz-variant-outlined.rz-badge-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + color: var(--rz-error-dark); +} +.rz-variant-outlined.rz-badge-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + color: var(--rz-error-darker); +} + +.rz-variant-outlined.rz-badge-danger { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + color: var(--rz-danger-lighter); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + color: var(--rz-danger-light); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + color: var(--rz-danger); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + color: var(--rz-danger-dark); +} +.rz-variant-outlined.rz-badge-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + color: var(--rz-danger-darker); +} + +.rz-variant-outlined.rz-badge-success { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + color: var(--rz-success-lighter); +} +.rz-variant-outlined.rz-badge-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + color: var(--rz-success-light); +} +.rz-variant-outlined.rz-badge-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + color: var(--rz-success); +} +.rz-variant-outlined.rz-badge-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + color: var(--rz-success-dark); +} +.rz-variant-outlined.rz-badge-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + color: var(--rz-success-darker); +} + +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-500); + color: var(--rz-base-500); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + +.rz-variant-text.rz-badge-primary { + background-color: transparent; +} +.rz-variant-text.rz-badge-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-variant-text.rz-badge-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-variant-text.rz-badge-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-variant-text.rz-badge-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-variant-text.rz-badge-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} + +.rz-variant-text.rz-badge-secondary { + background-color: transparent; +} +.rz-variant-text.rz-badge-secondary.rz-shade-lighter { + color: var(--rz-secondary-lighter); +} +.rz-variant-text.rz-badge-secondary.rz-shade-light { + color: var(--rz-secondary-light); +} +.rz-variant-text.rz-badge-secondary.rz-shade-default { + color: var(--rz-secondary); +} +.rz-variant-text.rz-badge-secondary.rz-shade-dark { + color: var(--rz-secondary-dark); +} +.rz-variant-text.rz-badge-secondary.rz-shade-darker { + color: var(--rz-secondary-darker); +} + +.rz-variant-text.rz-badge-info { + background-color: transparent; +} +.rz-variant-text.rz-badge-info.rz-shade-lighter { + color: var(--rz-info-lighter); +} +.rz-variant-text.rz-badge-info.rz-shade-light { + color: var(--rz-info-light); +} +.rz-variant-text.rz-badge-info.rz-shade-default { + color: var(--rz-info); +} +.rz-variant-text.rz-badge-info.rz-shade-dark { + color: var(--rz-info-dark); +} +.rz-variant-text.rz-badge-info.rz-shade-darker { + color: var(--rz-info-darker); +} + +.rz-variant-text.rz-badge-warning { + background-color: transparent; +} +.rz-variant-text.rz-badge-warning.rz-shade-lighter { + color: var(--rz-warning-lighter); +} +.rz-variant-text.rz-badge-warning.rz-shade-light { + color: var(--rz-warning-light); +} +.rz-variant-text.rz-badge-warning.rz-shade-default { + color: var(--rz-warning); +} +.rz-variant-text.rz-badge-warning.rz-shade-dark { + color: var(--rz-warning-dark); +} +.rz-variant-text.rz-badge-warning.rz-shade-darker { + color: var(--rz-warning-darker); +} + +.rz-variant-text.rz-badge-error { + background-color: transparent; +} +.rz-variant-text.rz-badge-error.rz-shade-lighter { + color: var(--rz-error-lighter); +} +.rz-variant-text.rz-badge-error.rz-shade-light { + color: var(--rz-error-light); +} +.rz-variant-text.rz-badge-error.rz-shade-default { + color: var(--rz-error); +} +.rz-variant-text.rz-badge-error.rz-shade-dark { + color: var(--rz-error-dark); +} +.rz-variant-text.rz-badge-error.rz-shade-darker { + color: var(--rz-error-darker); +} + +.rz-variant-text.rz-badge-danger { + background-color: transparent; +} +.rz-variant-text.rz-badge-danger.rz-shade-lighter { + color: var(--rz-danger-lighter); +} +.rz-variant-text.rz-badge-danger.rz-shade-light { + color: var(--rz-danger-light); +} +.rz-variant-text.rz-badge-danger.rz-shade-default { + color: var(--rz-danger); +} +.rz-variant-text.rz-badge-danger.rz-shade-dark { + color: var(--rz-danger-dark); +} +.rz-variant-text.rz-badge-danger.rz-shade-darker { + color: var(--rz-danger-darker); +} + +.rz-variant-text.rz-badge-success { + background-color: transparent; +} +.rz-variant-text.rz-badge-success.rz-shade-lighter { + color: var(--rz-success-lighter); +} +.rz-variant-text.rz-badge-success.rz-shade-light { + color: var(--rz-success-light); +} +.rz-variant-text.rz-badge-success.rz-shade-default { + color: var(--rz-success); +} +.rz-variant-text.rz-badge-success.rz-shade-dark { + color: var(--rz-success-dark); +} +.rz-variant-text.rz-badge-success.rz-shade-darker { + color: var(--rz-success-darker); +} + +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-500); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + +.rz-badge-pill { + border-radius: var(--rz-badge-pill-border-radius); + padding: var(--rz-badge-pill-padding); +} + +.rz-dropzone { + user-select: none; +} + +.rz-dropzone-item { + user-select: none; + cursor: grab; +} + +.rz-dragging { + cursor: grabbing; +} + +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { + box-shadow: var(--rz-input-hover-shadow); + border: var(--rz-input-hover-border); +} + +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { + box-shadow: var(--rz-input-focus-shadow); + border: var(--rz-input-focus-border); + outline: var(--rz-input-focus-outline); + outline-offset: var(--rz-input-focus-outline-offset); +} + +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { + background-color: var(--rz-input-disabled-background-color); + color: var(--rz-input-disabled-color); + border: none; +} + +input { + color: var(--rz-input-value-color); + font-size: var(--rz-input-font-size); +} +input::placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); +} + +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); +} + +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + color: var(--rz-input-value-color); + font-family: inherit; + font-size: var(--rz-input-font-size); + transition: var(--rz-input-transition); + outline: none; +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + box-shadow: none; + background-color: transparent; + outline: none; + border: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):hover, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus { + border: none; + box-shadow: none; +} +.rz-form-field-content > :not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content input:not(:disabled):not(.rz-state-disabled):focus-within, .rz-form-field-content .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus-within { + border: none; + box-shadow: none; +} + +.rz-header { + background-color: var(--rz-header-background-color); + min-height: var(--rz-header-min-height); + border-bottom: var(--rz-header-border); + color: var(--rz-header-color); + box-shadow: var(--rz-header-shadow); +} +.rz-header.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--rz-header-z); +} +.rz-header a { + text-decoration: none; +} + +.rz-footer { + padding: var(--rz-footer-padding); + border-top: var(--rz-footer-border); + background-color: var(--rz-footer-background-color); + color: var(--rz-footer-color); +} +.rz-footer.fixed { + position: fixed; + z-index: var(--rz-footer-z); + bottom: 0; + left: 0; + right: 0; +} + +.rz-sidebar { + background-color: var(--rz-sidebar-background-color); + color: var(--rz-sidebar-color); + border-inline-end: var(--rz-sidebar-border-inline-end); + position: fixed; + overflow: auto; + left: 0; + top: 0; + bottom: 0; + z-index: var(--rz-sidebar-z); + width: var(--rz-sidebar-width); + opacity: 1; + transition: width var(--rz-transition), opacity var(--rz-transition); +} + +@media (max-width: 768px) { + .rz-sidebar-responsive { + width: 0; + opacity: 0; + } +} +.rz-sidebar-expanded { + width: var(--rz-sidebar-width); + opacity: 1; +} + +.rz-sidebar-collapsed { + width: 0 !important; + opacity: 0; +} + +.rz-card { + box-sizing: border-box; + padding: var(--rz-card-padding); + border-radius: var(--rz-card-border-radius); + background-color: var(--rz-card-background-color); +} +.rz-card.rz-variant-filled { + box-shadow: var(--rz-card-shadow); +} +.rz-card.rz-variant-flat { + background-color: var(--rz-card-flat-background-color); +} +.rz-card.rz-variant-outlined { + background: transparent; + border: var(--rz-card-border); +} +.rz-card.rz-variant-text { + background: transparent; +} +.rz-card h1, +.rz-card h2, +.rz-card h3, +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); +} + +.rz-accordion { + box-sizing: border-box; + border-radius: var(--rz-accordion-border-radius); + box-shadow: var(--rz-accordion-shadow); +} +.rz-accordion > div:first-child { + border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; +} +.rz-accordion > div:last-child, .rz-accordion > div:last-child > div { + border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); +} +.rz-accordion > div:only-child { + border-radius: var(--rz-accordion-border-radius); +} +.rz-accordion:focus { + outline: var(--rz-outline-normal); +} +.rz-accordion:focus-visible { + outline: var(--rz-accordion-item-focus-outline); +} +.rz-accordion .rz-accordion-header { + background-color: var(--rz-accordion-item-background-color); + margin: var(--rz-accordion-item-margin); +} +.rz-accordion .rz-accordion-header:not(:first-child) { + border-top: var(--rz-accordion-item-border); +} +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); + color: var(--rz-accordion-item-color); + line-height: var(--rz-accordion-item-line-height); + text-decoration: none; + display: flex; + align-items: center; + font-size: var(--rz-accordion-item-font-size); + font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; +} +.rz-accordion .rz-accordion-header > a:hover { + color: var(--rz-accordion-hover-color); +} +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { + flex-grow: 1; +} +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { + outline: var(--rz-accordion-item-focus-outline); + outline-offset: var(--rz-accordion-item-focus-outline-offset); +} +.rz-accordion .rz-accordion-header .rzi { + font-size: var(--rz-accordion-icon-font-size); + margin-inline: var(--rz-accordion-icon-margin-inline); +} + +.rz-accordion-toggle-icon { + width: var(--rz-accordion-icon-width); + height: var(--rz-accordion-icon-height); + font-size: var(--rz-accordion-icon-font-size); + order: var(--rz-accordion-toggle-icon-order); +} +.rz-accordion-toggle-icon.rzi { + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); +} +.rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_right"; +} +.rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-accordion-content-wrapper-overflown { + overflow: hidden; +} + +.rz-accordion-content { + font-size: var(--rz-accordion-content-font-size); + background-color: var(--rz-accordion-item-background-color); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); +} + +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); + background: var(--rz-panel-background-color); + border-radius: var(--rz-panel-border-radius); + box-shadow: var(--rz-panel-shadow); +} + +.rz-panel-titlebar { + display: flex; + justify-content: space-between; +} + +.rz-panel-content { + margin: var(--rz-panel-content-margin); +} + +.rz-panel-content-wrapper[aria-hidden=true] { + display: none; +} + +.rz-panel-title { + line-height: var(--rz-panel-title-line-height); + font-weight: var(--rz-panel-title-font-weight); +} + +.rz-panel-titlebar-toggler { + width: var(--rz-panel-toggle-icon-width); + height: var(--rz-panel-toggle-icon-height); + font-size: var(--rz-panel-toggle-icon-font-size); + border-radius: var(--rz-panel-toggle-icon-border-radius); + background-color: var(--rz-panel-toggle-icon-background-color); + color: inherit; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} +.rz-panel-titlebar-toggler:hover { + text-decoration: none; + color: var(--rz-panel-hover-color); +} +.rz-panel-titlebar-toggler:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-titlebar-toggler:focus-visible { + outline: var(--rz-panel-toggle-icon-focus-outline); + outline-offset: var(--rz-panel-toggle-icon-focus-outline-offset); +} +.rz-panel-titlebar-toggler .rzi-minus:before { + content: "remove"; +} +.rz-panel-titlebar-toggler .rzi-plus:before { + content: "add"; +} + +.rz-sidebar-toggle { + appearance: none; + cursor: pointer; + border: none; + padding: var(--rz-sidebar-toggle-padding); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); + background-color: var(--rz-sidebar-toggle-background-color); + color: var(--rz-sidebar-toggle-color); +} +.rz-justify-content-flex-end .rz-sidebar-toggle { + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; +} +.rz-sidebar-toggle:focus { + outline: none; +} +.rz-sidebar-toggle:focus-visible { + outline: var(--rz-sidebar-toggle-focus-outline); + outline-offset: var(--rz-sidebar-toggle-focus-outline-offset); +} +.rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover { + color: var(--rz-sidebar-toggle-hover-color); + background: var(--rz-sidebar-toggle-hover-background-color); + border-radius: var(--rz-sidebar-toggle-hover-border-radius); +} +.rz-sidebar-toggle .rzi { + width: var(--rz-sidebar-toggle-icon-width); + height: var(--rz-sidebar-toggle-icon-height); + font-size: var(--rz-sidebar-toggle-icon-width); +} + +.rz-navigation-item-link { + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.rz-navigation-item-link:hover { + text-decoration: none; +} + +.rz-navigation-item-text { + flex: auto; +} + +.rz-context-menu { + box-sizing: border-box; +} +.rz-context-menu .rz-menu { + flex-direction: column; +} + +.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { + box-shadow: var(--rz-context-menu-box-shadow); + border: var(--rz-menu-border); + border-radius: var(--rz-menu-border-radius); +} + +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + align-items: stretch; + background-color: var(--rz-menu-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-selected-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + display: none; +} + +.rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + background-color: var(--rz-menu-top-item-background-color); +} +.rz-context-menu .rz-menu:not(.rz-profile-menu) { + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { + color: var(--rz-menu-top-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-top-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-top-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-top-item-selected-color); +} +.rz-menu:not(.rz-profile-menu):focus { + outline: var(--rz-outline-normal); +} +.rz-menu:not(.rz-profile-menu):focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +.rz-menu:not(.rz-profile-menu):focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-menu-item-focus-outline); + outline-offset: var(--rz-menu-item-focus-outline-offset); +} +.rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-end: -2px; + height: 1px; + inset-inline-start: 0; + inset-inline-end: 0; + background-color: var(--rz-menu-top-item-selected-color); + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-item { + position: relative; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + margin: 0; + min-width: 100%; + box-shadow: var(--rz-context-menu-box-shadow); + z-index: 3; + border-radius: var(--rz-menu-border-radius); + background-color: var(--rz-menu-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper { + border-radius: var(--rz-menu-item-border-radius); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-menu-item-hover-background-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-hover-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + white-space: nowrap; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-link .rzi:not(.rz-navigation-item-icon-children) { + color: var(--rz-menu-item-icon-color); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu { + position: static; + box-shadow: none; +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + color: var(--rz-menu-item-color); + margin-inline-start: var(--rz-menu-item-offset); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); +} +.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); +} +.rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { + margin-inline: var(--rz-menu-item-icon-margin-inline); +} + +.rz-navigation-item-wrapper, +.rz-navigation-item-link, +.rz-navigation-item-text { + transition: var(--rz-menu-item-transition); +} + +li.rz-navigation-item.rz-state-disabled { + opacity: var(--rz-menu-item-disabled-opacity); + cursor: initial; + pointer-events: none; +} + +.rz-menu-toggle-item { + display: none; + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); + justify-content: end; + align-items: center; + width: 100%; + height: 100%; +} + +.rz-menu-toggle { + appearance: none; + background-color: transparent; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: var(--rz-menu-top-item-color); +} +.rz-menu-toggle:hover { + background-color: transparent; + color: var(--rz-menu-top-item-hover-color); +} +.rz-menu-toggle:active { + background-color: transparent; + color: var(--rz-menu-top-item-color); +} +.rz-context-menu .rz-menu-toggle { + color: var(--rz-menu-item-color); +} +.rz-context-menu .rz-menu-toggle:hover { + color: var(--rz-menu-item-hover-color); +} +.rz-context-menu .rz-menu-toggle:active { + color: var(--rz-menu-item-color); +} + +@media (max-width: 768px) { + .rz-menu:not(.rz-profile-menu).rz-menu-closed .rz-navigation-item { + display: none; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle .rzi { + margin: 0; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open { + display: block; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-item { + background-color: inherit; + } + .rz-menu:not(.rz-profile-menu).rz-menu-open .rz-navigation-menu { + position: static; + box-shadow: none; + border-radius: 0; + } + .rz-menu:not(.rz-profile-menu) .rz-menu-toggle-item { + display: flex; + } + .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper-active:before { + display: none !important; + } +} +.rz-panel-menu { + box-sizing: border-box; + list-style: none; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; + overflow: auto; + font-size: var(--rz-panel-menu-font-size); + font-weight: var(--rz-panel-menu-font-weight); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ +} +.rz-panel-menu:focus { + outline: var(--rz-outline-normal); +} +.rz-panel-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-panel-menu-focus-outline); + outline-offset: var(--rz-panel-menu-focus-outline-offset); +} +.rz-panel-menu > .rz-navigation-item { + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); +} +.rz-panel-menu .rz-navigation-item { + border-block-end: var(--rz-panel-menu-item-border); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper { + position: relative; + line-height: var(--rz-panel-menu-item-line-height); + transition: var(--rz-panel-menu-item-transition); + border-radius: var(--rz-panel-menu-item-border-radius); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-hover-color); +} +.rz-panel-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-active-background-color); + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-active:before, +.rz-panel-menu .rz-navigation-item-wrapper-active:before { + position: absolute; + content: ""; + inset-block-start: 0; + inset-block-end: 0; + width: 4px; + background-color: var(--rz-panel-menu-item-active-indicator); +} +.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-active-color); +} +.rz-panel-menu .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); + color: inherit; + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu a.rz-navigation-item-link { + cursor: pointer; + text-decoration: none; +} +.rz-panel-menu .rz-navigation-item-text { + flex: auto; +} +.rz-panel-menu .rz-navigation-item-icon-children { + margin-inline-start: auto; + font-size: var(--rz-panel-menu-toggle-icon-font-size); + opacity: var(--rz-panel-menu-toggle-icon-opacity); + z-index: 1; +} +.rz-panel-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-height); + width: var(--rz-panel-menu-icon-width); + color: var(--rz-panel-menu-icon-color); + margin-inline: var(--rz-panel-menu-icon-margin-inline); + font-size: var(--rz-panel-menu-icon-font-size); + transition: var(--rz-panel-menu-item-transition); +} +.rz-panel-menu .rz-navigation-menu { + list-style: none; + padding: 0; + margin-block-end: 0; + overflow: hidden; + /* Third level items */ +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); + border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); + overflow: hidden; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color); + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-hover-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-2nd-level-active-background-color); + color: var(--rz-panel-menu-item-2nd-level-active-color); + font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { + color: var(--rz-panel-menu-item-2nd-level-active-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon { + height: var(--rz-panel-menu-icon-2nd-level-icon-size); + width: var(--rz-panel-menu-icon-2nd-level-icon-size); + font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu { + margin: 0; +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, +.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { + background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); + color: var(--rz-panel-menu-item-3rd-level-active-color); +} + +ul.rz-profile-menu { + box-sizing: border-box; + list-style: none; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); + display: inline-block; + background-color: var(--rz-profile-menu-top-item-background-color); + border-inline-start: var(--rz-profile-menu-border); + position: relative; + z-index: 3; +} +ul.rz-profile-menu:focus { + outline: var(--rz-outline-normal); +} +ul.rz-profile-menu:focus-visible { + outline: var(--rz-menu-item-focus-outline); +} +ul.rz-profile-menu:focus-visible .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper { + outline: var(--rz-profile-menu-item-focus-outline); + outline-offset: var(--rz-profile-menu-item-focus-outline-offset); +} +ul.rz-profile-menu .rz-navigation-item-icon-children { + color: var(--rz-profile-menu-toggle-button-color); +} +ul.rz-profile-menu .rz-navigation-menu { + list-style: none; + overflow: hidden; + position: absolute; + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); + border-radius: var(--rz-profile-menu-border-radius); + background-color: var(--rz-profile-menu-background-color); + box-shadow: var(--rz-context-menu-box-shadow); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; + min-width: 100%; + white-space: nowrap; +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { + background-color: var(--rz-profile-menu-item-hover-background-color); + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { + color: var(--rz-menu-item-hover-color); +} +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link, +ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text { + color: var(--rz-menu-item-color); +} +ul.rz-profile-menu .rz-navigation-menu .rzi { + width: var(--rz-profile-menu-item-icon-width); + height: var(--rz-profile-menu-item-icon-height); + font-size: var(--rz-profile-menu-item-icon-font-size); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); +} + +.rz-gravatar { + box-sizing: border-box; + width: var(--rz-gravatar-width); + height: var(--rz-gravatar-height); + display: inline-block; + border-radius: var(--rz-gravatar-border-radius); + box-shadow: var(--rz-gravatar-box-shadow); +} + +.rz-steps { + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.rz-steps .rz-widget-content { + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.rz-steps ul { + list-style: none; + padding: 0; +} +.rz-steps .rz-menuitem-link { + display: inline-flex; + align-items: center; + color: var(--rz-steps-color); + cursor: pointer; + text-decoration: none; +} +.rz-steps .rz-menuitem-link:hover { + text-decoration: none; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps .rz-state-disabled .rz-menuitem-link { + color: var(--rz-text-disabled-color); + cursor: default; +} +.rz-steps .rz-state-disabled .rz-menuitem-link:hover { + color: var(--rz-text-disabled-color) !important; +} +.rz-steps .rz-state-highlight .rz-steps-title { + color: var(--rz-steps-title-selected-color); +} +.rz-steps .rz-state-highlight .rz-steps-number { + background: var(--rz-steps-number-selected-background); + color: var(--rz-steps-number-selected-color); +} + +.rz-steps-item { + display: inline-block; +} +.rz-steps-item:focus { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible { + outline: var(--rz-outline-normal); +} +.rz-steps-item:focus-visible .rz-steps-number { + outline: var(--rz-steps-number-focus-outline); + outline-offset: var(--rz-steps-number-focus-outline-offset); +} + +.rz-steps-title { + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); +} + +.rz-steps-number { + text-align: center; + line-height: var(--rz-steps-number-line-height); + color: var(--rz-steps-number-color); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); + width: var(--rz-steps-number-width); + height: var(--rz-steps-number-height); + background-color: var(--rz-steps-number-background-color); + border-radius: var(--rz-steps-number-border-radius); +} + +.rz-steps-buttons { + display: flex; + justify-content: space-between; + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); +} + +.rz-steps-next, +.rz-steps-prev { + display: inline-flex; + align-items: center; + color: var(--rz-steps-button-color) !important; + text-decoration: none; +} +.rz-steps-next:not(.rz-state-disabled):hover, +.rz-steps-prev:not(.rz-state-disabled):hover { + cursor: pointer; + color: var(--rz-steps-title-selected-color) !important; +} +.rz-steps-next:hover, +.rz-steps-prev:hover { + text-decoration: none; +} +.rz-steps-next.rz-state-disabled, +.rz-steps-prev.rz-state-disabled { + opacity: 0.5 !important; +} + +.rz-steps-prev .rzi:before { + content: "navigate_before"; +} + +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; +} + +.rz-textarea { + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); + height: auto; +} + +.rz-checkbox-list-vertical { + box-sizing: border-box; +} +.rz-checkbox-list-vertical .rz-checkbox { + display: flex; + align-items: center; + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); + cursor: pointer; +} + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} +.rz-checkbox-list-horizontal .rz-checkbox { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-checkbox { + cursor: initial; +} + +.rz-chkbox-label, +.rz-chkbox-template { + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); +} + +.rz-chkbox { + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + width: var(--rz-checkbox-width); + min-width: var(--rz-checkbox-width); + height: var(--rz-checkbox-height); +} +.rz-chkbox:focus { + outline: var(--rz-outline-normal); +} +.rz-chkbox:focus-visible .rz-chkbox-box { + outline: var(--rz-checkbox-focus-outline); + outline-offset: var(--rz-checkbox-focus-outline-offset); +} + +.rz-chkbox-box { + position: absolute; + cursor: pointer; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: var(--rz-input-border); + border-width: var(--rz-checkbox-border-width); + border-radius: var(--rz-checkbox-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-chkbox-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-checkbox-border-width); +} +.rz-chkbox-box.rz-state-disabled { + cursor: initial; + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-checkbox-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-chkbox-box .rzi { + width: var(--rz-checkbox-icon-width); + height: var(--rz-checkbox-icon-height); + font-size: var(--rz-checkbox-icon-font-size); + color: var(--rz-checkbox-checked-color); + vertical-align: middle; + background-color: var(--rz-checkbox-checked-icon-background-color); + border-radius: var(--rz-checkbox-checked-icon-border-radius); +} +.rz-chkbox-box .rzi-check:before { + content: "check"; +} +.rz-chkbox-box .rzi-times { + width: var(--rz-checkbox-tri-icon-width); + height: var(--rz-checkbox-tri-icon-height); + font-size: var(--rz-checkbox-tri-icon-font-size); +} +.rz-chkbox-box .rzi-times:before { + content: "remove"; +} +.rz-chkbox-box.rz-state-active { + background-color: var(--rz-checkbox-checked-background-color); + border: var(--rz-checkbox-checked-border); +} +.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-checkbox-checked-hover-background-color); + border: var(--rz-checkbox-checked-hover-border); +} +.rz-chkbox-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-checkbox-checked-disabled-background-color); + border: var(--rz-checkbox-checked-disabled-border); + opacity: 0.5; +} + +.rz-switch { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: middle; + width: 3rem; + min-width: 3rem; + height: 1.8rem; + border-radius: calc(5 * var(--rz-border-radius)); +} +.rz-switch:focus { + outline: var(--rz-outline-normal); +} +.rz-switch:focus-visible { + outline: var(--rz-switch-focus-outline); + outline-offset: var(--rz-switch-focus-outline-offset); +} + +.rz-switch-circle { + position: absolute; + cursor: pointer; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; +} + +.rz-switch-circle.rz-disabled { + opacity: 0.5; + cursor: initial; +} + +.rz-switch .rz-switch-circle { + background: var(--rz-switch-background-color); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: calc(5 * var(--rz-border-radius)); +} + +.rz-switch.rz-switch-checked .rz-switch-circle { + background: var(--rz-switch-checked-background-color); +} + +.rz-switch .rz-switch-circle:before { + background: var(--rz-switch-circle-background-color); + width: 1.26rem; + height: 1.26rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; + border-radius: calc(5 * var(--rz-border-radius) - 3px); + transition: transform 0.2s linear; + box-shadow: var(--rz-switch-box-shadow); +} + +.rz-switch-circle:before { + position: absolute; + content: ""; + inset-block-start: 50%; +} + +.rz-switch-circle.rz-disabled:before { + box-shadow: none; +} + +.rz-switch.rz-switch-checked .rz-switch-circle:before { + background: var(--rz-switch-checked-circle-background-color); + transform: translateX(1.2rem); +} + +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); +} + +.rz-radio-button-list-vertical { + box-sizing: border-box; +} +.rz-radio-button-list-vertical .rz-radio-btn { + display: flex; + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); + align-items: center; +} + +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} +.rz-radio-button-list-horizontal .rz-radio-btn { + display: inline-flex; + align-items: center; +} + +.rz-state-disabled .rz-radiobutton { + cursor: initial; +} + +.rz-radiobutton-label, +.rz-radiobutton-template { + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); +} + +.rz-radiobutton { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + width: var(--rz-radio-width); + height: var(--rz-radio-height); + border-radius: var(--rz-radio-border-radius); +} +.rz-radiobutton:focus { + outline: var(--rz-outline-normal); +} +.rz-radiobutton:focus-visible { + outline: var(--rz-radio-focus-outline); + outline-offset: var(--rz-radio-focus-outline-offset); +} + +.rz-radiobutton-box { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + width: inherit; + border: var(--rz-input-border); + border-width: var(--rz-radio-border-width); + border-radius: var(--rz-radio-border-radius); + box-shadow: var(--rz-input-shadow); + background-color: var(--rz-input-background-color); + transition: var(--rz-transition-all); +} +.rz-radiobutton-box:hover:not(.rz-state-disabled) { + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box:active:not(.rz-state-disabled) { + background-color: var(--rz-radio-active-background-color); + box-shadow: var(--rz-radio-active-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-disabled { + cursor: initial; + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + border-width: var(--rz-radio-border-width); + opacity: var(--rz-input-disabled-opacity); +} +.rz-radiobutton-box .rzi { + width: var(--rz-radio-icon-width); + height: var(--rz-radio-icon-height); + color: var(--rz-radio-checked-color); +} +.rz-radiobutton-box .rzi-circle-on { + border-radius: var(--rz-radio-border-radius); + vertical-align: middle; + background-color: var(--rz-radio-circle-background-color); + box-shadow: var(--rz-radio-circle-shadow); +} +.rz-radiobutton-box .rzi-circle-on:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-circle-hover-background-color); +} +.rz-radiobutton-box.rz-state-active { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) { + background-color: var(--rz-radio-checked-hover-background-color); + border: var(--rz-radio-checked-border); + box-shadow: var(--rz-radio-checked-hover-shadow); + border-width: var(--rz-radio-border-width); +} +.rz-radiobutton-box.rz-state-active.rz-state-disabled { + background-color: var(--rz-radio-checked-background-color); + border: var(--rz-radio-checked-border); + border-width: var(--rz-radio-border-width); + opacity: 0.5; +} + +.rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; + border: var(--rz-fieldset-border); + border-radius: var(--rz-fieldset-border-radius); +} + +.rz-fieldset-content { + padding: var(--rz-fieldset-padding); +} + +.rz-fieldset-content-wrapper { + overflow: hidden; +} + +.rz-fieldset-legend-text { + vertical-align: middle; +} + +.rz-fieldset-toggler { + vertical-align: middle; + width: var(--rz-fieldset-toggle-width); + height: var(--rz-fieldset-toggle-height); + background-color: var(--rz-fieldset-toggle-background-color); + color: var(--rz-fieldset-toggle-color); + border: var(--rz-fieldset-toggle-border); +} +.rz-fieldset-toggler.rzi { + text-align: center; + font-size: var(--rz-fieldset-toggle-font-size); + line-height: var(--rz-fieldset-toggle-height); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); +} +.rz-fieldset-toggler.rzi-minus:before { + content: "remove"; +} +.rz-fieldset-toggler.rzi-plus:before { + content: "add"; +} +a:focus .rz-fieldset-toggler { + outline: var(--rz-outline-normal); +} +a:focus-visible .rz-fieldset-toggler { + outline: var(--rz-fieldset-toggle-focus-outline); + outline-offset: var(--rz-fieldset-toggle-focus-outline-offset); +} + +.rz-fieldset-legend { + float: none; + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); + width: auto; + color: var(--rz-fieldset-legend-color); + font-size: var(--rz-fieldset-legend-font-size); +} +.rz-fieldset-legend a { + display: inline-flex; + align-items: center; + color: inherit; + text-decoration: none; +} +.rz-fieldset-legend a:focus { + outline: var(--rz-outline-normal); +} + +.rz-multiselect, .rz-dropdown { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + position: relative; + overflow: hidden; + text-align: start; +} +.rz-multiselect .rz-placeholder, .rz-dropdown .rz-placeholder { + color: var(--rz-input-placeholder-color); +} + +.rz-dropdown.rz-dropdown-open { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect.rz-state-focus { + background-color: var(--rz-dropdown-open-background-color); + border: var(--rz-dropdown-open-border); +} + +.rz-multiselect-trigger, .rz-dropdown-trigger { + position: absolute; + display: flex; + align-items: center; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; +} +.rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { + width: var(--rz-dropdown-trigger-icon-width); + height: var(--rz-dropdown-trigger-icon-height); + font-size: var(--rz-dropdown-trigger-icon-height); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); +} +.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-dropdown-clear-icon { + position: absolute; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; + height: 100%; + display: flex; + align-items: center; + font-size: var(--rz-dropdown-trigger-icon-height); + opacity: 0.4; +} +.rz-dropdown-clear-icon:before { + content: "close"; +} +.rz-dropdown-clear-icon:hover { + opacity: 1; +} +.rz-state-disabled > .rz-dropdown-clear-icon { + display: none; +} + +.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel { + position: absolute; + background-color: var(--rz-dropdown-open-background-color); + border-radius: var(--rz-input-border-radius); + border: var(--rz-dropdown-panel-border); + box-shadow: var(--rz-dropdown-panel-shadow); +} + +.rz-dropdown-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} + +.rz-multiselect-panel { + box-sizing: content-box; + padding: var(--rz-dropdown-panel-padding); +} +.rz-multiselect-panel .rz-chkbox { + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); +} + +.rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { + list-style: none; + padding: var(--rz-dropdown-items-padding); + margin: 0; +} +.rz-autocomplete-items li, .rz-multiselect-items li, .rz-dropdown-items li { + /* The 'No results found' item has no CSS class */ +} + +.rz-dropdown-items-wrapper, +.rz-multiselect-items-wrapper { + overflow: auto; + margin: var(--rz-dropdown-items-margin); + border-radius: var(--rz-input-border-radius); +} + +.rz-multiselect-items-wrapper { + overflow: auto; +} + +.rz-dropdown-filter-container { + padding: var(--rz-dropdown-filter-padding); + border-bottom: var(--rz-dropdown-filter-border); +} + +.rz-multiselect-filter-container .rz-inputtext, .rz-dropdown-filter { + background-color: transparent; + color: var(--rz-text-color); +} + +.rz-multiselect-header { + display: flex; + align-items: center; + padding: var(--rz-dropdown-item-padding); + margin: var(--rz-dropdown-items-margin); +} + +.rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-autocomplete-items li, .rz-dropdown-items li, .rz-multiselect-items li, .rz-dropdown-item { + padding: var(--rz-dropdown-item-padding); + transition: var(--rz-dropdown-item-transition); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-state-highlight.rz-menuitem:hover, .rz-state-highlight.rz-autocomplete-list-item:hover, .rz-state-highlight.rz-multiselect-item:hover, .rz-autocomplete-items li.rz-state-highlight:hover, .rz-dropdown-items li.rz-state-highlight:hover, .rz-multiselect-items li.rz-state-highlight:hover, .rz-dropdown-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-state-disabled.rz-menuitem, .rz-state-disabled.rz-autocomplete-list-item, .rz-state-disabled.rz-multiselect-item, .rz-autocomplete-items li.rz-state-disabled, .rz-dropdown-items li.rz-state-disabled, .rz-multiselect-items li.rz-state-disabled, .rz-dropdown-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} +.rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-autocomplete-items li:hover, .rz-dropdown-items li:hover, .rz-multiselect-items li:hover, .rz-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} + +.rz-multiselect-close { + display: none; +} + +.rz-multiselect-filter-container { + flex: auto; + border-bottom: var(--rz-dropdown-filter-border); +} +.rz-multiselect-filter-container .rz-inputtext { + padding: 0; +} + +.rz-multiselect-item { + display: flex; + align-items: center; +} + +.rz-multiselect-item-content { + flex: 1; +} + +.rz-multiselect-label-container, +.rz-dropdown-label { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); + margin: 0; +} + +.rz-dropdown-chips { + height: inherit; + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); +} +.rz-dropdown-chips .rz-dropdown-chips-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-inline-end: 3rem; +} +.rz-dropdown-chips .rz-chip { + box-sizing: border-box; + display: inline-flex; + align-items: center; + gap: var(--rz-chip-gap); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); + color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); + border-radius: var(--rz-chip-border-radius); +} +.rz-dropdown-chips .rz-chip .rz-chip-text { + font-size: var(--rz-chip-font-size); +} +.rz-dropdown-chips .rz-chip .rz-button { + border-radius: var(--rz-chip-border-radius); + box-shadow: none; + align-self: stretch; +} +.rz-dropdown-chips .rz-chip .rzi { + vertical-align: middle; + font-size: 1rem; +} + +.rz-clear .rz-multiselect-label-container, +.rz-clear .rz-dropdown-label { + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); +} + +.rz-autocomplete { + box-sizing: border-box; + display: inline-block; + border: var(--rz-input-border); + border-radius: var(--rz-input-border-radius); + background-color: var(--rz-input-background-color); + transition: var(--rz-input-transition); + overflow: hidden; +} +.rz-autocomplete-input { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + background-color: transparent; + color: var(--rz-input-value-color); + box-shadow: var(--rz-input-shadow); + border: none; + height: var(--rz-input-height); + line-height: var(--rz-input-line-height); + width: 100%; + transition: var(--rz-input-transition); +} +.rz-autocomplete-input:focus { + outline: none; +} +.rz-autocomplete-input:disabled { + border: none; +} + +.rz-autocomplete-panel { + overflow: auto; + box-sizing: content-box; +} + +.rz-listbox { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + overflow: hidden; + background-color: var(--rz-listbox-background-color); + border: var(--rz-listbox-border); + border-radius: var(--rz-listbox-border-radius); + text-align: start; +} +.rz-listbox .rz-chkbox { + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); +} +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-listbox:focus, .rz-listbox:focus-within { + outline: var(--rz-outline-normal); + border: var(--rz-listbox-focus-border); + box-shadow: var(--rz-listbox-focus-shadow); +} + +.rz-listbox-list { + margin: 0; + padding: 0; +} + +.rz-listbox-item { + cursor: default; + padding: var(--rz-listbox-item-padding); + margin: var(--rz-listbox-item-margin); + cursor: default; + font-size: var(--rz-dropdown-item-font-size); +} +.rz-listbox-item.rz-state-highlight { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); + box-shadow: var(--rz-dropdown-item-selected-shadow); + border-radius: 0; +} +.rz-listbox-item.rz-state-highlight:hover { + background-color: var(--rz-dropdown-item-selected-hover-background-color); + color: var(--rz-dropdown-item-selected-hover-color); +} +.rz-listbox-item.rz-state-disabled { + opacity: var(--rz-dropdown-item-disabled-opacity); + cursor: initial; +} + +.rz-listbox-header { + display: flex; + align-items: center; + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); + border-bottom: var(--rz-listbox-filter-border); +} + +.rz-listbox-list-wrapper { + flex: auto; + overflow: auto; + padding: var(--rz-listbox-padding); +} + +.rz-listbox-filter-container, .rz-dropdown-filter-container, .rz-multiselect-filter-container { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.rz-listbox-filter-container .rz-inputtext, .rz-dropdown-filter-container .rz-inputtext, .rz-multiselect-filter-container .rz-inputtext { + flex: auto; + width: 0; + border: none; + line-height: var(--rz-input-line-height); +} +.rz-listbox-filter-container .rz-inputtext:focus, .rz-dropdown-filter-container .rz-inputtext:focus, .rz-multiselect-filter-container .rz-inputtext:focus { + outline: none; +} +.rz-listbox-filter-container .rzi-search, .rz-dropdown-filter-container .rzi-search, .rz-multiselect-filter-container .rzi-search { + width: var(--rz-listbox-header-icon-width); + height: var(--rz-listbox-header-icon-height); + line-height: var(--rz-listbox-header-icon-height); + font-size: var(--rz-listbox-header-icon-height); +} +.rz-listbox-filter-container .rzi-search:before, .rz-dropdown-filter-container .rzi-search:before, .rz-multiselect-filter-container .rzi-search:before { + content: "search"; +} + +.rz-listbox-filter-container { + flex: auto; +} +.rz-listbox-filter-container .rz-inputtext { + background-color: transparent; +} + +.rz-splitbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { + display: none; +} +.rz-splitbutton .rz-button.rz-splitbutton-menubutton { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { + flex: auto; + overflow: hidden; + text-overflow: ellipsis; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.rz-splitbutton-menu { + display: none; + position: absolute; + min-width: var(--rz-splitbutton-menu-min-width); + box-shadow: var(--rz-splitbutton-menu-shadow); +} + +.rz-menu-list { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-menuitem .rz-menuitem-link { + color: inherit; + display: block; + text-decoration: none; +} +.rz-menuitem .rz-menuitem-link:hover { + text-decoration: none; +} +.rz-menuitem .rz-menuitem-icon { + vertical-align: top; +} + +.rz-splitbutton-menubutton { + margin-inline-start: 1px; +} +.rz-splitbutton-menubutton.rz-variant-outlined { + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); +} +.rz-splitbutton-menubutton .rz-button-text { + display: none; +} +.rz-splitbutton-menubutton .rzi-chevron-down:before { + content: "arrow_drop_down"; +} + +.rz-slider { + box-sizing: border-box; + position: relative; + display: inline-block; + border: var(--rz-slider-border); + border-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-background-color); +} +.rz-slider.rz-state-disabled { + background-color: var(--rz-slider-disabled-background-color); + border: var(--rz-slider-disabled-border); +} +.rz-slider.rz-state-disabled .rz-slider-range { + background-color: var(--rz-slider-disabled-range-background-color); + border: var(--rz-slider-disabled-range-border); +} +.rz-slider.rz-state-disabled .rz-slider-handle { + background-color: var(--rz-slider-disabled-handle-background-color); + border: var(--rz-slider-disabled-handle-border); +} + +.rz-slider-horizontal { + height: var(--rz-slider-horizontal-height); + width: var(--rz-slider-horizontal-width); +} + +.rz-slider-range { + position: absolute; + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); + background-color: var(--rz-slider-range-background-color); + border: var(--rz-slider-range-border); +} + +.rz-slider-handle { + position: absolute; + transform: translateY(-50%); + top: 50%; + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); + background-color: var(--rz-slider-handle-background-color); + border: var(--rz-slider-handle-border); + border-radius: var(--rz-slider-handle-border-radius); + box-shadow: var(--rz-slider-handle-shadow); + width: var(--rz-slider-handle-width); + height: var(--rz-slider-handle-height); + transition: var(--rz-slider-handle-transition); +} + +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:hover, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus, .rz-slider:not(.rz-state-disabled) .rz-slider-handle:active { + background-color: var(--rz-slider-handle-hover-background-color); + box-shadow: var(--rz-slider-handle-hover-shadow); + border: var(--rz-slider-handle-hover-border); + cursor: pointer; + outline: none; +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus { + outline: var(--rz-outline-normal); +} +.rz-slider:not(.rz-state-disabled) .rz-slider-handle:focus-visible { + outline: var(--rz-slider-handle-focus-outline); + outline-offset: var(--rz-slider-handle-focus-outline-offset); +} + +.rz-rating { + box-sizing: border-box; + display: inline-flex; + font-size: var(--rz-rating-font-size); + height: 1em; +} +.rz-rating.rz-state-disabled .rzi { + opacity: var(--rz-rating-disabled-opacity); + color: var(--rz-rating-disabled-color); +} +.rz-rating a { + width: 1em; + height: 1em; + text-decoration: none; + cursor: default; + outline: none; +} +.rz-rating .rzi { + color: var(--rz-rating-color); + font-size: 1em; +} +.rz-rating .rzi-ban { + color: var(--rz-rating-ban-icon-color); +} +.rz-rating .rzi-ban:before { + content: "highlight_off"; +} +.rz-rating .rzi-star-o { + opacity: var(--rz-rating-opacity); +} +.rz-rating .rzi-star-o:before { + content: "star_border"; +} +.rz-rating .rzi-star { + color: var(--rz-rating-selected-color); +} +.rz-rating .rzi-star:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover { + cursor: pointer; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-ban { + color: var(--rz-rating-selected-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:hover .rzi-star-o:before { + content: "star"; +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o, +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-ban { + color: var(--rz-rating-focus-color); +} +.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) a:focus-visible .rzi-star-o:before { + content: "star"; +} + +.rz-security-code { + box-sizing: border-box; + display: inline-flex; +} + +.rz-security-code-wrapper { + flex: 1; + --rz-gap: 0.5rem; +} + +.rz-security-code-input { + text-align: center; + min-width: var(--rz-security-code-input-min-width); + min-height: var(--rz-security-code-input-min-height); + width: 100%; + height: 100%; + padding: var(--rz-security-code-input-padding); + font-size: var(--rz-security-code-input-font-size); + font-weight: var(--rz-security-code-input-font-weight); + line-height: var(--rz-security-code-input-line-height); +} + +.rz-selectbutton { + box-sizing: border-box; + display: inline-flex; +} +.rz-selectbutton .rz-button:focus-visible { + z-index: 1; +} + +.rz-selectbutton .rz-button.rz-button-xs { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-xs:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-xs.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-sm { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-sm:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-sm.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-md { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-md:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-md.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-selectbutton .rz-button.rz-button-lg { + margin-inline-start: -1px; + display: inline-block; + background-color: var(--rz-selectbar-background-color); + color: var(--rz-selectbar-color); + border: var(--rz-selectbar-border); + border-radius: 0; +} +.rz-selectbutton .rz-button.rz-button-lg:first-child { + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg:last-child { + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); +} +.rz-selectbutton .rz-button.rz-button-lg.rz-state-active { + background-color: var(--rz-selectbar-selected-background-color); + color: var(--rz-selectbar-selected-color); + border: var(--rz-selectbar-selected-border); +} + +.rz-datepicker { + display: inline-block; + position: relative; +} +.rz-datepicker .rz-readonly { + cursor: pointer; +} +.rz-datepicker > .rz-inputtext { + width: 100%; + line-height: var(--rz-datepicker-line-height); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); +} +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { + box-shadow: none; + color: var(--rz-datepicker-trigger-icon-hover-color); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); + background-color: var(--rz-input-disabled-background-color); + border: var(--rz-input-disabled-border); + opacity: var(--rz-input-disabled-opacity); +} +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} + +.rz-datepicker-inline { + background-color: var(--rz-datepicker-panel-background-color); + border: var(--rz-input-border); +} + +.rz-datepicker-trigger { + box-shadow: none; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 0.625rem; + transform: translateY(-50%); + background-color: transparent; + padding: 0; + vertical-align: text-top; + color: var(--rz-datepicker-trigger-icon-color); + width: var(--rz-datepicker-trigger-icon-width); + height: var(--rz-datepicker-trigger-icon-height); + font-size: var(--rz-datepicker-trigger-icon-height); +} +.rz-datepicker-trigger.rz-state-disabled { + border: none; + box-shadow: none; + cursor: initial; + opacity: 1; + color: var(--rz-input-disabled-color); +} +.rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active), .rz-datepicker-trigger:not(.rz-state-disabled):hover:active { + background-color: transparent; +} +.rz-datepicker-trigger:not(.rz-state-disabled):active { + box-shadow: none !important; + background-image: none !important; +} +.rz-datepicker-trigger .rzi-calendar, +.rz-datepicker-trigger .rzi-time { + font-size: inherit; + vertical-align: top; +} +.rz-datepicker-trigger .rzi-calendar:before { + content: "calendar_today"; +} +.rz-datepicker-trigger .rzi-time:before { + content: "schedule"; +} +.rz-datepicker-trigger .rz-button-text { + display: none; +} + +.rz-datepicker-popup-container { + box-sizing: content-box; + position: absolute; + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); + box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); +} + +.rz-datepicker-inline-container { + position: static; + white-space: nowrap; +} +.rz-datepicker-inline-container .rz-calendar { + display: inline-block; +} + +.rz-datepicker-footer { + position: relative; + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--rz-datepicker-header-background-color); + border-bottom: var(--rz-datepicker-header-border); + color: var(--rz-datepicker-header-color); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); +} + +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); +} +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { + color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); +} +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); +} + +.rz-calendar-prev { + order: 1; +} +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; +} +.rz-calendar-next .rz-calendar-next-icon:before { + content: "chevron_right"; +} + +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); +} + +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { + outline: var(--rz-outline-normal); +} +.rz-calendar-view-container:focus-visible { + outline: var(--rz-datepicker-focus-outline); + outline-offset: var(--rz-datepicker-focus-outline-offset); +} + +.rz-calendar-view { + table-layout: fixed; + border-collapse: collapse; +} +.rz-calendar-view th { + font-weight: normal; + font-size: var(--rz-datepicker-calendar-header-font-size); + text-transform: var(--rz-datepicker-calendar-header-text-transform); + color: var(--rz-datepicker-calendar-header-color); + padding: var(--rz-datepicker-calendar-item-padding); + text-align: center; +} +.rz-calendar-view td { + text-align: center; + border-top: var(--rz-datepicker-calendar-border); + padding: 0; +} +.rz-calendar-view td .rz-state-default { + display: block; + padding: var(--rz-datepicker-calendar-item-padding); + color: var(--rz-datepicker-calendar-color); + font-size: var(--rz-datepicker-calendar-font-size); + border-radius: var(--rz-datepicker-calendar-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-calendar-view td .rz-state-default.rz-calendar-today { + color: var(--rz-datepicker-calendar-today-color); + background-color: var(--rz-datepicker-calendar-today-background-color); + box-shadow: var(--rz-datepicker-calendar-today-box-shadow); + border-radius: var(--rz-datepicker-calendar-today-border-radius); +} +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { + text-decoration: none; + color: var(--rz-datepicker-calendar-hover-color); + background-color: var(--rz-datepicker-calendar-hover-background-color); + cursor: pointer; +} +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { + color: var(--rz-datepicker-calendar-selected-color); + background-color: var(--rz-datepicker-calendar-selected-background-color); + padding: var(--rz-datepicker-calendar-item-padding); + box-shadow: none; +} +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { + color: var(--rz-datepicker-calendar-selected-hover-color); + background-color: var(--rz-datepicker-calendar-selected-hover-background-color); +} +.rz-calendar-view .rz-state-disabled { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-other-month { + opacity: 0.5; +} +.rz-calendar-view .rz-calendar-week-number { + opacity: 0.5; +} + +/* Time Picker Styles */ +.rz-timepicker { + display: flex; + align-items: center; + justify-content: center; + gap: var(--rz-timepicker-gap); + border-top: var(--rz-datepicker-calendar-border); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); + color: var(--rz-timepicker-color); +} +.rz-timepicker .rzi-chevron-up:before { + content: "expand_less"; +} +.rz-timepicker .rzi-chevron-down:before { + content: "expand_more"; +} +.rz-timepicker .rz-separator { + color: var(--rz-timepicker-separator-color); +} +.rz-timepicker .rz-separator a { + display: none; +} +.rz-timepicker .rz-button-md { + padding: var(--rz-timepicker-button-padding); + text-transform: uppercase; +} + +.rz-hour-picker, +.rz-minute-picker, +.rz-second-picker { + background-color: var(--rz-timepicker-background-color); + width: 4rem; +} + +.rz-ampm-picker a { + text-decoration: none; +} + +.rz-numeric { + display: inline-block; + position: relative; + padding: 0px; +} +.rz-numeric input[type=number], +.rz-numeric input[type=text] { + -moz-appearance: textfield; + width: 100%; + height: 100%; + border: none; + background-color: transparent; + line-height: var(--rz-numeric-line-height); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); + outline: none; +} +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.rz-numeric.rz-state-disabled .rz-numeric-button { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); +} +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { + background-color: var(--rz-numeric-button-disabled-background-color); + color: var(--rz-numeric-button-disabled-color); + background-image: none; + box-shadow: none; + cursor: initial; +} + +.rz-numeric-button { + position: absolute; + inset-inline-end: var(--rz-numeric-button-offset); + padding: 0; + width: var(--rz-numeric-button-width); + height: var(--rz-numeric-button-height); + border-radius: var(--rz-numeric-button-border-radius); + background-color: var(--rz-numeric-button-background-color); + color: var(--rz-numeric-button-color); +} +.rz-numeric-button:hover { + background-color: var(--rz-numeric-button-background-color); +} +.rz-numeric-button .rzi { + font-size: var(--rz-numeric-button-height); + vertical-align: top; +} +.rz-numeric-button .rzi-caret-up:before { + content: "expand_less"; +} +.rz-numeric-button .rzi-caret-down:before { + content: "expand_more"; +} + +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); +} + +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); +} + +.rz-fileupload { + box-sizing: border-box; + display: inline-block; +} +.rz-fileupload .rz-button { + vertical-align: middle; + -webkit-appearance: none !important; +} + +.rz-fileupload-choose { + position: relative; + display: inline-block; + overflow: hidden; + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose input[type=file] { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + min-height: 100%; + cursor: pointer; +} +.rz-fileupload-choose.rz-state-disabled input[type=file] { + cursor: default; +} +.rz-fileupload-choose:not(.rz-state-disabled) { + background-color: var(--rz-upload-choose-background-color); + color: var(--rz-upload-choose-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) { + background-color: var(--rz-upload-choose-hover-background-color); + color: var(--rz-upload-choose-hover-color); +} +.rz-fileupload-choose:not(.rz-state-disabled):active { + background-color: var(--rz-upload-choose-active-background-color); + color: var(--rz-upload-choose-active-color); +} + +.rz-fileupload-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.rz-fileupload-row > div { + margin: var(--rz-upload-files-margin); +} +.rz-fileupload-row .rz-button-text { + display: none; +} +.rz-fileupload-row .rz-button { + background-color: var(--rz-upload-files-remove-background-color); + color: var(--rz-upload-files-remove-color); +} +.rz-fileupload-row .rz-button .rzi-close, +.rz-fileupload-row .rz-button .rzi-times, +.rz-fileupload-row .rz-button .rz-icon-trash { + display: block; +} +.rz-fileupload-row .rz-button .rzi-close:before, +.rz-fileupload-row .rz-button .rzi-times:before, +.rz-fileupload-row .rz-button .rz-icon-trash:before { + content: "close"; +} + +.rz-fileupload-buttonbar { + position: relative; + background-color: var(--rz-upload-button-bar-background-color); + padding: var(--rz-upload-button-bar-padding); + border-radius: var(--rz-upload-button-bar-border-radius); +} +.rz-fileupload-buttonbar .rz-button:nth-child(3) { + float: right; + background-color: var(--rz-upload-cancel-background-color); + color: var(--rz-upload-cancel-color); +} + +.rz-fileupload-files { + background-color: var(--rz-upload-files-background-color); + padding: var(--rz-upload-files-padding); +} + +.rz-datatable { + position: relative; + box-shadow: var(--rz-grid-shadow); + border: var(--rz-grid-cell-border); + border-radius: var(--rz-grid-border-radius); + background-color: var(--rz-grid-background-color); + overflow: hidden; +} +.rz-datatable:focus { + outline: var(--rz-outline-normal); +} +.rz-datatable:focus-visible { + outline: var(--rz-grid-focus-outline); + outline-offset: var(--rz-grid-focus-outline-offset); +} +.rz-datatable .rz-col-icon { + text-align: center; + vertical-align: middle; + width: var(--rz-grid-column-icon-width); + padding: var(--rz-grid-column-icon-padding); +} +.rz-datatable .rzi-chevron-circle-right { + vertical-align: top; + /* Right-to-left arrow icons */ +} +.rz-datatable .rzi-chevron-circle-right:before { + content: "arrow_right"; +} +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} +.rz-datatable .rzi-chevron-circle-down { + vertical-align: top; +} +.rz-datatable .rzi-chevron-circle-down:before { + content: "arrow_drop_down"; +} +.rz-datatable.rz-has-template > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view > .rz-datatable-scrollable-body > .rz-datatable-scrollable-table-wrapper > table > .rz-datatable-scrollable-colgroup col:first-child { + width: var(--rz-grid-column-icon-width); +} + +.rz-unselectable-text { + user-select: none; +} + +.rz-datatable-tablewrapper > table, +.rz-datatable-scrollable-header-box > table, +.rz-datatable-scrollable-table-wrapper > table, +.rz-datatable-scrollable-footer-box > table { + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +.rz-resizable-column { + position: relative; +} + +.rz-datatable-reorder-indicator-up { + position: absolute; +} +.rz-datatable-reorder-indicator-up:before { + content: "arrow_drop_down"; +} + +.rz-datatable-reorder-indicator-down { + position: absolute; +} +.rz-datatable-reorder-indicator-down:before { + content: "arrow_drop_up"; +} + +.rz-column-resizer { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + cursor: col-resize; + width: var(--rz-grid-column-resizer-width); +} +.rz-column-resizer:after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + height: 100%; + width: var(--rz-grid-column-resizer-helper-width); + background-color: transparent; +} +.rz-column-resizer:hover:after, .rz-column-resizer:active:after { + background-color: var(--rz-grid-column-resizer-helper-background-color); +} + +.rz-rowgroup-header .fa, +.rz-row-toggler { + color: var(--rz-grid-cell-color); +} + +.rz-datatable-scrollable-footer { + background-color: var(--rz-grid-header-background-color); + border-top: var(--rz-grid-cell-border); +} + +.rz-datatable-thead th, +.rz-grid-table thead th { + background-color: var(--rz-grid-header-background-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: inherit; + border-bottom: var(--rz-grid-header-cell-border-bottom); +} +.rz-datatable-thead th:not(:last-child), +.rz-grid-table thead th:not(:last-child) { + border-inline-end: var(--rz-grid-header-cell-border); +} +.rz-datatable-thead th > div:not(.rz-cell-filter), +.rz-grid-table thead th > div:not(.rz-cell-filter) { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + outline: none; + padding: var(--rz-grid-header-cell-padding); +} +.rz-datatable-thead th.rz-state-focused, +.rz-grid-table thead th.rz-state-focused { + outline: var(--rz-grid-cell-focus-outline); + outline-offset: var(--rz-grid-cell-focus-outline-offset); +} +.rz-datatable-thead th .rz-column-title, +.rz-grid-table thead th .rz-column-title { + display: inline-flex; + flex: auto; + align-items: center; + gap: 0.25rem; + width: 100%; + font-size: var(--rz-grid-header-font-size); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding-inline: var(--rz-grid-header-title-padding-inline); + font-weight: var(--rz-grid-header-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content, +.rz-grid-table thead th .rz-column-title-content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-thead th .rz-column-title-content:has(.rz-chkbox), +.rz-grid-table thead th .rz-column-title-content:has(.rz-chkbox) { + overflow: visible; +} +.rz-datatable-thead th.rz-text-align-center .rz-column-title, +.rz-grid-table thead th.rz-text-align-center .rz-column-title { + justify-content: center; + padding-inline-start: 0; +} +.rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th.rz-text-align-right .rz-column-title, +.rz-grid-table thead th.rz-text-align-right .rz-column-title { + justify-content: right; +} +.rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, +.rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { + padding-inline-start: var(--rz-grid-sort-icon-width); +} +.rz-datatable-thead th .rz-column-drag + .rz-column-title, +.rz-grid-table thead th .rz-column-drag + .rz-column-title { + padding-inline-start: 0; +} + +.rz-datatable-tfoot td, .rz-grid-table tfoot td { + background-color: var(--rz-grid-foot-background-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + color: var(--rz-grid-foot-cell-color); + padding: var(--rz-grid-cell-padding); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} + +.rz-datatable-scrollable-header { + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-datatable-scrollable-body { + overflow: auto; + border-top: none; + flex: auto; + border-bottom-right-radius: var(--rz-border-radius); + border-bottom-left-radius: var(--rz-border-radius); +} + +.rz-has-pager .rz-datatable-scrollable-body { + border-radius: 0; +} + +.rz-sortable-column { + cursor: pointer; +} +.rz-sortable-column:focus { + outline: none; +} +.rz-sortable-column.rz-state-active { + background-color: var(--rz-grid-header-sorted-background-color); +} +.rz-sortable-column > div:hover .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) { + color: var(--rz-grid-sort-icon-color); +} +.rz-sortable-column .rzi-grid-sort { + width: var(--rz-grid-sort-icon-width); + height: var(--rz-grid-sort-icon-height); + font-size: var(--rz-grid-sort-icon-height); + text-align: left; +} +.rz-sortable-column .rzi-sort { + color: transparent; +} +.rz-sortable-column .rzi-sort:before { + content: "sort"; +} +.rz-sortable-column .rzi-sort-asc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-asc:before { + content: "arrow_drop_up"; +} +.rz-sortable-column .rzi-sort-desc { + color: var(--rz-grid-header-color); +} +.rz-sortable-column .rzi-sort-desc:before { + content: "arrow_drop_down"; +} + +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td { + background-color: var(--rz-grid-stripe-background-color); +} +.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td { + background-color: var(--rz-grid-stripe-odd-background-color); +} + +.rz-grid-table-composite .rz-datatable-thead th, .rz-grid-table-composite.rz-grid-table thead th { + border-bottom: var(--rz-grid-header-cell-border); +} +.rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { + border-inline-end: var(--rz-grid-header-cell-border); +} + +.rz-datatable-data td, +.rz-grid-table td { + padding: var(--rz-grid-cell-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-data td:not(:last-child), +.rz-grid-table td:not(:last-child) { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td.rz-composite-cell, +.rz-grid-table td.rz-composite-cell { + border-inline-end: var(--rz-grid-right-cell-border); +} +.rz-datatable-data td .rz-cell-data, +.rz-grid-table td .rz-cell-data { + color: var(--rz-grid-cell-color); + font-size: var(--rz-grid-cell-font-size); + line-height: var(--rz-grid-cell-line-height); + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rz-datatable-data td .rz-cell-data:has(.rz-chkbox), .rz-datatable-data td .rz-cell-data:has(.rz-button), +.rz-grid-table td .rz-cell-data:has(.rz-chkbox), +.rz-grid-table td .rz-cell-data:has(.rz-button) { + overflow: visible; +} +.rz-datatable-data td .rz-cell-toggle, +.rz-grid-table td .rz-cell-toggle { + display: flex; + align-items: center; + gap: 0.25rem; +} +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} +.rz-datatable-data tr td:first-child, +.rz-grid-table tr td:first-child { + border-inline-start: none; +} +.rz-datatable-data tr td:last-child:not(.rz-composite-cell), +.rz-grid-table tr td:last-child:not(.rz-composite-cell) { + border-inline-end: none; +} +.rz-datatable-data tr:first-child > td, +.rz-grid-table tr:first-child > td { + border-top: none; +} +.rz-datatable-data tr:last-child > td, +.rz-grid-table tr:last-child > td { + border-bottom: none; +} + +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { + border-bottom: none; + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { + border-bottom: var(--rz-grid-cell-border); + border-inline-end: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td, +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td { + border-bottom: none; +} +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), +.rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { + border-inline-end: var(--rz-grid-cell-border); +} + +.rz-datatable-reflow tbody td > .rz-column-title { + display: none; +} + +.rz-datatable-scrollable { + display: flex; + flex-direction: column; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper { + height: 0; +} +.rz-datatable-scrollable.rz-has-height > .rz-datatable-scrollable-wrapper > .rz-datatable-scrollable-view { + height: 0; +} + +.rz-datatable-scrollable-wrapper { + display: flex; + flex-direction: column; + flex: auto; +} + +.rz-datatable-scrollable-view { + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; +} + +.rz-datatable-header { + background-color: var(--rz-grid-toolbar-background-color); + padding: var(--rz-grid-header-padding); + border-bottom: var(--rz-grid-bottom-cell-border); +} +.rz-datatable-header .rzi-plus { + font-size: var(--rz-grid-cell-font-size); +} +.rz-datatable-header .rzi-plus:before { + content: "add"; +} + +.rz-cell-filter { + padding: var(--rz-grid-filter-padding); + margin: var(--rz-grid-filter-margin); + border-top: var(--rz-grid-filter-border); + font-size: var(--rz-grid-filter-font-size); + font-weight: normal; +} +.rz-cell-filter .rz-cell-filter-label { + display: flex; + flex: auto; + align-items: center; +} +.rz-cell-filter .rz-cell-filter-label > .rzi { + width: var(--rz-grid-filter-icon-width); + height: var(--rz-grid-filter-icon-height); + font-size: var(--rz-grid-filter-icon-font-size); + margin-inline: var(--rz-grid-filter-icon-margin-inline); + color: var(--rz-grid-filter-color); +} +.rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { + margin-inline-start: auto; +} +.rz-cell-filter .rz-cell-filter-label .rz-current-filter { + margin-inline-start: 0.5rem; +} + +.rz-selectable tbody tr.rz-data-row td, +.rz-selectable tbody tr.rz-data-row .rz-cell-data { + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell:after { + content: ""; + position: absolute; + inset: 0; + transition: background-color var(--rz-transition), color var(--rz-transition); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:before { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before { + z-index: -2; + background-color: var(--rz-grid-frozen-cell-background-color); +} +.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:after, +.rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:after { + z-index: -1; +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-selected-background-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-highlight > .rzi { + color: var(--rz-grid-selected-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-cell-focus-background-color); + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > th.rz-state-focused { + color: var(--rz-grid-cell-focus-color) !important; +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused .rz-cell-data { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-focused > .rzi { + color: var(--rz-grid-cell-focus-color); +} +.rz-selectable tbody tr.rz-data-row.rz-state-disabled { + opacity: 0.5; + pointer-events: none; +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-left-inner:before { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell-right:after { + background-color: var(--rz-grid-hover-background-color); +} +.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data { + color: var(--rz-grid-hover-color); +} + +.rz-cell-filter-content { + display: flex; + flex: auto; + align-items: center; + color: var(--rz-grid-filter-color); + min-height: 1.375rem; + container-type: inline-size; + container-name: rz-cell-filter-content; +} + +@container rz-cell-filter-content (max-width: 200px) { + .rz-cell-filter-content .rz-filter-button .rzi { + display: none; + } + .rz-cell-filter-content .rz-filter-button { + position: absolute; + z-index: 1; + min-height: 0; + inset-inline-start: calc(var(--rz-border-width)); + height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + max-height: calc(var(--rz-input-height) - var(--rz-border-width) * 2); + line-height: calc(1.25rem - var(--rz-border-width) * 2); + border-start-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-start-end-radius: 0; + border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); + border-end-end-radius: 0; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { + text-indent: 2.25rem; + } +} +.rz-expanded-row > td { + border-bottom: none; + background-color: var(--rz-grid-hover-background-color); +} +.rz-expanded-row > td .rz-cell-data, +.rz-expanded-row > td .rz-row-toggler { + color: var(--rz-grid-hover-color); +} + +.rz-expanded-row-template { + background-color: var(--rz-grid-detail-template-background-color); + padding: var(--rz-grid-detail-template-padding); + border: var(--rz-grid-detail-template-border); + border-radius: var(--rz-grid-detail-template-border-radius); +} + +.rz-expanded-row-content > td { + padding-top: 0; + background-color: var(--rz-grid-detail-template-background-color); +} + +.rz-rowgroup-header a:hover { + text-decoration: none; +} +.rz-rowgroup-header td { + border-top: var(--rz-grid-border); + border-bottom: var(--rz-grid-border); +} + +.rz-datatable-loading { + position: absolute; + inset: 0; + background-color: var(--rz-grid-loading-indicator-background-color); + z-index: 2; +} + +.rz-datatable-loading-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--rz-grid-loading-indicator-color); + z-index: 2; +} +.rz-datatable-loading-content .rzi-circle-o-notch { + animation: rotation 0.5s linear infinite; + font-size: 2rem; +} +.rz-datatable-loading-content .rzi-circle-o-notch:before { + content: "refresh"; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@media (max-width: 768px) { + .rz-datatable-reflow .rz-data-grid-data > table, + .rz-datatable-reflow .rz-datatable-tablewrapper > table, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table { + table-layout: auto; + display: block; + } + .rz-datatable-reflow .rz-data-grid-data > table > tbody, + .rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody, + .rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody { + display: block; + } + .rz-datatable-reflow thead th { + display: none; + } + .rz-datatable-reflow .rz-data-row { + display: block; + } + .rz-datatable-reflow .rz-data-row > td { + display: block; + width: 100% !important; + text-align: left !important; + border: none; + } + .rz-datatable-reflow .rz-data-row > td .rz-column-title { + display: block; + } +} +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; +} +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); +} +.rz-date-filter .rz-datepicker-inline table { + width: 100%; +} + +.rz-grid-filter-buttons { + display: flex; + justify-content: space-between; + padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} + +.rz-grid-filter-icon { + justify-self: flex-end; + color: var(--rz-grid-filter-color); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); + font-size: var(--rz-grid-header-filter-icon-font-size); + transition: var(--rz-grid-state-transition); + font-weight: 400; +} +.rz-grid-filter-icon:hover { + cursor: pointer; + color: var(--rz-grid-header-filter-icon-hover-color); +} + +.rz-grid-filter-active { + color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; +} + +.rz-data-grid { + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.rz-data-grid-data { + overflow: auto; + flex: 1; + box-shadow: var(--rz-grid-data-border-shadow); +} + +.rz-grid-table td, .rz-grid-table th { + padding: var(--rz-grid-cell-padding); +} + +.rz-grid-table thead { + position: sticky; + top: 0; + z-index: 2; +} +.rz-grid-table thead th { + position: sticky; + top: 0; + z-index: 1; +} + +.rz-grid-table-fixed { + table-layout: fixed; +} +.rz-grid-table-fixed .rz-frozen-cell { + position: -webkit-sticky; + position: sticky; +} +.rz-grid-table-fixed .rz-frozen-cell-left, +.rz-grid-table-fixed .rz-frozen-cell-right, +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + background: var(--rz-grid-frozen-cell-background-color); + z-index: 1; +} +.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); +} +.rz-grid-table-fixed .rz-frozen-cell-left-inner, +.rz-grid-table-fixed .rz-frozen-cell-right-inner { + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} + +.rz-grid-table tfoot, .rz-grid-table tfoot td { + position: sticky; + bottom: 0; + z-index: 1; +} + +.rz-grid-table { + width: 100%; + position: relative; + border-collapse: separate; + border-spacing: 0; +} +.rz-grid-table th { + white-space: nowrap; + overflow: hidden; +} +.rz-grid-table td { + white-space: nowrap; + overflow: hidden; +} + +.rz-grid-table tbody > div { + display: table-row; +} + +.rz-column-drag { + cursor: grab; + font-size: inherit; + color: var(--rz-column-drag-handle-color); + transition: var(--rz-grid-state-transition); + margin-inline: var(--rz-column-drag-handle-margin-inline); +} +.rz-column-drag:after { + content: "more_vert"; +} +.rz-column-drag:hover { + color: var(--rz-column-drag-handle-hover-color); +} +.rz-column-drag:active { + color: var(--rz-column-drag-handle-hover-color); + cursor: grabbing; +} + +.rz-column-draggable { + background-color: var(--rz-grid-header-background-color); + border-radius: var(--rz-border-radius); + box-shadow: var(--rz-column-draggable-shadow); + padding: 0; + display: flex; + align-items: center; +} +.rz-column-draggable > div { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + outline: none; + padding: 0; +} +.rz-column-draggable .rz-column-drag { + max-width: 1rem; +} +.rz-column-draggable .rz-column-title { + display: inline-flex; + flex: auto; + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + line-height: var(--rz-grid-header-line-height); + text-transform: var(--rz-grid-header-text-transform); + color: var(--rz-grid-header-color); + padding: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rz-column-draggable .rz-grid-filter-icon { + display: none; +} + +.rz-group-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); +} + +.rz-group-header-items { + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); +} + +.rz-group-header-item { + display: flex; + align-items: center; + color: var(--rz-grid-group-header-item-color); + background-color: var(--rz-grid-group-header-item-background-color); + border: var(--rz-grid-group-header-item-border); + border-radius: var(--rz-grid-group-header-item-border-radius); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); + width: fit-content; + float: left; +} +.rz-group-header-item .rz-dialog-titlebar-close { + display: flex; + align-items: center; + text-decoration: none; +} + +.rz-group-header-item-title { + font-size: var(--rz-grid-header-font-size); + font-weight: var(--rz-grid-header-font-weight); + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); +} + +.rz-group-header-drop { + font-size: var(--rz-body-font-size); + color: var(--rz-text-tertiary-color); + height: fit-content; +} + +.rz-column-picker { + display: flex; +} + +.rz-filter-menu-symbol { + width: 1.75rem; + display: inline-block; +} + +.rz-filter-button { + flex: none; + margin-inline-end: 0.5rem; +} + +.rz-data-grid.rz-density-compact { + --rz-grid-cell-line-height: 1rem; + --rz-grid-cell-padding: 0.25rem 0.5rem; + --rz-grid-header-cell-padding: 0.25rem 0; + --rz-grid-header-padding: 0.25rem 1rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-filter-padding: 0.25rem 0.5rem; + --rz-grid-group-header-padding: 0.25rem; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; + --rz-dialog-close-font-size: 1rem; +} + +.rz-pager { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--rz-pager-gap); + flex-wrap: wrap; + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ +} +.rz-pager:focus { + outline: var(--rz-outline-normal); +} +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-pager.rz-align-right { + justify-content: right; +} +.rz-pager.rz-align-left { + justify-content: left; +} +.rz-pager.rz-align-center { + justify-content: center; +} +.rz-pager .rzi-step-backward:before { + content: "first_page"; +} +.rz-pager .rzi-caret-left:before { + content: "navigate_before"; +} +.rz-pager .rzi-caret-right:before { + content: "navigate_next"; +} +.rz-pager .rzi-step-forward:before { + content: "last_page"; +} +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { + order: 2; + width: var(--rz-pager-dropdown-width); + overflow: visible; +} +.rz-pager .rz-pagesize-text { + order: 2; + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); +} + +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); +} + +.rz-pager-bottom { + border-top: var(--rz-pager-border); +} + +.rz-pager-pages { + display: inline-flex; + gap: var(--rz-pager-gap); + margin: 0 0.5rem; +} + +.rz-pager-element { + letter-spacing: 0; +} + +.rz-align-center .rz-pager-first { + margin-inline-start: auto; +} + +.rz-pager-prev { + margin-inline-end: auto; +} +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; +} + +.rz-pager-next { + margin-inline-start: auto; +} +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; +} + +.rz-align-center .rz-pager-last { + margin-inline-end: auto; +} + +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-element:hover { + text-decoration: none; +} + +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); +} + +.rz-pager-page { + display: inline-block; + min-width: var(--rz-pager-numeric-button-min-width); + text-align: center; + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { + margin-right: auto; +} +.rz-align-left .rz-pager-summary { + order: 2; + margin-left: auto; + padding: 0; +} +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} + +@media (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +@container rz-lookup-panel (max-width: 768px) { + .rz-pager-page:not(.rz-state-active) { + display: none; + } + .rz-pager { + display: grid; + grid-column-gap: 0.5rem; + grid-row-gap: 1rem; + grid-template-columns: repeat(9, 1fr); + text-align: center; + } + .rz-pager .rz-dropdown { + grid-column: 1/4; + width: auto; + margin: 0 !important; + text-align: left; + } + .rz-pager .rz-pagesize-text { + grid-column: 4/10; + margin: 0 !important; + text-align: left; + } + .rz-pager-summary { + grid-column: 1/10; + padding: 0 !important; + text-align: left; + } + .rz-pager-first { + grid-column: 1/3; + margin: 0 !important; + } + .rz-pager-prev { + grid-column: 3/5; + margin: 0 !important; + } + .rz-pager-pages { + grid-column: 5/6; + margin: 0 !important; + } + .rz-pager-next { + grid-column: 6/8; + margin: 0 !important; + } + .rz-pager-last { + grid-column: 8/10; + margin: 0 !important; + } +} +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; +} +.rz-overlaypanel { + position: absolute; + overflow: hidden; + box-shadow: var(--rz-overlay-shadow); + border: var(--rz-overlay-border); + border-radius: var(--rz-border-radius); + background-color: var(--rz-overlay-background-color); +} + +.rz-tree { + box-sizing: border-box; + display: inline-block; + overflow: auto; +} +.rz-tree:focus { + outline: var(--rz-outline-normal); +} +.rz-tree:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} + +.rz-tree .rz-treenode.rz-treenode-leaf > .rz-treenode-content > .rz-tree-toggler { + visibility: hidden; +} + +.rz-treenode { + padding-inline-start: var(--rz-tree-node-toggle-width); +} + +.rz-tree-toggler { + cursor: pointer; + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); + width: var(--rz-tree-node-toggle-width); + height: 1.5rem; + font-size: var(--rz-icon-size); + line-height: 1.5rem; + text-align: center; + color: var(--rz-tree-node-toggle-color); + transition: var(--rz-tree-transition); +} +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} +.rz-tree-toggler.rzi-caret-right:before { + content: "arrow_right"; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); +} +.rz-tree-toggler.rzi-caret-down:before { + content: "arrow_drop_down"; + margin-inline-start: -0.125rem; +} +.rz-tree-toggler:hover { + color: var(--rz-tree-node-toggle-hover-color); +} + +.rz-treenode-content { + display: flex; + align-items: center; + cursor: pointer; + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); +} +.rz-treenode-content .rz-treenode-label { + display: flex; + align-items: center; + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); +} +.rz-treenode-content .rz-treenode-label .rzi:first-child { + margin-inline-end: 0.25rem; +} +.rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { + outline: var(--rz-tree-node-focus-outline); + outline-offset: var(--rz-tree-node-focus-outline-offset); +} +.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { + background-color: var(--rz-tree-node-hover-background-color); + color: var(--rz-tree-node-hover-color); + border-radius: var(--rz-tree-node-selected-border-radius); +} +.rz-treenode-content .rz-chkbox { + margin-inline-end: 0.25rem; +} + +.rz-tree-container, +.rz-treenode-children { + list-style: none; + padding: 0; + margin: 0; +} + +.rz-treenode-label { + transition: var(--rz-tree-transition); +} +.rz-treenode-content-selected .rz-treenode-label { + border-radius: var(--rz-tree-node-selected-border-radius); + color: var(--rz-tree-node-selected-color); + background-color: var(--rz-tree-node-selected-background-color); +} + +.rz-datalist, +.rz-datagrid { + background-color: var(--rz-datalist-background-color); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); + box-shadow: var(--rz-datalist-shadow); + border: var(--rz-datalist-border); +} + +.rz-g > div, .rz-datalist-data > li { + border-radius: var(--rz-datalist-border-radius); + border: var(--rz-datalist-item-border); + box-shadow: var(--rz-datalist-item-shadow); + padding: var(--rz-datalist-item-padding); + background-color: var(--rz-datalist-item-background-color); +} + +.rz-datalist-data { + list-style: none; + padding: var(--rz-datalist-padding); + margin: 0; +} +.rz-datalist-data > li { + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} +.rz-datalist-data > li:first-child { + margin-block-start: 0; +} +.rz-datalist-data > li:last-child { + margin-block-end: 0; +} + +.rz-g { + display: flex; + flex-wrap: wrap; +} +.rz-g > div { + flex: auto; + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); +} + +.rz-datalist-content { + box-sizing: border-box; + position: relative; +} + +.rz-datafilter { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + column-gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-selectbutton { + display: inline-flex; +} +.rz-datafilter .rz-datafilter-group { + position: relative; + margin: 0.25rem 0 0; + padding: 0; + flex-basis: 100%; +} +.rz-datafilter .rz-datafilter-group .rz-datafilter-group { + margin: 0; +} +.rz-datafilter .rz-datafilter-item { + position: relative; + list-style: none; + margin: 0; + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.rz-datafilter .rz-datafilter-item:before { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item:after { + content: ""; + position: absolute; + background-color: transparent; + width: var(--rz-datafilter-item-path-width); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); + border: 0; + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); +} +.rz-datafilter .rz-datafilter-item .rz-multiselect, +.rz-datafilter .rz-datafilter-item .rz-dropdown { + flex: 10rem 1; +} +.rz-datafilter .rz-datafilter-group-item:after { + height: calc(var(--rz-input-height) / 2); +} +.rz-datafilter .rz-datafilter-bar { + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; +} +.rz-datafilter .rz-datafilter-bar:before { + display: none; +} +.rz-datafilter .rz-datafilter-bar:after { + height: calc(var(--rz-input-height) / 2); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); +} +.rz-datafilter .rz-datafilter-bar .rz-splitbutton { + margin-block-start: 0.3125rem; +} +.rz-datafilter .rz-datafilter-editor { + flex: 10rem 4; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear { + color: var(--rz-text-secondary-color); + opacity: 0.5; +} +.rz-datafilter .rz-button.rz-datafilter-item-clear:hover { + opacity: 1; +} + +.rz-scheduler { + box-sizing: border-box; + container-name: scheduler; + container-type: inline-size; + display: flex; + height: 400px; + flex-direction: column; + border-radius: var(--rz-scheduler-border-radius); + border: 1px solid var(--rz-scheduler-border-color); + box-shadow: var(--rz-scheduler-shadow); + color: var(--rz-scheduler-color); + background: var(--rz-scheduler-background-color); + overflow: hidden; + background-clip: border-box; +} +.rz-scheduler a.rz-event-list-btn { + position: absolute; + padding-inline-start: 0.25rem; + color: var(--rz-scheduler-event-list-button-color); + font-size: var(--rz-scheduler-event-list-button-font-size); +} +.rz-scheduler a.rz-event-list-btn:hover { + cursor: pointer; + color: var(--rz-scheduler-event-list-button-color); + text-decoration: underline; +} + +.rz-slot { + display: flex; + height: 1.5em; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} + +.rz-slot-title { + text-align: end; + font-size: var(--rz-scheduler-slot-title-font-size); + padding: var(--rz-scheduler-slot-title-padding); +} + +.rz-slot-hours { + flex: 0 0 5rem; +} +.rz-slot-hours .rz-slot-header { + height: 1.5rem; + text-align: end; + font-size: var(--rz-scheduler-header-font-size); + padding: 0 0.25rem; + border-inline-end: 1px solid var(--rz-scheduler-border-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.rz-slot-minor { + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); +} + +.rz-day-view .rz-slot, +.rz-slots:first-child .rz-slot { + border-inline-start: none; +} + +.rz-event { + position: absolute; + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); + cursor: pointer; +} + +.rz-event-content { + background: var(--rz-scheduler-event-background-color); + border-radius: var(--rz-scheduler-border-radius); + color: var(--rz-scheduler-event-color); + height: 100%; + padding: var(--rz-scheduler-event-content-padding); + font-size: var(--rz-scheduler-event-font-size); + line-height: var(--rz-scheduler-event-line-height); + overflow: hidden; +} + +.rz-events { + position: relative; +} + +.rz-scheduler-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--rz-scheduler-toolbar-padding); + background: var(--rz-scheduler-toolbar-background-color); +} +.rz-scheduler-nav .rz-scheduler-nav-title { + display: flex; + align-self: center; + font-size: var(--rz-scheduler-toolbar-title-font-size); + font-weight: var(--rz-scheduler-toolbar-title-font-weight); + color: var(--rz-scheduler-toolbar-title-color); +} + +.rz-view-header { + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); + background-color: var(--rz-scheduler-header-background-color); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); + display: flex; +} +.rz-view-header .rz-slot-header { + flex: 1; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rz-view-header .rz-slot-hour-header { + flex: 0 0 5rem; +} + +.rz-view { + display: flex; + flex-direction: column; + flex: 1; +} + +.rz-view-content { + flex: auto; + display: flex; + overflow: auto; + height: 0; +} +.rz-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-slot:has(.rz-state-focused) { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-slots { + flex: 1; + font-size: 1rem; +} + +.rz-scheduler-nav-views { + display: flex; +} +.rz-scheduler-nav-views .rz-button.rz-primary { + background: var(--rz-scheduler-view-button-background-color); + color: var(--rz-scheduler-view-button-color); + border: var(--rz-scheduler-view-button-border); + border-radius: 0; + border-inline-end: none; +} +.rz-scheduler-nav-views .rz-button.rz-primary:first-child { + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); +} +.rz-scheduler-nav-views .rz-button.rz-primary:last-child { + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); +} +.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { + background-color: var(--rz-scheduler-view-selected-background-color); + border-color: var(--rz-scheduler-view-selected-border-color); + color: var(--rz-scheduler-view-selected-color); +} +.rz-scheduler-nav-views .rz-button.rz-primary:focus-visible { + z-index: 1; +} + +.rz-scheduler-nav-prev-next { + display: flex; +} +.rz-scheduler-nav-prev-next .rz-button { + background-color: var(--rz-scheduler-prev-next-button-background-color); + color: var(--rz-scheduler-prev-next-button-color); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); + font-size: var(--rz-scheduler-prev-next-button-font-size); +} +.rz-scheduler-nav-prev-next .rz-button.rz-today { + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); + padding: var(--rz-scheduler-today-button-padding); + font-size: var(--rz-scheduler-today-button-font-size); + text-transform: var(--rz-scheduler-today-button-text-transform); +} +.rz-scheduler-nav-prev-next .rz-button.rz-prev { + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button.rz-next { + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); +} +.rz-scheduler-nav-prev-next .rz-button:focus-visible { + z-index: 1; +} + +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + +.rz-event-list .rz-event { + position: static; +} + +.rz-week { + flex: 1; + font-size: 1rem; +} +.rz-week .rz-slots { + display: flex; + height: 100%; +} +.rz-week:first-child .rz-slot { + border-block-start: none; +} + +.rz-month { + flex: 1; + font-size: 1rem; +} +.rz-month .rz-slots { + display: flex; + height: 100%; +} +.rz-month:nth-child(2) .rz-slot { + border-block-start: none; +} +.rz-month .rz-slot { + flex: 1; + height: 100%; + display: flex; + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child { + position: sticky; + z-index: 9998; + inset-inline-start: 0; + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); +} +.rz-month .rz-slot:first-child .rz-slot-header { + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-month .rz-slot:nth-child(2) { + border-inline-start: none; +} + +.rz-day-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-day-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-week-view-content { + flex: 1; + display: flex; +} +.rz-week-view-content:focus { + outline: var(--rz-outline-normal); +} +.rz-week-view-content:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-slots.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-week-view-content:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} + +.rz-week-view .rz-slot:nth-of-type(2) { + border-block-start: none; +} +.rz-week-view .rz-view-header { + overflow-y: scroll; + scrollbar-width: auto; +} + +.rz-month-view .rz-view-content { + flex: 1; + flex-direction: column; +} +.rz-month-view .rz-slot { + flex: 1; + height: 100%; +} +.rz-month-view .rz-slot:first-child { + border-inline-start: none; +} + +.rz-planner-view { + overflow: auto; +} +.rz-planner-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 2.25rem; + z-index: 9999; +} +.rz-planner-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-planner-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-planner-view .rz-month .rz-slot:first-child .rz-slot-header { + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +.rz-planner-view .rz-month .rz-slot:last-child { + justify-content: center; + align-items: center; + background-color: var(--rz-scheduler-header-background-color); +} +.rz-planner-view .rz-month .rz-slot:last-child .rz-slot-header { + writing-mode: vertical-rl; + text-align: center; + font-size: var(--rz-scheduler-header-font-size); + padding: var(--rz-scheduler-header-padding); + text-transform: var(--rz-scheduler-header-text-transform); + color: var(--rz-scheduler-header-color); +} +.rz-planner-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-planner-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-timeline-view { + flex: auto; + overflow: auto; + flex-wrap: wrap; + flex-direction: unset; +} +.rz-timeline-view .rz-view-header { + position: sticky; + inset-block-start: 0px; + min-height: 36px; + z-index: 9999; +} +.rz-timeline-view .rz-view-header .rz-slot-header { + min-width: var(--rz-scheduler-timeline-slot-width); + flex: 0 0 auto; +} +.rz-timeline-view:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-slot.rz-state-focused { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-scheduler-focus-outline-offset); +} +.rz-timeline-view:focus-visible .rz-event.rz-state-focused .rz-event-content { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); +} +.rz-timeline-view .rz-month { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slots { + flex: 0 0 auto; +} +.rz-timeline-view .rz-month .rz-slot { + width: var(--rz-scheduler-timeline-slot-width); + height: var(--rz-scheduler-timeline-slot-height); +} +.rz-timeline-view .rz-month .rz-slot.rz-other-month { + background-color: var(--rz-scheduler-other-month-background-color); +} +.rz-timeline-view .rz-month .rz-slot.rz-weekend { + color: var(--rz-scheduler-weekend-color); + background-color: var(--rz-scheduler-weekend-background-color); +} + +.rz-year-view { + overflow: auto; + padding: var(--rz-scheduler-year-padding); + --rz-gap: var(--rz-scheduler-year-padding); +} +.rz-year-view .rz-flex-column, +.rz-year-view .rz-week { + min-width: fit-content; +} +.rz-year-view .rz-slot { + flex: 1; + border-block-start: none; + justify-content: center; + height: initial; + padding: var(--rz-scheduler-year-slot-padding); + cursor: pointer; +} +.rz-year-view .rz-slot .rz-slot-title { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + text-align: center; + width: var(--rz-scheduler-year-slot-title-width); + min-width: 2rem; + min-height: 2rem; + border-radius: var(--rz-scheduler-year-slot-title-border-radius); + transition: var(--rz-datepicker-calendar-transition); +} +.rz-year-view .rz-slot .rz-slot-title.rz-other-month { + opacity: 0.5; +} +.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments { + color: var(--rz-scheduler-event-color); + background-color: var(--rz-scheduler-event-background-color); +} +.rz-year-view .rz-slot .rz-slot-title.rz-state-focused { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} +.rz-year-view .rz-slot:hover .rz-slot-title:not(.rz-has-appointments) { + color: var(--rz-datepicker-calendar-hover-color); + background: var(--rz-datepicker-calendar-hover-background-color); +} + +.rz-year-month:focus { + outline: var(--rz-outline-normal); +} +.rz-year-month:focus-visible { + outline: var(--rz-scheduler-focus-outline); + outline-offset: var(--rz-outline-offset); + border-radius: var(--rz-border-radius); +} + +@container scheduler (width < 640px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@container scheduler (width < 1400px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +@media (max-width: 576px) { + .rz-scheduler-nav .rz-scheduler-nav-prev-next { + justify-content: space-between; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; + order: 1; + } + .rz-scheduler-nav .rz-scheduler-nav-title { + justify-content: center; + width: 100%; + order: 3; + } + .rz-scheduler-nav .rz-scheduler-nav-views { + margin-block-end: 0.5rem; + justify-content: center; + flex-grow: 1; + order: 2; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { + flex-grow: 1; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + } + .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { + display: none; + } + .rz-slot-hours, + .rz-view-header .rz-slot-hour-header { + flex: 0 0 3rem; + } +} +@media (max-width: 1399px) { + .rz-planner-view { + flex-wrap: wrap; + flex-direction: unset; + } + .rz-planner-view .rz-view-header .rz-slot-header { + flex: 0 0 auto; + width: var(--rz-scheduler-planner-slot-width); + } + .rz-planner-view .rz-month { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slots { + flex: 0 0 auto; + } + .rz-planner-view .rz-month .rz-slot { + width: var(--rz-scheduler-planner-slot-width); + height: var(--rz-scheduler-planner-slot-height); + } +} +.rz-tabview { + box-sizing: border-box; + display: flex; +} +.rz-tabview:focus { + outline: var(--rz-outline-normal); +} +.rz-tabview:focus-visible { + outline: var(--rz-outline-focus); + outline-offset: var(--rz-outline-offset); +} +.rz-tabview:focus-visible .rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + outline: var(--rz-tabs-tab-focus-outline); + outline-offset: var(--rz-tabs-tab-focus-outline-offset); +} +.rz-tabview.rz-tabview-top { + flex-direction: column; +} +.rz-tabview.rz-tabview-top-right { + flex-direction: column; +} +.rz-tabview.rz-tabview-bottom { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-bottom-right { + flex-direction: column-reverse; +} +.rz-tabview.rz-tabview-left { + flex-direction: row; +} +.rz-tabview.rz-tabview-right { + flex-direction: row-reverse; +} + +.rz-tabview-nav { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} +.rz-tabview-nav li { + border: var(--rz-tabs-border); + background-color: var(--rz-tabs-tab-background-color); + color: var(--rz-tabs-tab-color); + transition: var(--rz-tabs-transition); +} +.rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-hover-background-color); + color: var(--rz-tabs-tab-hover-color); +} +.rz-tabview-nav li a, +.rz-tabview-nav li a:not([href]):not([class]) { + display: flex; + align-items: center; + color: inherit; + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); + font-size: var(--rz-tabs-tab-font-size); + line-height: var(--rz-tabs-tab-line-height); + font-weight: var(--rz-tabs-tab-font-weight); + text-transform: var(--rz-tabs-tab-text-transform); + letter-spacing: var(--rz-tabs-tab-letter-spacing); + text-decoration: none; + cursor: pointer; +} +.rz-tabview-nav li a:hover, +.rz-tabview-nav li a:not([href]):not([class]):hover { + text-decoration: none; +} +.rz-tabview-nav li.rz-state-disabled { + opacity: 0.5; +} +.rz-tabview-nav .rz-state-focused:not(.rz-tabview-selected):not(.rz-state-disabled) { + background-color: var(--rz-tabs-tab-focus-background-color); + border-color: var(--rz-tabs-tab-focus-background-color); + color: var(--rz-tabs-tab-focus-color); +} +.rz-tabview-nav .rz-tabview-selected { + background-color: var(--rz-tabs-tab-selected-background-color); + color: var(--rz-tabs-tab-selected-color); + position: relative; +} +.rz-tabview-top > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-top > .rz-tabview-nav li { + border-top-width: 2px; + border-bottom-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected { + border-bottom-color: var(--rz-tabs-background-color); + margin-bottom: -1px; + border-top-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-top-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-bottom > .rz-tabview-nav { + flex-direction: row; +} +.rz-tabview-bottom > .rz-tabview-nav li { + border-bottom-width: 2px; + border-top-color: var(--rz-tabs-tab-background-color); + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom > .rz-tabview-nav .rz-tabview-selected { + border-top-color: var(--rz-tabs-background-color); + margin-top: -1px; + padding-top: 1px; + border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-bottom-right > .rz-tabview-nav { + justify-content: right; +} +.rz-tabview-left > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-left > .rz-tabview-nav li { + border-left-width: 2px; + border-right-color: var(--rz-tabs-tab-background-color); + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} +.rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected { + border-right-color: var(--rz-tabs-background-color); + margin-right: -1px; + border-left-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav { + flex-direction: column; +} +.rz-tabview-right > .rz-tabview-nav li { + border-right-width: 2px; + border-left-color: var(--rz-tabs-tab-background-color); + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) { + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +.rz-tabview-right > .rz-tabview-nav .rz-tabview-selected { + border-left-color: var(--rz-tabs-background-color); + margin-left: -1px; + padding-left: 1px; + border-right-color: var(--rz-tabs-tab-selected-top-border-color); +} +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} + +.rz-tabview-panels { + background-color: var(--rz-tabs-background-color); + border: var(--rz-tabs-border); + box-shadow: var(--rz-tabs-shadow); + flex: 1; + overflow: auto; +} +.rz-tabview-top > .rz-tabview-panels { + border-radius: 0 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius); +} +.rz-tabview-bottom > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0 0; +} +.rz-tabview-left > .rz-tabview-panels { + border-radius: 0 var(--rz-tabs-border-radius) var(--rz-tabs-border-radius) 0; +} +.rz-tabview-right > .rz-tabview-panels { + border-radius: var(--rz-tabs-border-radius) 0 0 var(--rz-tabs-border-radius); +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .rz-tabview-panels { + flex: auto; + } +} +.rz-tabview-panel { + padding: var(--rz-tabs-padding); +} + +.rz-tabview-icon { + font-size: var(--rz-tabs-icon-font-size); + margin-inline: var(--rz-tabs-icon-margin-inline); +} + +.rz-tooltip { + box-sizing: border-box; + position: absolute; + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-tooltip-content { + background: var(--rz-tooltip-background-color); + color: var(--rz-tooltip-color); + box-shadow: var(--rz-tooltip-shadow); + padding: var(--rz-tooltip-padding); + border-radius: var(--rz-tooltip-border-radius); + font-size: var(--rz-tooltip-font-size); + white-space: nowrap; +} + +.rz-tooltip .rz-top-tooltip-content { + margin-bottom: 16px; +} + +.rz-tooltip .rz-top-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-end: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-bottom-tooltip-content { + margin-top: -8px; +} + +.rz-tooltip .rz-bottom-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + inset-block-start: 0; + inset-inline-start: 12px; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -12px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-left-tooltip-content { + margin-right: 8px; +} + +.rz-tooltip .rz-left-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + right: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-tooltip .rz-right-tooltip-content { + margin-left: 0; +} + +.rz-tooltip .rz-right-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-dialog-wrapper { + box-sizing: border-box; + display: flex; + position: fixed; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + z-index: var(--rz-dialog-zindex); + align-items: center; + justify-content: center; +} + +.rz-dialog { + box-sizing: border-box; + position: absolute; + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 150px; + max-height: 100%; + min-height: 150px; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); +} + +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); + font-size: var(--rz-dialog-title-font-size); + line-height: var(--rz-dialog-title-line-height); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); +} + +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; + font-weight: var(--rz-dialog-title-font-weight); + letter-spacing: var(--rz-dialog-title-letter-spacing); + color: var(--rz-dialog-title-color); + user-select: none; +} + +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { + font-size: var(--rz-dialog-close-font-size); + color: var(--rz-dialog-close-color); + vertical-align: var(--rz-dialog-close-vertical-align); +} +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { + content: "close"; +} +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { + color: var(--rz-dialog-close-hover-color); +} + +.rz-dialog-content, +.rz-dialog-side-content { + flex: 0 1 auto; + padding: var(--rz-dialog-content-padding); + overflow: auto; +} + +.rz-dialog-confirm, .rz-dialog-alert { + max-width: 400px; + margin: 0.75rem; +} + +.rz-dialog-confirm-message, .rz-dialog-alert-message { + margin-block-end: 1.5rem; +} + +.rz-dialog-confirm-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.rz-dialog-confirm-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-alert-buttons { + text-align: end; + gap: 0.5rem; +} +.rz-dialog-alert-buttons .rz-button { + flex: 8rem 1; + min-width: fit-content; +} + +.rz-dialog-mask { + position: fixed; + z-index: var(--rz-dialog-mask-zindex); + width: 100%; + height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--rz-dialog-mask-background-color); + opacity: 0.5; +} + +.no-scroll { + overflow: hidden; + padding-inline-end: 15px; +} + +.rz-dialog-side-position-right { + right: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-left { + left: 0; + min-width: 150px; + width: 400px; + max-width: 100%; + height: 100%; +} + +.rz-dialog-side-position-top { + top: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +.rz-dialog-side-position-bottom { + bottom: 0; + min-height: 150px; + height: 250px; + width: 100%; +} + +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } +} +.rz-notification { + box-sizing: border-box; + position: fixed; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; +} + +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; + background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; +} + +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); + border-radius: var(--rz-notification-border-radius); + box-shadow: var(--rz-notification-shadow); + padding: var(--rz-notification-padding); +} +.rz-notification-success .rz-notification-item { + color: var(--rz-notification-success-color); + background-color: var(--rz-notification-success-background-color); +} +.rz-notification-warn .rz-notification-item { + color: var(--rz-notification-warning-color); + background-color: var(--rz-notification-warning-background-color); +} +.rz-notification-error .rz-notification-item { + color: var(--rz-notification-error-color); + background-color: var(--rz-notification-error-background-color); +} +.rz-notification-info .rz-notification-item { + color: var(--rz-notification-info-color); + background-color: var(--rz-notification-info-background-color); +} + +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); +} + +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.rz-notification-title { + font-weight: bold; +} + +.rz-notification-icon { + margin: var(--rz-notification-icon-margin); +} +.rz-notification-icon.rzi-check { + color: var(--rz-notification-success-icon-color); +} +.rz-notification-icon.rzi-check:before { + content: "check"; +} +.rz-notification-icon.rzi-exclamation-triangle { + color: var(--rz-notification-warning-icon-color); +} +.rz-notification-icon.rzi-exclamation-triangle:before { + content: "warning"; +} +.rz-notification-icon.rzi-info-circle { + color: var(--rz-notification-info-icon-color); +} +.rz-notification-icon.rzi-info-circle:before { + content: "info"; +} +.rz-notification-icon.rzi-times { + color: var(--rz-notification-error-icon-color); +} +.rz-notification-icon.rzi-times:before { + content: "error"; +} + +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; +} + +.rz-form { + box-sizing: border-box; +} + +.rz-message { + box-sizing: border-box; +} + +.rz-messages-error { + display: inline-block; + color: var(--rz-form-error-color); + font-size: var(--rz-form-error-font-size); + padding: var(--rz-validator-text-padding); +} + +.rz-message-popup { + position: absolute; + background-color: var(--rz-validator-background-color); + transform: var(--rz-validator-transform); + box-shadow: var(--rz-validator-shadow); + padding: var(--rz-validator-padding); + border-radius: var(--rz-border-radius); + color: var(--rz-validator-color); + pointer-events: none; +} +.rz-message-popup:before { + content: ""; + border: var(--rz-validator-pointer-size) solid transparent; + border-bottom-color: var(--rz-validator-background-color); + position: absolute; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); +} + +.rz-layout::-webkit-scrollbar, +.rz-layout ::-webkit-scrollbar, +.rz-scrollbars::-webkit-scrollbar, +.rz-scrollbars ::-webkit-scrollbar { + background-color: var(--rz-scrollbar-background-color); + width: var(--rz-scrollbar-size); + height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-thumb, +.rz-layout ::-webkit-scrollbar-thumb, +.rz-scrollbars::-webkit-scrollbar-thumb, +.rz-scrollbars ::-webkit-scrollbar-thumb { + background: var(--rz-scrollbar-color); + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: var(--rz-scrollbar-border-radius); + min-width: var(--rz-scrollbar-size); + min-height: var(--rz-scrollbar-size); +} +.rz-layout::-webkit-scrollbar-corner, +.rz-layout ::-webkit-scrollbar-corner, +.rz-scrollbars::-webkit-scrollbar-corner, +.rz-scrollbars ::-webkit-scrollbar-corner { + background-color: var(--rz-scrollbar-background-color); +} + +.rz-login { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rz-login .rz-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.rz-login .rz-form .rz-form-row { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 0.5rem; +} +.rz-login .rz-form .rz-form-row .rz-label { + flex: 1 8rem; +} +.rz-login .rz-form .rz-form-row .rz-form-input-wrapper { + flex: 3 14rem; +} +.rz-login .rz-form .rz-form-row .rz-textbox { + display: block; + width: 100%; +} +.rz-login .rz-form .rz-form-row .rz-textbox.invalid { + border: var(--rz-border-danger); +} +.rz-login .rz-form .rz-form-row .rz-switch { + margin-inline-end: 0.5rem; +} +.rz-login .rz-form .rz-messages-error { + position: absolute; +} +.rz-login .rz-register { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + background-color: var(--rz-login-register-background-color); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); + border-radius: var(--rz-border-radius); +} +.rz-login .rz-register .rz-button { + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); +} +.rz-login .rz-login-buttons { + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.rz-lookup-panel { + background-color: var(--rz-lookup-panel-background-color); + padding: var(--rz-lookup-panel-padding); + container-type: inline-size; + container-name: rz-lookup-panel; +} + +.rz-lookup-search { + display: flex; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); +} +.rz-lookup-search input { + flex: auto; +} + +.ssrsviewer { + display: flex; +} +.ssrsviewer iframe { + flex: auto; +} + +.rz-map { + box-sizing: border-box; + height: var(--rz-map-height); + padding: var(--rz-map-padding); + background-color: var(--rz-map-background-color); + box-shadow: var(--rz-map-shadow); + border-radius: var(--rz-border-radius); +} + +.rz-map-container { + height: 100%; +} + +.rz-gauge, +.rz-arc-gauge { + box-sizing: border-box; + position: relative; + display: inline-block; + width: 300px; + height: 300px; +} + +.rz-gauge .rz-line, +.rz-gauge .rz-tick { + stroke: var(--rz-gauge-scale-color); +} +.rz-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-scale-label-color); +} + +.rz-arc-gauge .rz-line, +.rz-arc-gauge .rz-tick { + stroke: var(--rz-gauge-arc-scale-color); +} +.rz-arc-gauge .rz-tick-text { + font-size: var(--rz-gauge-scale-font-size); + fill: var(--rz-gauge-arc-scale-label-color); +} + +.rz-gauge-value { + position: absolute; + transform: translateX(-50%); + padding: 0.5rem; +} + +.rz-arc-gauge-value { + position: absolute; + transform: translate(-50%, -50%); + padding: 0.5rem; +} + +.rz-gauge-pointer { + fill: var(--rz-gauge-pointer-color); +} + +.rz-arc-gauge-scale-value { + fill: var(--rz-gauge-arc-value-color); +} + +.rz-arc-gauge-scale { + fill: var(--rz-gauge-arc-scale-color); +} + +.rz-progressbar { + box-sizing: border-box; + border-radius: var(--rz-progressbar-border-radius); + height: var(--rz-progressbar-height); + position: relative; + background-color: var(--rz-progressbar-background-color); + text-align: center; + display: flex; + align-items: center; +} + +.rz-progressbar-value { + border-radius: var(--rz-progressbar-border-radius); + position: absolute; + background-color: var(--rz-progressbar-value-background-color); + height: 100%; + width: 100%; + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-label { + position: relative; + width: 100%; + text-align: center; + font-size: var(--rz-progressbar-font-size); + line-height: var(--rz-progressbar-font-size); +} + +.rz-progressbar-circular { + box-sizing: border-box; + position: relative; +} + +.rz-progressbar-circular-viewbox { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.rz-progressbar-circular-label { + height: 100%; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +.rz-progressbar-circular-background { + stroke: var(--rz-progressbar-background-color); + stroke-width: var(--rz-progressbar-circular-stroke-width); +} + +.rz-progressbar-circular-value { + stroke-linecap: var(--rz-progressbar-circular-value-endpoint); + stroke-width: var(--rz-progressbar-circular-value-stroke-width); + stroke: var(--rz-progressbar-value-background-color); + transition: var(--rz-progressbar-value-transition); +} + +.rz-progressbar-determinate .rz-progressbar-circular-value { + stroke-dasharray: 100; + transform: rotate(-0.25turn); +} + +.rz-progressbar-indeterminate { + overflow: hidden; +} +.rz-progressbar-indeterminate .rz-progressbar-value { + background-color: transparent; +} +.rz-progressbar-indeterminate .rz-progressbar-value:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} +.rz-progressbar-indeterminate .rz-progressbar-value:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--rz-progressbar-value-background-color); + will-change: left, right; + animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; + animation-delay: 1.15s; +} +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} +@keyframes rz-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 100%, 60% { + left: 100%; + right: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { + 0% { + right: -200%; + left: 100%; + } + 60%, 100% { + right: 107%; + left: -8%; + } +} +.rz-progressbar-indeterminate .rz-progressbar-circular-value { + animation: rz-progressbar-circular-indeterminate-anim-rotate 2.1s linear infinite, rz-progressbar-circular-indeterminate-anim-dash 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + transform-origin: 0 0; +} +@keyframes rz-progressbar-circular-indeterminate-anim-rotate { + 100% { + transform: rotate(1turn); + } +} +@keyframes rz-progressbar-circular-indeterminate-anim-dash { + 0% { + stroke-dasharray: 1, 100; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -28; + } + 100% { + stroke-dasharray: 70, 100; + stroke-dashoffset: -99; + } +} + +.rz-progressbar.rz-progressbar-primary { + color: var(--rz-on-primary); +} + +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value { + background-color: var(--rz-primary); +} +.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:before { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-value:after { + background-color: var(--rz-primary); +} +.rz-progressbar-indeterminate.rz-progressbar-primary .rz-progressbar-circular-value { + stroke: var(--rz-primary); +} + +.rz-progressbar.rz-progressbar-secondary { + color: var(--rz-on-secondary); +} + +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-value { + background-color: var(--rz-secondary); +} +.rz-progressbar-determinate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:before { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-value:after { + background-color: var(--rz-secondary); +} +.rz-progressbar-indeterminate.rz-progressbar-secondary .rz-progressbar-circular-value { + stroke: var(--rz-secondary); +} + +.rz-progressbar.rz-progressbar-info { + color: var(--rz-on-info); +} + +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-value { + background-color: var(--rz-info); +} +.rz-progressbar-determinate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:before { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-value:after { + background-color: var(--rz-info); +} +.rz-progressbar-indeterminate.rz-progressbar-info .rz-progressbar-circular-value { + stroke: var(--rz-info); +} + +.rz-progressbar.rz-progressbar-warning { + color: var(--rz-on-warning); +} + +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-value { + background-color: var(--rz-warning); +} +.rz-progressbar-determinate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:before { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-value:after { + background-color: var(--rz-warning); +} +.rz-progressbar-indeterminate.rz-progressbar-warning .rz-progressbar-circular-value { + stroke: var(--rz-warning); +} + +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-danger { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-danger .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar.rz-progressbar-success { + color: var(--rz-on-success); +} + +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-value { + background-color: var(--rz-success); +} +.rz-progressbar-determinate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:before { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-value:after { + background-color: var(--rz-success); +} +.rz-progressbar-indeterminate.rz-progressbar-success .rz-progressbar-circular-value { + stroke: var(--rz-success); +} + +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-circular-lg { + width: 6rem; + height: 6rem; + font-size: calc(var(--rz-progressbar-font-size) * 1.25); +} + +.rz-progressbar-circular-md { + width: 3rem; + height: 3rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.75); +} + +.rz-progressbar-circular-sm { + width: 2rem; + height: 2rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.5); +} + +.rz-progressbar-circular-xs { + width: 1.25rem; + height: 1.25rem; + font-size: calc(var(--rz-progressbar-font-size) * 0.375); +} + +.rz-chart { + box-sizing: border-box; + position: relative; + height: 300px; +} + +.rz-area-series { + fill-opacity: 0.8; +} + +.rz-scheme-pastel .rz-series-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 { + fill: var(--rz-series-1); + stroke: var(--rz-series-1); +} +.rz-scheme-pastel .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-1); +} + +.rz-scheme-pastel .rz-series-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 { + fill: var(--rz-series-2); + stroke: var(--rz-series-2); +} +.rz-scheme-pastel .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-2); +} + +.rz-scheme-pastel .rz-series-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 { + fill: var(--rz-series-3); + stroke: var(--rz-series-3); +} +.rz-scheme-pastel .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-3); +} + +.rz-scheme-pastel .rz-series-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 { + fill: var(--rz-series-4); + stroke: var(--rz-series-4); +} +.rz-scheme-pastel .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-4); +} + +.rz-scheme-pastel .rz-series-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 { + fill: var(--rz-series-5); + stroke: var(--rz-series-5); +} +.rz-scheme-pastel .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-5); +} + +.rz-scheme-pastel .rz-series-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 { + fill: var(--rz-series-6); + stroke: var(--rz-series-6); +} +.rz-scheme-pastel .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-6); +} + +.rz-scheme-pastel .rz-series-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 { + fill: var(--rz-series-7); + stroke: var(--rz-series-7); +} +.rz-scheme-pastel .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-7); +} + +.rz-scheme-pastel .rz-series-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 { + fill: var(--rz-series-8); + stroke: var(--rz-series-8); +} +.rz-scheme-pastel .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-8); +} + +.rz-scheme-pastel .rz-series-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 { + fill: var(--rz-series-9); + stroke: var(--rz-series-9); +} +.rz-scheme-pastel .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-9); +} + +.rz-scheme-pastel .rz-series-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-9-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 { + fill: var(--rz-series-10); + stroke: var(--rz-series-10); +} +.rz-scheme-pastel .rz-series-item-9 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-10); +} + +.rz-scheme-pastel .rz-series-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-10-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 { + fill: var(--rz-series-11); + stroke: var(--rz-series-11); +} +.rz-scheme-pastel .rz-series-item-10 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-11); +} + +.rz-scheme-pastel .rz-series-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-11-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 { + fill: var(--rz-series-12); + stroke: var(--rz-series-12); +} +.rz-scheme-pastel .rz-series-item-11 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-12); +} + +.rz-scheme-pastel .rz-series-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-12-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 { + fill: var(--rz-series-13); + stroke: var(--rz-series-13); +} +.rz-scheme-pastel .rz-series-item-12 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-13); +} + +.rz-scheme-pastel .rz-series-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-13-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 { + fill: var(--rz-series-14); + stroke: var(--rz-series-14); +} +.rz-scheme-pastel .rz-series-item-13 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-14); +} + +.rz-scheme-pastel .rz-series-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-14-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 { + fill: var(--rz-series-15); + stroke: var(--rz-series-15); +} +.rz-scheme-pastel .rz-series-item-14 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-15); +} + +.rz-scheme-pastel .rz-series-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-15-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 { + fill: var(--rz-series-16); + stroke: var(--rz-series-16); +} +.rz-scheme-pastel .rz-series-item-15 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-16); +} + +.rz-scheme-pastel .rz-series-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-16-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 { + fill: var(--rz-series-17); + stroke: var(--rz-series-17); +} +.rz-scheme-pastel .rz-series-item-16 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-17); +} + +.rz-scheme-pastel .rz-series-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-17-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 { + fill: var(--rz-series-18); + stroke: var(--rz-series-18); +} +.rz-scheme-pastel .rz-series-item-17 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-18); +} + +.rz-scheme-pastel .rz-series-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-18-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 { + fill: var(--rz-series-19); + stroke: var(--rz-series-19); +} +.rz-scheme-pastel .rz-series-item-18 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-19); +} + +.rz-scheme-pastel .rz-series-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-19-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 { + fill: var(--rz-series-20); + stroke: var(--rz-series-20); +} +.rz-scheme-pastel .rz-series-item-19 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-20); +} + +.rz-scheme-pastel .rz-series-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-20-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 { + fill: var(--rz-series-21); + stroke: var(--rz-series-21); +} +.rz-scheme-pastel .rz-series-item-20 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-21); +} + +.rz-scheme-pastel .rz-series-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-21-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 { + fill: var(--rz-series-22); + stroke: var(--rz-series-22); +} +.rz-scheme-pastel .rz-series-item-21 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-22); +} + +.rz-scheme-pastel .rz-series-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-22-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 { + fill: var(--rz-series-23); + stroke: var(--rz-series-23); +} +.rz-scheme-pastel .rz-series-item-22 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-23); +} + +.rz-scheme-pastel .rz-series-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-23-tooltip .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 { + fill: var(--rz-series-24); + stroke: var(--rz-series-24); +} +.rz-scheme-pastel .rz-series-item-23 .rz-chart-tooltip-content { + border: 1px solid var(--rz-series-24); +} + +.rz-scheme-palette .rz-series-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} +.rz-scheme-palette .rz-series-item-0 { + fill: #003f5c; + stroke: #003f5c; +} +.rz-scheme-palette .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #003f5c; +} + +.rz-scheme-palette .rz-series-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 { + fill: #2f4b7c; + stroke: #2f4b7c; +} +.rz-scheme-palette .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #2f4b7c; +} + +.rz-scheme-palette .rz-series-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #665191; +} +.rz-scheme-palette .rz-series-item-2 { + fill: #665191; + stroke: #665191; +} +.rz-scheme-palette .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #665191; +} + +.rz-scheme-palette .rz-series-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #a05195; +} +.rz-scheme-palette .rz-series-item-3 { + fill: #a05195; + stroke: #a05195; +} +.rz-scheme-palette .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #a05195; +} + +.rz-scheme-palette .rz-series-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #d45087; +} +.rz-scheme-palette .rz-series-item-4 { + fill: #d45087; + stroke: #d45087; +} +.rz-scheme-palette .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #d45087; +} + +.rz-scheme-palette .rz-series-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 { + fill: #f95d6a; + stroke: #f95d6a; +} +.rz-scheme-palette .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f95d6a; +} + +.rz-scheme-palette .rz-series-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 { + fill: #ff7c43; + stroke: #ff7c43; +} +.rz-scheme-palette .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ff7c43; +} + +.rz-scheme-palette .rz-series-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} +.rz-scheme-palette .rz-series-item-7 { + fill: #ffa600; + stroke: #ffa600; +} +.rz-scheme-palette .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #ffa600; +} + +.rz-scheme-monochrome .rz-series-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 { + fill: #004c6d; + stroke: #004c6d; +} +.rz-scheme-monochrome .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #004c6d; +} + +.rz-scheme-monochrome .rz-series-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #296080; +} +.rz-scheme-monochrome .rz-series-item-1 { + fill: #296080; + stroke: #296080; +} +.rz-scheme-monochrome .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #296080; +} + +.rz-scheme-monochrome .rz-series-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #437594; +} +.rz-scheme-monochrome .rz-series-item-2 { + fill: #437594; + stroke: #437594; +} +.rz-scheme-monochrome .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #437594; +} + +.rz-scheme-monochrome .rz-series-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 { + fill: #5d8ba9; + stroke: #5d8ba9; +} +.rz-scheme-monochrome .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #5d8ba9; +} + +.rz-scheme-monochrome .rz-series-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 { + fill: #75a1be; + stroke: #75a1be; +} +.rz-scheme-monochrome .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #75a1be; +} + +.rz-scheme-monochrome .rz-series-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 { + fill: #8eb8d3; + stroke: #8eb8d3; +} +.rz-scheme-monochrome .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #8eb8d3; +} + +.rz-scheme-monochrome .rz-series-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 { + fill: #a7cfe9; + stroke: #a7cfe9; +} +.rz-scheme-monochrome .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #a7cfe9; +} + +.rz-scheme-monochrome .rz-series-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 { + fill: #c1e7ff; + stroke: #c1e7ff; +} +.rz-scheme-monochrome .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #c1e7ff; +} + +.rz-scheme-divergent .rz-series-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-0-tooltip .rz-chart-tooltip-content { + border: 1px solid #00876c; +} +.rz-scheme-divergent .rz-series-item-0 { + fill: #00876c; + stroke: #00876c; +} +.rz-scheme-divergent .rz-series-item-0 .rz-chart-tooltip-content { + border: 1px solid #00876c; +} + +.rz-scheme-divergent .rz-series-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-1-tooltip .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 { + fill: #57a18b; + stroke: #57a18b; +} +.rz-scheme-divergent .rz-series-item-1 .rz-chart-tooltip-content { + border: 1px solid #57a18b; +} + +.rz-scheme-divergent .rz-series-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-2-tooltip .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 { + fill: #8cbcac; + stroke: #8cbcac; +} +.rz-scheme-divergent .rz-series-item-2 .rz-chart-tooltip-content { + border: 1px solid #8cbcac; +} + +.rz-scheme-divergent .rz-series-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-3-tooltip .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 { + fill: #bed6ce; + stroke: #bed6ce; +} +.rz-scheme-divergent .rz-series-item-3 .rz-chart-tooltip-content { + border: 1px solid #bed6ce; +} + +.rz-scheme-divergent .rz-series-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-4-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 { + fill: #f1f1f1; + stroke: #f1f1f1; +} +.rz-scheme-divergent .rz-series-item-4 .rz-chart-tooltip-content { + border: 1px solid #f1f1f1; +} + +.rz-scheme-divergent .rz-series-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-5-tooltip .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 { + fill: #f1c6c6; + stroke: #f1c6c6; +} +.rz-scheme-divergent .rz-series-item-5 .rz-chart-tooltip-content { + border: 1px solid #f1c6c6; +} + +.rz-scheme-divergent .rz-series-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-6-tooltip .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 { + fill: #ec9c9d; + stroke: #ec9c9d; +} +.rz-scheme-divergent .rz-series-item-6 .rz-chart-tooltip-content { + border: 1px solid #ec9c9d; +} + +.rz-scheme-divergent .rz-series-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-7-tooltip .rz-chart-tooltip-content { + border: 1px solid #e27076; +} +.rz-scheme-divergent .rz-series-item-7 { + fill: #e27076; + stroke: #e27076; +} +.rz-scheme-divergent .rz-series-item-7 .rz-chart-tooltip-content { + border: 1px solid #e27076; +} + +.rz-scheme-divergent .rz-series-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-8-tooltip .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 { + fill: #d43d51; + stroke: #d43d51; +} +.rz-scheme-divergent .rz-series-item-8 .rz-chart-tooltip-content { + border: 1px solid #d43d51; +} + +.rz-marker { + stroke: var(--rz-chart-marker-stroke); +} + +.rz-area-series .rz-marker { + fill-opacity: 1; +} + +.rz-axis { + stroke: var(--rz-chart-axis-color); + font-size: var(--rz-chart-axis-font-size); +} + +.rz-axis .rz-grid-line { + stroke: var(--rz-chart-axis-color); +} + +.rz-tick-text { + stroke: none; + fill: var(--rz-chart-axis-label-color); +} + +.rz-series-data-label { + fill: var(--rz-chart-axis-label-color); +} + +.rz-value-axis .rz-tick-text { + text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; +} + +.rz-category-axis .rz-tick-text { + text-anchor: middle; +} + +.rz-axis .rz-axis-title { + stroke: none; + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-title { + text-anchor: middle; + fill: var(--rz-text-title-color); +} + +.rz-donut-content { + height: 100%; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rz-legend { + position: absolute; + display: flex; + font-size: var(--rz-chart-legend-font-size); +} + +.rz-legend-right { + right: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-left { + left: 0; + top: 0; + bottom: 0; + align-items: center; +} + +.rz-legend-top { + top: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-bottom { + bottom: 0; + left: 0; + right: 0; + justify-content: center; +} + +.rz-legend-items { + padding: 0; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; +} + +.rz-legend-item { + display: flex; + align-items: center; + gap: 4px; + margin: 4px; + cursor: pointer; +} +.rz-legend-item:focus { + outline: var(--rz-outline-normal); +} +.rz-legend-item:focus-visible { + outline: var(--rz-chart-legend-focus-outline); + outline-offset: var(--rz-chart-legend-focus-outline-offset); + border-radius: var(--rz-border-radius); +} + +.rz-legend-top .rz-legend-item, +.rz-legend-bottom .rz-legend-item { + display: inline-flex; +} + +.rz-chart-tooltip { + position: absolute; + transform: translate(-50%, -100%); + transition: top 0.2s, left 0.2s; + top: 0; + left: 0; +} + +.rz-chart-tooltip-content { + background: var(--rz-chart-tooltip-background); + color: var(--rz-chart-tooltip-color); + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.15); + padding: 0.25rem 0.5rem; + border-radius: var(--rz-border-radius); + white-space: nowrap; +} + +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content { + margin-bottom: 15px; +} +.rz-chart-tooltip:not(.rz-pie-tooltip) .rz-chart-tooltip-content:after { + content: " "; + position: absolute; + width: 8px; + height: 8px; + left: 50%; + bottom: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -11px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; +} + +.rz-link { + box-sizing: border-box; + color: var(--rz-link-color); + text-decoration: none; + cursor: pointer; +} +.rz-link .rz-link-text { + text-decoration: var(--rz-link-text-decoration); +} +.rz-link .rzi { + font-size: inherit; + vertical-align: middle; +} +.rz-link:hover, .rz-link:focus { + color: var(--rz-link-hover-color); + text-decoration: none; +} +.rz-link:hover .rz-link-text, .rz-link:focus .rz-link-text { + text-decoration: var(--rz-link-hover-text-decoration); +} +.rz-link:focus-visible { + outline: var(--rz-link-focus-outline); +} + +.rz-state-highlight .link { + color: var(--rz-text-contrast-color); +} + +.rz-html-editor { + box-sizing: border-box; + display: flex; + flex-direction: column; + border-radius: var(--rz-editor-border-radius); + border: var(--rz-editor-border); + overflow: hidden; +} +.rz-html-editor:focus-within { + outline: var(--rz-editor-focus-outline); + outline-offset: var(--rz-editor-focus-outline-offset); +} + +.rz-html-editor-content { + flex: 1; + overflow: auto; + padding: 0.5rem; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-source.rz-textarea { + --rz-input-hover-shadow: none; + --rz-input-border: none; + --rz-input-hover-border: none; + --rz-input-focus-shadow: none; + --rz-input-focus-border: none; + flex: 1; + padding: 0.5rem; + overflow: auto; + outline: none; + background-color: var(--rz-editor-content-background-color); +} + +.rz-html-editor-toolbar { + border-bottom: var(--rz-editor-border); + display: flex; + line-height: 1rem; + flex-wrap: wrap; + background-color: var(--rz-editor-toolbar-background-color); +} +.rz-html-editor-toolbar .rzi { + font-size: 1rem; +} +.rz-html-editor-toolbar > * { + margin: var(--rz-editor-toolbar-item-margin); +} + +.rz-html-editor-colorpicker { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger { + color: inherit; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} +.rz-html-editor-colorpicker .rz-colorpicker-value { + display: none; +} +.rz-html-editor-colorpicker .rz-colorpicker { + border: none; + box-shadow: none; + padding: 0; + height: auto; + background-color: var(--rz-editor-button-background-color); +} +.rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; + box-shadow: none; +} + +.rz-html-editor-color { + border: none; + display: flex; + flex-direction: column; + background: inherit; + color: inherit; + appearance: none; + padding: 0; + position: relative; +} +.rz-html-editor-color:disabled { + color: var(--rz-input-disabled-color); +} + +.rz-html-editor-color-value { + position: absolute; + bottom: -4px; + height: 4px; + width: 100%; +} + +.rz-html-editor-button { + color: var(--rz-editor-button-color); + appearance: none; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--rz-editor-button-background-color); + padding: var(--rz-editor-button-padding); +} +.rz-html-editor-button.rz-selected { + background-color: var(--rz-editor-button-selected-background-color); + color: var(--rz-editor-button-selected-color); + border-radius: var(--rz-editor-border-radius); +} +.rz-html-editor-button:disabled { + color: var(--rz-editor-button-disabled-color); +} + +.rz-html-editor-dropdown { + display: inline-flex; + padding: var(--rz-editor-button-padding); + align-items: center; + cursor: pointer; +} +.rz-html-editor-dropdown.rz-disabled { + color: var(--rz-input-disabled-color); + cursor: default; +} + +.rz-html-editor-dropdown-item { + cursor: default; + font-size: var(--rz-dropdown-item-font-size); + padding: var(--rz-dropdown-item-padding); + white-space: nowrap; +} +.rz-html-editor-dropdown-item:hover { + background-color: var(--rz-dropdown-item-hover-background-color); + color: var(--rz-dropdown-item-hover-color); + border-radius: 0; +} +.rz-html-editor-dropdown-item.rz-selected { + background-color: var(--rz-dropdown-item-selected-background-color); + color: var(--rz-dropdown-item-selected-color); +} + +.rz-html-editor-dropdown-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: inherit; + background-color: inherit; +} +.rz-html-editor-dropdown-trigger .rzi:before { + content: "arrow_drop_down"; +} + +.rz-html-editor-dropdown-items { + display: none; +} + +.rz-html-editor-dialog-item { + margin-bottom: 1rem; +} +.rz-html-editor-dialog-item label:first-child { + display: block; +} + +.rz-html-editor-dialog-buttons { + text-align: right; +} + +.rz-html-editor-separator { + width: 1px; + background-color: var(--rz-editor-separator-background-color); +} + +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover { + border: none; +} +.rz-html-editor-toolbar .rz-html-editor-colorpicker .rz-colorpicker-trigger .rzi { + font-size: 1.25rem; + height: 1rem; +} + +.rz-colorpicker { + display: inline-flex; + align-items: center; + cursor: pointer; +} +.rz-colorpicker.rz-state-disabled { + cursor: default; +} + +button.rz-colorpicker-trigger { + border: none; + appearance: none; + padding: 0; + display: inline-flex; + align-items: center; + color: var(--rz-text-color); + background-color: inherit; + outline: none; +} +button.rz-colorpicker-trigger .rzi { + font-size: var(--rz-icon-size); +} +button.rz-colorpicker-trigger .rzi:before { + content: "arrow_drop_down"; +} +.rz-state-disabled button.rz-colorpicker-trigger { + color: var(--rz-input-disabled-color); +} + +.rz-colorpicker-popup { + display: none; + position: absolute; + border: var(--rz-colorpicker-panel-border); + background-color: var(--rz-colorpicker-panel-background-color); + box-shadow: var(--rz-colorpicker-panel-shadow); + min-width: 200px; + max-width: var(--rz-colorpicker-panel-max-width); + padding: var(--rz-colorpicker-panel-padding); + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-value { + flex: 1; + border-radius: var(--rz-colorpicker-value-border-radius); + border: var(--rz-colorpicker-panel-border); + min-width: 20px; + min-height: 20px; +} + +.rz-saturation-picker { + height: var(--rz-colorpicker-saturation-height); + position: relative; + touch-action: none; + border-radius: var(--rz-border-radius); +} +.rz-saturation-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-saturation-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-saturation-white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} + +.rz-saturation-black, +.rz-saturation-white { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: var(--rz-border-radius); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); +} + +.rz-saturation-black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); +} + +.rz-saturation-handle { + position: absolute; + width: var(--rz-colorpicker-handle-size); + height: var(--rz-colorpicker-handle-size); + border: var(--rz-colorpicker-handle-border); + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-hue-picker { + margin-bottom: 8px; + touch-action: none; + position: relative; + background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-hue-picker:active { + cursor: none; +} +.rz-hue-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-hue-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-alpha-picker { + touch-action: none; + position: relative; + border-radius: var(--rz-border-radius); + height: var(--rz-colorpicker-handle-size); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); +} +.rz-alpha-picker:active { + cursor: none; +} +.rz-alpha-picker:focus { + outline: var(--rz-outline-normal); +} +.rz-alpha-picker:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-hue-handle, +.rz-alpha-handle { + position: absolute; + height: 100%; + width: 8px; + border: var(--rz-colorpicker-handle-border); + border-radius: calc(var(--rz-border-radius) / 2); + transform: translateX(-50%); + box-shadow: var(--rz-colorpicker-handle-shadow); +} + +.rz-colorpicker-preview-area { + display: flex; +} + +.rz-hue-and-alpha { + flex: 1; + padding-inline-end: 8px; +} + +.rz-alpha-picker:before, +.rz-colorpicker-preview:before { + position: absolute; + z-index: -1; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--rz-border-radius); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); + background-size: 8px 8px; + background-position: 0 0, 0 4px, 4px -4px, -4px 0px; +} + +.rz-colorpicker-preview { + position: relative; + width: 32px; + height: 32px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset; + border-radius: var(--rz-border-radius); +} + +.rz-colorpicker-rgba { + display: flex; + gap: 4px; +} + +.rz-color-box { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + color: var(--rz-colorpicker-input-labels-color); + font-size: 0.75rem; + text-transform: uppercase; +} +.rz-color-box .rz-textbox { + width: 80px; + margin-inline-end: 4px; + padding: var(--rz-colorpicker-hex-input-padding); + height: var(--rz-colorpicker-hex-input-height); +} +.rz-color-box .rz-numeric { + padding: var(--rz-colorpicker-rgba-input-padding); + height: var(--rz-colorpicker-rgba-input-height); +} +.rz-color-box .rz-numeric .rz-numeric-input { + padding: 0; + outline: none; +} +.rz-color-box .rz-numeric button { + display: none; +} +.rz-color-box .rz-numeric button:hover { + display: initial; +} + +.rz-colorpicker-button { + justify-content: flex-end; + display: flex; +} + +.rz-colorpicker-section:not(:last-child) { + margin-bottom: 8px; +} + +.rz-colorpicker-colors { + display: flex; + flex-wrap: wrap; + gap: var(--rz-colorpicker-items-gap); +} + +.rz-colorpicker-item { + width: var(--rz-colorpicker-item-size); + height: var(--rz-colorpicker-item-size); + border-radius: var(--rz-colorpicker-item-border-radius); + box-shadow: var(--rz-colorpicker-item-shadow); + cursor: pointer; +} +.rz-colorpicker-item:focus { + outline: var(--rz-outline-normal); +} +.rz-colorpicker-item:focus-visible { + outline: var(--rz-colorpicker-focus-outline); + outline-offset: var(--rz-colorpicker-focus-outline-offset); +} + +.rz-splitter { + box-sizing: border-box; + display: flex; + flex-wrap: nowrap; + width: 100%; + height: 100%; +} +.rz-splitter > .rz-splitter-bar { + flex: 0 0 auto; + position: relative; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--rz-splitter-bar-color); + background-color: var(--rz-splitter-bar-background-color); + opacity: 0.4; + user-select: none; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-collapse:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color); + border-radius: 1px; +} +.rz-splitter > .rz-splitter-bar > .rz-expand { + display: table; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:before { + font-family: var(--rz-icon-font-family); + line-height: normal; + display: table-cell; +} +.rz-splitter > .rz-splitter-bar > .rz-expand:hover { + cursor: pointer; +} +.rz-splitter > .rz-splitter-bar-resizable:hover { + background-color: var(--rz-splitter-bar-background-color); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active { + background-color: var(--rz-splitter-bar-background-color-active); + opacity: var(--rz-splitter-bar-hover-opacity); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-expand, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize, .rz-splitter > .rz-splitter-bar-resizable:active > .rz-collapse { + color: var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:active > .rz-resize { + border: 1px solid var(--rz-splitter-bar-color-active); +} +.rz-splitter > .rz-splitter-bar-resizable:disabled { + opacity: 0.2; +} +.rz-splitter-horizontal { + flex-direction: row; +} +.rz-splitter-horizontal > .rz-splitter-bar { + flex-direction: column; + width: 8px; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_left"; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-resize { + height: 16px; + margin: 2px 0; +} +.rz-splitter-horizontal > .rz-splitter-bar > .rz-expand:before { + content: "arrow_right"; +} +.rz-splitter-horizontal > .rz-splitter-bar-resizable:hover { + cursor: col-resize; +} +.rz-splitter-vertical { + flex-direction: column; +} +.rz-splitter-vertical > .rz-splitter-bar { + flex-direction: row; + height: 8px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-collapse:before { + content: "arrow_drop_up"; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-resize { + width: 16px; + margin: 0 2px; +} +.rz-splitter-vertical > .rz-splitter-bar > .rz-expand:before { + content: "arrow_drop_down"; +} +.rz-splitter-vertical > .rz-splitter-bar-resizable:hover { + cursor: row-resize; +} +.rz-splitter-pane { + overflow: hidden; + position: relative; + flex: 0 0 auto; +} +.rz-splitter-pane-collapsed { + flex: 0 1 0% !important; + overflow: hidden !important; + display: block !important; +} +.rz-splitter-pane-lastresizable { + flex: 1 1 auto; +} + +.rz-splitter-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* RadzenLayout styles */ +.rz-layout { + box-sizing: border-box; + height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; + background-color: var(--rz-layout-background-color); +} +.rz-layout .rz-body { + grid-area: rz-body; + overflow: auto; +} +.rz-layout .rz-sidebar { + grid-area: rz-sidebar; + position: static; +} +.rz-layout .rz-header { + grid-area: rz-header; + z-index: 2; +} +.rz-layout .rz-footer { + grid-area: rz-footer; +} + +@media (max-width: 768px) { + body:has(> .rz-layout) { + overflow-x: hidden; + } + .rz-header, + .rz-footer, + .rz-body { + width: 100vw; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } +} +.rz-breadcrumb { + box-sizing: border-box; + display: flex; + align-items: center; +} + +.rz-breadcrumb-item + .rz-breadcrumb-item::before { + content: "»"; + display: inline-block; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + font-size: 1rem; + line-height: 1.25rem; +} + +.rz-breadcrumb-item { + display: inline-flex; + align-items: center; +} +.rz-breadcrumb-item .rz-link { + display: inline-flex; + align-items: center; +} + +.rz-alert { + box-sizing: border-box; + display: flex; + align-items: flex-start; + gap: var(--rz-alert-gap); + margin: var(--rz-alert-margin); + padding: var(--rz-alert-padding); + width: 100%; + border-radius: var(--rz-alert-border-radius); + background-color: var(--rz-alert-background-color); + color: var(--rz-alert-color); +} +.rz-alert-lg { + --rz-alert-gap: 1.5rem; + --rz-alert-margin: 1.5rem 0; + --rz-alert-padding: 1.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-md { + --rz-alert-gap: 1rem; + --rz-alert-margin: 1rem 0; + --rz-alert-padding: 1rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-sm { + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 0.5rem; + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-icon-margin: 0.25rem 0; +} +.rz-alert-xs { + --rz-alert-gap: 0.25rem; + --rz-alert-margin: 0.25rem 0; + --rz-alert-padding: 0.25rem; + --rz-alert-message-margin: 0; + --rz-alert-icon-margin: 0; +} +.rz-alert .rz-alert-item { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-alert-gap); +} +.rz-alert .rz-alert-icon { + color: var(--rz-alert-icon-color); + margin: var(--rz-alert-icon-margin); + font-size: var(--rz-alert-icon-size); +} +.rz-alert .rz-alert-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + margin: var(--rz-alert-message-margin); +} +.rz-alert .rz-alert-title { + font-family: var(--rz-text-font-family); + font-size: var(--rz-text-h6-font-size); + line-height: var(--rz-text-h6-line-height); + font-weight: var(--rz-text-h6-font-weight); + letter-spacing: var(--rz-text-h6-letter-spacing); + color: var(--rz-alert-title-color); + margin-bottom: var(--rz-text-h6-margin-bottom); +} +.rz-alert.rz-variant-filled { + box-shadow: var(--rz-alert-box-shadow); +} +.rz-alert.rz-variant-text { + --rz-alert-padding: 0; + --rz-alert-background-color: transparent; + --rz-alert-gap: 0.5rem; + --rz-alert-margin: 0; +} +.rz-alert.rz-variant-text .rz-alert-item { + flex: unset; +} +.rz-alert.rz-variant-text .rz-alert-message { + flex-direction: row; +} +.rz-alert.rz-variant-text .rz-alert-title { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + margin-bottom: 0; + margin-right: 0.5rem; +} +.rz-alert.rz-primary { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-primary-lighter); + --rz-alert-color: var(--rz-on-primary-lighter); + --rz-alert-title-color: var(--rz-on-primary-lighter); + --rz-alert-icon-color: var(--rz-on-primary-lighter); +} +.rz-alert.rz-primary.rz-shade-light { + --rz-alert-background-color: var(--rz-primary-light); + --rz-alert-color: var(--rz-on-primary-light); + --rz-alert-title-color: var(--rz-on-primary-light); + --rz-alert-icon-color: var(--rz-on-primary-light); +} +.rz-alert.rz-primary.rz-shade-default { + --rz-alert-background-color: var(--rz-primary); + --rz-alert-color: var(--rz-on-primary); + --rz-alert-title-color: var(--rz-on-primary); + --rz-alert-icon-color: var(--rz-on-primary); +} +.rz-alert.rz-primary.rz-shade-dark { + --rz-alert-background-color: var(--rz-primary-dark); + --rz-alert-color: var(--rz-on-primary-dark); + --rz-alert-title-color: var(--rz-on-primary-dark); + --rz-alert-icon-color: var(--rz-on-primary-dark); +} +.rz-alert.rz-primary.rz-shade-darker { + --rz-alert-background-color: var(--rz-primary-darker); + --rz-alert-color: var(--rz-on-primary-darker); + --rz-alert-title-color: var(--rz-on-primary-darker); + --rz-alert-icon-color: var(--rz-on-primary-darker); +} +.rz-alert.rz-variant-outlined.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary); + --rz-alert-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-lighter); + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-light); + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-dark); + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-outlined.rz-primary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-primary-darker); + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-variant-text.rz-primary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-default { + --rz-alert-color: var(--rz-primary); + --rz-alert-icon-color: var(--rz-primary); + --rz-alert-title-color: var(--rz-primary); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-lighter { + --rz-alert-color: var(--rz-primary-lighter); + --rz-alert-title-color: var(--rz-primary-lighter); + --rz-alert-icon-color: var(--rz-primary-lighter); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-light { + --rz-alert-color: var(--rz-primary-light); + --rz-alert-title-color: var(--rz-primary-light); + --rz-alert-icon-color: var(--rz-primary-light); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-dark { + --rz-alert-color: var(--rz-primary-dark); + --rz-alert-title-color: var(--rz-primary-dark); + --rz-alert-icon-color: var(--rz-primary-dark); +} +.rz-alert.rz-variant-text.rz-primary.rz-shade-darker { + --rz-alert-color: var(--rz-primary-darker); + --rz-alert-title-color: var(--rz-primary-darker); + --rz-alert-icon-color: var(--rz-primary-darker); +} +.rz-alert.rz-secondary { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-lighter { + --rz-alert-background-color: var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-on-secondary-lighter); + --rz-alert-title-color: var(--rz-on-secondary-lighter); + --rz-alert-icon-color: var(--rz-on-secondary-lighter); +} +.rz-alert.rz-secondary.rz-shade-light { + --rz-alert-background-color: var(--rz-secondary-light); + --rz-alert-color: var(--rz-on-secondary-light); + --rz-alert-title-color: var(--rz-on-secondary-light); + --rz-alert-icon-color: var(--rz-on-secondary-light); +} +.rz-alert.rz-secondary.rz-shade-default { + --rz-alert-background-color: var(--rz-secondary); + --rz-alert-color: var(--rz-on-secondary); + --rz-alert-title-color: var(--rz-on-secondary); + --rz-alert-icon-color: var(--rz-on-secondary); +} +.rz-alert.rz-secondary.rz-shade-dark { + --rz-alert-background-color: var(--rz-secondary-dark); + --rz-alert-color: var(--rz-on-secondary-dark); + --rz-alert-title-color: var(--rz-on-secondary-dark); + --rz-alert-icon-color: var(--rz-on-secondary-dark); +} +.rz-alert.rz-secondary.rz-shade-darker { + --rz-alert-background-color: var(--rz-secondary-darker); + --rz-alert-color: var(--rz-on-secondary-darker); + --rz-alert-title-color: var(--rz-on-secondary-darker); + --rz-alert-icon-color: var(--rz-on-secondary-darker); +} +.rz-alert.rz-variant-outlined.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary); + --rz-alert-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-lighter); + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-light); + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-dark); + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-outlined.rz-secondary.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-secondary-darker); + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-variant-text.rz-secondary { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-default { + --rz-alert-color: var(--rz-secondary); + --rz-alert-icon-color: var(--rz-secondary); + --rz-alert-title-color: var(--rz-secondary); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-lighter { + --rz-alert-color: var(--rz-secondary-lighter); + --rz-alert-title-color: var(--rz-secondary-lighter); + --rz-alert-icon-color: var(--rz-secondary-lighter); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-light { + --rz-alert-color: var(--rz-secondary-light); + --rz-alert-title-color: var(--rz-secondary-light); + --rz-alert-icon-color: var(--rz-secondary-light); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-dark { + --rz-alert-color: var(--rz-secondary-dark); + --rz-alert-title-color: var(--rz-secondary-dark); + --rz-alert-icon-color: var(--rz-secondary-dark); +} +.rz-alert.rz-variant-text.rz-secondary.rz-shade-darker { + --rz-alert-color: var(--rz-secondary-darker); + --rz-alert-title-color: var(--rz-secondary-darker); + --rz-alert-icon-color: var(--rz-secondary-darker); +} +.rz-alert.rz-info { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-lighter { + --rz-alert-background-color: var(--rz-info-lighter); + --rz-alert-color: var(--rz-on-info-lighter); + --rz-alert-title-color: var(--rz-on-info-lighter); + --rz-alert-icon-color: var(--rz-on-info-lighter); +} +.rz-alert.rz-info.rz-shade-light { + --rz-alert-background-color: var(--rz-info-light); + --rz-alert-color: var(--rz-on-info-light); + --rz-alert-title-color: var(--rz-on-info-light); + --rz-alert-icon-color: var(--rz-on-info-light); +} +.rz-alert.rz-info.rz-shade-default { + --rz-alert-background-color: var(--rz-info); + --rz-alert-color: var(--rz-on-info); + --rz-alert-title-color: var(--rz-on-info); + --rz-alert-icon-color: var(--rz-on-info); +} +.rz-alert.rz-info.rz-shade-dark { + --rz-alert-background-color: var(--rz-info-dark); + --rz-alert-color: var(--rz-on-info-dark); + --rz-alert-title-color: var(--rz-on-info-dark); + --rz-alert-icon-color: var(--rz-on-info-dark); +} +.rz-alert.rz-info.rz-shade-darker { + --rz-alert-background-color: var(--rz-info-darker); + --rz-alert-color: var(--rz-on-info-darker); + --rz-alert-title-color: var(--rz-on-info-darker); + --rz-alert-icon-color: var(--rz-on-info-darker); +} +.rz-alert.rz-variant-outlined.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info); + --rz-alert-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-lighter); + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-light); + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-dark); + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-outlined.rz-info.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-info-darker); + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-variant-text.rz-info { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-info.rz-shade-default { + --rz-alert-color: var(--rz-info); + --rz-alert-icon-color: var(--rz-info); + --rz-alert-title-color: var(--rz-info); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-lighter { + --rz-alert-color: var(--rz-info-lighter); + --rz-alert-title-color: var(--rz-info-lighter); + --rz-alert-icon-color: var(--rz-info-lighter); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-light { + --rz-alert-color: var(--rz-info-light); + --rz-alert-title-color: var(--rz-info-light); + --rz-alert-icon-color: var(--rz-info-light); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-dark { + --rz-alert-color: var(--rz-info-dark); + --rz-alert-title-color: var(--rz-info-dark); + --rz-alert-icon-color: var(--rz-info-dark); +} +.rz-alert.rz-variant-text.rz-info.rz-shade-darker { + --rz-alert-color: var(--rz-info-darker); + --rz-alert-title-color: var(--rz-info-darker); + --rz-alert-icon-color: var(--rz-info-darker); +} +.rz-alert.rz-warning { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-lighter { + --rz-alert-background-color: var(--rz-warning-lighter); + --rz-alert-color: var(--rz-on-warning-lighter); + --rz-alert-title-color: var(--rz-on-warning-lighter); + --rz-alert-icon-color: var(--rz-on-warning-lighter); +} +.rz-alert.rz-warning.rz-shade-light { + --rz-alert-background-color: var(--rz-warning-light); + --rz-alert-color: var(--rz-on-warning-light); + --rz-alert-title-color: var(--rz-on-warning-light); + --rz-alert-icon-color: var(--rz-on-warning-light); +} +.rz-alert.rz-warning.rz-shade-default { + --rz-alert-background-color: var(--rz-warning); + --rz-alert-color: var(--rz-on-warning); + --rz-alert-title-color: var(--rz-on-warning); + --rz-alert-icon-color: var(--rz-on-warning); +} +.rz-alert.rz-warning.rz-shade-dark { + --rz-alert-background-color: var(--rz-warning-dark); + --rz-alert-color: var(--rz-on-warning-dark); + --rz-alert-title-color: var(--rz-on-warning-dark); + --rz-alert-icon-color: var(--rz-on-warning-dark); +} +.rz-alert.rz-warning.rz-shade-darker { + --rz-alert-background-color: var(--rz-warning-darker); + --rz-alert-color: var(--rz-on-warning-darker); + --rz-alert-title-color: var(--rz-on-warning-darker); + --rz-alert-icon-color: var(--rz-on-warning-darker); +} +.rz-alert.rz-variant-outlined.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning); + --rz-alert-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-lighter); + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-light); + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-dark); + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-outlined.rz-warning.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker); + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-variant-text.rz-warning { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-default { + --rz-alert-color: var(--rz-warning); + --rz-alert-icon-color: var(--rz-warning); + --rz-alert-title-color: var(--rz-warning); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-lighter { + --rz-alert-color: var(--rz-warning-lighter); + --rz-alert-title-color: var(--rz-warning-lighter); + --rz-alert-icon-color: var(--rz-warning-lighter); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-light { + --rz-alert-color: var(--rz-warning-light); + --rz-alert-title-color: var(--rz-warning-light); + --rz-alert-icon-color: var(--rz-warning-light); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-dark { + --rz-alert-color: var(--rz-warning-dark); + --rz-alert-title-color: var(--rz-warning-dark); + --rz-alert-icon-color: var(--rz-warning-dark); +} +.rz-alert.rz-variant-text.rz-warning.rz-shade-darker { + --rz-alert-color: var(--rz-warning-darker); + --rz-alert-title-color: var(--rz-warning-darker); + --rz-alert-icon-color: var(--rz-warning-darker); +} +.rz-alert.rz-error { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-error.rz-shade-lighter { + --rz-alert-background-color: var(--rz-error-lighter); + --rz-alert-color: var(--rz-on-error-lighter); + --rz-alert-title-color: var(--rz-on-error-lighter); + --rz-alert-icon-color: var(--rz-on-error-lighter); +} +.rz-alert.rz-error.rz-shade-light { + --rz-alert-background-color: var(--rz-error-light); + --rz-alert-color: var(--rz-on-error-light); + --rz-alert-title-color: var(--rz-on-error-light); + --rz-alert-icon-color: var(--rz-on-error-light); +} +.rz-alert.rz-error.rz-shade-default { + --rz-alert-background-color: var(--rz-error); + --rz-alert-color: var(--rz-on-error); + --rz-alert-title-color: var(--rz-on-error); + --rz-alert-icon-color: var(--rz-on-error); +} +.rz-alert.rz-error.rz-shade-dark { + --rz-alert-background-color: var(--rz-error-dark); + --rz-alert-color: var(--rz-on-error-dark); + --rz-alert-title-color: var(--rz-on-error-dark); + --rz-alert-icon-color: var(--rz-on-error-dark); +} +.rz-alert.rz-error.rz-shade-darker { + --rz-alert-background-color: var(--rz-error-darker); + --rz-alert-color: var(--rz-on-error-darker); + --rz-alert-title-color: var(--rz-on-error-darker); + --rz-alert-icon-color: var(--rz-on-error-darker); +} +.rz-alert.rz-variant-outlined.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-lighter); + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-light); + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-dark); + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-outlined.rz-error.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-error-darker); + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-variant-text.rz-error { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-error.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-lighter { + --rz-alert-color: var(--rz-error-lighter); + --rz-alert-title-color: var(--rz-error-lighter); + --rz-alert-icon-color: var(--rz-error-lighter); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-light { + --rz-alert-color: var(--rz-error-light); + --rz-alert-title-color: var(--rz-error-light); + --rz-alert-icon-color: var(--rz-error-light); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-dark { + --rz-alert-color: var(--rz-error-dark); + --rz-alert-title-color: var(--rz-error-dark); + --rz-alert-icon-color: var(--rz-error-dark); +} +.rz-alert.rz-variant-text.rz-error.rz-shade-darker { + --rz-alert-color: var(--rz-error-darker); + --rz-alert-title-color: var(--rz-error-darker); + --rz-alert-icon-color: var(--rz-error-darker); +} +.rz-alert.rz-danger { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-lighter { + --rz-alert-background-color: var(--rz-danger-lighter); + --rz-alert-color: var(--rz-on-danger-lighter); + --rz-alert-title-color: var(--rz-on-danger-lighter); + --rz-alert-icon-color: var(--rz-on-danger-lighter); +} +.rz-alert.rz-danger.rz-shade-light { + --rz-alert-background-color: var(--rz-danger-light); + --rz-alert-color: var(--rz-on-danger-light); + --rz-alert-title-color: var(--rz-on-danger-light); + --rz-alert-icon-color: var(--rz-on-danger-light); +} +.rz-alert.rz-danger.rz-shade-default { + --rz-alert-background-color: var(--rz-danger); + --rz-alert-color: var(--rz-on-danger); + --rz-alert-title-color: var(--rz-on-danger); + --rz-alert-icon-color: var(--rz-on-danger); +} +.rz-alert.rz-danger.rz-shade-dark { + --rz-alert-background-color: var(--rz-danger-dark); + --rz-alert-color: var(--rz-on-danger-dark); + --rz-alert-title-color: var(--rz-on-danger-dark); + --rz-alert-icon-color: var(--rz-on-danger-dark); +} +.rz-alert.rz-danger.rz-shade-darker { + --rz-alert-background-color: var(--rz-danger-darker); + --rz-alert-color: var(--rz-on-danger-darker); + --rz-alert-title-color: var(--rz-on-danger-darker); + --rz-alert-icon-color: var(--rz-on-danger-darker); +} +.rz-alert.rz-variant-outlined.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger); + --rz-alert-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-lighter); + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-light); + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-dark); + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-outlined.rz-danger.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger-darker); + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-variant-text.rz-danger { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-default { + --rz-alert-color: var(--rz-danger); + --rz-alert-icon-color: var(--rz-danger); + --rz-alert-title-color: var(--rz-danger); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-lighter { + --rz-alert-color: var(--rz-danger-lighter); + --rz-alert-title-color: var(--rz-danger-lighter); + --rz-alert-icon-color: var(--rz-danger-lighter); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-light { + --rz-alert-color: var(--rz-danger-light); + --rz-alert-title-color: var(--rz-danger-light); + --rz-alert-icon-color: var(--rz-danger-light); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-dark { + --rz-alert-color: var(--rz-danger-dark); + --rz-alert-title-color: var(--rz-danger-dark); + --rz-alert-icon-color: var(--rz-danger-dark); +} +.rz-alert.rz-variant-text.rz-danger.rz-shade-darker { + --rz-alert-color: var(--rz-danger-darker); + --rz-alert-title-color: var(--rz-danger-darker); + --rz-alert-icon-color: var(--rz-danger-darker); +} +.rz-alert.rz-success { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-lighter { + --rz-alert-background-color: var(--rz-success-lighter); + --rz-alert-color: var(--rz-on-success-lighter); + --rz-alert-title-color: var(--rz-on-success-lighter); + --rz-alert-icon-color: var(--rz-on-success-lighter); +} +.rz-alert.rz-success.rz-shade-light { + --rz-alert-background-color: var(--rz-success-light); + --rz-alert-color: var(--rz-on-success-light); + --rz-alert-title-color: var(--rz-on-success-light); + --rz-alert-icon-color: var(--rz-on-success-light); +} +.rz-alert.rz-success.rz-shade-default { + --rz-alert-background-color: var(--rz-success); + --rz-alert-color: var(--rz-on-success); + --rz-alert-title-color: var(--rz-on-success); + --rz-alert-icon-color: var(--rz-on-success); +} +.rz-alert.rz-success.rz-shade-dark { + --rz-alert-background-color: var(--rz-success-dark); + --rz-alert-color: var(--rz-on-success-dark); + --rz-alert-title-color: var(--rz-on-success-dark); + --rz-alert-icon-color: var(--rz-on-success-dark); +} +.rz-alert.rz-success.rz-shade-darker { + --rz-alert-background-color: var(--rz-success-darker); + --rz-alert-color: var(--rz-on-success-darker); + --rz-alert-title-color: var(--rz-on-success-darker); + --rz-alert-icon-color: var(--rz-on-success-darker); +} +.rz-alert.rz-variant-outlined.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success); + --rz-alert-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-lighter); + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-light); + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-dark); + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-outlined.rz-success.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-success-darker); + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-variant-text.rz-success { + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-success.rz-shade-default { + --rz-alert-color: var(--rz-success); + --rz-alert-icon-color: var(--rz-success); + --rz-alert-title-color: var(--rz-success); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-lighter { + --rz-alert-color: var(--rz-success-lighter); + --rz-alert-title-color: var(--rz-success-lighter); + --rz-alert-icon-color: var(--rz-success-lighter); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-light { + --rz-alert-color: var(--rz-success-light); + --rz-alert-title-color: var(--rz-success-light); + --rz-alert-icon-color: var(--rz-success-light); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-dark { + --rz-alert-color: var(--rz-success-dark); + --rz-alert-title-color: var(--rz-success-dark); + --rz-alert-icon-color: var(--rz-success-dark); +} +.rz-alert.rz-variant-text.rz-success.rz-shade-darker { + --rz-alert-color: var(--rz-success-darker); + --rz-alert-title-color: var(--rz-success-darker); + --rz-alert-icon-color: var(--rz-success-darker); +} +.rz-alert.rz-base { + --rz-alert-background-color: var(--rz-base); + --rz-alert-color: var(--rz-on-base); + --rz-alert-title-color: var(--rz-on-base); + --rz-alert-icon-color: var(--rz-on-base); +} +.rz-alert.rz-variant-outlined.rz-base { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-on-base); + --rz-alert-color: var(--rz-on-base); + --rz-alert-title-color: var(--rz-on-base); + --rz-alert-icon-color: var(--rz-on-base); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-base { + --rz-alert-color: var(--rz-on-base); + --rz-alert-title-color: var(--rz-on-base); + --rz-alert-icon-color: var(--rz-on-base); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-light { + --rz-alert-background-color: var(--rz-base-500); + --rz-alert-color: var(--rz-text-color); + --rz-alert-title-color: var(--rz-text-color); + --rz-alert-icon-color: var(--rz-text-color); +} +.rz-alert.rz-variant-outlined.rz-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-500); + --rz-alert-color: var(--rz-base-500); + --rz-alert-title-color: var(--rz-base-500); + --rz-alert-icon-color: var(--rz-base-500); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-light { + --rz-alert-color: var(--rz-base-500); + --rz-alert-title-color: var(--rz-base-500); + --rz-alert-icon-color: var(--rz-base-500); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-dark { + --rz-alert-background-color: var(--rz-base-900); + --rz-alert-color: var(--rz-text-contrast-color); + --rz-alert-title-color: var(--rz-text-contrast-color); + --rz-alert-icon-color: var(--rz-text-contrast-color); +} +.rz-alert.rz-variant-outlined.rz-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} +.rz-alert.rz-variant-text.rz-dark { + --rz-alert-color: var(--rz-base-900); + --rz-alert-title-color: var(--rz-base-900); + --rz-alert-icon-color: var(--rz-base-900); + --rz-alert-background-color: transparent; +} + +@keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +@-webkit-keyframes mic-blink { + 0% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } + 50% { + background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); + } + 100% { + background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); + } +} +.rz-button.rz-speech-to-text-button-recording { + -webkit-animation: mic-blink 2s linear infinite; + -moz-animation: mic-blink 2s linear infinite; + animation: mic-blink 2s linear infinite; +} + +.rz-flex-row { + flex-direction: row !important; +} + +.rz-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.rz-flex-column { + flex-direction: column !important; +} + +.rz-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.rz-stack { + box-sizing: border-box; + gap: var(--rz-gap); +} + +.rz-row { + box-sizing: border-box; + flex-wrap: wrap; + gap: var(--rz-gap); + row-gap: var(--rz-row-gap); +} + +.rz-row > [class^=rz-col] { + flex: 1 0 0%; +} + +.rz-row > [class*=rz-col-] { + flex: 0 0 auto; + width: 100%; +} + +.rz-row > .rz-col-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); +} + +.rz-row > .rz-col-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-row > .rz-col-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-row > .rz-col-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-row > .rz-col-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-row > .rz-col-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-row > .rz-col-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-row > .rz-col-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-row > .rz-col-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-row > .rz-col-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-row > .rz-col-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-row > .rz-col-12 { + max-width: 100%; + flex-basis: 100%; +} + +@media (min-width: 576px) { + .rz-row > .rz-col-xs-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xs-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xs-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 768px) { + .rz-row > .rz-col-sm-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-sm-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-sm-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1024px) { + .rz-row > .rz-col-md-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-md-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-md-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-md-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-md-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-md-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-md-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-md-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-md-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-md-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-md-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-md-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1280px) { + .rz-row > .rz-col-lg-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-lg-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-lg-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 1920px) { + .rz-row > .rz-col-xl-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xl-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xl-12 { + max-width: 100%; + flex-basis: 100%; + } +} +@media (min-width: 2560px) { + .rz-row > .rz-col-xx-1 { + max-width: calc((100% - 11 * var(--rz-gap)) / 12); + flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); + } + .rz-row > .rz-col-xx-2 { + max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-3 { + max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-4 { + max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-5 { + max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-6 { + max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-7 { + max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-8 { + max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-9 { + max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-10 { + max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-11 { + max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-row > .rz-col-xx-12 { + max-width: 100%; + flex-basis: 100%; + } +} +.rz-offset-0 { + margin-inline-start: 0; +} + +.rz-offset-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); +} + +.rz-offset-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); +} + +.rz-offset-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); +} + +.rz-offset-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); +} + +.rz-offset-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); +} + +.rz-offset-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); +} + +.rz-offset-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); +} + +.rz-offset-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); +} + +.rz-offset-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); +} + +.rz-offset-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); +} + +.rz-offset-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); +} + +@media (min-width: 576px) { + .rz-offset-xs-0 { + margin-inline-start: 0; + } + .rz-offset-xs-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xs-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xs-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xs-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xs-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xs-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xs-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xs-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xs-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xs-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xs-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 768px) { + .rz-offset-sm-0 { + margin-inline-start: 0; + } + .rz-offset-sm-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-sm-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-sm-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-sm-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-sm-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-sm-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-sm-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-sm-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-sm-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-sm-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-sm-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1024px) { + .rz-offset-md-0 { + margin-inline-start: 0; + } + .rz-offset-md-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-md-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-md-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-md-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-md-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-md-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-md-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-md-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-md-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-md-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-md-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1280px) { + .rz-offset-lg-0 { + margin-inline-start: 0; + } + .rz-offset-lg-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-lg-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-lg-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-lg-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-lg-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-lg-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-lg-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-lg-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-lg-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-lg-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-lg-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 1920px) { + .rz-offset-xl-0 { + margin-inline-start: 0; + } + .rz-offset-xl-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xl-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xl-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xl-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xl-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xl-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xl-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xl-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xl-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xl-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xl-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +@media (min-width: 2560px) { + .rz-offset-xx-0 { + margin-inline-start: 0; + } + .rz-offset-xx-1 { + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + } + .rz-offset-xx-2 { + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + } + .rz-offset-xx-3 { + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + } + .rz-offset-xx-4 { + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + } + .rz-offset-xx-5 { + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + } + .rz-offset-xx-6 { + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + } + .rz-offset-xx-7 { + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + } + .rz-offset-xx-8 { + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + } + .rz-offset-xx-9 { + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + } + .rz-offset-xx-10 { + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + } + .rz-offset-xx-11 { + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + } +} +.rz-order-first { + order: -1 !important; +} + +.rz-order-last { + order: 13 !important; +} + +.rz-order-0 { + order: 0 !important; +} + +.rz-order-1 { + order: 1 !important; +} + +.rz-order-2 { + order: 2 !important; +} + +.rz-order-3 { + order: 3 !important; +} + +.rz-order-4 { + order: 4 !important; +} + +.rz-order-5 { + order: 5 !important; +} + +.rz-order-6 { + order: 6 !important; +} + +.rz-order-7 { + order: 7 !important; +} + +.rz-order-8 { + order: 8 !important; +} + +.rz-order-9 { + order: 9 !important; +} + +.rz-order-10 { + order: 10 !important; +} + +.rz-order-11 { + order: 11 !important; +} + +.rz-order-12 { + order: 12 !important; +} + +@media (min-width: 576px) { + .rz-order-xs-first { + order: -1 !important; + } + .rz-order-xs-last { + order: 13 !important; + } + .rz-order-xs-0 { + order: 0 !important; + } + .rz-order-xs-1 { + order: 1 !important; + } + .rz-order-xs-2 { + order: 2 !important; + } + .rz-order-xs-3 { + order: 3 !important; + } + .rz-order-xs-4 { + order: 4 !important; + } + .rz-order-xs-5 { + order: 5 !important; + } + .rz-order-xs-6 { + order: 6 !important; + } + .rz-order-xs-7 { + order: 7 !important; + } + .rz-order-xs-8 { + order: 8 !important; + } + .rz-order-xs-9 { + order: 9 !important; + } + .rz-order-xs-10 { + order: 10 !important; + } + .rz-order-xs-11 { + order: 11 !important; + } + .rz-order-xs-12 { + order: 12 !important; + } +} +@media (min-width: 768px) { + .rz-order-sm-first { + order: -1 !important; + } + .rz-order-sm-last { + order: 13 !important; + } + .rz-order-sm-0 { + order: 0 !important; + } + .rz-order-sm-1 { + order: 1 !important; + } + .rz-order-sm-2 { + order: 2 !important; + } + .rz-order-sm-3 { + order: 3 !important; + } + .rz-order-sm-4 { + order: 4 !important; + } + .rz-order-sm-5 { + order: 5 !important; + } + .rz-order-sm-6 { + order: 6 !important; + } + .rz-order-sm-7 { + order: 7 !important; + } + .rz-order-sm-8 { + order: 8 !important; + } + .rz-order-sm-9 { + order: 9 !important; + } + .rz-order-sm-10 { + order: 10 !important; + } + .rz-order-sm-11 { + order: 11 !important; + } + .rz-order-sm-12 { + order: 12 !important; + } +} +@media (min-width: 1024px) { + .rz-order-md-first { + order: -1 !important; + } + .rz-order-md-last { + order: 13 !important; + } + .rz-order-md-0 { + order: 0 !important; + } + .rz-order-md-1 { + order: 1 !important; + } + .rz-order-md-2 { + order: 2 !important; + } + .rz-order-md-3 { + order: 3 !important; + } + .rz-order-md-4 { + order: 4 !important; + } + .rz-order-md-5 { + order: 5 !important; + } + .rz-order-md-6 { + order: 6 !important; + } + .rz-order-md-7 { + order: 7 !important; + } + .rz-order-md-8 { + order: 8 !important; + } + .rz-order-md-9 { + order: 9 !important; + } + .rz-order-md-10 { + order: 10 !important; + } + .rz-order-md-11 { + order: 11 !important; + } + .rz-order-md-12 { + order: 12 !important; + } +} +@media (min-width: 1280px) { + .rz-order-lg-first { + order: -1 !important; + } + .rz-order-lg-last { + order: 13 !important; + } + .rz-order-lg-0 { + order: 0 !important; + } + .rz-order-lg-1 { + order: 1 !important; + } + .rz-order-lg-2 { + order: 2 !important; + } + .rz-order-lg-3 { + order: 3 !important; + } + .rz-order-lg-4 { + order: 4 !important; + } + .rz-order-lg-5 { + order: 5 !important; + } + .rz-order-lg-6 { + order: 6 !important; + } + .rz-order-lg-7 { + order: 7 !important; + } + .rz-order-lg-8 { + order: 8 !important; + } + .rz-order-lg-9 { + order: 9 !important; + } + .rz-order-lg-10 { + order: 10 !important; + } + .rz-order-lg-11 { + order: 11 !important; + } + .rz-order-lg-12 { + order: 12 !important; + } +} +@media (min-width: 1920px) { + .rz-order-xl-first { + order: -1 !important; + } + .rz-order-xl-last { + order: 13 !important; + } + .rz-order-xl-0 { + order: 0 !important; + } + .rz-order-xl-1 { + order: 1 !important; + } + .rz-order-xl-2 { + order: 2 !important; + } + .rz-order-xl-3 { + order: 3 !important; + } + .rz-order-xl-4 { + order: 4 !important; + } + .rz-order-xl-5 { + order: 5 !important; + } + .rz-order-xl-6 { + order: 6 !important; + } + .rz-order-xl-7 { + order: 7 !important; + } + .rz-order-xl-8 { + order: 8 !important; + } + .rz-order-xl-9 { + order: 9 !important; + } + .rz-order-xl-10 { + order: 10 !important; + } + .rz-order-xl-11 { + order: 11 !important; + } + .rz-order-xl-12 { + order: 12 !important; + } +} +@media (min-width: 2560px) { + .rz-order-xx-first { + order: -1 !important; + } + .rz-order-xx-last { + order: 13 !important; + } + .rz-order-xx-0 { + order: 0 !important; + } + .rz-order-xx-1 { + order: 1 !important; + } + .rz-order-xx-2 { + order: 2 !important; + } + .rz-order-xx-3 { + order: 3 !important; + } + .rz-order-xx-4 { + order: 4 !important; + } + .rz-order-xx-5 { + order: 5 !important; + } + .rz-order-xx-6 { + order: 6 !important; + } + .rz-order-xx-7 { + order: 7 !important; + } + .rz-order-xx-8 { + order: 8 !important; + } + .rz-order-xx-9 { + order: 9 !important; + } + .rz-order-xx-10 { + order: 10 !important; + } + .rz-order-xx-11 { + order: 11 !important; + } + .rz-order-xx-12 { + order: 12 !important; + } +} +.rz-form-field-helper { + padding: var(--rz-form-field-helper-padding); +} + +.rz-form-field-content { + position: relative; + display: inline-flex; + align-items: center; + vertical-align: top; + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); + box-shadow: var(--rz-form-field-shadow); + transition: var(--rz-input-transition); +} +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { + flex: 1; +} +.rz-form-field-content .rz-form-field-start, +.rz-form-field-content .rz-form-field-end { + display: flex; + flex: 0; + align-items: center; + white-space: nowrap; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); +} + +.rz-form-field { + box-sizing: border-box; + display: inline-flex; + flex-direction: column; + vertical-align: top; +} +.rz-form-field:hover .rz-form-field-content { + box-shadow: var(--rz-form-field-hover-shadow); +} +.rz-form-field.rz-state-focused .rz-form-field-content { + box-shadow: var(--rz-form-field-focus-shadow); +} +.rz-form-field.rz-state-disabled .rz-form-field-content { + color: var(--rz-input-disabled-color); + box-shadow: var(--rz-input-disabled-shadow); +} +.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content { + border: var(--rz-input-disabled-border); +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled { + color: var(--rz-input-disabled-color); + opacity: 1; +} +.rz-form-field.rz-state-disabled :not(.rz-button).rz-state-disabled::placeholder, +.rz-form-field.rz-state-disabled :not(.rz-button):disabled::placeholder { + color: var(--rz-input-disabled-placeholder-color); +} +.rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { + margin: 0; + --rz-input-height: var(--rz-form-field-filled-height); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); + --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); + box-shadow: var(--rz-input-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { + top: calc(var(--rz-numeric-button-offset) + 1rem); +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-start, +.rz-form-field.rz-variant-flat .rz-form-field-content .rz-form-field-end { + padding-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-textarea, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-textarea { + margin-top: 1rem; +} +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-datepicker-trigger, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-datepicker-trigger { + top: calc(50% + 0.4375rem); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-input-hover-border); + box-shadow: var(--rz-input-hover-shadow); +} +.rz-form-field.rz-variant-flat:not(.rz-state-disabled).rz-state-focused .rz-form-field-content { + border: var(--rz-input-focus-border); + box-shadow: var(--rz-input-focus-shadow); +} +.rz-form-field.rz-variant-filled .rz-form-field-content { + border: var(--rz-form-field-filled-border); + border-radius: var(--rz-form-field-filled-border-radius); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-filled .rz-form-field-content:after { + display: var(--rz-form-field-filled-underline-display); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled):hover .rz-form-field-content { + border: var(--rz-form-field-filled-hover-border); + box-shadow: var(--rz-form-field-filled-hover-shadow); + background-color: var(--rz-form-field-filled-hover-background-color); +} +.rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused .rz-form-field-content, .rz-form-field.rz-variant-filled:not(.rz-state-disabled).rz-state-focused:hover .rz-form-field-content { + border: var(--rz-form-field-filled-focus-border); + box-shadow: var(--rz-form-field-filled-focus-shadow); + background-color: var(--rz-form-field-filled-background-color); +} +.rz-form-field.rz-variant-text .rz-form-field-content { + border-color: transparent; + box-shadow: none; + --rz-input-background-color: transparent; + --rz-input-border-radius: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; + --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); +} +.rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { + padding: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-start { + padding-inline-start: 0; +} +.rz-form-field.rz-variant-text .rz-form-field-end { + padding-inline-end: 0; +} +.rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { + content: ""; + position: absolute; + z-index: 1; + inset-inline-start: 50%; + inset-inline-end: 50%; + bottom: calc(-1 * var(--rz-border-width)); + height: calc(var(--rz-border-width) + 1px); + border: var(--rz-input-focus-border); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); +} +.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { + content: ""; + position: absolute; + inset: calc(-1 * var(--rz-border-width)); + top: auto; + height: var(--rz-border-width); + border-bottom: var(--rz-input-border); +} +.rz-form-field.rz-variant-filled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-hover-border); +} +.rz-form-field.rz-variant-filled.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-filled.rz-state-disabled:hover .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled .rz-form-field-content:after, .rz-form-field.rz-variant-text.rz-state-disabled:hover .rz-form-field-content:after { + border-bottom: var(--rz-input-disabled-border); +} +.rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); + border: var(--rz-input-focus-border); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); +} +.rz-form-field .rz-numeric-button { + display: none; +} +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { + display: block; +} + +.rz-form-field-label { + position: absolute; + pointer-events: none; + padding: var(--rz-form-field-label-padding); + inset-block-start: 50%; + inset-inline-end: auto; + border-radius: var(--rz-border-radius); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); + max-width: calc(100% - 1.5rem); + transform: translate(0, -50%); + background-color: transparent; + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); +} +.rz-state-disabled .rz-form-field-content > .rz-form-field-label { + color: var(--rz-input-disabled-color) !important; +} +.rz-form-field-label:last-child { + inset-inline-end: 1.5rem; +} +.rz-textarea ~ .rz-form-field-label { + inset-block-start: var(--rz-form-field-label-textarea-top); + transform: translate(0, 0); +} +.rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { + transform: translate(0, 0.625rem); +} +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; + transform: translate(0, 0); + color: var(--rz-input-placeholder-color); + background-color: var(--rz-form-field-label-floating-background-color); + font-size: 0.75rem; + line-height: 1rem; + max-width: calc(100% - 1.5rem); +} +.rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + background-color: inherit !important; +} +.invalid ~ .rz-form-field-label { + color: var(--rz-danger) !important; +} +.rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { + color: var(--rz-form-field-label-focus-color); +} + +.rz-timeline { + box-sizing: border-box; + display: flex; +} +.rz-timeline.rz-timeline-column { + flex-direction: column; +} +.rz-timeline.rz-timeline-column .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-left:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-right:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-item { + flex-direction: row-reverse; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-start { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse .rz-timeline-content-end { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-start { + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) .rz-timeline-content-end { + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: start; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: end; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-item:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: left; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-left .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item { + flex-direction: row; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-item:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + left: auto; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-start { + max-width: calc(100% - var(--rz-timeline-axis-size)); + text-align: right; +} +.rz-timeline.rz-timeline-column.rz-timeline-reverse.rz-timeline-right .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row { + flex-direction: row; +} +.rz-timeline.rz-timeline-row .rz-timeline-item { + flex-direction: column; + justify-content: end; + width: 100%; +} +.rz-timeline.rz-timeline-row.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-start:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-top:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item { + flex-direction: column-reverse; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-start { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-end:not(.rz-timeline-reverse) .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-bottom:not(.rz-timeline-reverse) .rz-timeline-content-end { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse .rz-timeline-item { + flex-direction: column-reverse; + justify-content: start; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-alternate .rz-timeline-item:nth-child(even) { + flex-direction: column; + justify-content: end; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-item:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + bottom: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-start .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-top .rz-timeline-content-end { + display: none; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item { + flex-direction: column; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-item:before, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-item:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2); + top: auto; +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-start, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-start { + max-height: calc(100% - var(--rz-timeline-axis-size)); +} +.rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-end .rz-timeline-content-end, .rz-timeline.rz-timeline-row.rz-timeline-reverse.rz-timeline-bottom .rz-timeline-content-end { + display: none; +} + +.rz-timeline-item { + display: flex; + padding: var(--rz-timeline-item-padding); + position: relative; +} +.rz-timeline-align-items-center .rz-timeline-item { + align-items: center; +} +.rz-timeline-align-items-normal .rz-timeline-item { + align-items: normal; +} +.rz-timeline-align-items-start .rz-timeline-item { + align-items: start; +} +.rz-timeline-align-items-end .rz-timeline-item { + align-items: end; +} +.rz-timeline-align-items-stretch .rz-timeline-item { + align-items: stretch; +} +.rz-timeline-item:before { + content: ""; + position: absolute; + background-color: var(--rz-timeline-line-color); +} +.rz-timeline-column .rz-timeline-item:before { + width: var(--rz-timeline-line-width); + top: 0; + bottom: 0; + left: calc(50% - var(--rz-timeline-line-width) / 2); + right: auto; +} +.rz-timeline-column .rz-timeline-item:first-child:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-top-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + top: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + top: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column .rz-timeline-item:last-child:before { + bottom: calc(50% - var(--rz-timeline-line-width) / 2); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-column.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + bottom: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-column.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + bottom: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:before { + top: calc(50% - var(--rz-timeline-line-width) / 2); + bottom: auto; + left: 0; + right: 0; + height: var(--rz-timeline-line-width); +} +.rz-timeline-row .rz-timeline-item:first-child:before { + left: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-left-radius: var(--rz-timeline-line-border-radius); + border-bottom-left-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:first-child:before { + left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:first-child:before { + left: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row .rz-timeline-item:last-child:before { + right: calc(50% - var(--rz-timeline-line-width) / 2); + border-top-right-radius: var(--rz-timeline-line-border-radius); + border-bottom-right-radius: var(--rz-timeline-line-border-radius); +} +.rz-timeline-row.rz-timeline-align-items-start .rz-timeline-item:last-child:before { + right: calc(100% - var(--rz-timeline-item-padding) - var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} +.rz-timeline-row.rz-timeline-align-items-end .rz-timeline-item:last-child:before { + right: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-point-size) / 2 - var(--rz-timeline-line-width) / 2); +} + +.rz-timeline-content-start { + text-align: center; +} +.rz-timeline-column .rz-timeline-content-start { + flex: 1 1 auto; + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-content-end { + flex: 1 1 auto; + text-align: center; +} +.rz-timeline-column .rz-timeline-content-end { + max-width: calc(50% - var(--rz-timeline-axis-size) / 2); +} +.rz-timeline-row .rz-timeline-content-end { + max-height: calc(50% - var(--rz-timeline-axis-size) / 2); +} + +.rz-timeline-axis { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 1 var(--rz-timeline-axis-size); +} +.rz-timeline-column .rz-timeline-axis { + width: var(--rz-timeline-axis-size); +} +.rz-timeline-row .rz-timeline-axis { + height: var(--rz-timeline-axis-size); +} + +.rz-timeline-point { + position: relative; + display: flex; + flex: 0 1 var(--rz-timeline-point-size); + align-items: center; + justify-content: center; + height: var(--rz-timeline-point-size); + width: var(--rz-timeline-point-size); + border: var(--rz-timeline-point-border); + border-radius: var(--rz-timeline-point-border-radius); + background-color: var(--rz-timeline-point-background-color); + color: var(--rz-timeline-point-color); +} + +.rz-timeline-point-outlined { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border-color: var(--rz-timeline-point-background-color); +} + +.rz-timeline-point-flat { + border: 0; +} + +.rz-timeline-point-text { + background-color: var(--rz-base-background-color); + color: var(--rz-timeline-point-color); + border: 0; +} + +.rz-timeline-point-primary { + background-color: var(--rz-primary); + color: var(--rz-on-primary); +} + +.rz-timeline-point-outlined.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); + border-color: var(--rz-primary); +} + +.rz-timeline-point-text.rz-timeline-point-primary { + background-color: var(--rz-base-background-color); + color: var(--rz-primary); +} + +.rz-timeline-point-secondary { + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); +} + +.rz-timeline-point-outlined.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); + border-color: var(--rz-secondary); +} + +.rz-timeline-point-text.rz-timeline-point-secondary { + background-color: var(--rz-base-background-color); + color: var(--rz-secondary); +} + +.rz-timeline-point-info { + background-color: var(--rz-info); + color: var(--rz-on-info); +} + +.rz-timeline-point-outlined.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); + border-color: var(--rz-info); +} + +.rz-timeline-point-text.rz-timeline-point-info { + background-color: var(--rz-base-background-color); + color: var(--rz-info); +} + +.rz-timeline-point-warning { + background-color: var(--rz-warning); + color: var(--rz-on-warning); +} + +.rz-timeline-point-outlined.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); + border-color: var(--rz-warning); +} + +.rz-timeline-point-text.rz-timeline-point-warning { + background-color: var(--rz-base-background-color); + color: var(--rz-warning); +} + +.rz-timeline-point-error { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-error { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-danger { + background-color: var(--rz-danger); + color: var(--rz-on-danger); +} + +.rz-timeline-point-outlined.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); + border-color: var(--rz-danger); +} + +.rz-timeline-point-text.rz-timeline-point-danger { + background-color: var(--rz-base-background-color); + color: var(--rz-danger); +} + +.rz-timeline-point-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} + +.rz-timeline-point-outlined.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); + border-color: var(--rz-success); +} + +.rz-timeline-point-text.rz-timeline-point-success { + background-color: var(--rz-base-background-color); + color: var(--rz-success); +} + +.rz-timeline-point-base { + background-color: var(--rz-base); + color: var(--rz-on-base); +} + +.rz-timeline-point-outlined.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base); + border-color: var(--rz-base); +} + +.rz-timeline-point-text.rz-timeline-point-base { + background-color: var(--rz-base-background-color); + color: var(--rz-base); +} + +.rz-timeline-point-light { + background-color: var(--rz-base-500); + color: var(--rz-text-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-500); + border-color: var(--rz-base-500); +} + +.rz-timeline-point-text.rz-timeline-point-light { + background-color: var(--rz-base-background-color); + color: var(--rz-base-500); +} + +.rz-timeline-point-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + +.rz-timeline-point-outlined.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); + border-color: var(--rz-base-900); +} + +.rz-timeline-point-text.rz-timeline-point-dark { + background-color: var(--rz-base-background-color); + color: var(--rz-base-900); +} + +.rz-timeline-axis-lg { + --rz-timeline-point-size: 3rem; +} +.rz-timeline-axis-lg .rzi { + font-size: 2rem; +} + +.rz-timeline-axis-md { + --rz-timeline-point-size: 1.5rem; +} +.rz-timeline-axis-md .rzi { + font-size: 1rem; +} + +.rz-timeline-axis-sm { + --rz-timeline-point-size: 1rem; +} +.rz-timeline-axis-sm .rzi { + font-size: 0.625rem; +} + +.rz-timeline-axis-xs { + --rz-timeline-point-size: 0.75rem; +} +.rz-timeline-axis-xs .rzi { + font-size: 0.5rem; +} + +.rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { + width: 100%; + height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #4f5154; + --rz-base-50: #f6f6f7; + --rz-base-100: #eaebec; + --rz-base-200: #e1e2e3; + --rz-base-300: #c9cacd; + --rz-base-400: #b0b2b5; + --rz-base-500: #6d6f74; + --rz-base-600: #4f5154; + --rz-base-700: #3b3c3f; + --rz-base-800: #242527; + --rz-base-900: #19191a; + --rz-base-light: #e1e2e3; + --rz-base-lighter: #ffffff; + --rz-base-dark: #3b3c3f; + --rz-base-darker: #000000; + --rz-primary: #3871ff; + --rz-primary-light: #88aaff; + --rz-primary-lighter: rgba(56, 113, 255, 0.2); + --rz-primary-dark: #2f5fd6; + --rz-primary-darker: #2b56c2; + --rz-secondary: #2a3c68; + --rz-secondary-light: #4c5b80; + --rz-secondary-lighter: rgba(42, 60, 104, 0.2); + --rz-secondary-dark: #233257; + --rz-secondary-darker: #202e4f; + --rz-info: #12a4f5; + --rz-info-light: #38b3f7; + --rz-info-lighter: rgba(18, 164, 245, 0.2); + --rz-info-dark: #0f8ace; + --rz-info-darker: #0e7dba; + --rz-success: #009b51; + --rz-success-light: #29ab6d; + --rz-success-lighter: rgba(0, 155, 81, 0.2); + --rz-success-dark: #008244; + --rz-success-darker: #00763e; + --rz-warning: #ffae11; + --rz-warning-light: #ffbb37; + --rz-warning-lighter: rgba(255, 174, 17, 0.2); + --rz-warning-dark: #d6920e; + --rz-warning-darker: #c2840d; + --rz-danger: #f31155; + --rz-danger-light: #f53770; + --rz-danger-lighter: rgba(243, 17, 85, 0.2); + --rz-danger-dark: #cc0e47; + --rz-danger-darker: #b90d41; + --rz-on-base: #ffffff; + --rz-on-base-light: #19191a; + --rz-on-base-lighter: #19191a; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #000000; + --rz-on-primary-lighter: #88aaff; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #ffffff; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #12a4f5; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #009b51; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #ffae11; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f31155; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-900); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 1px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary-light); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-50); + --rz-text-color: var(--rz-base-100); + --rz-text-secondary-color: var(--rz-base-300); + --rz-text-tertiary-color: var(--rz-base-400); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-primary-light); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-primary); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-base-800); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.14), 0px 8px 20px rgba(0, 0, 0, 0.21); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.14), 0px 4px 6px rgba(0, 0, 0, 0.14), 0px 12px 24px rgba(0, 0, 0, 0.22); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.14), 0px 5px 8px rgba(0, 0, 0, 0.14), 0px 14px 28px rgba(0, 0, 0, 0.23); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.14), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 16px 32px rgba(0, 0, 0, 0.24); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.14), 0px 7px 12px rgba(0, 0, 0, 0.14), 0px 18px 40px rgba(0, 0, 0, 0.25); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.14), 0px 8px 16px rgba(0, 0, 0, 0.14), 0px 20px 48px rgba(0, 0, 0, 0.26); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.14), 0px 9px 20px rgba(0, 0, 0, 0.14), 0px 22px 64px rgba(0, 0, 0, 0.3); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-base-900); + --rz-accordion-hover-color: var(--rz-primary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: #3b3c3f; + --rz-button-base-color: #242527; + --rz-button-background-size: 100% 0%, 100% 0%; + --rz-button-border-radius: 4px; + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: none; + --rz-button-hover-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-hover-background-size: 100% 200%, 100% 0%; + --rz-button-focus-shadow: none; + --rz-button-focus-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-focus-background-size: 100% 200%, 100% 0%; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: none; + --rz-button-active-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-active-background-size: 100% 0%, 100% 200%; + --rz-button-disabled-opacity: 0.5; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-800); + --rz-card-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-600); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: var(--rz-border-radius); + --rz-checkbox-border-width: 1px; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-hover-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-disabled-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-color: var(--rz-primary-light); + --rz-checkbox-checked-shadow: none; + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-hover-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-icon-border-radius: calc(var(--rz-border-radius) / 2); + --rz-checkbox-icon-width: 1rem; + --rz-checkbox-icon-height: 1rem; + --rz-checkbox-icon-font-size: 1rem; + --rz-checkbox-tri-icon-width: 1rem; + --rz-checkbox-tri-icon-height: 1rem; + --rz-checkbox-tri-icon-font-size: 1rem; + /* Chip */ + --rz-chip-background-color: var(--rz-base-600); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: 1rem; + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: 1rem; + --rz-colorpicker-item-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3); + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3), 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.08); + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: transparent; + --rz-datalist-shadow: none; + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-700); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: none; + --rz-datalist-item-border: var(--rz-border-base-700); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-text-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-color); + --rz-datepicker-header-background-color: var(--rz-base-background-color); + --rz-datepicker-header-padding-block: 0.5rem; + --rz-datepicker-header-padding-inline: 0.5rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0 0.5rem; + --rz-datepicker-calendar-padding-inline: 0.5rem; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-primary-lighter); + --rz-datepicker-calendar-hover-background-color: var(--rz-primary-lighter); + --rz-datepicker-calendar-selected-color: var(--rz-on-primary); + --rz-datepicker-calendar-selected-background-color: var(--rz-primary); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-dark); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-dark); + --rz-datepicker-calendar-border: none; + --rz-datepicker-calendar-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-primary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-primary); + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-background-color); + --rz-timepicker-separator-color: var(--rz-text-disabled-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-primary); + --rz-timepicker-button-background-color: var(--rz-primary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: var(--rz-border-radius); + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 1.25rem 0.5rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.5rem; + --rz-dialog-title-line-height: 1.25em; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: top; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-600); + --rz-dialog-border-radius: calc(2 * var(--rz-border-radius)); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-shadow: none; + --rz-dropdown-item-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-transition: var(--rz-transition-all); + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-700); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-700); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-700); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-primary); + --rz-editor-button-selected-color: var(--rz-on-primary); + --rz-editor-separator-background-color: var(--rz-base-600); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-700); + --rz-fieldset-border-radius: var(--rz-border-radius); + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-700); + --rz-fieldset-toggle-color: var(--rz-text-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: none; + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-700); + --rz-form-field-filled-hover-background-color: var(--rz-base-600); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary-light); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(243, 17, 85, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-primary); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-primary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3); + /* Grid */ + --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-600), 0 -1px 0 0 var(--rz-base-600); + --rz-grid-cell-border: var(--rz-border-base-700); + --rz-grid-right-cell-border: var(--rz-border-base-700); + --rz-grid-bottom-cell-border: var(--rz-border-base-700); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-primary-lighter); + --rz-grid-hover-color: var(--rz-on-primary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: var(--rz-primary-lighter); + --rz-grid-selected-color: var(--rz-on-primary-lighter); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-base-700); + --rz-grid-header-cell-border-bottom: var(--rz-border-normal); + --rz-grid-header-background-color: var(--rz-base-800); + --rz-grid-header-font-size: 0.875rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: none; + --rz-grid-header-color: var(--rz-text-title-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-800); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-title-color); + --rz-grid-foot-background-color: var(--rz-base-700); + --rz-grid-filter-background-color: var(--rz-base-700); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: none; + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-base-300); + --rz-grid-filter-focus-color: var(--rz-text-title-color); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-700); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base); + --rz-grid-clear-filter-button-color: var(--rz-on-base); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: none; + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-color); + --rz-grid-shadow: none; + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: var(--rz-base-900); + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-primary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-900); + --rz-grid-loading-indicator-color: var(--rz-on-primary-lighter); + --rz-grid-loading-indicator-background-color: var(--rz-primary-lighter); + --rz-grid-frozen-cell-border: var(--rz-border-base-700); + --rz-grid-frozen-cell-background-color: var(--rz-base-800); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-base-700); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-disabled-color); + --rz-column-drag-handle-hover-color: var(--rz-text-title-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-800); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-base-800); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: none; + --rz-input-hover-shadow: none; + --rz-input-hover-border: var(--rz-border-primary-light); + --rz-input-focus-shadow: 0px 0px 0px 1px var(--rz-base-900), 0px 0px 0px 3px rgba(56, 113, 255, 0.4); + --rz-input-focus-border: var(--rz-border-primary-light); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: none; + --rz-input-disabled-background-color: var(--rz-base-900); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 0.5; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: transparent; + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-700); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-900); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: none; + --rz-menu-border-radius: 0; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-primary-lighter); + --rz-menu-item-hover-background-color: var(--rz-primary-lighter); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-on-primary-lighter); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-primary-lighter); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: var(--rz-transition-all); + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: transparent; + --rz-menu-top-item-hover-color: var(--rz-on-primary-lighter); + --rz-menu-top-item-hover-background-color: var(--rz-primary-lighter); + --rz-menu-top-item-selected-color: var(--rz-on-primary-lighter); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-on-primary-lighter); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-base-background-color); + --rz-numeric-button-disabled-background-color: var(--rz-base-100); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-text-tertiary-color); + /* Overlay */ + --rz-overlay-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-700); + /* Pager */ + --rz-pager-background-color: transparent; + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: none; + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-700); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-700); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-primary-lighter); + --rz-pager-numeric-button-selected-color: var(--rz-on-primary-lighter); + --rz-pager-numeric-button-selected-border: 1px solid transparent; + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-700); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-700); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-tertiary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: var(--rz-border-base-800); + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: var(rz-text-color); + --rz-panel-menu-item-background-color: var(--rz-base-800); + --rz-panel-menu-item-hover-color: inherit; + --rz-panel-menu-item-hover-background-color: var(--rz-base-700); + --rz-panel-menu-item-active-color: inherit; + --rz-panel-menu-item-active-background-color: var(--rz-base-700); + --rz-panel-menu-item-active-indicator: #3871ff; + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-700); + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-base-700); + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-900); + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-700); + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-base-700); + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: var(rz-text-color); + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 0.4; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: var(--rz-border-radius); + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-primary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: transparent; + --rz-profile-menu-border: var(--rz-base-800); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-primary-lighter); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-700); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-primary-lighter); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-base-background-color); + --rz-radio-active-shadow: none; + --rz-radio-checked-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-shadow: none; + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-primary-light); + --rz-radio-circle-shadow: none; + --rz-radio-circle-hover-background-color: var(--rz-primary); + --rz-radio-icon-width: 0.625rem; + --rz-radio-icon-height: 0.625rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-text-tertiary-color); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.5; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-text-tertiary-color); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-600); + --rz-scheduler-minor-border-color: var(--rz-base-700); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: none; + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-700); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-base-600); + --rz-scheduler-prev-next-button-color: var(--rz-text-color); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-color); + --rz-scheduler-view-button-background-color: transparent; + --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); + --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); + --rz-scheduler-view-selected-border-color: transparent; + --rz-scheduler-header-background-color: var(--rz-base-700); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: var(--rz-text-tertiary-color); + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); + --rz-scheduler-weekend-background-color: var(--rz-base-700); + --rz-scheduler-other-month-background-color: var(--rz-base-700); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: var(--rz-info-lighter); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: rgba(109, 111, 116, 0.5); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: transparent; + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-primary-lighter); + --rz-selectbar-selected-color: var(--rz-primary-light); + --rz-selectbar-selected-border: var(--rz-border-normal); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-700); + --rz-sidebar-toggle-color: var(--rz-text-color); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-text-title-color); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-700); + --rz-sidebar-background-color: var(--rz-base-800); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-normal); + --rz-slider-border-radius: calc(2 * var(--rz-border-radius)); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-primary-lighter); + --rz-slider-range-border: var(--rz-border-primary-lighter); + --rz-slider-handle-width: 1.25rem; + --rz-slider-handle-height: 1.25rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-base-800); + --rz-slider-handle-border: 0.25rem solid var(--rz-primary); + --rz-slider-handle-border-radius: calc(4 * var(--rz-border-radius)); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-primary); + --rz-slider-handle-hover-border: 0.25rem solid var(--rz-primary); + --rz-slider-handle-hover-shadow: none; + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-600); + --rz-slider-disabled-range-border: var(--rz-border-base-600); + --rz-slider-disabled-handle-border: 0.25rem solid var(--rz-base-600); + --rz-slider-disabled-handle-background-color: var(--rz-base-800); + /* SplitButton */ + --rz-splitbutton-menu-shadow: none; + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-secondary-color); + --rz-splitter-bar-color-active: var(--rz-on-primary); + --rz-splitter-bar-background-color: var(--rz-base-700); + --rz-splitter-bar-background-color-active: var(--rz-primary); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ + --rz-gap: 1rem; + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-700); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-primary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-primary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-primary); + /* Switch */ + --rz-switch-background-color: var(--rz-base-600); + --rz-switch-checked-background-color: var(--rz-primary); + --rz-switch-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14); + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: none; + --rz-tabs-border: var(--rz-border-base-700); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-700); + --rz-tabs-tab-color: var(--rz-text-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-primary); + --rz-tabs-tab-hover-background-color: var(--rz-base-600); + --rz-tabs-tab-hover-color: var(--rz-text-color); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-text-color); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-600); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-black); + --rz-tooltip-color: var(--rz-white); + --rz-tooltip-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.14), 0px 8px 20px rgba(0, 0, 0, 0.21); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-primary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: var(--rz-border-radius); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-primary-lighter); + --rz-tree-node-hover-color: var(--rz-primary); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-title-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-700); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-base); + --rz-upload-choose-color: var(--rz-on-base); + --rz-upload-choose-hover-background-color: var(--rz-base-700); + --rz-upload-choose-hover-color: var(--rz-text-color); + --rz-upload-choose-active-background-color: var(--rz-base-900); + --rz-upload-choose-active-color: var(--rz-text-color); + --rz-upload-cancel-background-color: var(--rz-base-600); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); +} + +body { + background: #19191a no-repeat 180% 0/60% fixed url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwNCIgaGVpZ2h0PSIxNDU4IiB2aWV3Qm94PSIwIDAgMTIwNCAxNDU4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfNDkzXzEwMTM0KSI+CjxjaXJjbGUgY3g9IjcyMi4xMjgiIGN5PSI4MzkuMDIiIHI9IjQ4MS40MTkiIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF80OTNfMTAxMzQpIi8+CjwvZz4KPGcgb3BhY2l0eT0iMC41IiBmaWx0ZXI9InVybCgjZmlsdGVyMV9mXzQ5M18xMDEzNCkiPgo8Y2lyY2xlIGN4PSI0NzAuMzMzIiBjeT0iNTcwLjMzMyIgcj0iNDcwLjMzMyIgZmlsbD0idXJsKCNwYWludDFfcmFkaWFsXzQ5M18xMDEzNCkiLz4KPC9nPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIyX2ZfNDkzXzEwMTM0KSI+CjxjaXJjbGUgY3g9IjY5MS41MTEiIGN5PSI1MjIuMjk3IiByPSIzMzEuNTAzIiBmaWxsPSJ1cmwoI3BhaW50Ml9yYWRpYWxfNDkzXzEwMTM0KSIvPgo8L2c+CjxnIG9wYWNpdHk9IjAuNSIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjNfZl80OTNfMTAxMzQpIj4KPGNpcmNsZSBjeD0iNjA4LjI0NCIgY3k9IjEwNzkuOTciIHI9IjMzMS41MDMiIHRyYW5zZm9ybT0icm90YXRlKC04MS4yMjQ0IDYwOC4yNDQgMTA3OS45NykiIGZpbGw9InVybCgjcGFpbnQzX3JhZGlhbF80OTNfMTAxMzQpIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl80OTNfMTAxMzQiIHg9IjE0MC43MDkiIHk9IjI1Ny42MDEiIHdpZHRoPSIxMTYyLjg0IiBoZWlnaHQ9IjExNjIuODQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZl80OTNfMTAxMzQiIHg9Ii0xMDAiIHk9IjAiIHdpZHRoPSIxMTQwLjY3IiBoZWlnaHQ9IjExNDAuNjciIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjJfZl80OTNfMTAxMzQiIHg9IjI2MC4wMDgiIHk9IjkwLjc5MzkiIHdpZHRoPSI4NjMuMDA2IiBoZWlnaHQ9Ijg2My4wMDYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjNfZl80OTNfMTAxMzQiIHg9IjE3Ni42OTQiIHk9IjY0OC40MjMiIHdpZHRoPSI4NjMuMSIgaGVpZ2h0PSI4NjMuMSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzQ5M18xMDEzNCIvPgo8L2ZpbHRlcj4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzQ5M18xMDEzNCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg3MjIuMTI4IDgzOS4wMikgcm90YXRlKDkwKSBzY2FsZSg0ODEuNDE5KSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRjFBNkMiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkYxQTZDIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDFfcmFkaWFsXzQ5M18xMDEzNCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg0NzAuMzMzIDU3MC4zMzMpIHJvdGF0ZSg5MCkgc2NhbGUoNDcwLjMzMykiPgo8c3RvcCBzdG9wLWNvbG9yPSIjM0FBQ0ZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzNBOTVGRiIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQyX3JhZGlhbF80OTNfMTAxMzQiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjkxLjUxMSA1MjIuMjk3KSByb3RhdGUoOTApIHNjYWxlKDMzMS41MDMpIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzQ4M0FGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ODNBRkYiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50M19yYWRpYWxfNDkzXzEwMTM0IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwOC4yNDQgMTA3OS45Nykgcm90YXRlKDkwKSBzY2FsZSgzMzEuNTAzKSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkM4M0EiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkZDODNBIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K"); +} \ No newline at end of file diff --git a/_content/Radzen.Blazor/css/standard-wcag.css b/_content/Radzen.Blazor/css/standard-wcag.css index 1b86be2..265c772 100755 --- a/_content/Radzen.Blazor/css/standard-wcag.css +++ b/_content/Radzen.Blazor/css/standard-wcag.css @@ -1,6 +1,8 @@ -:root { +:root, +.rz-standard { --rz-white: #ffffff; --rz-black: #000000; + --rz-base: #e0e1e4; --rz-base-50: #ffffff; --rz-base-100: #f4f5f9; --rz-base-200: #e9eaed; @@ -11,6 +13,10 @@ --rz-base-700: #5b5b5d; --rz-base-800: #4f4f50; --rz-base-900: #262526; + --rz-base-light: #e9eaed; + --rz-base-lighter: #f4f5f9; + --rz-base-dark: #5b5b5d; + --rz-base-darker: #262526; --rz-primary: #002ea3; --rz-primary-light: #294fb2; --rz-primary-lighter: rgba(0, 46, 163, 0.16); @@ -41,6 +47,11 @@ --rz-danger-lighter: rgba(196, 14, 68, 0.16); --rz-danger-dark: #a50c39; --rz-danger-darker: #950b34; + --rz-on-base: #262526; + --rz-on-base-light: #262526; + --rz-on-base-lighter: #262526; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; --rz-on-primary: #ffffff; --rz-on-primary-light: #ffffff; --rz-on-primary-lighter: #002ea3; diff --git a/_content/Radzen.Blazor/css/standard.css b/_content/Radzen.Blazor/css/standard.css index a341d1c..ca9801a 100755 --- a/_content/Radzen.Blazor/css/standard.css +++ b/_content/Radzen.Blazor/css/standard.css @@ -34,8757 +34,3267 @@ cursor: pointer; } -:root { - --blue: #007bff; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; - --red: #dc3545; - --orange: #fd7e14; - --yellow: #ffc107; - --green: #28a745; - --teal: #20c997; - --cyan: #17a2b8; - --white: #fff; - --gray: #6c757d; - --gray-dark: #343a40; - --primary: #1151f3; - --secondary: #5d89f7; - --success: #009b51; - --info: #12a4f5; - --warning: #ffae11; - --danger: #f31155; - --light: #e9eaed; - --dark: #343a40; - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; - } - a:not(.btn) { - text-decoration: underline; - } - abbr[title]::after { - content: " (" attr(title) ")"; - } - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #adb5bd; - page-break-inside: avoid; - } - thead { - display: table-header-group; - } - tr, - img { - page-break-inside: avoid; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } - @page { - size: a3; - } - body { - min-width: 992px !important; - } - .container { - min-width: 992px !important; - } - .navbar { - display: none; - } - .badge { - border: 1px solid #000; - } - .table { - border-collapse: collapse !important; - } - .table td, - .table th { - background-color: #fff !important; - } - .table-bordered th, - .table-bordered td { - border: 1px solid #dee2e6 !important; - } - .table-dark { - color: inherit; - } - .table-dark th, - .table-dark td, - .table-dark thead th, - .table-dark tbody + tbody { - border-color: #dee2e6; - } - .table .thead-dark th { - color: inherit; - border-color: #dee2e6; - } -} -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -} - -body { - margin: 0; - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #4f4f50; - text-align: left; - background-color: #f4f5f9; -} - -[tabindex="-1"]:focus { - outline: 0 !important; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title], -abbr[data-original-title] { - text-decoration: underline; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; - text-decoration-skip-ink: none; -} - -address { - margin-bottom: 1rem; +@font-face { + font-family: "Material Symbols"; + src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"), url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations"); font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: 0.5rem; - margin-left: 0; + font-weight: 100 700; } - -blockquote { - margin: 0 0 1rem; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 900; } - -b, -strong { - font-weight: bolder; +@font-face { + font-family: "Source Sans Pro"; + src: url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2 supports variations"), url("../fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2-variations"); + font-style: italic; + font-weight: 200 900; } - -small { - font-size: 80%; +*, +*::before, +*::after { + box-sizing: inherit; } -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; +.rz-text-title-color { + color: var(--rz-base-900) !important; } -sub { - bottom: -0.25em; +.rz-text-color { + color: var(--rz-base-800) !important; } -sup { - top: -0.5em; +.rz-text-secondary-color { + color: var(--rz-base-700) !important; } -a { - color: #5d89f7; - text-decoration: none; - background-color: transparent; -} -a:hover { - color: #4e73cf; - text-decoration: underline; +.rz-text-tertiary-color { + color: var(--rz-base-600) !important; } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):focus { - outline: 0; +.rz-text-disabled-color { + color: var(--rz-base-500) !important; } -pre, -code, -kbd, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 1em; +.rz-text-contrast-color { + color: var(--rz-white) !important; } -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; +.rz-border-radius { + border-radius: var(--rz-border-radius) !important; } -figure { - margin: 0 0 1rem; +.rz-border-radius-0 { + border-radius: var(--rz-border-radius-0) !important; } -img { - vertical-align: middle; - border-style: none; +.rz-border-radius-1 { + border-radius: var(--rz-border-radius-1) !important; } -svg { - overflow: hidden; - vertical-align: middle; +.rz-border-radius-2 { + border-radius: var(--rz-border-radius-2) !important; } -table { - border-collapse: collapse; +.rz-border-radius-3 { + border-radius: var(--rz-border-radius-3) !important; } -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #6c757d; - text-align: left; - caption-side: bottom; +.rz-border-radius-4 { + border-radius: var(--rz-border-radius-4) !important; } -th { - text-align: inherit; +.rz-border-radius-5 { + border-radius: var(--rz-border-radius-5) !important; } -label { - display: inline-block; - margin-bottom: 0.5rem; +.rz-border-radius-6 { + border-radius: var(--rz-border-radius-6) !important; } -button { - border-radius: 0; +.rz-border-radius-7 { + border-radius: var(--rz-border-radius-7) !important; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +.rz-border-radius-8 { + border-radius: var(--rz-border-radius-8) !important; } -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; +.rz-border-radius-9 { + border-radius: var(--rz-border-radius-9) !important; } -button, -input { - overflow: visible; +.rz-border-radius-10 { + border-radius: var(--rz-border-radius-10) !important; } -button, -select { - text-transform: none; +.rz-shadow-0 { + box-shadow: var(--rz-shadow-0) !important; } -select { - word-wrap: normal; +.rz-shadow-1 { + box-shadow: var(--rz-shadow-1) !important; } -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; +.rz-shadow-2 { + box-shadow: var(--rz-shadow-2) !important; } -button:not(:disabled), -[type=button]:not(:disabled), -[type=reset]:not(:disabled), -[type=submit]:not(:disabled) { - cursor: pointer; +.rz-shadow-3 { + box-shadow: var(--rz-shadow-3) !important; } -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - padding: 0; - border-style: none; +.rz-shadow-4 { + box-shadow: var(--rz-shadow-4) !important; } -input[type=radio], -input[type=checkbox] { - box-sizing: border-box; - padding: 0; +.rz-shadow-5 { + box-shadow: var(--rz-shadow-5) !important; } -input[type=date], -input[type=time], -input[type=datetime-local], -input[type=month] { - -webkit-appearance: listbox; +.rz-shadow-6 { + box-shadow: var(--rz-shadow-6) !important; } -textarea { - overflow: auto; - resize: vertical; +.rz-shadow-7 { + box-shadow: var(--rz-shadow-7) !important; } -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; +.rz-shadow-8 { + box-shadow: var(--rz-shadow-8) !important; } -legend { - display: block; - width: 100%; - max-width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; - white-space: normal; +.rz-shadow-9 { + box-shadow: var(--rz-shadow-9) !important; } -progress { - vertical-align: baseline; +.rz-shadow-10 { + box-shadow: var(--rz-shadow-10) !important; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; +.rz-display-none { + display: none !important; } -[type=search] { - outline-offset: -2px; - -webkit-appearance: none; +.rz-display-block { + display: block !important; } -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; +.rz-display-inline { + display: inline !important; } -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; +.rz-display-inline-block { + display: inline-block !important; } -output { - display: inline-block; +.rz-display-flex { + display: flex !important; } -summary { - display: list-item; - cursor: pointer; +.rz-display-inline-flex { + display: inline-flex !important; } -template { - display: none; +.rz-display-grid { + display: grid !important; } -[hidden] { - display: none !important; +.rz-display-inline-grid { + display: inline-grid !important; } -.container { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} @media (min-width: 576px) { - .container { - max-width: 540px; + .rz-display-xs-none { + display: none !important; + } + .rz-display-xs-block { + display: block !important; + } + .rz-display-xs-inline { + display: inline !important; + } + .rz-display-xs-inline-block { + display: inline-block !important; + } + .rz-display-xs-flex { + display: flex !important; + } + .rz-display-xs-inline-flex { + display: inline-flex !important; + } + .rz-display-xs-grid { + display: grid !important; + } + .rz-display-xs-inline-grid { + display: inline-grid !important; } } @media (min-width: 768px) { - .container { - max-width: 720px; + .rz-display-sm-none { + display: none !important; } -} -@media (min-width: 992px) { - .container { - max-width: 960px; + .rz-display-sm-block { + display: block !important; } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; + .rz-display-sm-inline { + display: inline !important; + } + .rz-display-sm-inline-block { + display: inline-block !important; + } + .rz-display-sm-flex { + display: flex !important; + } + .rz-display-sm-inline-flex { + display: inline-flex !important; + } + .rz-display-sm-grid { + display: grid !important; + } + .rz-display-sm-inline-grid { + display: inline-grid !important; } } +@media (min-width: 1024px) { + .rz-display-md-none { + display: none !important; + } + .rz-display-md-block { + display: block !important; + } + .rz-display-md-inline { + display: inline !important; + } + .rz-display-md-inline-block { + display: inline-block !important; + } + .rz-display-md-flex { + display: flex !important; + } + .rz-display-md-inline-flex { + display: inline-flex !important; + } + .rz-display-md-grid { + display: grid !important; + } + .rz-display-md-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1280px) { + .rz-display-lg-none { + display: none !important; + } + .rz-display-lg-block { + display: block !important; + } + .rz-display-lg-inline { + display: inline !important; + } + .rz-display-lg-inline-block { + display: inline-block !important; + } + .rz-display-lg-flex { + display: flex !important; + } + .rz-display-lg-inline-flex { + display: inline-flex !important; + } + .rz-display-lg-grid { + display: grid !important; + } + .rz-display-lg-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 1920px) { + .rz-display-xl-none { + display: none !important; + } + .rz-display-xl-block { + display: block !important; + } + .rz-display-xl-inline { + display: inline !important; + } + .rz-display-xl-inline-block { + display: inline-block !important; + } + .rz-display-xl-flex { + display: flex !important; + } + .rz-display-xl-inline-flex { + display: inline-flex !important; + } + .rz-display-xl-grid { + display: grid !important; + } + .rz-display-xl-inline-grid { + display: inline-grid !important; + } +} +@media (min-width: 2560px) { + .rz-display-xx-none { + display: none !important; + } + .rz-display-xx-block { + display: block !important; + } + .rz-display-xx-inline { + display: inline !important; + } + .rz-display-xx-inline-block { + display: inline-block !important; + } + .rz-display-xx-flex { + display: flex !important; + } + .rz-display-xx-inline-flex { + display: inline-flex !important; + } + .rz-display-xx-grid { + display: grid !important; + } + .rz-display-xx-inline-grid { + display: inline-grid !important; + } +} +.rz-justify-content-normal { + justify-content: normal !important; +} -.container-fluid { - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; -} - -.row { - display: flex; - flex-wrap: wrap; - margin-right: -1rem; - margin-left: -1rem; +.rz-justify-content-stretch { + justify-content: stretch !important; } -.no-gutters { - margin-right: 0; - margin-left: 0; +.rz-justify-content-center { + justify-content: center !important; } -.no-gutters > .col, -.no-gutters > [class*=col-] { - padding-right: 0; - padding-left: 0; + +.rz-justify-content-start { + justify-content: start !important; } -.col-xl, -.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, -.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, -.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, -.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, -.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { - position: relative; - width: 100%; - padding-right: 1rem; - padding-left: 1rem; +.rz-justify-content-end { + justify-content: end !important; } -.col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.rz-justify-content-flex-start { + justify-content: flex-start !important; } -.col-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; +.rz-justify-content-flex-end { + justify-content: flex-end !important; } -.col-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; +.rz-justify-content-left { + justify-content: left !important; } -.col-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; +.rz-justify-content-right { + justify-content: right !important; } -.col-3 { - flex: 0 0 25%; - max-width: 25%; +.rz-justify-content-space-between { + justify-content: space-between !important; } -.col-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; +.rz-justify-content-space-around { + justify-content: space-around !important; } -.col-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; +.rz-justify-content-space-evenly { + justify-content: space-evenly !important; } -.col-6 { - flex: 0 0 50%; - max-width: 50%; +.rz-align-items-normal { + align-items: normal !important; } -.col-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; +.rz-align-items-stretch { + align-items: stretch !important; } -.col-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; +.rz-align-items-center { + align-items: center !important; } -.col-9 { - flex: 0 0 75%; - max-width: 75%; +.rz-align-items-start { + align-items: start !important; } -.col-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; +.rz-align-items-end { + align-items: end !important; } -.col-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; +.rz-align-items-flex-start { + align-items: flex-start !important; } -.col-12 { - flex: 0 0 100%; - max-width: 100%; +.rz-align-items-flex-end { + align-items: flex-end !important; } -.order-first { - order: -1; +.rz-color-white { + color: var(--rz-white) !important; } -.order-last { - order: 13; +.rz-color-black { + color: var(--rz-black) !important; } -.order-0 { - order: 0; +.rz-color-base { + color: var(--rz-base) !important; } -.order-1 { - order: 1; +.rz-color-base-50 { + color: var(--rz-base-50) !important; } -.order-2 { - order: 2; +.rz-color-base-100 { + color: var(--rz-base-100) !important; } -.order-3 { - order: 3; +.rz-color-base-200 { + color: var(--rz-base-200) !important; } -.order-4 { - order: 4; +.rz-color-base-300 { + color: var(--rz-base-300) !important; } -.order-5 { - order: 5; +.rz-color-base-400 { + color: var(--rz-base-400) !important; } -.order-6 { - order: 6; +.rz-color-base-500 { + color: var(--rz-base-500) !important; } -.order-7 { - order: 7; +.rz-color-base-600 { + color: var(--rz-base-600) !important; } -.order-8 { - order: 8; +.rz-color-base-700 { + color: var(--rz-base-700) !important; } -.order-9 { - order: 9; +.rz-color-base-800 { + color: var(--rz-base-800) !important; } -.order-10 { - order: 10; +.rz-color-base-900 { + color: var(--rz-base-900) !important; } -.order-11 { - order: 11; +.rz-color-base-light { + color: var(--rz-base-light) !important; } -.order-12 { - order: 12; +.rz-color-base-lighter { + color: var(--rz-base-lighter) !important; } -.offset-1 { - margin-left: 8.3333333333%; +.rz-color-base-dark { + color: var(--rz-base-dark) !important; } -.offset-2 { - margin-left: 16.6666666667%; +.rz-color-base-darker { + color: var(--rz-base-darker) !important; } -.offset-3 { - margin-left: 25%; +.rz-color-primary { + color: var(--rz-primary) !important; } -.offset-4 { - margin-left: 33.3333333333%; +.rz-color-primary-light { + color: var(--rz-primary-light) !important; } -.offset-5 { - margin-left: 41.6666666667%; +.rz-color-primary-lighter { + color: var(--rz-primary-lighter) !important; } -.offset-6 { - margin-left: 50%; +.rz-color-primary-dark { + color: var(--rz-primary-dark) !important; } -.offset-7 { - margin-left: 58.3333333333%; +.rz-color-primary-darker { + color: var(--rz-primary-darker) !important; } -.offset-8 { - margin-left: 66.6666666667%; +.rz-color-secondary { + color: var(--rz-secondary) !important; } -.offset-9 { - margin-left: 75%; +.rz-color-secondary-light { + color: var(--rz-secondary-light) !important; } -.offset-10 { - margin-left: 83.3333333333%; +.rz-color-secondary-lighter { + color: var(--rz-secondary-lighter) !important; } -.offset-11 { - margin-left: 91.6666666667%; +.rz-color-secondary-dark { + color: var(--rz-secondary-dark) !important; } -@media (min-width: 576px) { - .col-sm { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-sm-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-sm-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-sm-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-sm-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-sm-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-sm-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-sm-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-sm-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-sm-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-sm-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-sm-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-sm-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-sm-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - order: -1; - } - .order-sm-last { - order: 13; - } - .order-sm-0 { - order: 0; - } - .order-sm-1 { - order: 1; - } - .order-sm-2 { - order: 2; - } - .order-sm-3 { - order: 3; - } - .order-sm-4 { - order: 4; - } - .order-sm-5 { - order: 5; - } - .order-sm-6 { - order: 6; - } - .order-sm-7 { - order: 7; - } - .order-sm-8 { - order: 8; - } - .order-sm-9 { - order: 9; - } - .order-sm-10 { - order: 10; - } - .order-sm-11 { - order: 11; - } - .order-sm-12 { - order: 12; - } - .offset-sm-0 { - margin-left: 0; - } - .offset-sm-1 { - margin-left: 8.3333333333%; - } - .offset-sm-2 { - margin-left: 16.6666666667%; - } - .offset-sm-3 { - margin-left: 25%; - } - .offset-sm-4 { - margin-left: 33.3333333333%; - } - .offset-sm-5 { - margin-left: 41.6666666667%; - } - .offset-sm-6 { - margin-left: 50%; - } - .offset-sm-7 { - margin-left: 58.3333333333%; - } - .offset-sm-8 { - margin-left: 66.6666666667%; - } - .offset-sm-9 { - margin-left: 75%; - } - .offset-sm-10 { - margin-left: 83.3333333333%; - } - .offset-sm-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 768px) { - .col-md { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-md-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-md-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-md-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-md-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-md-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-md-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-md-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-md-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-md-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-md-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-md-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-md-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - order: -1; - } - .order-md-last { - order: 13; - } - .order-md-0 { - order: 0; - } - .order-md-1 { - order: 1; - } - .order-md-2 { - order: 2; - } - .order-md-3 { - order: 3; - } - .order-md-4 { - order: 4; - } - .order-md-5 { - order: 5; - } - .order-md-6 { - order: 6; - } - .order-md-7 { - order: 7; - } - .order-md-8 { - order: 8; - } - .order-md-9 { - order: 9; - } - .order-md-10 { - order: 10; - } - .order-md-11 { - order: 11; - } - .order-md-12 { - order: 12; - } - .offset-md-0 { - margin-left: 0; - } - .offset-md-1 { - margin-left: 8.3333333333%; - } - .offset-md-2 { - margin-left: 16.6666666667%; - } - .offset-md-3 { - margin-left: 25%; - } - .offset-md-4 { - margin-left: 33.3333333333%; - } - .offset-md-5 { - margin-left: 41.6666666667%; - } - .offset-md-6 { - margin-left: 50%; - } - .offset-md-7 { - margin-left: 58.3333333333%; - } - .offset-md-8 { - margin-left: 66.6666666667%; - } - .offset-md-9 { - margin-left: 75%; - } - .offset-md-10 { - margin-left: 83.3333333333%; - } - .offset-md-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 992px) { - .col-lg { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-lg-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-lg-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-lg-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-lg-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-lg-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-lg-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-lg-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-lg-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-lg-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-lg-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-lg-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-lg-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-lg-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - order: -1; - } - .order-lg-last { - order: 13; - } - .order-lg-0 { - order: 0; - } - .order-lg-1 { - order: 1; - } - .order-lg-2 { - order: 2; - } - .order-lg-3 { - order: 3; - } - .order-lg-4 { - order: 4; - } - .order-lg-5 { - order: 5; - } - .order-lg-6 { - order: 6; - } - .order-lg-7 { - order: 7; - } - .order-lg-8 { - order: 8; - } - .order-lg-9 { - order: 9; - } - .order-lg-10 { - order: 10; - } - .order-lg-11 { - order: 11; - } - .order-lg-12 { - order: 12; - } - .offset-lg-0 { - margin-left: 0; - } - .offset-lg-1 { - margin-left: 8.3333333333%; - } - .offset-lg-2 { - margin-left: 16.6666666667%; - } - .offset-lg-3 { - margin-left: 25%; - } - .offset-lg-4 { - margin-left: 33.3333333333%; - } - .offset-lg-5 { - margin-left: 41.6666666667%; - } - .offset-lg-6 { - margin-left: 50%; - } - .offset-lg-7 { - margin-left: 58.3333333333%; - } - .offset-lg-8 { - margin-left: 66.6666666667%; - } - .offset-lg-9 { - margin-left: 75%; - } - .offset-lg-10 { - margin-left: 83.3333333333%; - } - .offset-lg-11 { - margin-left: 91.6666666667%; - } -} -@media (min-width: 1200px) { - .col-xl { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-xl-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; - } - .col-xl-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; - } - .col-xl-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; - } - .col-xl-3 { - flex: 0 0 25%; - max-width: 25%; - } - .col-xl-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; - } - .col-xl-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-xl-6 { - flex: 0 0 50%; - max-width: 50%; - } - .col-xl-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } - .col-xl-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; - } - .col-xl-9 { - flex: 0 0 75%; - max-width: 75%; - } - .col-xl-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; - } - .col-xl-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; - } - .col-xl-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - order: -1; - } - .order-xl-last { - order: 13; - } - .order-xl-0 { - order: 0; - } - .order-xl-1 { - order: 1; - } - .order-xl-2 { - order: 2; - } - .order-xl-3 { - order: 3; - } - .order-xl-4 { - order: 4; - } - .order-xl-5 { - order: 5; - } - .order-xl-6 { - order: 6; - } - .order-xl-7 { - order: 7; - } - .order-xl-8 { - order: 8; - } - .order-xl-9 { - order: 9; - } - .order-xl-10 { - order: 10; - } - .order-xl-11 { - order: 11; - } - .order-xl-12 { - order: 12; - } - .offset-xl-0 { - margin-left: 0; - } - .offset-xl-1 { - margin-left: 8.3333333333%; - } - .offset-xl-2 { - margin-left: 16.6666666667%; - } - .offset-xl-3 { - margin-left: 25%; - } - .offset-xl-4 { - margin-left: 33.3333333333%; - } - .offset-xl-5 { - margin-left: 41.6666666667%; - } - .offset-xl-6 { - margin-left: 50%; - } - .offset-xl-7 { - margin-left: 58.3333333333%; - } - .offset-xl-8 { - margin-left: 66.6666666667%; - } - .offset-xl-9 { - margin-left: 75%; - } - .offset-xl-10 { - margin-left: 83.3333333333%; - } - .offset-xl-11 { - margin-left: 91.6666666667%; - } -} -.form-control { - display: block; - width: 100%; - height: 2.25rem; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.429; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: var(--rz-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .form-control { - transition: none; - } -} -.form-control::-ms-expand { - background-color: transparent; - border: 0; -} -.form-control:focus { - color: #495057; - background-color: #fff; - border-color: #8aaaf9; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(17, 81, 243, 0.25); -} -.form-control::placeholder { - color: var(--rz-text-tertiary-color); - opacity: 1; -} -.form-control:disabled, .form-control[readonly] { - background-color: #e9ecef; - opacity: 1; +.rz-color-secondary-darker { + color: var(--rz-secondary-darker) !important; } -select.form-control:focus::-ms-value { - color: #495057; - background-color: #fff; +.rz-color-info { + color: var(--rz-info) !important; } -.form-control-file, -.form-control-range { - display: block; - width: 100%; +.rz-color-info-light { + color: var(--rz-info-light) !important; } -.col-form-label { - padding-top: calc(0.375rem + 1px); - padding-bottom: calc(0.375rem + 1px); - margin-bottom: 0; - font-size: inherit; - line-height: 1.429; +.rz-color-info-lighter { + color: var(--rz-info-lighter) !important; } -.col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); - font-size: 1.09375rem; - line-height: 1.5; +.rz-color-info-dark { + color: var(--rz-info-dark) !important; } -.col-form-label-sm { - padding-top: calc(0.25rem + 1px); - padding-bottom: calc(0.25rem + 1px); - font-size: 0.765625rem; - line-height: 1.5; +.rz-color-info-darker { + color: var(--rz-info-darker) !important; } -.form-control-plaintext { - display: block; - width: 100%; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - margin-bottom: 0; - line-height: 1.429; - color: #4f4f50; - background-color: transparent; - border: solid transparent; - border-width: 1px 0; -} -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-right: 0; - padding-left: 0; +.rz-color-success { + color: var(--rz-success) !important; } -.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); - padding: 0.25rem 0.5rem; - font-size: 0.765625rem; - line-height: 1.5; - border-radius: 0.2rem; +.rz-color-success-light { + color: var(--rz-success-light) !important; } -.form-control-lg { - height: calc(1.5em + 1rem + 2px); - padding: 0.5rem 1rem; - font-size: 1.09375rem; - line-height: 1.5; - border-radius: 0.3rem; +.rz-color-success-lighter { + color: var(--rz-success-lighter) !important; } -select.form-control[size], select.form-control[multiple] { - height: auto; +.rz-color-success-dark { + color: var(--rz-success-dark) !important; } -textarea.form-control { - height: auto; +.rz-color-success-darker { + color: var(--rz-success-darker) !important; } -.form-group { - margin-bottom: 1rem; +.rz-color-warning { + color: var(--rz-warning) !important; } -.form-text { - display: block; - margin-top: 0.25rem; +.rz-color-warning-light { + color: var(--rz-warning-light) !important; } -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; -} -.form-row > .col, -.form-row > [class*=col-] { - padding-right: 5px; - padding-left: 5px; +.rz-color-warning-lighter { + color: var(--rz-warning-lighter) !important; } -.form-check { - position: relative; - display: block; - padding-left: 1.25rem; +.rz-color-warning-dark { + color: var(--rz-warning-dark) !important; } -.form-check-input { - position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; -} -.form-check-input:disabled ~ .form-check-label { - color: #6c757d; +.rz-color-warning-darker { + color: var(--rz-warning-darker) !important; } -.form-check-label { - margin-bottom: 0; +.rz-color-danger { + color: var(--rz-danger) !important; } -.form-check-inline { - display: inline-flex; - align-items: center; - padding-left: 0; - margin-right: 0.75rem; -} -.form-check-inline .form-check-input { - position: static; - margin-top: 0; - margin-right: 0.3125rem; - margin-left: 0; +.rz-color-danger-light { + color: var(--rz-danger-light) !important; } -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #009b51; +.rz-color-danger-lighter { + color: var(--rz-danger-lighter) !important; } -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #fff; - background-color: rgba(0, 155, 81, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-danger-dark { + color: var(--rz-danger-dark) !important; } -.was-validated .form-control:valid, .form-control.is-valid { - border-color: #009b51; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23009b51' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #009b51; - box-shadow: 0 0 0 0.2rem rgba(0, 155, 81, 0.25); -} -.was-validated .form-control:valid ~ .valid-feedback, -.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, -.form-control.is-valid ~ .valid-tooltip { - display: block; +.rz-color-danger-darker { + color: var(--rz-danger-darker) !important; } -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-base { + color: var(--rz-on-base) !important; } -.was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #009b51; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23009b51' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #009b51; - box-shadow: 0 0 0 0.2rem rgba(0, 155, 81, 0.25); -} -.was-validated .custom-select:valid ~ .valid-feedback, -.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, -.custom-select.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-light { + color: var(--rz-on-base-light) !important; } -.was-validated .form-control-file:valid ~ .valid-feedback, -.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, -.form-control-file.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-lighter { + color: var(--rz-on-base-lighter) !important; } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #009b51; -} -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { - display: block; +.rz-color-on-base-dark { + color: var(--rz-on-base-dark) !important; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #009b51; -} -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #009b51; -} -.was-validated .custom-control-input:valid ~ .valid-feedback, -.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, -.custom-control-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #00ce6c; - background-color: #00ce6c; -} -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(0, 155, 81, 0.25); -} -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #009b51; +.rz-color-on-base-darker { + color: var(--rz-on-base-darker) !important; } -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #009b51; -} -.was-validated .custom-file-input:valid ~ .valid-feedback, -.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, -.custom-file-input.is-valid ~ .valid-tooltip { - display: block; -} -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #009b51; - box-shadow: 0 0 0 0.2rem rgba(0, 155, 81, 0.25); +.rz-color-on-primary { + color: var(--rz-on-primary) !important; } -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 80%; - color: #f31155; +.rz-color-on-primary-light { + color: var(--rz-on-primary-light) !important; } -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - line-height: 1.5; - color: #fff; - background-color: rgba(243, 17, 85, 0.9); - border-radius: var(--rz-border-radius); +.rz-color-on-primary-lighter { + color: var(--rz-on-primary-lighter) !important; } -.was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #f31155; - padding-right: calc(1.429em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f31155' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f31155' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); - background-repeat: no-repeat; - background-position: center right calc(0.35725em + 0.1875rem); - background-size: calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #f31155; - box-shadow: 0 0 0 0.2rem rgba(243, 17, 85, 0.25); -} -.was-validated .form-control:invalid ~ .invalid-feedback, -.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, -.form-control.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-primary-dark { + color: var(--rz-on-primary-dark) !important; } -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-right: calc(1.429em + 0.75rem); - background-position: top calc(0.35725em + 0.1875rem) right calc(0.35725em + 0.1875rem); +.rz-color-on-primary-darker { + color: var(--rz-on-primary-darker) !important; } -.was-validated .custom-select:invalid, .custom-select.is-invalid { - border-color: #f31155; - padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f31155' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f31155' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.7145em + 0.375rem) calc(0.7145em + 0.375rem); -} -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - border-color: #f31155; - box-shadow: 0 0 0 0.2rem rgba(243, 17, 85, 0.25); -} -.was-validated .custom-select:invalid ~ .invalid-feedback, -.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, -.custom-select.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary { + color: var(--rz-on-secondary) !important; } -.was-validated .form-control-file:invalid ~ .invalid-feedback, -.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, -.form-control-file.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-light { + color: var(--rz-on-secondary-light) !important; } -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #f31155; -} -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { - display: block; +.rz-color-on-secondary-lighter { + color: var(--rz-on-secondary-lighter) !important; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #f31155; -} -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #f31155; -} -.was-validated .custom-control-input:invalid ~ .invalid-feedback, -.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, -.custom-control-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #f54278; - background-color: #f54278; -} -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(243, 17, 85, 0.25); -} -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #f31155; +.rz-color-on-secondary-dark { + color: var(--rz-on-secondary-dark) !important; } -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #f31155; -} -.was-validated .custom-file-input:invalid ~ .invalid-feedback, -.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, -.custom-file-input.is-invalid ~ .invalid-tooltip { - display: block; -} -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #f31155; - box-shadow: 0 0 0 0.2rem rgba(243, 17, 85, 0.25); +.rz-color-on-secondary-darker { + color: var(--rz-on-secondary-darker) !important; } -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -.form-inline .form-check { - width: 100%; -} -@media (min-width: 576px) { - .form-inline label { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0; - } - .form-inline .form-group { - display: flex; - flex: 0 0 auto; - flex-flow: row wrap; - align-items: center; - margin-bottom: 0; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - .form-inline .form-control-plaintext { - display: inline-block; - } - .form-inline .input-group, - .form-inline .custom-select { - width: auto; - } - .form-inline .form-check { - display: flex; - align-items: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-inline .form-check-input { - position: relative; - flex-shrink: 0; - margin-top: 0; - margin-right: 0.25rem; - margin-left: 0; - } - .form-inline .custom-control { - align-items: center; - justify-content: center; - } - .form-inline .custom-control-label { - margin-bottom: 0; - } +.rz-color-on-info { + color: var(--rz-on-info) !important; } -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 0.75rem; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: var(--rz-border-radius); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .badge { - transition: none; - } -} -a.badge:hover, a.badge:focus { - text-decoration: none; +.rz-color-on-info-light { + color: var(--rz-on-info-light) !important; } -.badge:empty { - display: none; +.rz-color-on-info-lighter { + color: var(--rz-on-info-lighter) !important; } -.btn .badge { - position: relative; - top: -1px; +.rz-color-on-info-dark { + color: var(--rz-on-info-dark) !important; } -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: calc(4 * var(--rz-border-radius)); +.rz-color-on-info-darker { + color: var(--rz-on-info-darker) !important; } -.badge-primary { - color: #fff; - background-color: #1151f3; -} -a.badge-primary:hover, a.badge-primary:focus { - color: #fff; - background-color: #0a40c7; -} -a.badge-primary:focus, a.badge-primary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(17, 81, 243, 0.5); +.rz-color-on-success { + color: var(--rz-on-success) !important; } -.badge-secondary { - color: #fff; - background-color: #5d89f7; -} -a.badge-secondary:hover, a.badge-secondary:focus { - color: #fff; - background-color: #2c66f5; -} -a.badge-secondary:focus, a.badge-secondary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(93, 137, 247, 0.5); +.rz-color-on-success-light { + color: var(--rz-on-success-light) !important; } -.badge-success { - color: #fff; - background-color: #009b51; -} -a.badge-success:hover, a.badge-success:focus { - color: #fff; - background-color: #006836; -} -a.badge-success:focus, a.badge-success.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 155, 81, 0.5); +.rz-color-on-success-lighter { + color: var(--rz-on-success-lighter) !important; } -.badge-info { - color: #fff; - background-color: #12a4f5; -} -a.badge-info:hover, a.badge-info:focus { - color: #fff; - background-color: #0986cb; -} -a.badge-info:focus, a.badge-info.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(18, 164, 245, 0.5); +.rz-color-on-success-dark { + color: var(--rz-on-success-dark) !important; } -.badge-warning { - color: #212529; - background-color: #ffae11; -} -a.badge-warning:hover, a.badge-warning:focus { - color: #212529; - background-color: #dd9200; -} -a.badge-warning:focus, a.badge-warning.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 174, 17, 0.5); +.rz-color-on-success-darker { + color: var(--rz-on-success-darker) !important; } -.badge-danger { - color: #fff; - background-color: #f31155; -} -a.badge-danger:hover, a.badge-danger:focus { - color: #fff; - background-color: #c70a43; -} -a.badge-danger:focus, a.badge-danger.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(243, 17, 85, 0.5); +.rz-color-on-warning { + color: var(--rz-on-warning) !important; } -.badge-light { - color: #212529; - background-color: #e9eaed; -} -a.badge-light:hover, a.badge-light:focus { - color: #212529; - background-color: #cdcfd6; -} -a.badge-light:focus, a.badge-light.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(233, 234, 237, 0.5); +.rz-color-on-warning-light { + color: var(--rz-on-warning-light) !important; } -.badge-dark { - color: #fff; - background-color: #343a40; -} -a.badge-dark:hover, a.badge-dark:focus { - color: #fff; - background-color: #1d2124; -} -a.badge-dark:focus, a.badge-dark.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); +.rz-color-on-warning-lighter { + color: var(--rz-on-warning-lighter) !important; } -.alert { - position: relative; - padding: 0.75rem 1.25rem; - margin-bottom: 1rem; - border: 1px solid transparent; - border-radius: 4px; +.rz-color-on-warning-dark { + color: var(--rz-on-warning-dark) !important; } -.alert-heading { - color: inherit; +.rz-color-on-warning-darker { + color: var(--rz-on-warning-darker) !important; } -.alert-link { - font-weight: 700; +.rz-color-on-danger { + color: var(--rz-on-danger) !important; } -.alert-dismissible { - padding-right: 3.8125rem; -} -.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; +.rz-color-on-danger-light { + color: var(--rz-on-danger-light) !important; } -.alert-primary { - color: #092a7e; - background-color: #cfdcfd; - border-color: #bccefc; -} -.alert-primary hr { - border-top-color: #a4bcfb; -} -.alert-primary .alert-link { - color: #061a4e; +.rz-color-on-danger-lighter { + color: var(--rz-on-danger-lighter) !important; } -.alert-secondary { - color: #304780; - background-color: #dfe7fd; - border-color: #d2defd; -} -.alert-secondary hr { - border-top-color: #baccfc; -} -.alert-secondary .alert-link { - color: #22325b; +.rz-color-on-danger-dark { + color: var(--rz-on-danger-dark) !important; } -.alert-success { - color: #00512a; - background-color: #ccebdc; - border-color: #b8e3ce; -} -.alert-success hr { - border-top-color: #a6dcc1; -} -.alert-success .alert-link { - color: #001e10; +.rz-color-on-danger-darker { + color: var(--rz-on-danger-darker) !important; } -.alert-info { - color: #09557f; - background-color: #d0edfd; - border-color: #bde6fc; -} -.alert-info hr { - border-top-color: #a5ddfb; -} -.alert-info .alert-link { - color: #06354f; +.rz-color-series-1 { + color: var(--rz-series-1) !important; } -.alert-warning { - color: #855a09; - background-color: #ffefcf; - border-color: #ffe8bc; -} -.alert-warning hr { - border-top-color: #ffdfa3; -} -.alert-warning .alert-link { - color: #553a06; +.rz-color-series-2 { + color: var(--rz-series-2) !important; } -.alert-danger { - color: #7e092c; - background-color: #fdcfdd; - border-color: #fcbccf; -} -.alert-danger hr { - border-top-color: #fba4be; -} -.alert-danger .alert-link { - color: #4e061b; +.rz-color-series-3 { + color: var(--rz-series-3) !important; } -.alert-light { - color: #797a7b; - background-color: #fbfbfb; - border-color: #f9f9fa; -} -.alert-light hr { - border-top-color: #ebebee; -} -.alert-light .alert-link { - color: #606161; +.rz-color-series-4 { + color: var(--rz-series-4) !important; } -.alert-dark { - color: #1b1e21; - background-color: #d6d8d9; - border-color: #c6c8ca; -} -.alert-dark hr { - border-top-color: #b9bbbe; -} -.alert-dark .alert-link { - color: #040505; +.rz-color-series-5 { + color: var(--rz-series-5) !important; } -.media { - display: flex; - align-items: flex-start; +.rz-color-series-6 { + color: var(--rz-series-6) !important; } -.media-body { - flex: 1; +.rz-color-series-7 { + color: var(--rz-series-7) !important; } -.align-baseline { - vertical-align: baseline !important; +.rz-color-series-8 { + color: var(--rz-series-8) !important; } -.align-top { - vertical-align: top !important; +.rz-color-series-9 { + color: var(--rz-series-9) !important; } -.align-middle { - vertical-align: middle !important; +.rz-color-series-10 { + color: var(--rz-series-10) !important; } -.align-bottom { - vertical-align: bottom !important; +.rz-color-series-11 { + color: var(--rz-series-11) !important; } -.align-text-bottom { - vertical-align: text-bottom !important; +.rz-color-series-12 { + color: var(--rz-series-12) !important; } -.align-text-top { - vertical-align: text-top !important; +.rz-color-series-13 { + color: var(--rz-series-13) !important; } -.bg-primary { - background-color: #1151f3 !important; +.rz-color-series-14 { + color: var(--rz-series-14) !important; } -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #0a40c7 !important; +.rz-color-series-15 { + color: var(--rz-series-15) !important; } -.bg-secondary { - background-color: #5d89f7 !important; +.rz-color-series-16 { + color: var(--rz-series-16) !important; } -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #2c66f5 !important; +.rz-color-series-17 { + color: var(--rz-series-17) !important; } -.bg-success { - background-color: #009b51 !important; +.rz-color-series-18 { + color: var(--rz-series-18) !important; } -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #006836 !important; +.rz-color-series-19 { + color: var(--rz-series-19) !important; } -.bg-info { - background-color: #12a4f5 !important; +.rz-color-series-20 { + color: var(--rz-series-20) !important; } -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #0986cb !important; +.rz-color-series-21 { + color: var(--rz-series-21) !important; } -.bg-warning { - background-color: #ffae11 !important; +.rz-color-series-22 { + color: var(--rz-series-22) !important; } -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #dd9200 !important; +.rz-color-series-23 { + color: var(--rz-series-23) !important; } -.bg-danger { - background-color: #f31155 !important; +.rz-color-series-24 { + color: var(--rz-series-24) !important; } -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #c70a43 !important; +.rz-background-color-white { + background-color: var(--rz-white) !important; } -.bg-light { - background-color: #e9eaed !important; +.rz-background-color-black { + background-color: var(--rz-black) !important; } -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #cdcfd6 !important; +.rz-background-color-base { + background-color: var(--rz-base) !important; } -.bg-dark { - background-color: #343a40 !important; +.rz-background-color-base-50 { + background-color: var(--rz-base-50) !important; } -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #1d2124 !important; +.rz-background-color-base-100 { + background-color: var(--rz-base-100) !important; } -.bg-white { - background-color: #fff !important; +.rz-background-color-base-200 { + background-color: var(--rz-base-200) !important; } -.bg-transparent { - background-color: transparent !important; +.rz-background-color-base-300 { + background-color: var(--rz-base-300) !important; } -.border { - border: 1px solid #dee2e6 !important; +.rz-background-color-base-400 { + background-color: var(--rz-base-400) !important; } -.border-top { - border-top: 1px solid #dee2e6 !important; +.rz-background-color-base-500 { + background-color: var(--rz-base-500) !important; } -.border-right { - border-right: 1px solid #dee2e6 !important; +.rz-background-color-base-600 { + background-color: var(--rz-base-600) !important; } -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; +.rz-background-color-base-700 { + background-color: var(--rz-base-700) !important; } -.border-left { - border-left: 1px solid #dee2e6 !important; +.rz-background-color-base-800 { + background-color: var(--rz-base-800) !important; } -.border-0 { - border: 0 !important; +.rz-background-color-base-900 { + background-color: var(--rz-base-900) !important; } -.border-top-0 { - border-top: 0 !important; +.rz-background-color-base-light { + background-color: var(--rz-base-light) !important; } -.border-right-0 { - border-right: 0 !important; +.rz-background-color-base-lighter { + background-color: var(--rz-base-lighter) !important; } -.border-bottom-0 { - border-bottom: 0 !important; +.rz-background-color-base-dark { + background-color: var(--rz-base-dark) !important; } -.border-left-0 { - border-left: 0 !important; +.rz-background-color-base-darker { + background-color: var(--rz-base-darker) !important; } -.border-primary { - border-color: #1151f3 !important; +.rz-background-color-primary { + background-color: var(--rz-primary) !important; } -.border-secondary { - border-color: #5d89f7 !important; +.rz-background-color-primary-light { + background-color: var(--rz-primary-light) !important; } -.border-success { - border-color: #009b51 !important; +.rz-background-color-primary-lighter { + background-color: var(--rz-primary-lighter) !important; } -.border-info { - border-color: #12a4f5 !important; +.rz-background-color-primary-dark { + background-color: var(--rz-primary-dark) !important; } -.border-warning { - border-color: #ffae11 !important; +.rz-background-color-primary-darker { + background-color: var(--rz-primary-darker) !important; } -.border-danger { - border-color: #f31155 !important; +.rz-background-color-secondary { + background-color: var(--rz-secondary) !important; } -.border-light { - border-color: #e9eaed !important; +.rz-background-color-secondary-light { + background-color: var(--rz-secondary-light) !important; } -.border-dark { - border-color: #343a40 !important; +.rz-background-color-secondary-lighter { + background-color: var(--rz-secondary-lighter) !important; } -.border-white { - border-color: #fff !important; +.rz-background-color-secondary-dark { + background-color: var(--rz-secondary-dark) !important; } -.rounded-sm { - border-radius: 0.2rem !important; +.rz-background-color-secondary-darker { + background-color: var(--rz-secondary-darker) !important; } -.rounded { - border-radius: 4px !important; +.rz-background-color-info { + background-color: var(--rz-info) !important; } -.rounded-top { - border-top-left-radius: 4px !important; - border-top-right-radius: 4px !important; +.rz-background-color-info-light { + background-color: var(--rz-info-light) !important; } -.rounded-right { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; +.rz-background-color-info-lighter { + background-color: var(--rz-info-lighter) !important; } -.rounded-bottom { - border-bottom-right-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-info-dark { + background-color: var(--rz-info-dark) !important; } -.rounded-left { - border-top-left-radius: 4px !important; - border-bottom-left-radius: 4px !important; +.rz-background-color-info-darker { + background-color: var(--rz-info-darker) !important; } -.rounded-lg { - border-radius: 0.3rem !important; +.rz-background-color-success { + background-color: var(--rz-success) !important; } -.rounded-circle { - border-radius: 50% !important; +.rz-background-color-success-light { + background-color: var(--rz-success-light) !important; } -.rounded-pill { - border-radius: 50rem !important; +.rz-background-color-success-lighter { + background-color: var(--rz-success-lighter) !important; } -.rounded-0 { - border-radius: 0 !important; +.rz-background-color-success-dark { + background-color: var(--rz-success-dark) !important; } -.clearfix::after { - display: block; - clear: both; - content: ""; +.rz-background-color-success-darker { + background-color: var(--rz-success-darker) !important; } -.d-none { - display: none !important; +.rz-background-color-warning { + background-color: var(--rz-warning) !important; } -.d-inline { - display: inline !important; +.rz-background-color-warning-light { + background-color: var(--rz-warning-light) !important; } -.d-inline-block { - display: inline-block !important; +.rz-background-color-warning-lighter { + background-color: var(--rz-warning-lighter) !important; } -.d-block { - display: block !important; +.rz-background-color-warning-dark { + background-color: var(--rz-warning-dark) !important; } -.d-table { - display: table !important; +.rz-background-color-warning-darker { + background-color: var(--rz-warning-darker) !important; } -.d-table-row { - display: table-row !important; +.rz-background-color-danger { + background-color: var(--rz-danger) !important; } -.d-table-cell { - display: table-cell !important; +.rz-background-color-danger-light { + background-color: var(--rz-danger-light) !important; } -.d-flex { - display: flex !important; +.rz-background-color-danger-lighter { + background-color: var(--rz-danger-lighter) !important; } -.d-inline-flex { - display: inline-flex !important; +.rz-background-color-danger-dark { + background-color: var(--rz-danger-dark) !important; } -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } - .d-sm-inline { - display: inline !important; - } - .d-sm-inline-block { - display: inline-block !important; - } - .d-sm-block { - display: block !important; - } - .d-sm-table { - display: table !important; - } - .d-sm-table-row { - display: table-row !important; - } - .d-sm-table-cell { - display: table-cell !important; - } - .d-sm-flex { - display: flex !important; - } - .d-sm-inline-flex { - display: inline-flex !important; - } +.rz-background-color-danger-darker { + background-color: var(--rz-danger-darker) !important; } -@media (min-width: 768px) { - .d-md-none { - display: none !important; - } - .d-md-inline { - display: inline !important; - } - .d-md-inline-block { - display: inline-block !important; - } - .d-md-block { - display: block !important; - } - .d-md-table { - display: table !important; - } - .d-md-table-row { - display: table-row !important; - } - .d-md-table-cell { - display: table-cell !important; - } - .d-md-flex { - display: flex !important; - } - .d-md-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base { + background-color: var(--rz-on-base) !important; } -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-inline { - display: inline !important; - } - .d-lg-inline-block { - display: inline-block !important; - } - .d-lg-block { - display: block !important; - } - .d-lg-table { - display: table !important; - } - .d-lg-table-row { - display: table-row !important; - } - .d-lg-table-cell { - display: table-cell !important; - } - .d-lg-flex { - display: flex !important; - } - .d-lg-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-light { + background-color: var(--rz-on-base-light) !important; } -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; - } - .d-xl-inline { - display: inline !important; - } - .d-xl-inline-block { - display: inline-block !important; - } - .d-xl-block { - display: block !important; - } - .d-xl-table { - display: table !important; - } - .d-xl-table-row { - display: table-row !important; - } - .d-xl-table-cell { - display: table-cell !important; - } - .d-xl-flex { - display: flex !important; - } - .d-xl-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-lighter { + background-color: var(--rz-on-base-lighter) !important; } -@media print { - .d-print-none { - display: none !important; - } - .d-print-inline { - display: inline !important; - } - .d-print-inline-block { - display: inline-block !important; - } - .d-print-block { - display: block !important; - } - .d-print-table { - display: table !important; - } - .d-print-table-row { - display: table-row !important; - } - .d-print-table-cell { - display: table-cell !important; - } - .d-print-flex { - display: flex !important; - } - .d-print-inline-flex { - display: inline-flex !important; - } + +.rz-background-color-on-base-dark { + background-color: var(--rz-on-base-dark) !important; } -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; + +.rz-background-color-on-base-darker { + background-color: var(--rz-on-base-darker) !important; } -.embed-responsive::before { - display: block; - content: ""; + +.rz-background-color-on-primary { + background-color: var(--rz-on-primary) !important; } -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; + +.rz-background-color-on-primary-light { + background-color: var(--rz-on-primary-light) !important; } -.embed-responsive-21by9::before { - padding-top: 42.8571428571%; +.rz-background-color-on-primary-lighter { + background-color: var(--rz-on-primary-lighter) !important; } -.embed-responsive-16by9::before { - padding-top: 56.25%; +.rz-background-color-on-primary-dark { + background-color: var(--rz-on-primary-dark) !important; } -.embed-responsive-4by3::before { - padding-top: 75%; +.rz-background-color-on-primary-darker { + background-color: var(--rz-on-primary-darker) !important; } -.embed-responsive-1by1::before { - padding-top: 100%; +.rz-background-color-on-secondary { + background-color: var(--rz-on-secondary) !important; } -.flex-row { - flex-direction: row !important; +.rz-background-color-on-secondary-light { + background-color: var(--rz-on-secondary-light) !important; } -.flex-column { - flex-direction: column !important; +.rz-background-color-on-secondary-lighter { + background-color: var(--rz-on-secondary-lighter) !important; } -.flex-row-reverse { - flex-direction: row-reverse !important; +.rz-background-color-on-secondary-dark { + background-color: var(--rz-on-secondary-dark) !important; } -.flex-column-reverse { - flex-direction: column-reverse !important; +.rz-background-color-on-secondary-darker { + background-color: var(--rz-on-secondary-darker) !important; } -.flex-wrap { - flex-wrap: wrap !important; +.rz-background-color-on-info { + background-color: var(--rz-on-info) !important; } -.flex-nowrap { - flex-wrap: nowrap !important; +.rz-background-color-on-info-light { + background-color: var(--rz-on-info-light) !important; } -.flex-wrap-reverse { - flex-wrap: wrap-reverse !important; +.rz-background-color-on-info-lighter { + background-color: var(--rz-on-info-lighter) !important; } -.flex-fill { - flex: 1 1 auto !important; +.rz-background-color-on-info-dark { + background-color: var(--rz-on-info-dark) !important; } -.flex-grow-0 { - flex-grow: 0 !important; +.rz-background-color-on-info-darker { + background-color: var(--rz-on-info-darker) !important; } -.flex-grow-1 { - flex-grow: 1 !important; +.rz-background-color-on-success { + background-color: var(--rz-on-success) !important; } -.flex-shrink-0 { - flex-shrink: 0 !important; +.rz-background-color-on-success-light { + background-color: var(--rz-on-success-light) !important; } -.flex-shrink-1 { - flex-shrink: 1 !important; +.rz-background-color-on-success-lighter { + background-color: var(--rz-on-success-lighter) !important; } -.justify-content-start { - justify-content: flex-start !important; +.rz-background-color-on-success-dark { + background-color: var(--rz-on-success-dark) !important; } -.justify-content-end { - justify-content: flex-end !important; +.rz-background-color-on-success-darker { + background-color: var(--rz-on-success-darker) !important; } -.justify-content-center { - justify-content: center !important; +.rz-background-color-on-warning { + background-color: var(--rz-on-warning) !important; } -.justify-content-between { - justify-content: space-between !important; +.rz-background-color-on-warning-light { + background-color: var(--rz-on-warning-light) !important; } -.justify-content-around { - justify-content: space-around !important; +.rz-background-color-on-warning-lighter { + background-color: var(--rz-on-warning-lighter) !important; } -.align-items-start { - align-items: flex-start !important; +.rz-background-color-on-warning-dark { + background-color: var(--rz-on-warning-dark) !important; } -.align-items-end { - align-items: flex-end !important; +.rz-background-color-on-warning-darker { + background-color: var(--rz-on-warning-darker) !important; } -.align-items-center { - align-items: center !important; +.rz-background-color-on-danger { + background-color: var(--rz-on-danger) !important; } -.align-items-baseline { - align-items: baseline !important; +.rz-background-color-on-danger-light { + background-color: var(--rz-on-danger-light) !important; } -.align-items-stretch { - align-items: stretch !important; +.rz-background-color-on-danger-lighter { + background-color: var(--rz-on-danger-lighter) !important; } -.align-content-start { - align-content: flex-start !important; +.rz-background-color-on-danger-dark { + background-color: var(--rz-on-danger-dark) !important; } -.align-content-end { - align-content: flex-end !important; +.rz-background-color-on-danger-darker { + background-color: var(--rz-on-danger-darker) !important; } -.align-content-center { - align-content: center !important; +.rz-background-color-series-1 { + background-color: var(--rz-series-1) !important; } -.align-content-between { - align-content: space-between !important; +.rz-background-color-series-2 { + background-color: var(--rz-series-2) !important; } -.align-content-around { - align-content: space-around !important; +.rz-background-color-series-3 { + background-color: var(--rz-series-3) !important; } -.align-content-stretch { - align-content: stretch !important; +.rz-background-color-series-4 { + background-color: var(--rz-series-4) !important; } -.align-self-auto { - align-self: auto !important; +.rz-background-color-series-5 { + background-color: var(--rz-series-5) !important; } -.align-self-start { - align-self: flex-start !important; +.rz-background-color-series-6 { + background-color: var(--rz-series-6) !important; } -.align-self-end { - align-self: flex-end !important; +.rz-background-color-series-7 { + background-color: var(--rz-series-7) !important; } -.align-self-center { - align-self: center !important; +.rz-background-color-series-8 { + background-color: var(--rz-series-8) !important; } -.align-self-baseline { - align-self: baseline !important; +.rz-background-color-series-9 { + background-color: var(--rz-series-9) !important; } -.align-self-stretch { - align-self: stretch !important; +.rz-background-color-series-10 { + background-color: var(--rz-series-10) !important; } -@media (min-width: 576px) { - .flex-sm-row { - flex-direction: row !important; - } - .flex-sm-column { - flex-direction: column !important; - } - .flex-sm-row-reverse { - flex-direction: row-reverse !important; - } - .flex-sm-column-reverse { - flex-direction: column-reverse !important; - } - .flex-sm-wrap { - flex-wrap: wrap !important; - } - .flex-sm-nowrap { - flex-wrap: nowrap !important; - } - .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-sm-fill { - flex: 1 1 auto !important; - } - .flex-sm-grow-0 { - flex-grow: 0 !important; - } - .flex-sm-grow-1 { - flex-grow: 1 !important; - } - .flex-sm-shrink-0 { - flex-shrink: 0 !important; - } - .flex-sm-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-sm-start { - justify-content: flex-start !important; - } - .justify-content-sm-end { - justify-content: flex-end !important; - } - .justify-content-sm-center { - justify-content: center !important; - } - .justify-content-sm-between { - justify-content: space-between !important; - } - .justify-content-sm-around { - justify-content: space-around !important; - } - .align-items-sm-start { - align-items: flex-start !important; - } - .align-items-sm-end { - align-items: flex-end !important; - } - .align-items-sm-center { - align-items: center !important; - } - .align-items-sm-baseline { - align-items: baseline !important; - } - .align-items-sm-stretch { - align-items: stretch !important; - } - .align-content-sm-start { - align-content: flex-start !important; - } - .align-content-sm-end { - align-content: flex-end !important; - } - .align-content-sm-center { - align-content: center !important; - } - .align-content-sm-between { - align-content: space-between !important; - } - .align-content-sm-around { - align-content: space-around !important; - } - .align-content-sm-stretch { - align-content: stretch !important; - } - .align-self-sm-auto { - align-self: auto !important; - } - .align-self-sm-start { - align-self: flex-start !important; - } - .align-self-sm-end { - align-self: flex-end !important; - } - .align-self-sm-center { - align-self: center !important; - } - .align-self-sm-baseline { - align-self: baseline !important; - } - .align-self-sm-stretch { - align-self: stretch !important; - } -} -@media (min-width: 768px) { - .flex-md-row { - flex-direction: row !important; - } - .flex-md-column { - flex-direction: column !important; - } - .flex-md-row-reverse { - flex-direction: row-reverse !important; - } - .flex-md-column-reverse { - flex-direction: column-reverse !important; - } - .flex-md-wrap { - flex-wrap: wrap !important; - } - .flex-md-nowrap { - flex-wrap: nowrap !important; - } - .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-md-fill { - flex: 1 1 auto !important; - } - .flex-md-grow-0 { - flex-grow: 0 !important; - } - .flex-md-grow-1 { - flex-grow: 1 !important; - } - .flex-md-shrink-0 { - flex-shrink: 0 !important; - } - .flex-md-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-md-start { - justify-content: flex-start !important; - } - .justify-content-md-end { - justify-content: flex-end !important; - } - .justify-content-md-center { - justify-content: center !important; - } - .justify-content-md-between { - justify-content: space-between !important; - } - .justify-content-md-around { - justify-content: space-around !important; - } - .align-items-md-start { - align-items: flex-start !important; - } - .align-items-md-end { - align-items: flex-end !important; - } - .align-items-md-center { - align-items: center !important; - } - .align-items-md-baseline { - align-items: baseline !important; - } - .align-items-md-stretch { - align-items: stretch !important; - } - .align-content-md-start { - align-content: flex-start !important; - } - .align-content-md-end { - align-content: flex-end !important; - } - .align-content-md-center { - align-content: center !important; - } - .align-content-md-between { - align-content: space-between !important; - } - .align-content-md-around { - align-content: space-around !important; - } - .align-content-md-stretch { - align-content: stretch !important; - } - .align-self-md-auto { - align-self: auto !important; - } - .align-self-md-start { - align-self: flex-start !important; - } - .align-self-md-end { - align-self: flex-end !important; - } - .align-self-md-center { - align-self: center !important; - } - .align-self-md-baseline { - align-self: baseline !important; - } - .align-self-md-stretch { - align-self: stretch !important; - } +.rz-background-color-series-11 { + background-color: var(--rz-series-11) !important; } -@media (min-width: 992px) { - .flex-lg-row { - flex-direction: row !important; - } - .flex-lg-column { - flex-direction: column !important; - } - .flex-lg-row-reverse { - flex-direction: row-reverse !important; - } - .flex-lg-column-reverse { - flex-direction: column-reverse !important; - } - .flex-lg-wrap { - flex-wrap: wrap !important; - } - .flex-lg-nowrap { - flex-wrap: nowrap !important; - } - .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-lg-fill { - flex: 1 1 auto !important; - } - .flex-lg-grow-0 { - flex-grow: 0 !important; - } - .flex-lg-grow-1 { - flex-grow: 1 !important; - } - .flex-lg-shrink-0 { - flex-shrink: 0 !important; - } - .flex-lg-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-lg-start { - justify-content: flex-start !important; - } - .justify-content-lg-end { - justify-content: flex-end !important; - } - .justify-content-lg-center { - justify-content: center !important; - } - .justify-content-lg-between { - justify-content: space-between !important; - } - .justify-content-lg-around { - justify-content: space-around !important; - } - .align-items-lg-start { - align-items: flex-start !important; - } - .align-items-lg-end { - align-items: flex-end !important; - } - .align-items-lg-center { - align-items: center !important; - } - .align-items-lg-baseline { - align-items: baseline !important; - } - .align-items-lg-stretch { - align-items: stretch !important; - } - .align-content-lg-start { - align-content: flex-start !important; - } - .align-content-lg-end { - align-content: flex-end !important; - } - .align-content-lg-center { - align-content: center !important; - } - .align-content-lg-between { - align-content: space-between !important; - } - .align-content-lg-around { - align-content: space-around !important; - } - .align-content-lg-stretch { - align-content: stretch !important; - } - .align-self-lg-auto { - align-self: auto !important; - } - .align-self-lg-start { - align-self: flex-start !important; - } - .align-self-lg-end { - align-self: flex-end !important; - } - .align-self-lg-center { - align-self: center !important; - } - .align-self-lg-baseline { - align-self: baseline !important; - } - .align-self-lg-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-12 { + background-color: var(--rz-series-12) !important; } -@media (min-width: 1200px) { - .flex-xl-row { - flex-direction: row !important; - } - .flex-xl-column { - flex-direction: column !important; - } - .flex-xl-row-reverse { - flex-direction: row-reverse !important; - } - .flex-xl-column-reverse { - flex-direction: column-reverse !important; - } - .flex-xl-wrap { - flex-wrap: wrap !important; - } - .flex-xl-nowrap { - flex-wrap: nowrap !important; - } - .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; - } - .flex-xl-fill { - flex: 1 1 auto !important; - } - .flex-xl-grow-0 { - flex-grow: 0 !important; - } - .flex-xl-grow-1 { - flex-grow: 1 !important; - } - .flex-xl-shrink-0 { - flex-shrink: 0 !important; - } - .flex-xl-shrink-1 { - flex-shrink: 1 !important; - } - .justify-content-xl-start { - justify-content: flex-start !important; - } - .justify-content-xl-end { - justify-content: flex-end !important; - } - .justify-content-xl-center { - justify-content: center !important; - } - .justify-content-xl-between { - justify-content: space-between !important; - } - .justify-content-xl-around { - justify-content: space-around !important; - } - .align-items-xl-start { - align-items: flex-start !important; - } - .align-items-xl-end { - align-items: flex-end !important; - } - .align-items-xl-center { - align-items: center !important; - } - .align-items-xl-baseline { - align-items: baseline !important; - } - .align-items-xl-stretch { - align-items: stretch !important; - } - .align-content-xl-start { - align-content: flex-start !important; - } - .align-content-xl-end { - align-content: flex-end !important; - } - .align-content-xl-center { - align-content: center !important; - } - .align-content-xl-between { - align-content: space-between !important; - } - .align-content-xl-around { - align-content: space-around !important; - } - .align-content-xl-stretch { - align-content: stretch !important; - } - .align-self-xl-auto { - align-self: auto !important; - } - .align-self-xl-start { - align-self: flex-start !important; - } - .align-self-xl-end { - align-self: flex-end !important; - } - .align-self-xl-center { - align-self: center !important; - } - .align-self-xl-baseline { - align-self: baseline !important; - } - .align-self-xl-stretch { - align-self: stretch !important; - } + +.rz-background-color-series-13 { + background-color: var(--rz-series-13) !important; } -.float-left { - float: left !important; + +.rz-background-color-series-14 { + background-color: var(--rz-series-14) !important; } -.float-right { - float: right !important; +.rz-background-color-series-15 { + background-color: var(--rz-series-15) !important; } -.float-none { - float: none !important; +.rz-background-color-series-16 { + background-color: var(--rz-series-16) !important; } -@media (min-width: 576px) { - .float-sm-left { - float: left !important; - } - .float-sm-right { - float: right !important; - } - .float-sm-none { - float: none !important; - } +.rz-background-color-series-17 { + background-color: var(--rz-series-17) !important; } -@media (min-width: 768px) { - .float-md-left { - float: left !important; - } - .float-md-right { - float: right !important; - } - .float-md-none { - float: none !important; - } + +.rz-background-color-series-18 { + background-color: var(--rz-series-18) !important; } -@media (min-width: 992px) { - .float-lg-left { - float: left !important; - } - .float-lg-right { - float: right !important; - } - .float-lg-none { - float: none !important; - } + +.rz-background-color-series-19 { + background-color: var(--rz-series-19) !important; } -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; - } - .float-xl-right { - float: right !important; - } - .float-xl-none { - float: none !important; - } + +.rz-background-color-series-20 { + background-color: var(--rz-series-20) !important; } -.overflow-auto { - overflow: auto !important; + +.rz-background-color-series-21 { + background-color: var(--rz-series-21) !important; } -.overflow-hidden { - overflow: hidden !important; +.rz-background-color-series-22 { + background-color: var(--rz-series-22) !important; } -.position-static { - position: static !important; +.rz-background-color-series-23 { + background-color: var(--rz-series-23) !important; } -.position-relative { - position: relative !important; +.rz-background-color-series-24 { + background-color: var(--rz-series-24) !important; } -.position-absolute { - position: absolute !important; +.rz-border-color-white { + border-color: var(--rz-white) !important; } -.position-fixed { - position: fixed !important; +.rz-border-color-black { + border-color: var(--rz-black) !important; } -.position-sticky { - position: sticky !important; +.rz-border-color-base { + border-color: var(--rz-base) !important; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-50 { + border-color: var(--rz-base-50) !important; } -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; +.rz-border-color-base-100 { + border-color: var(--rz-base-100) !important; } -@supports (position: sticky) { - .sticky-top { - position: sticky; - top: 0; - z-index: 1020; - } +.rz-border-color-base-200 { + border-color: var(--rz-base-200) !important; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; +.rz-border-color-base-300 { + border-color: var(--rz-base-300) !important; } -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +.rz-border-color-base-400 { + border-color: var(--rz-base-400) !important; } -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +.rz-border-color-base-500 { + border-color: var(--rz-base-500) !important; } -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +.rz-border-color-base-600 { + border-color: var(--rz-base-600) !important; } -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +.rz-border-color-base-700 { + border-color: var(--rz-base-700) !important; } -.shadow-none { - box-shadow: none !important; +.rz-border-color-base-800 { + border-color: var(--rz-base-800) !important; } -.w-25 { - width: 25% !important; +.rz-border-color-base-900 { + border-color: var(--rz-base-900) !important; } -.w-50 { - width: 50% !important; +.rz-border-color-base-light { + border-color: var(--rz-base-light) !important; } -.w-75 { - width: 75% !important; +.rz-border-color-base-lighter { + border-color: var(--rz-base-lighter) !important; } -.w-100 { - width: 100% !important; +.rz-border-color-base-dark { + border-color: var(--rz-base-dark) !important; } -.w-auto { - width: auto !important; +.rz-border-color-base-darker { + border-color: var(--rz-base-darker) !important; } -.h-25 { - height: 25% !important; +.rz-border-color-primary { + border-color: var(--rz-primary) !important; } -.h-50 { - height: 50% !important; +.rz-border-color-primary-light { + border-color: var(--rz-primary-light) !important; } -.h-75 { - height: 75% !important; +.rz-border-color-primary-lighter { + border-color: var(--rz-primary-lighter) !important; } -.h-100 { - height: 100% !important; +.rz-border-color-primary-dark { + border-color: var(--rz-primary-dark) !important; } -.h-auto { - height: auto !important; +.rz-border-color-primary-darker { + border-color: var(--rz-primary-darker) !important; } -.mw-100 { - max-width: 100% !important; +.rz-border-color-secondary { + border-color: var(--rz-secondary) !important; } -.mh-100 { - max-height: 100% !important; +.rz-border-color-secondary-light { + border-color: var(--rz-secondary-light) !important; } -.min-vw-100 { - min-width: 100vw !important; +.rz-border-color-secondary-lighter { + border-color: var(--rz-secondary-lighter) !important; } -.min-vh-100 { - min-height: 100vh !important; +.rz-border-color-secondary-dark { + border-color: var(--rz-secondary-dark) !important; } -.vw-100 { - width: 100vw !important; +.rz-border-color-secondary-darker { + border-color: var(--rz-secondary-darker) !important; } -.vh-100 { - height: 100vh !important; +.rz-border-color-info { + border-color: var(--rz-info) !important; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); -} - -.m-0 { - margin: 0 !important; +.rz-border-color-info-light { + border-color: var(--rz-info-light) !important; } -.mt-0, -.my-0 { - margin-top: 0 !important; +.rz-border-color-info-lighter { + border-color: var(--rz-info-lighter) !important; } -.mr-0, -.mx-0 { - margin-right: 0 !important; +.rz-border-color-info-dark { + border-color: var(--rz-info-dark) !important; } -.mb-0, -.my-0 { - margin-bottom: 0 !important; +.rz-border-color-info-darker { + border-color: var(--rz-info-darker) !important; } -.ml-0, -.mx-0 { - margin-left: 0 !important; +.rz-border-color-success { + border-color: var(--rz-success) !important; } -.m-1 { - margin: 0.25rem !important; +.rz-border-color-success-light { + border-color: var(--rz-success-light) !important; } -.mt-1, -.my-1 { - margin-top: 0.25rem !important; +.rz-border-color-success-lighter { + border-color: var(--rz-success-lighter) !important; } -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; +.rz-border-color-success-dark { + border-color: var(--rz-success-dark) !important; } -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; +.rz-border-color-success-darker { + border-color: var(--rz-success-darker) !important; } -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; +.rz-border-color-warning { + border-color: var(--rz-warning) !important; } -.m-2 { - margin: 0.5rem !important; +.rz-border-color-warning-light { + border-color: var(--rz-warning-light) !important; } -.mt-2, -.my-2 { - margin-top: 0.5rem !important; +.rz-border-color-warning-lighter { + border-color: var(--rz-warning-lighter) !important; } -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; +.rz-border-color-warning-dark { + border-color: var(--rz-warning-dark) !important; } -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; +.rz-border-color-warning-darker { + border-color: var(--rz-warning-darker) !important; } -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; +.rz-border-color-danger { + border-color: var(--rz-danger) !important; } -.m-3 { - margin: 1rem !important; +.rz-border-color-danger-light { + border-color: var(--rz-danger-light) !important; } -.mt-3, -.my-3 { - margin-top: 1rem !important; +.rz-border-color-danger-lighter { + border-color: var(--rz-danger-lighter) !important; } -.mr-3, -.mx-3 { - margin-right: 1rem !important; +.rz-border-color-danger-dark { + border-color: var(--rz-danger-dark) !important; } -.mb-3, -.my-3 { - margin-bottom: 1rem !important; +.rz-border-color-danger-darker { + border-color: var(--rz-danger-darker) !important; } -.ml-3, -.mx-3 { - margin-left: 1rem !important; +.rz-border-color-on-base { + border-color: var(--rz-on-base) !important; } -.m-4 { - margin: 1.5rem !important; +.rz-border-color-on-base-light { + border-color: var(--rz-on-base-light) !important; } -.mt-4, -.my-4 { - margin-top: 1.5rem !important; +.rz-border-color-on-base-lighter { + border-color: var(--rz-on-base-lighter) !important; } -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; +.rz-border-color-on-base-dark { + border-color: var(--rz-on-base-dark) !important; } -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; +.rz-border-color-on-base-darker { + border-color: var(--rz-on-base-darker) !important; } -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; +.rz-border-color-on-primary { + border-color: var(--rz-on-primary) !important; } -.m-5 { - margin: 3rem !important; +.rz-border-color-on-primary-light { + border-color: var(--rz-on-primary-light) !important; } -.mt-5, -.my-5 { - margin-top: 3rem !important; +.rz-border-color-on-primary-lighter { + border-color: var(--rz-on-primary-lighter) !important; } -.mr-5, -.mx-5 { - margin-right: 3rem !important; +.rz-border-color-on-primary-dark { + border-color: var(--rz-on-primary-dark) !important; } -.mb-5, -.my-5 { - margin-bottom: 3rem !important; +.rz-border-color-on-primary-darker { + border-color: var(--rz-on-primary-darker) !important; } -.ml-5, -.mx-5 { - margin-left: 3rem !important; +.rz-border-color-on-secondary { + border-color: var(--rz-on-secondary) !important; } -.p-0 { - padding: 0 !important; +.rz-border-color-on-secondary-light { + border-color: var(--rz-on-secondary-light) !important; } -.pt-0, -.py-0 { - padding-top: 0 !important; +.rz-border-color-on-secondary-lighter { + border-color: var(--rz-on-secondary-lighter) !important; } -.pr-0, -.px-0 { - padding-right: 0 !important; +.rz-border-color-on-secondary-dark { + border-color: var(--rz-on-secondary-dark) !important; } -.pb-0, -.py-0 { - padding-bottom: 0 !important; +.rz-border-color-on-secondary-darker { + border-color: var(--rz-on-secondary-darker) !important; } -.pl-0, -.px-0 { - padding-left: 0 !important; +.rz-border-color-on-info { + border-color: var(--rz-on-info) !important; } -.p-1 { - padding: 0.25rem !important; +.rz-border-color-on-info-light { + border-color: var(--rz-on-info-light) !important; } -.pt-1, -.py-1 { - padding-top: 0.25rem !important; +.rz-border-color-on-info-lighter { + border-color: var(--rz-on-info-lighter) !important; } -.pr-1, -.px-1 { - padding-right: 0.25rem !important; +.rz-border-color-on-info-dark { + border-color: var(--rz-on-info-dark) !important; } -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; +.rz-border-color-on-info-darker { + border-color: var(--rz-on-info-darker) !important; } -.pl-1, -.px-1 { - padding-left: 0.25rem !important; +.rz-border-color-on-success { + border-color: var(--rz-on-success) !important; } -.p-2 { - padding: 0.5rem !important; +.rz-border-color-on-success-light { + border-color: var(--rz-on-success-light) !important; } -.pt-2, -.py-2 { - padding-top: 0.5rem !important; +.rz-border-color-on-success-lighter { + border-color: var(--rz-on-success-lighter) !important; } -.pr-2, -.px-2 { - padding-right: 0.5rem !important; +.rz-border-color-on-success-dark { + border-color: var(--rz-on-success-dark) !important; } -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; +.rz-border-color-on-success-darker { + border-color: var(--rz-on-success-darker) !important; } -.pl-2, -.px-2 { - padding-left: 0.5rem !important; +.rz-border-color-on-warning { + border-color: var(--rz-on-warning) !important; } -.p-3 { - padding: 1rem !important; +.rz-border-color-on-warning-light { + border-color: var(--rz-on-warning-light) !important; } -.pt-3, -.py-3 { - padding-top: 1rem !important; +.rz-border-color-on-warning-lighter { + border-color: var(--rz-on-warning-lighter) !important; } -.pr-3, -.px-3 { - padding-right: 1rem !important; +.rz-border-color-on-warning-dark { + border-color: var(--rz-on-warning-dark) !important; } -.pb-3, -.py-3 { - padding-bottom: 1rem !important; +.rz-border-color-on-warning-darker { + border-color: var(--rz-on-warning-darker) !important; } -.pl-3, -.px-3 { - padding-left: 1rem !important; +.rz-border-color-on-danger { + border-color: var(--rz-on-danger) !important; } -.p-4 { - padding: 1.5rem !important; +.rz-border-color-on-danger-light { + border-color: var(--rz-on-danger-light) !important; } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; +.rz-border-color-on-danger-lighter { + border-color: var(--rz-on-danger-lighter) !important; } -.pr-4, -.px-4 { - padding-right: 1.5rem !important; +.rz-border-color-on-danger-dark { + border-color: var(--rz-on-danger-dark) !important; } -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; +.rz-border-color-on-danger-darker { + border-color: var(--rz-on-danger-darker) !important; } -.pl-4, -.px-4 { - padding-left: 1.5rem !important; +.rz-border-color-series-1 { + border-color: var(--rz-series-1) !important; } -.p-5 { - padding: 3rem !important; +.rz-border-color-series-2 { + border-color: var(--rz-series-2) !important; } -.pt-5, -.py-5 { - padding-top: 3rem !important; +.rz-border-color-series-3 { + border-color: var(--rz-series-3) !important; } -.pr-5, -.px-5 { - padding-right: 3rem !important; +.rz-border-color-series-4 { + border-color: var(--rz-series-4) !important; } -.pb-5, -.py-5 { - padding-bottom: 3rem !important; +.rz-border-color-series-5 { + border-color: var(--rz-series-5) !important; } -.pl-5, -.px-5 { - padding-left: 3rem !important; +.rz-border-color-series-6 { + border-color: var(--rz-series-6) !important; } -.m-n1 { - margin: -0.25rem !important; +.rz-border-color-series-7 { + border-color: var(--rz-series-7) !important; } -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; +.rz-border-color-series-8 { + border-color: var(--rz-series-8) !important; } -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; +.rz-border-color-series-9 { + border-color: var(--rz-series-9) !important; } -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; +.rz-border-color-series-10 { + border-color: var(--rz-series-10) !important; } -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; +.rz-border-color-series-11 { + border-color: var(--rz-series-11) !important; } -.m-n2 { - margin: -0.5rem !important; +.rz-border-color-series-12 { + border-color: var(--rz-series-12) !important; } -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; +.rz-border-color-series-13 { + border-color: var(--rz-series-13) !important; } -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; +.rz-border-color-series-14 { + border-color: var(--rz-series-14) !important; } -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; +.rz-border-color-series-15 { + border-color: var(--rz-series-15) !important; } -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; +.rz-border-color-series-16 { + border-color: var(--rz-series-16) !important; } -.m-n3 { - margin: -1rem !important; +.rz-border-color-series-17 { + border-color: var(--rz-series-17) !important; } -.mt-n3, -.my-n3 { - margin-top: -1rem !important; +.rz-border-color-series-18 { + border-color: var(--rz-series-18) !important; } -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; +.rz-border-color-series-19 { + border-color: var(--rz-series-19) !important; } -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; +.rz-border-color-series-20 { + border-color: var(--rz-series-20) !important; } -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; +.rz-border-color-series-21 { + border-color: var(--rz-series-21) !important; } -.m-n4 { - margin: -1.5rem !important; +.rz-border-color-series-22 { + border-color: var(--rz-series-22) !important; } -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; +.rz-border-color-series-23 { + border-color: var(--rz-series-23) !important; } -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; +.rz-border-color-series-24 { + border-color: var(--rz-series-24) !important; } -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; +.rz-border-white { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-white) !important; } -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; +.rz-border-black { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-black) !important; } -.m-n5 { - margin: -3rem !important; +.rz-border-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base) !important; } -.mt-n5, -.my-n5 { - margin-top: -3rem !important; +.rz-border-base-50 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-50) !important; } -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; +.rz-border-base-100 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-100) !important; } -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; +.rz-border-base-200 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-200) !important; } -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; +.rz-border-base-300 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-300) !important; } -.m-auto { - margin: auto !important; +.rz-border-base-400 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-400) !important; } -.mt-auto, -.my-auto { - margin-top: auto !important; +.rz-border-base-500 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-500) !important; } -.mr-auto, -.mx-auto { - margin-right: auto !important; +.rz-border-base-600 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-600) !important; } -.mb-auto, -.my-auto { - margin-bottom: auto !important; +.rz-border-base-700 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-700) !important; } -.ml-auto, -.mx-auto { - margin-left: auto !important; +.rz-border-base-800 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-800) !important; } -@media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; - } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; - } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; - } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; - } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; - } - .m-sm-1 { - margin: 0.25rem !important; - } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; - } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; - } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; - } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; - } - .m-sm-2 { - margin: 0.5rem !important; - } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; - } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; - } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; - } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; - } - .m-sm-3 { - margin: 1rem !important; - } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; - } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; - } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; - } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; - } - .m-sm-4 { - margin: 1.5rem !important; - } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; - } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; - } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; - } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; - } - .m-sm-5 { - margin: 3rem !important; - } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; - } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; - } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; - } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; - } - .p-sm-0 { - padding: 0 !important; - } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; - } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; - } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; - } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; - } - .p-sm-1 { - padding: 0.25rem !important; - } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; - } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; - } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; - } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; - } - .p-sm-2 { - padding: 0.5rem !important; - } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; - } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; - } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; - } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; - } - .p-sm-3 { - padding: 1rem !important; - } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; - } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; - } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; - } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; - } - .p-sm-4 { - padding: 1.5rem !important; - } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; - } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; - } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; - } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; - } - .p-sm-5 { - padding: 3rem !important; - } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; - } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; - } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; - } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; - } - .m-sm-n1 { - margin: -0.25rem !important; - } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; - } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; - } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; - } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; - } - .m-sm-n2 { - margin: -0.5rem !important; - } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; - } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; - } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; - } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; - } - .m-sm-n3 { - margin: -1rem !important; - } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; - } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; - } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; - } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; - } - .m-sm-n4 { - margin: -1.5rem !important; - } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; - } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; - } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; - } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; - } - .m-sm-n5 { - margin: -3rem !important; - } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; - } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; - } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; - } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; - } - .m-sm-auto { - margin: auto !important; - } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; - } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; - } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; - } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; - } +.rz-border-base-900 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-900) !important; } -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; - } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; - } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; - } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; - } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; - } - .m-md-1 { - margin: 0.25rem !important; - } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; - } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; - } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; - } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; - } - .m-md-2 { - margin: 0.5rem !important; - } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; - } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; - } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; - } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; - } - .m-md-3 { - margin: 1rem !important; - } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; - } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; - } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; - } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; - } - .m-md-4 { - margin: 1.5rem !important; - } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; - } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; - } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; - } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; - } - .m-md-5 { - margin: 3rem !important; - } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; - } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; - } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; - } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; - } - .p-md-0 { - padding: 0 !important; - } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; - } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; - } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; - } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; - } - .p-md-1 { - padding: 0.25rem !important; - } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; - } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; - } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; - } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; - } - .p-md-2 { - padding: 0.5rem !important; - } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; - } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; - } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; - } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; - } - .p-md-3 { - padding: 1rem !important; - } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; - } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; - } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; - } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; - } - .p-md-4 { - padding: 1.5rem !important; - } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; - } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; - } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; - } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; - } - .p-md-5 { - padding: 3rem !important; - } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; - } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; - } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; - } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; - } - .m-md-n1 { - margin: -0.25rem !important; - } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; - } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; - } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; - } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; - } - .m-md-n2 { - margin: -0.5rem !important; - } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; - } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; - } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; - } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; - } - .m-md-n3 { - margin: -1rem !important; - } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; - } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; - } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; - } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; - } - .m-md-n4 { - margin: -1.5rem !important; - } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; - } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; - } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; - } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; - } - .m-md-n5 { - margin: -3rem !important; - } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; - } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; - } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; - } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; - } - .m-md-auto { - margin: auto !important; - } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; - } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; - } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; - } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; - } + +.rz-border-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-light) !important; } -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; - } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; - } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; - } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; - } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; - } - .m-lg-1 { - margin: 0.25rem !important; - } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; - } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; - } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; - } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; - } - .m-lg-2 { - margin: 0.5rem !important; - } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; - } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; - } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; - } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; - } - .m-lg-3 { - margin: 1rem !important; - } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; - } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; - } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; - } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; - } - .m-lg-4 { - margin: 1.5rem !important; - } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; - } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; - } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; - } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; - } - .m-lg-5 { - margin: 3rem !important; - } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; - } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; - } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; - } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; - } - .p-lg-0 { - padding: 0 !important; - } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; - } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; - } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; - } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; - } - .p-lg-1 { - padding: 0.25rem !important; - } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; - } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; - } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; - } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; - } - .p-lg-2 { - padding: 0.5rem !important; - } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; - } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; - } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; - } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; - } - .p-lg-3 { - padding: 1rem !important; - } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; - } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; - } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; - } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; - } - .p-lg-4 { - padding: 1.5rem !important; - } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; - } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; - } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; - } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; - } - .p-lg-5 { - padding: 3rem !important; - } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; - } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; - } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; - } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; - } - .m-lg-n1 { - margin: -0.25rem !important; - } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; - } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; - } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; - } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; - } - .m-lg-n2 { - margin: -0.5rem !important; - } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; - } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; - } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; - } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; - } - .m-lg-n3 { - margin: -1rem !important; - } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; - } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; - } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; - } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; - } - .m-lg-n4 { - margin: -1.5rem !important; - } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; - } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; - } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; - } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; - } - .m-lg-n5 { - margin: -3rem !important; - } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; - } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; - } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; - } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; - } - .m-lg-auto { - margin: auto !important; - } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; - } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; - } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; - } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; - } -} -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; - } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; - } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; - } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; - } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; - } - .m-xl-1 { - margin: 0.25rem !important; - } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; - } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; - } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; - } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; - } - .m-xl-2 { - margin: 0.5rem !important; - } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; - } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; - } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; - } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; - } - .m-xl-3 { - margin: 1rem !important; - } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; - } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; - } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; - } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; - } - .m-xl-4 { - margin: 1.5rem !important; - } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; - } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; - } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; - } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; - } - .m-xl-5 { - margin: 3rem !important; - } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; - } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; - } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; - } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; - } - .p-xl-0 { - padding: 0 !important; - } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; - } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; - } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; - } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; - } - .p-xl-1 { - padding: 0.25rem !important; - } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; - } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; - } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; - } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; - } - .p-xl-2 { - padding: 0.5rem !important; - } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; - } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; - } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; - } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; - } - .p-xl-3 { - padding: 1rem !important; - } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; - } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; - } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; - } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; - } - .p-xl-4 { - padding: 1.5rem !important; - } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; - } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; - } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; - } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; - } - .p-xl-5 { - padding: 3rem !important; - } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; - } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; - } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; - } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; - } - .m-xl-n1 { - margin: -0.25rem !important; - } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; - } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; - } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; - } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; - } - .m-xl-n2 { - margin: -0.5rem !important; - } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; - } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; - } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; - } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; - } - .m-xl-n3 { - margin: -1rem !important; - } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; - } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; - } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; - } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; - } - .m-xl-n4 { - margin: -1.5rem !important; - } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; - } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; - } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; - } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; - } - .m-xl-n5 { - margin: -3rem !important; - } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; - } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; - } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; - } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; - } - .m-xl-auto { - margin: auto !important; - } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; - } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; - } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; - } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; - } -} -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; -} - -.text-justify { - text-align: justify !important; + +.rz-border-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-lighter) !important; } -.text-wrap { - white-space: normal !important; +.rz-border-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-dark) !important; } -.text-nowrap { - white-space: nowrap !important; +.rz-border-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-base-darker) !important; } -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.rz-border-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary) !important; } -.text-left { - text-align: left !important; +.rz-border-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-light) !important; } -.text-right { - text-align: right !important; +.rz-border-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-lighter) !important; } -.text-center { - text-align: center !important; +.rz-border-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-dark) !important; } -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; - } - .text-sm-right { - text-align: right !important; - } - .text-sm-center { - text-align: center !important; - } -} -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; - } - .text-md-right { - text-align: right !important; - } - .text-md-center { - text-align: center !important; - } -} -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; - } - .text-lg-right { - text-align: right !important; - } - .text-lg-center { - text-align: center !important; - } -} -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; - } - .text-xl-right { - text-align: right !important; - } - .text-xl-center { - text-align: center !important; - } -} -.text-lowercase { - text-transform: lowercase !important; +.rz-border-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-primary-darker) !important; } -.text-uppercase { - text-transform: uppercase !important; +.rz-border-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary) !important; } -.text-capitalize { - text-transform: capitalize !important; +.rz-border-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-light) !important; } -.font-weight-light { - font-weight: 300 !important; +.rz-border-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-lighter) !important; } -.font-weight-lighter { - font-weight: lighter !important; +.rz-border-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-dark) !important; } -.font-weight-normal { - font-weight: 400 !important; +.rz-border-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-secondary-darker) !important; } -.font-weight-bold { - font-weight: 700 !important; +.rz-border-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info) !important; } -.font-weight-bolder { - font-weight: bolder !important; +.rz-border-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-light) !important; } -.font-italic { - font-style: italic !important; +.rz-border-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-lighter) !important; } -.text-white { - color: #fff !important; +.rz-border-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-dark) !important; } -.text-primary { - color: #1151f3 !important; +.rz-border-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-info-darker) !important; } -a.text-primary:hover, a.text-primary:focus { - color: #0938af !important; +.rz-border-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success) !important; } -.text-secondary { - color: #5d89f7 !important; +.rz-border-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-light) !important; } -a.text-secondary:hover, a.text-secondary:focus { - color: #1454f3 !important; +.rz-border-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-lighter) !important; } -.text-success { - color: #009b51 !important; +.rz-border-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-dark) !important; } -a.text-success:hover, a.text-success:focus { - color: #004f29 !important; +.rz-border-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-success-darker) !important; } -.text-info { - color: #12a4f5 !important; +.rz-border-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning) !important; } -a.text-info:hover, a.text-info:focus { - color: #0876b3 !important; +.rz-border-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-light) !important; } -.text-warning { - color: #ffae11 !important; +.rz-border-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-lighter) !important; } -a.text-warning:hover, a.text-warning:focus { - color: #c48100 !important; +.rz-border-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-dark) !important; } -.text-danger { - color: #f31155 !important; +.rz-border-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-warning-darker) !important; } -a.text-danger:hover, a.text-danger:focus { - color: #af093b !important; +.rz-border-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger) !important; } -.text-light { - color: #e9eaed !important; +.rz-border-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-light) !important; } -a.text-light:hover, a.text-light:focus { - color: #bfc2cb !important; +.rz-border-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-lighter) !important; } -.text-dark { - color: #343a40 !important; +.rz-border-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-dark) !important; } -a.text-dark:hover, a.text-dark:focus { - color: #121416 !important; +.rz-border-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-danger-darker) !important; } -.text-body { - color: #4f4f50 !important; +.rz-border-on-base { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base) !important; } -.text-muted { - color: #6c757d !important; +.rz-border-on-base-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-light) !important; } -.text-black-50 { - color: rgba(0, 0, 0, 0.5) !important; +.rz-border-on-base-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-lighter) !important; } -.text-white-50 { - color: rgba(255, 255, 255, 0.5) !important; +.rz-border-on-base-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-dark) !important; } -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; +.rz-border-on-base-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-base-darker) !important; } -.text-decoration-none { - text-decoration: none !important; +.rz-border-on-primary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary) !important; } -.text-break { - word-break: break-word !important; - overflow-wrap: break-word !important; +.rz-border-on-primary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-light) !important; } -.text-reset { - color: inherit !important; +.rz-border-on-primary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-lighter) !important; } -.visible { - visibility: visible !important; +.rz-border-on-primary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-dark) !important; } -.invisible { - visibility: hidden !important; +.rz-border-on-primary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-primary-darker) !important; } -@font-face { - font-family: "Material Icons"; - font-style: normal; - font-weight: 400; - src: url("../fonts/MaterialIcons-Regular.woff") format("woff"); +.rz-border-on-secondary { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-ExtraLight"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLight.woff") format("woff"); + +.rz-border-on-secondary-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Light"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Light.woff") format("woff"); + +.rz-border-on-secondary-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Regular"), local("Source Sans Pro"), url("../fonts/SourceSansPro-Regular.woff") format("woff"); + +.rz-border-on-secondary-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Semibold"), local("Source Sans Pro Semibold"), url("../fonts/SourceSansPro-Semibold.woff") format("woff"); + +.rz-border-on-secondary-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-secondary-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Bold"), local("Source Sans Pro Bold"), url("../fonts/SourceSansPro-Bold.woff") format("woff"); + +.rz-border-on-info { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: normal; - font-stretch: normal; - src: local("SourceSansPro-Black"), local("Source Sans Pro Black"), url("../fonts/SourceSansPro-Black.woff") format("woff"); + +.rz-border-on-info-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 200; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-ExtraLightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-ExtraLightIt.woff") format("woff"); + +.rz-border-on-info-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-lighter) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 300; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-LightIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-LightIt.woff") format("woff"); + +.rz-border-on-info-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-dark) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 400; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-It"), local("Source Sans Pro"), url("../fonts/SourceSansPro-It.woff") format("woff"); + +.rz-border-on-info-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-info-darker) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 600; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-SemiboldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-SemiboldIt.woff") format("woff"); + +.rz-border-on-success { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 700; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BoldIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BoldIt.woff") format("woff"); + +.rz-border-on-success-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-light) !important; } -@font-face { - font-family: "Source Sans Pro"; - font-weight: 900; - font-style: italic; - font-stretch: normal; - src: local("SourceSansPro-BlackIt"), local("Source Sans Pro"), url("../fonts/SourceSansPro-BlackIt.woff") format("woff"); + +.rz-border-on-success-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-lighter) !important; } -:root { - --rz-white: #ffffff; - --rz-black: #000000; - --rz-base-50: #ffffff; - --rz-base-100: #f4f5f9; - --rz-base-200: #e9eaed; - --rz-base-300: #e0e1e4; - --rz-base-400: #c9cacd; - --rz-base-500: #afafb2; - --rz-base-600: #8d8e90; - --rz-base-700: #707072; - --rz-base-800: #4f4f50; - --rz-base-900: #262526; - --rz-primary: #1151f3; - --rz-primary-light: #376df5; - --rz-primary-lighter: rgba(17, 81, 243, 0.16); - --rz-primary-dark: #0e44cc; - --rz-primary-darker: #0d3eb9; - --rz-secondary: #5d89f7; - --rz-secondary-light: #779cf8; - --rz-secondary-lighter: rgba(93, 137, 247, 0.16); - --rz-secondary-dark: #4e73cf; - --rz-secondary-darker: #4768bc; - --rz-info: #12a4f5; - --rz-info-light: #38b3f7; - --rz-info-lighter: rgba(18, 164, 245, 0.16); - --rz-info-dark: #0f8ace; - --rz-info-darker: #0e7dba; - --rz-success: #009b51; - --rz-success-light: #29ab6d; - --rz-success-lighter: rgba(0, 155, 81, 0.16); - --rz-success-dark: #008244; - --rz-success-darker: #00763e; - --rz-warning: #ffae11; - --rz-warning-light: #ffbb37; - --rz-warning-lighter: rgba(255, 174, 17, 0.16); - --rz-warning-dark: #d6920e; - --rz-warning-darker: #c2840d; - --rz-danger: #f31155; - --rz-danger-light: #f53770; - --rz-danger-lighter: rgba(243, 17, 85, 0.16); - --rz-danger-dark: #cc0e47; - --rz-danger-darker: #b90d41; - --rz-on-primary: #ffffff; - --rz-on-primary-light: #ffffff; - --rz-on-primary-lighter: #1151f3; - --rz-on-primary-dark: #ffffff; - --rz-on-primary-darker: #ffffff; - --rz-on-secondary: #ffffff; - --rz-on-secondary-light: #ffffff; - --rz-on-secondary-lighter: #5d89f7; - --rz-on-secondary-dark: #ffffff; - --rz-on-secondary-darker: #ffffff; - --rz-on-info: #ffffff; - --rz-on-info-light: #ffffff; - --rz-on-info-lighter: #12a4f5; - --rz-on-info-dark: #ffffff; - --rz-on-info-darker: #ffffff; - --rz-on-success: #ffffff; - --rz-on-success-light: #ffffff; - --rz-on-success-lighter: #009b51; - --rz-on-success-dark: #ffffff; - --rz-on-success-darker: #ffffff; - --rz-on-warning: #ffffff; - --rz-on-warning-light: #ffffff; - --rz-on-warning-lighter: #ffae11; - --rz-on-warning-dark: #ffffff; - --rz-on-warning-darker: #ffffff; - --rz-on-danger: #ffffff; - --rz-on-danger-light: #ffffff; - --rz-on-danger-lighter: #f31155; - --rz-on-danger-dark: #ffffff; - --rz-on-danger-darker: #ffffff; - --rz-series-1: #376df5; - --rz-series-2: #64dfdf; - --rz-series-3: #f68769; - --rz-series-4: #c161e2; - --rz-series-5: #fdd07a; - --rz-series-6: #f8629b; - --rz-series-7: #74d062; - --rz-series-8: #84a7ff; - --rz-series-9: #4d99f9; - --rz-series-10: #8cecec; - --rz-series-11: #fab793; - --rz-series-12: #da88ee; - --rz-series-13: #fee3ab; - --rz-series-14: #fb89c3; - --rz-series-15: #a2e389; - --rz-series-16: #b5caff; - --rz-series-17: #1750f3; - --rz-series-18: #46d7d7; - --rz-series-19: #f46e4c; - --rz-series-20: #b343db; - --rz-series-21: #fdc55f; - --rz-series-22: #f64485; - --rz-series-23: #58c544; - --rz-series-24: #6a93ff; + +.rz-border-on-success-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-dark) !important; } -:root { - --rz-border-width: 1px; - --rz-root-font-size: 16px; - --rz-body-font-size: 0.875rem; - --rz-body-line-height: 1.429; - --rz-body-background-color: var(--rz-base-100); - --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - --rz-icon-size: 1.25rem; - --rz-icon-font-family: Material Icons; - --rz-outline-offset: 1px; - --rz-outline-width: 2px; - --rz-outline-color: var(--rz-primary-light); +.rz-border-on-success-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-success-darker) !important; } -:root { - --rz-text-title-color: var(--rz-base-900); - --rz-text-color: var(--rz-base-800); - --rz-text-secondary-color: var(--rz-base-700); - --rz-text-tertiary-color: var(--rz-base-600); - --rz-text-disabled-color: var(--rz-base-500); - --rz-text-contrast-color: var(--rz-white); +.rz-border-on-warning { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning) !important; } -.rz-text-title-color { - color: var(--rz-base-900) !important; +.rz-border-on-warning-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-light) !important; } -.rz-text-color { - color: var(--rz-base-800) !important; +.rz-border-on-warning-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-lighter) !important; } -.rz-text-secondary-color { - color: var(--rz-base-700) !important; +.rz-border-on-warning-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-dark) !important; } -.rz-text-tertiary-color { - color: var(--rz-base-600) !important; +.rz-border-on-warning-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-warning-darker) !important; } -.rz-text-disabled-color { - color: var(--rz-base-500) !important; +.rz-border-on-danger { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger) !important; } -.rz-text-contrast-color { - color: var(--rz-white) !important; +.rz-border-on-danger-light { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-light) !important; } -:root { - --rz-link-color: var(--rz-secondary); - --rz-link-text-decoration: none; - --rz-link-hover-color: var(--rz-secondary-dark); - --rz-link-hover-text-decoration: underline; - --rz-link-focus-outline: var(--rz-outline-focus); - --rz-link-focus-outline-offset: var(--rz-outline-offset); +.rz-border-on-danger-lighter { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-lighter) !important; } -:root { - --rz-base-background-color: var(--rz-white); +.rz-border-on-danger-dark { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-dark) !important; } -:root { - --rz-border-white: var(--rz-border-width) solid var(--rz-white); - --rz-border-black: var(--rz-border-width) solid var(--rz-black); - --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); - --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); - --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); - --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); - --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); - --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); - --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); - --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); - --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); - --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); - --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); - --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); - --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); - --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); - --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); - --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); - --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); - --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); - --rz-border-info: var(--rz-border-width) solid var(--rz-info); - --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); - --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); - --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); - --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); - --rz-border-success: var(--rz-border-width) solid var(--rz-success); - --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); - --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); - --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); - --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); - --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); - --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); - --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); - --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); - --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); - --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); - --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); - --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); - --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); - --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); - --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); - --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); - --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); - --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); - --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); - --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); - --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); - --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); - --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); - --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); - --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); - --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); - --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); - --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); - --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); - --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); - --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); - --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); - --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); - --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); - --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); - --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); - --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); - --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); - --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); - --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); - --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); - --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); - --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); - --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); - --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); - --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); - --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); - --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); - --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); - --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); - --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); - --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); - --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); - --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); - --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); - --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); - --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); - --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); - --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); - --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); - --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); - --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); - --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); - --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); - --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); - --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); - --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); - --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); +.rz-border-on-danger-darker { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-on-danger-darker) !important; } -:root { - --rz-border-normal: var(--rz-border-width) solid var(--rz-base-200); - --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); - --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); +.rz-border-series-1 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-1) !important; } -:root { - --rz-border-radius: 4px; - --rz-border-radius-0: 0; - --rz-border-radius-1: 0.25rem; - --rz-border-radius-2: 0.5rem; - --rz-border-radius-3: 0.75rem; - --rz-border-radius-4: 1rem; - --rz-border-radius-5: 1.25rem; - --rz-border-radius-6: 1.5rem; - --rz-border-radius-7: 1.75rem; - --rz-border-radius-8: 2rem; - --rz-border-radius-9: 2.25rem; - --rz-border-radius-10: 2.5rem; +.rz-border-series-2 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-2) !important; } -.rz-border-radius { - border-radius: var(--rz-border-radius) !important; +.rz-border-series-3 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-3) !important; } -.rz-border-radius-0 { - border-radius: var(--rz-border-radius-0) !important; +.rz-border-series-4 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-4) !important; } -.rz-border-radius-1 { - border-radius: var(--rz-border-radius-1) !important; +.rz-border-series-5 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-5) !important; } -.rz-border-radius-2 { - border-radius: var(--rz-border-radius-2) !important; +.rz-border-series-6 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-6) !important; } -.rz-border-radius-3 { - border-radius: var(--rz-border-radius-3) !important; +.rz-border-series-7 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-7) !important; } -.rz-border-radius-4 { - border-radius: var(--rz-border-radius-4) !important; +.rz-border-series-8 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-8) !important; } -.rz-border-radius-5 { - border-radius: var(--rz-border-radius-5) !important; +.rz-border-series-9 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-9) !important; } -.rz-border-radius-6 { - border-radius: var(--rz-border-radius-6) !important; +.rz-border-series-10 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-10) !important; } -.rz-border-radius-7 { - border-radius: var(--rz-border-radius-7) !important; +.rz-border-series-11 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-11) !important; } -.rz-border-radius-8 { - border-radius: var(--rz-border-radius-8) !important; +.rz-border-series-12 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-12) !important; } -.rz-border-radius-9 { - border-radius: var(--rz-border-radius-9) !important; +.rz-border-series-13 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-13) !important; } -.rz-border-radius-10 { - border-radius: var(--rz-border-radius-10) !important; +.rz-border-series-14 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-14) !important; } -:root { - --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); - --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); - --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); - --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); - --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); - --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); - --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); - --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); - --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); - --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); - --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); - --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); - --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); - --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); - --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); - --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); - --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); - --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); - --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); - --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); - --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); - --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); - --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); - --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); - --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); - --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); - --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); - --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); - --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); - --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); - --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); - --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); - --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); - --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); - --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); - --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); - --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); - --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); - --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); - --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); - --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); - --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); - --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); - --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); - --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); - --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); - --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); - --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); - --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); - --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); - --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); - --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); - --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); - --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); - --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); - --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); - --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); - --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); - --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); - --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); - --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); - --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); - --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); - --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); - --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); - --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); - --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); - --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); - --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); - --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); - --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); - --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); - --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); - --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); - --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); - --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); - --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); - --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); - --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); - --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); - --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); - --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); - --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); - --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); - --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); - --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); - --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); - --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); - --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); - --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); - --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); - --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); - --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); - --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); - --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); - --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); +.rz-border-series-15 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-15) !important; } -:root { - --rz-outline-normal: none; - --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); +.rz-border-series-16 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-16) !important; } -/* $rz-shadow-0: none !default; -$rz-shadow-1: 0 8px 10px 0 rgba(0, 0, 0, 0.1) !default; -$rz-shadow-2: 0 6px 14px 0 rgba(0, 0, 0, 0.2) !default; -$rz-shadow-3: none !default; -$rz-shadow-4: none !default; -$rz-shadow-5: none !default; -$rz-shadow-6: none !default; -$rz-shadow-7: none !default; -$rz-shadow-8: none !default; -$rz-shadow-9: none !default; -$rz-shadow-10: none !default; */ -:root { - --rz-shadow-0: none; - --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); - --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); - --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); - --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); - --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); - --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); - --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); +.rz-border-series-17 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-17) !important; } -.rz-shadow-0 { - box-shadow: var(--rz-shadow-0) !important; +.rz-border-series-18 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-18) !important; } -.rz-shadow-1 { - box-shadow: var(--rz-shadow-1) !important; +.rz-border-series-19 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-19) !important; } -.rz-shadow-2 { - box-shadow: var(--rz-shadow-2) !important; +.rz-border-series-20 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-20) !important; } -.rz-shadow-3 { - box-shadow: var(--rz-shadow-3) !important; +.rz-border-series-21 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-21) !important; } -.rz-shadow-4 { - box-shadow: var(--rz-shadow-4) !important; +.rz-border-series-22 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-22) !important; } -.rz-shadow-5 { - box-shadow: var(--rz-shadow-5) !important; +.rz-border-series-23 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-23) !important; } -.rz-shadow-6 { - box-shadow: var(--rz-shadow-6) !important; +.rz-border-series-24 { + border-width: var(--rz-border-width); + border-style: solid; + border-color: var(--rz-series-24) !important; } -.rz-shadow-7 { - box-shadow: var(--rz-shadow-7) !important; +.rz-ripple { + position: relative; + overflow: hidden; } - -.rz-shadow-8 { - box-shadow: var(--rz-shadow-8) !important; +.rz-ripple:not(.rz-state-disabled):before { + content: ""; + position: absolute; + inset: 0; + opacity: 0; + background-position: center; + background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; + transition: background-size 0.8s, opacity 0.8s; } - -.rz-shadow-9 { - box-shadow: var(--rz-shadow-9) !important; +.rz-ripple:not(.rz-state-disabled):active:before { + transition: background-size 0s, opacity 0s; + opacity: 0.32; + background-size: 100%; } -.rz-shadow-10 { - box-shadow: var(--rz-shadow-10) !important; +body { + margin: 0; } -:root { - --rz-transition: 0.1s linear; - --rz-transition-all: all 0.1s linear; +.rz-m-0 { + margin: 0 !important; } -.rz-display-none { - display: none !important; +.rz-my-0, +.rz-mt-0 { + margin-top: 0 !important; } -.rz-display-block { - display: block !important; +.rz-mx-0, +.rz-mr-0 { + margin-right: 0 !important; } -.rz-display-inline { - display: inline !important; +.rz-my-0, +.rz-mb-0 { + margin-bottom: 0 !important; } -.rz-display-inline-block { - display: inline-block !important; +.rz-mx-0, +.rz-ml-0 { + margin-left: 0 !important; } -.rz-display-flex { - display: flex !important; +.rz-ms-0 { + margin-inline-start: 0 !important; } -.rz-display-inline-flex { - display: inline-flex !important; +.rz-me-0 { + margin-inline-end: 0 !important; } -.rz-display-grid { - display: grid !important; +.rz-m-05 { + margin: 0.125rem !important; } -.rz-display-inline-grid { - display: inline-grid !important; +.rz-my-05, +.rz-mt-05 { + margin-top: 0.125rem !important; } -@media (min-width: 576px) { - .rz-display-xs-none { - display: none !important; - } - .rz-display-xs-block { - display: block !important; - } - .rz-display-xs-inline { - display: inline !important; - } - .rz-display-xs-inline-block { - display: inline-block !important; - } - .rz-display-xs-flex { - display: flex !important; - } - .rz-display-xs-inline-flex { - display: inline-flex !important; - } - .rz-display-xs-grid { - display: grid !important; - } - .rz-display-xs-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 768px) { - .rz-display-sm-none { - display: none !important; - } - .rz-display-sm-block { - display: block !important; - } - .rz-display-sm-inline { - display: inline !important; - } - .rz-display-sm-inline-block { - display: inline-block !important; - } - .rz-display-sm-flex { - display: flex !important; - } - .rz-display-sm-inline-flex { - display: inline-flex !important; - } - .rz-display-sm-grid { - display: grid !important; - } - .rz-display-sm-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1024px) { - .rz-display-md-none { - display: none !important; - } - .rz-display-md-block { - display: block !important; - } - .rz-display-md-inline { - display: inline !important; - } - .rz-display-md-inline-block { - display: inline-block !important; - } - .rz-display-md-flex { - display: flex !important; - } - .rz-display-md-inline-flex { - display: inline-flex !important; - } - .rz-display-md-grid { - display: grid !important; - } - .rz-display-md-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1280px) { - .rz-display-lg-none { - display: none !important; - } - .rz-display-lg-block { - display: block !important; - } - .rz-display-lg-inline { - display: inline !important; - } - .rz-display-lg-inline-block { - display: inline-block !important; - } - .rz-display-lg-flex { - display: flex !important; - } - .rz-display-lg-inline-flex { - display: inline-flex !important; - } - .rz-display-lg-grid { - display: grid !important; - } - .rz-display-lg-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 1920px) { - .rz-display-xl-none { - display: none !important; - } - .rz-display-xl-block { - display: block !important; - } - .rz-display-xl-inline { - display: inline !important; - } - .rz-display-xl-inline-block { - display: inline-block !important; - } - .rz-display-xl-flex { - display: flex !important; - } - .rz-display-xl-inline-flex { - display: inline-flex !important; - } - .rz-display-xl-grid { - display: grid !important; - } - .rz-display-xl-inline-grid { - display: inline-grid !important; - } -} -@media (min-width: 2560px) { - .rz-display-xx-none { - display: none !important; - } - .rz-display-xx-block { - display: block !important; - } - .rz-display-xx-inline { - display: inline !important; - } - .rz-display-xx-inline-block { - display: inline-block !important; - } - .rz-display-xx-flex { - display: flex !important; - } - .rz-display-xx-inline-flex { - display: inline-flex !important; - } - .rz-display-xx-grid { - display: grid !important; - } - .rz-display-xx-inline-grid { - display: inline-grid !important; - } +.rz-mx-05, +.rz-mr-05 { + margin-right: 0.125rem !important; } -.rz-justify-content-normal { - justify-content: normal !important; + +.rz-my-05, +.rz-mb-05 { + margin-bottom: 0.125rem !important; } -.rz-justify-content-stretch { - justify-content: stretch !important; +.rz-mx-05, +.rz-ml-05 { + margin-left: 0.125rem !important; } -.rz-justify-content-center { - justify-content: center !important; +.rz-ms-05 { + margin-inline-start: 0.125rem !important; } -.rz-justify-content-start { - justify-content: start !important; +.rz-me-05 { + margin-inline-end: 0.125rem !important; } -.rz-justify-content-end { - justify-content: end !important; +.rz-m-1 { + margin: 0.25rem !important; } -.rz-justify-content-flex-start { - justify-content: flex-start !important; +.rz-my-1, +.rz-mt-1 { + margin-top: 0.25rem !important; } -.rz-justify-content-flex-end { - justify-content: flex-end !important; +.rz-mx-1, +.rz-mr-1 { + margin-right: 0.25rem !important; } -.rz-justify-content-left { - justify-content: left !important; +.rz-my-1, +.rz-mb-1 { + margin-bottom: 0.25rem !important; } -.rz-justify-content-right { - justify-content: right !important; +.rz-mx-1, +.rz-ml-1 { + margin-left: 0.25rem !important; } -.rz-justify-content-space-between { - justify-content: space-between !important; +.rz-ms-1 { + margin-inline-start: 0.25rem !important; } -.rz-justify-content-space-around { - justify-content: space-around !important; +.rz-me-1 { + margin-inline-end: 0.25rem !important; } -.rz-justify-content-space-evenly { - justify-content: space-evenly !important; +.rz-m-2 { + margin: 0.5rem !important; } -.rz-align-items-normal { - align-items: normal !important; +.rz-my-2, +.rz-mt-2 { + margin-top: 0.5rem !important; } -.rz-align-items-stretch { - align-items: stretch !important; +.rz-mx-2, +.rz-mr-2 { + margin-right: 0.5rem !important; } -.rz-align-items-center { - align-items: center !important; +.rz-my-2, +.rz-mb-2 { + margin-bottom: 0.5rem !important; } -.rz-align-items-start { - align-items: start !important; +.rz-mx-2, +.rz-ml-2 { + margin-left: 0.5rem !important; } -.rz-align-items-end { - align-items: end !important; +.rz-ms-2 { + margin-inline-start: 0.5rem !important; } -.rz-align-items-flex-start { - align-items: flex-start !important; +.rz-me-2 { + margin-inline-end: 0.5rem !important; } -.rz-align-items-flex-end { - align-items: flex-end !important; +.rz-m-3 { + margin: 0.75rem !important; } -.rz-color-white { - color: var(--rz-white) !important; +.rz-my-3, +.rz-mt-3 { + margin-top: 0.75rem !important; } -.rz-color-black { - color: var(--rz-black) !important; +.rz-mx-3, +.rz-mr-3 { + margin-right: 0.75rem !important; } -.rz-color-base-50 { - color: var(--rz-base-50) !important; +.rz-my-3, +.rz-mb-3 { + margin-bottom: 0.75rem !important; } -.rz-color-base-100 { - color: var(--rz-base-100) !important; +.rz-mx-3, +.rz-ml-3 { + margin-left: 0.75rem !important; } -.rz-color-base-200 { - color: var(--rz-base-200) !important; +.rz-ms-3 { + margin-inline-start: 0.75rem !important; } -.rz-color-base-300 { - color: var(--rz-base-300) !important; +.rz-me-3 { + margin-inline-end: 0.75rem !important; } -.rz-color-base-400 { - color: var(--rz-base-400) !important; +.rz-m-4 { + margin: 1rem !important; } -.rz-color-base-500 { - color: var(--rz-base-500) !important; +.rz-my-4, +.rz-mt-4 { + margin-top: 1rem !important; } -.rz-color-base-600 { - color: var(--rz-base-600) !important; +.rz-mx-4, +.rz-mr-4 { + margin-right: 1rem !important; } -.rz-color-base-700 { - color: var(--rz-base-700) !important; +.rz-my-4, +.rz-mb-4 { + margin-bottom: 1rem !important; } -.rz-color-base-800 { - color: var(--rz-base-800) !important; +.rz-mx-4, +.rz-ml-4 { + margin-left: 1rem !important; } -.rz-color-base-900 { - color: var(--rz-base-900) !important; +.rz-ms-4 { + margin-inline-start: 1rem !important; } -.rz-color-primary { - color: var(--rz-primary) !important; +.rz-me-4 { + margin-inline-end: 1rem !important; } -.rz-color-primary-light { - color: var(--rz-primary-light) !important; +.rz-m-5 { + margin: 1.25rem !important; } -.rz-color-primary-lighter { - color: var(--rz-primary-lighter) !important; +.rz-my-5, +.rz-mt-5 { + margin-top: 1.25rem !important; } -.rz-color-primary-dark { - color: var(--rz-primary-dark) !important; +.rz-mx-5, +.rz-mr-5 { + margin-right: 1.25rem !important; } -.rz-color-primary-darker { - color: var(--rz-primary-darker) !important; +.rz-my-5, +.rz-mb-5 { + margin-bottom: 1.25rem !important; } -.rz-color-secondary { - color: var(--rz-secondary) !important; +.rz-mx-5, +.rz-ml-5 { + margin-left: 1.25rem !important; } -.rz-color-secondary-light { - color: var(--rz-secondary-light) !important; +.rz-ms-5 { + margin-inline-start: 1.25rem !important; } -.rz-color-secondary-lighter { - color: var(--rz-secondary-lighter) !important; +.rz-me-5 { + margin-inline-end: 1.25rem !important; } -.rz-color-secondary-dark { - color: var(--rz-secondary-dark) !important; +.rz-m-6 { + margin: 1.5rem !important; } -.rz-color-secondary-darker { - color: var(--rz-secondary-darker) !important; +.rz-my-6, +.rz-mt-6 { + margin-top: 1.5rem !important; } -.rz-color-info { - color: var(--rz-info) !important; +.rz-mx-6, +.rz-mr-6 { + margin-right: 1.5rem !important; } -.rz-color-info-light { - color: var(--rz-info-light) !important; +.rz-my-6, +.rz-mb-6 { + margin-bottom: 1.5rem !important; } -.rz-color-info-lighter { - color: var(--rz-info-lighter) !important; +.rz-mx-6, +.rz-ml-6 { + margin-left: 1.5rem !important; } -.rz-color-info-dark { - color: var(--rz-info-dark) !important; +.rz-ms-6 { + margin-inline-start: 1.5rem !important; } -.rz-color-info-darker { - color: var(--rz-info-darker) !important; +.rz-me-6 { + margin-inline-end: 1.5rem !important; } -.rz-color-success { - color: var(--rz-success) !important; +.rz-m-7 { + margin: 1.75rem !important; } -.rz-color-success-light { - color: var(--rz-success-light) !important; +.rz-my-7, +.rz-mt-7 { + margin-top: 1.75rem !important; } -.rz-color-success-lighter { - color: var(--rz-success-lighter) !important; +.rz-mx-7, +.rz-mr-7 { + margin-right: 1.75rem !important; } -.rz-color-success-dark { - color: var(--rz-success-dark) !important; +.rz-my-7, +.rz-mb-7 { + margin-bottom: 1.75rem !important; } -.rz-color-success-darker { - color: var(--rz-success-darker) !important; +.rz-mx-7, +.rz-ml-7 { + margin-left: 1.75rem !important; } -.rz-color-warning { - color: var(--rz-warning) !important; +.rz-ms-7 { + margin-inline-start: 1.75rem !important; } -.rz-color-warning-light { - color: var(--rz-warning-light) !important; +.rz-me-7 { + margin-inline-end: 1.75rem !important; } -.rz-color-warning-lighter { - color: var(--rz-warning-lighter) !important; +.rz-m-8 { + margin: 2rem !important; } -.rz-color-warning-dark { - color: var(--rz-warning-dark) !important; +.rz-my-8, +.rz-mt-8 { + margin-top: 2rem !important; } -.rz-color-warning-darker { - color: var(--rz-warning-darker) !important; +.rz-mx-8, +.rz-mr-8 { + margin-right: 2rem !important; } -.rz-color-danger { - color: var(--rz-danger) !important; +.rz-my-8, +.rz-mb-8 { + margin-bottom: 2rem !important; } -.rz-color-danger-light { - color: var(--rz-danger-light) !important; +.rz-mx-8, +.rz-ml-8 { + margin-left: 2rem !important; } -.rz-color-danger-lighter { - color: var(--rz-danger-lighter) !important; +.rz-ms-8 { + margin-inline-start: 2rem !important; } -.rz-color-danger-dark { - color: var(--rz-danger-dark) !important; +.rz-me-8 { + margin-inline-end: 2rem !important; } -.rz-color-danger-darker { - color: var(--rz-danger-darker) !important; +.rz-m-9 { + margin: 2.25rem !important; } -.rz-color-on-primary { - color: var(--rz-on-primary) !important; +.rz-my-9, +.rz-mt-9 { + margin-top: 2.25rem !important; } -.rz-color-on-primary-light { - color: var(--rz-on-primary-light) !important; +.rz-mx-9, +.rz-mr-9 { + margin-right: 2.25rem !important; } -.rz-color-on-primary-lighter { - color: var(--rz-on-primary-lighter) !important; +.rz-my-9, +.rz-mb-9 { + margin-bottom: 2.25rem !important; } -.rz-color-on-primary-dark { - color: var(--rz-on-primary-dark) !important; +.rz-mx-9, +.rz-ml-9 { + margin-left: 2.25rem !important; } -.rz-color-on-primary-darker { - color: var(--rz-on-primary-darker) !important; +.rz-ms-9 { + margin-inline-start: 2.25rem !important; } -.rz-color-on-secondary { - color: var(--rz-on-secondary) !important; +.rz-me-9 { + margin-inline-end: 2.25rem !important; } -.rz-color-on-secondary-light { - color: var(--rz-on-secondary-light) !important; +.rz-m-10 { + margin: 2.5rem !important; } -.rz-color-on-secondary-lighter { - color: var(--rz-on-secondary-lighter) !important; +.rz-my-10, +.rz-mt-10 { + margin-top: 2.5rem !important; } -.rz-color-on-secondary-dark { - color: var(--rz-on-secondary-dark) !important; +.rz-mx-10, +.rz-mr-10 { + margin-right: 2.5rem !important; } -.rz-color-on-secondary-darker { - color: var(--rz-on-secondary-darker) !important; +.rz-my-10, +.rz-mb-10 { + margin-bottom: 2.5rem !important; } -.rz-color-on-info { - color: var(--rz-on-info) !important; +.rz-mx-10, +.rz-ml-10 { + margin-left: 2.5rem !important; } -.rz-color-on-info-light { - color: var(--rz-on-info-light) !important; +.rz-ms-10 { + margin-inline-start: 2.5rem !important; } -.rz-color-on-info-lighter { - color: var(--rz-on-info-lighter) !important; +.rz-me-10 { + margin-inline-end: 2.5rem !important; } -.rz-color-on-info-dark { - color: var(--rz-on-info-dark) !important; +.rz-m-11 { + margin: 2.75rem !important; } -.rz-color-on-info-darker { - color: var(--rz-on-info-darker) !important; +.rz-my-11, +.rz-mt-11 { + margin-top: 2.75rem !important; } -.rz-color-on-success { - color: var(--rz-on-success) !important; +.rz-mx-11, +.rz-mr-11 { + margin-right: 2.75rem !important; } -.rz-color-on-success-light { - color: var(--rz-on-success-light) !important; +.rz-my-11, +.rz-mb-11 { + margin-bottom: 2.75rem !important; } -.rz-color-on-success-lighter { - color: var(--rz-on-success-lighter) !important; +.rz-mx-11, +.rz-ml-11 { + margin-left: 2.75rem !important; } -.rz-color-on-success-dark { - color: var(--rz-on-success-dark) !important; +.rz-ms-11 { + margin-inline-start: 2.75rem !important; } -.rz-color-on-success-darker { - color: var(--rz-on-success-darker) !important; +.rz-me-11 { + margin-inline-end: 2.75rem !important; } -.rz-color-on-warning { - color: var(--rz-on-warning) !important; +.rz-m-12 { + margin: 3rem !important; } -.rz-color-on-warning-light { - color: var(--rz-on-warning-light) !important; +.rz-my-12, +.rz-mt-12 { + margin-top: 3rem !important; } -.rz-color-on-warning-lighter { - color: var(--rz-on-warning-lighter) !important; +.rz-mx-12, +.rz-mr-12 { + margin-right: 3rem !important; } -.rz-color-on-warning-dark { - color: var(--rz-on-warning-dark) !important; +.rz-my-12, +.rz-mb-12 { + margin-bottom: 3rem !important; } -.rz-color-on-warning-darker { - color: var(--rz-on-warning-darker) !important; +.rz-mx-12, +.rz-ml-12 { + margin-left: 3rem !important; } -.rz-color-on-danger { - color: var(--rz-on-danger) !important; +.rz-ms-12 { + margin-inline-start: 3rem !important; } -.rz-color-on-danger-light { - color: var(--rz-on-danger-light) !important; +.rz-me-12 { + margin-inline-end: 3rem !important; } -.rz-color-on-danger-lighter { - color: var(--rz-on-danger-lighter) !important; +.rz-p-0 { + padding: 0 !important; } -.rz-color-on-danger-dark { - color: var(--rz-on-danger-dark) !important; +.rz-py-0, +.rz-pt-0 { + padding-top: 0 !important; } -.rz-color-on-danger-darker { - color: var(--rz-on-danger-darker) !important; +.rz-px-0, +.rz-pr-0 { + padding-right: 0 !important; } -.rz-color-series-1 { - color: var(--rz-series-1) !important; +.rz-py-0, +.rz-pb-0 { + padding-bottom: 0 !important; } -.rz-color-series-2 { - color: var(--rz-series-2) !important; +.rz-px-0, +.rz-pl-0 { + padding-left: 0 !important; } -.rz-color-series-3 { - color: var(--rz-series-3) !important; +.rz-ps-0 { + padding-inline-start: 0 !important; } -.rz-color-series-4 { - color: var(--rz-series-4) !important; +.rz-pe-0 { + padding-inline-end: 0 !important; } -.rz-color-series-5 { - color: var(--rz-series-5) !important; +.rz-p-05 { + padding: 0.125rem !important; } -.rz-color-series-6 { - color: var(--rz-series-6) !important; +.rz-py-05, +.rz-pt-05 { + padding-top: 0.125rem !important; } -.rz-color-series-7 { - color: var(--rz-series-7) !important; +.rz-px-05, +.rz-pr-05 { + padding-right: 0.125rem !important; } -.rz-color-series-8 { - color: var(--rz-series-8) !important; +.rz-py-05, +.rz-pb-05 { + padding-bottom: 0.125rem !important; } -.rz-color-series-9 { - color: var(--rz-series-9) !important; +.rz-px-05, +.rz-pl-05 { + padding-left: 0.125rem !important; } -.rz-color-series-10 { - color: var(--rz-series-10) !important; +.rz-ps-05 { + padding-inline-start: 0.125rem !important; } -.rz-color-series-11 { - color: var(--rz-series-11) !important; +.rz-pe-05 { + padding-inline-end: 0.125rem !important; } -.rz-color-series-12 { - color: var(--rz-series-12) !important; +.rz-p-1 { + padding: 0.25rem !important; } -.rz-color-series-13 { - color: var(--rz-series-13) !important; +.rz-py-1, +.rz-pt-1 { + padding-top: 0.25rem !important; } -.rz-color-series-14 { - color: var(--rz-series-14) !important; +.rz-px-1, +.rz-pr-1 { + padding-right: 0.25rem !important; } -.rz-color-series-15 { - color: var(--rz-series-15) !important; +.rz-py-1, +.rz-pb-1 { + padding-bottom: 0.25rem !important; } -.rz-color-series-16 { - color: var(--rz-series-16) !important; +.rz-px-1, +.rz-pl-1 { + padding-left: 0.25rem !important; } -.rz-color-series-17 { - color: var(--rz-series-17) !important; +.rz-ps-1 { + padding-inline-start: 0.25rem !important; } -.rz-color-series-18 { - color: var(--rz-series-18) !important; +.rz-pe-1 { + padding-inline-end: 0.25rem !important; } -.rz-color-series-19 { - color: var(--rz-series-19) !important; +.rz-p-2 { + padding: 0.5rem !important; } -.rz-color-series-20 { - color: var(--rz-series-20) !important; +.rz-py-2, +.rz-pt-2 { + padding-top: 0.5rem !important; } -.rz-color-series-21 { - color: var(--rz-series-21) !important; +.rz-px-2, +.rz-pr-2 { + padding-right: 0.5rem !important; } -.rz-color-series-22 { - color: var(--rz-series-22) !important; +.rz-py-2, +.rz-pb-2 { + padding-bottom: 0.5rem !important; } -.rz-color-series-23 { - color: var(--rz-series-23) !important; +.rz-px-2, +.rz-pl-2 { + padding-left: 0.5rem !important; } -.rz-color-series-24 { - color: var(--rz-series-24) !important; +.rz-ps-2 { + padding-inline-start: 0.5rem !important; } -.rz-background-color-white { - background-color: var(--rz-white) !important; +.rz-pe-2 { + padding-inline-end: 0.5rem !important; } -.rz-background-color-black { - background-color: var(--rz-black) !important; +.rz-p-3 { + padding: 0.75rem !important; } -.rz-background-color-base-50 { - background-color: var(--rz-base-50) !important; +.rz-py-3, +.rz-pt-3 { + padding-top: 0.75rem !important; } -.rz-background-color-base-100 { - background-color: var(--rz-base-100) !important; +.rz-px-3, +.rz-pr-3 { + padding-right: 0.75rem !important; } -.rz-background-color-base-200 { - background-color: var(--rz-base-200) !important; +.rz-py-3, +.rz-pb-3 { + padding-bottom: 0.75rem !important; } -.rz-background-color-base-300 { - background-color: var(--rz-base-300) !important; +.rz-px-3, +.rz-pl-3 { + padding-left: 0.75rem !important; } -.rz-background-color-base-400 { - background-color: var(--rz-base-400) !important; +.rz-ps-3 { + padding-inline-start: 0.75rem !important; } -.rz-background-color-base-500 { - background-color: var(--rz-base-500) !important; +.rz-pe-3 { + padding-inline-end: 0.75rem !important; } -.rz-background-color-base-600 { - background-color: var(--rz-base-600) !important; +.rz-p-4 { + padding: 1rem !important; } -.rz-background-color-base-700 { - background-color: var(--rz-base-700) !important; +.rz-py-4, +.rz-pt-4 { + padding-top: 1rem !important; } -.rz-background-color-base-800 { - background-color: var(--rz-base-800) !important; +.rz-px-4, +.rz-pr-4 { + padding-right: 1rem !important; } -.rz-background-color-base-900 { - background-color: var(--rz-base-900) !important; +.rz-py-4, +.rz-pb-4 { + padding-bottom: 1rem !important; } -.rz-background-color-primary { - background-color: var(--rz-primary) !important; +.rz-px-4, +.rz-pl-4 { + padding-left: 1rem !important; } -.rz-background-color-primary-light { - background-color: var(--rz-primary-light) !important; +.rz-ps-4 { + padding-inline-start: 1rem !important; } -.rz-background-color-primary-lighter { - background-color: var(--rz-primary-lighter) !important; +.rz-pe-4 { + padding-inline-end: 1rem !important; } -.rz-background-color-primary-dark { - background-color: var(--rz-primary-dark) !important; +.rz-p-5 { + padding: 1.25rem !important; } -.rz-background-color-primary-darker { - background-color: var(--rz-primary-darker) !important; +.rz-py-5, +.rz-pt-5 { + padding-top: 1.25rem !important; } -.rz-background-color-secondary { - background-color: var(--rz-secondary) !important; +.rz-px-5, +.rz-pr-5 { + padding-right: 1.25rem !important; } -.rz-background-color-secondary-light { - background-color: var(--rz-secondary-light) !important; +.rz-py-5, +.rz-pb-5 { + padding-bottom: 1.25rem !important; } -.rz-background-color-secondary-lighter { - background-color: var(--rz-secondary-lighter) !important; +.rz-px-5, +.rz-pl-5 { + padding-left: 1.25rem !important; } -.rz-background-color-secondary-dark { - background-color: var(--rz-secondary-dark) !important; +.rz-ps-5 { + padding-inline-start: 1.25rem !important; } -.rz-background-color-secondary-darker { - background-color: var(--rz-secondary-darker) !important; +.rz-pe-5 { + padding-inline-end: 1.25rem !important; } -.rz-background-color-info { - background-color: var(--rz-info) !important; +.rz-p-6 { + padding: 1.5rem !important; } -.rz-background-color-info-light { - background-color: var(--rz-info-light) !important; +.rz-py-6, +.rz-pt-6 { + padding-top: 1.5rem !important; } -.rz-background-color-info-lighter { - background-color: var(--rz-info-lighter) !important; +.rz-px-6, +.rz-pr-6 { + padding-right: 1.5rem !important; } -.rz-background-color-info-dark { - background-color: var(--rz-info-dark) !important; +.rz-py-6, +.rz-pb-6 { + padding-bottom: 1.5rem !important; } -.rz-background-color-info-darker { - background-color: var(--rz-info-darker) !important; +.rz-px-6, +.rz-pl-6 { + padding-left: 1.5rem !important; } -.rz-background-color-success { - background-color: var(--rz-success) !important; +.rz-ps-6 { + padding-inline-start: 1.5rem !important; } -.rz-background-color-success-light { - background-color: var(--rz-success-light) !important; +.rz-pe-6 { + padding-inline-end: 1.5rem !important; } -.rz-background-color-success-lighter { - background-color: var(--rz-success-lighter) !important; +.rz-p-7 { + padding: 1.75rem !important; } -.rz-background-color-success-dark { - background-color: var(--rz-success-dark) !important; +.rz-py-7, +.rz-pt-7 { + padding-top: 1.75rem !important; } -.rz-background-color-success-darker { - background-color: var(--rz-success-darker) !important; +.rz-px-7, +.rz-pr-7 { + padding-right: 1.75rem !important; } -.rz-background-color-warning { - background-color: var(--rz-warning) !important; +.rz-py-7, +.rz-pb-7 { + padding-bottom: 1.75rem !important; } -.rz-background-color-warning-light { - background-color: var(--rz-warning-light) !important; +.rz-px-7, +.rz-pl-7 { + padding-left: 1.75rem !important; } -.rz-background-color-warning-lighter { - background-color: var(--rz-warning-lighter) !important; +.rz-ps-7 { + padding-inline-start: 1.75rem !important; } -.rz-background-color-warning-dark { - background-color: var(--rz-warning-dark) !important; +.rz-pe-7 { + padding-inline-end: 1.75rem !important; } -.rz-background-color-warning-darker { - background-color: var(--rz-warning-darker) !important; +.rz-p-8 { + padding: 2rem !important; } -.rz-background-color-danger { - background-color: var(--rz-danger) !important; +.rz-py-8, +.rz-pt-8 { + padding-top: 2rem !important; } -.rz-background-color-danger-light { - background-color: var(--rz-danger-light) !important; +.rz-px-8, +.rz-pr-8 { + padding-right: 2rem !important; } -.rz-background-color-danger-lighter { - background-color: var(--rz-danger-lighter) !important; +.rz-py-8, +.rz-pb-8 { + padding-bottom: 2rem !important; } -.rz-background-color-danger-dark { - background-color: var(--rz-danger-dark) !important; +.rz-px-8, +.rz-pl-8 { + padding-left: 2rem !important; } -.rz-background-color-danger-darker { - background-color: var(--rz-danger-darker) !important; +.rz-ps-8 { + padding-inline-start: 2rem !important; } -.rz-background-color-on-primary { - background-color: var(--rz-on-primary) !important; +.rz-pe-8 { + padding-inline-end: 2rem !important; } -.rz-background-color-on-primary-light { - background-color: var(--rz-on-primary-light) !important; +.rz-p-9 { + padding: 2.25rem !important; } -.rz-background-color-on-primary-lighter { - background-color: var(--rz-on-primary-lighter) !important; +.rz-py-9, +.rz-pt-9 { + padding-top: 2.25rem !important; } -.rz-background-color-on-primary-dark { - background-color: var(--rz-on-primary-dark) !important; +.rz-px-9, +.rz-pr-9 { + padding-right: 2.25rem !important; } -.rz-background-color-on-primary-darker { - background-color: var(--rz-on-primary-darker) !important; +.rz-py-9, +.rz-pb-9 { + padding-bottom: 2.25rem !important; } -.rz-background-color-on-secondary { - background-color: var(--rz-on-secondary) !important; +.rz-px-9, +.rz-pl-9 { + padding-left: 2.25rem !important; } -.rz-background-color-on-secondary-light { - background-color: var(--rz-on-secondary-light) !important; +.rz-ps-9 { + padding-inline-start: 2.25rem !important; } -.rz-background-color-on-secondary-lighter { - background-color: var(--rz-on-secondary-lighter) !important; +.rz-pe-9 { + padding-inline-end: 2.25rem !important; } -.rz-background-color-on-secondary-dark { - background-color: var(--rz-on-secondary-dark) !important; +.rz-p-10 { + padding: 2.5rem !important; } -.rz-background-color-on-secondary-darker { - background-color: var(--rz-on-secondary-darker) !important; +.rz-py-10, +.rz-pt-10 { + padding-top: 2.5rem !important; } -.rz-background-color-on-info { - background-color: var(--rz-on-info) !important; +.rz-px-10, +.rz-pr-10 { + padding-right: 2.5rem !important; } -.rz-background-color-on-info-light { - background-color: var(--rz-on-info-light) !important; +.rz-py-10, +.rz-pb-10 { + padding-bottom: 2.5rem !important; } -.rz-background-color-on-info-lighter { - background-color: var(--rz-on-info-lighter) !important; +.rz-px-10, +.rz-pl-10 { + padding-left: 2.5rem !important; } -.rz-background-color-on-info-dark { - background-color: var(--rz-on-info-dark) !important; +.rz-ps-10 { + padding-inline-start: 2.5rem !important; } -.rz-background-color-on-info-darker { - background-color: var(--rz-on-info-darker) !important; +.rz-pe-10 { + padding-inline-end: 2.5rem !important; } -.rz-background-color-on-success { - background-color: var(--rz-on-success) !important; +.rz-p-11 { + padding: 2.75rem !important; } -.rz-background-color-on-success-light { - background-color: var(--rz-on-success-light) !important; +.rz-py-11, +.rz-pt-11 { + padding-top: 2.75rem !important; } -.rz-background-color-on-success-lighter { - background-color: var(--rz-on-success-lighter) !important; +.rz-px-11, +.rz-pr-11 { + padding-right: 2.75rem !important; } -.rz-background-color-on-success-dark { - background-color: var(--rz-on-success-dark) !important; +.rz-py-11, +.rz-pb-11 { + padding-bottom: 2.75rem !important; } -.rz-background-color-on-success-darker { - background-color: var(--rz-on-success-darker) !important; +.rz-px-11, +.rz-pl-11 { + padding-left: 2.75rem !important; } -.rz-background-color-on-warning { - background-color: var(--rz-on-warning) !important; +.rz-ps-11 { + padding-inline-start: 2.75rem !important; } -.rz-background-color-on-warning-light { - background-color: var(--rz-on-warning-light) !important; +.rz-pe-11 { + padding-inline-end: 2.75rem !important; } -.rz-background-color-on-warning-lighter { - background-color: var(--rz-on-warning-lighter) !important; +.rz-p-12 { + padding: 3rem !important; } -.rz-background-color-on-warning-dark { - background-color: var(--rz-on-warning-dark) !important; +.rz-py-12, +.rz-pt-12 { + padding-top: 3rem !important; } -.rz-background-color-on-warning-darker { - background-color: var(--rz-on-warning-darker) !important; +.rz-px-12, +.rz-pr-12 { + padding-right: 3rem !important; } -.rz-background-color-on-danger { - background-color: var(--rz-on-danger) !important; +.rz-py-12, +.rz-pb-12 { + padding-bottom: 3rem !important; } -.rz-background-color-on-danger-light { - background-color: var(--rz-on-danger-light) !important; -} - -.rz-background-color-on-danger-lighter { - background-color: var(--rz-on-danger-lighter) !important; -} - -.rz-background-color-on-danger-dark { - background-color: var(--rz-on-danger-dark) !important; -} - -.rz-background-color-on-danger-darker { - background-color: var(--rz-on-danger-darker) !important; -} - -.rz-background-color-series-1 { - background-color: var(--rz-series-1) !important; -} - -.rz-background-color-series-2 { - background-color: var(--rz-series-2) !important; -} - -.rz-background-color-series-3 { - background-color: var(--rz-series-3) !important; -} - -.rz-background-color-series-4 { - background-color: var(--rz-series-4) !important; -} - -.rz-background-color-series-5 { - background-color: var(--rz-series-5) !important; -} - -.rz-background-color-series-6 { - background-color: var(--rz-series-6) !important; -} - -.rz-background-color-series-7 { - background-color: var(--rz-series-7) !important; -} - -.rz-background-color-series-8 { - background-color: var(--rz-series-8) !important; -} - -.rz-background-color-series-9 { - background-color: var(--rz-series-9) !important; -} - -.rz-background-color-series-10 { - background-color: var(--rz-series-10) !important; -} - -.rz-background-color-series-11 { - background-color: var(--rz-series-11) !important; -} - -.rz-background-color-series-12 { - background-color: var(--rz-series-12) !important; -} - -.rz-background-color-series-13 { - background-color: var(--rz-series-13) !important; -} - -.rz-background-color-series-14 { - background-color: var(--rz-series-14) !important; -} - -.rz-background-color-series-15 { - background-color: var(--rz-series-15) !important; -} - -.rz-background-color-series-16 { - background-color: var(--rz-series-16) !important; -} - -.rz-background-color-series-17 { - background-color: var(--rz-series-17) !important; -} - -.rz-background-color-series-18 { - background-color: var(--rz-series-18) !important; -} - -.rz-background-color-series-19 { - background-color: var(--rz-series-19) !important; -} - -.rz-background-color-series-20 { - background-color: var(--rz-series-20) !important; -} - -.rz-background-color-series-21 { - background-color: var(--rz-series-21) !important; -} - -.rz-background-color-series-22 { - background-color: var(--rz-series-22) !important; -} - -.rz-background-color-series-23 { - background-color: var(--rz-series-23) !important; -} - -.rz-background-color-series-24 { - background-color: var(--rz-series-24) !important; -} - -.rz-border-color-white { - border-color: var(--rz-white) !important; -} - -.rz-border-color-black { - border-color: var(--rz-black) !important; -} - -.rz-border-color-base-50 { - border-color: var(--rz-base-50) !important; -} - -.rz-border-color-base-100 { - border-color: var(--rz-base-100) !important; -} - -.rz-border-color-base-200 { - border-color: var(--rz-base-200) !important; -} - -.rz-border-color-base-300 { - border-color: var(--rz-base-300) !important; -} - -.rz-border-color-base-400 { - border-color: var(--rz-base-400) !important; -} - -.rz-border-color-base-500 { - border-color: var(--rz-base-500) !important; -} - -.rz-border-color-base-600 { - border-color: var(--rz-base-600) !important; -} - -.rz-border-color-base-700 { - border-color: var(--rz-base-700) !important; -} - -.rz-border-color-base-800 { - border-color: var(--rz-base-800) !important; -} - -.rz-border-color-base-900 { - border-color: var(--rz-base-900) !important; -} - -.rz-border-color-primary { - border-color: var(--rz-primary) !important; -} - -.rz-border-color-primary-light { - border-color: var(--rz-primary-light) !important; -} - -.rz-border-color-primary-lighter { - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-color-primary-dark { - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-color-primary-darker { - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-color-secondary { - border-color: var(--rz-secondary) !important; -} - -.rz-border-color-secondary-light { - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-color-secondary-lighter { - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-color-secondary-dark { - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-color-secondary-darker { - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-color-info { - border-color: var(--rz-info) !important; -} - -.rz-border-color-info-light { - border-color: var(--rz-info-light) !important; -} - -.rz-border-color-info-lighter { - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-color-info-dark { - border-color: var(--rz-info-dark) !important; +.rz-px-12, +.rz-pl-12 { + padding-left: 3rem !important; } -.rz-border-color-info-darker { - border-color: var(--rz-info-darker) !important; +.rz-ps-12 { + padding-inline-start: 3rem !important; } -.rz-border-color-success { - border-color: var(--rz-success) !important; +.rz-pe-12 { + padding-inline-end: 3rem !important; } -.rz-border-color-success-light { - border-color: var(--rz-success-light) !important; +.rz-m-auto { + margin: auto !important; } -.rz-border-color-success-lighter { - border-color: var(--rz-success-lighter) !important; +.rz-my-auto, +.rz-mt-auto { + margin-top: auto !important; } -.rz-border-color-success-dark { - border-color: var(--rz-success-dark) !important; +.rz-mx-auto, +.rz-mr-auto { + margin-right: auto !important; } -.rz-border-color-success-darker { - border-color: var(--rz-success-darker) !important; +.rz-my-auto, +.rz-mb-auto { + margin-bottom: auto !important; } -.rz-border-color-warning { - border-color: var(--rz-warning) !important; +.rz-mx-auto, +.rz-ml-auto { + margin-left: auto !important; } -.rz-border-color-warning-light { - border-color: var(--rz-warning-light) !important; +.rz-ms-auto { + margin-inline-start: auto !important; } -.rz-border-color-warning-lighter { - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-color-warning-dark { - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-color-warning-darker { - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-color-danger { - border-color: var(--rz-danger) !important; -} - -.rz-border-color-danger-light { - border-color: var(--rz-danger-light) !important; -} - -.rz-border-color-danger-lighter { - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-color-danger-dark { - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-color-danger-darker { - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-color-on-primary { - border-color: var(--rz-on-primary) !important; -} - -.rz-border-color-on-primary-light { - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-color-on-primary-lighter { - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-color-on-primary-dark { - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-color-on-primary-darker { - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-color-on-secondary { - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-color-on-secondary-light { - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-color-on-secondary-lighter { - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-color-on-secondary-dark { - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-color-on-secondary-darker { - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-color-on-info { - border-color: var(--rz-on-info) !important; -} - -.rz-border-color-on-info-light { - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-color-on-info-lighter { - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-color-on-info-dark { - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-color-on-info-darker { - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-color-on-success { - border-color: var(--rz-on-success) !important; -} - -.rz-border-color-on-success-light { - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-color-on-success-lighter { - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-color-on-success-dark { - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-color-on-success-darker { - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-color-on-warning { - border-color: var(--rz-on-warning) !important; -} - -.rz-border-color-on-warning-light { - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-color-on-warning-lighter { - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-color-on-warning-dark { - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-color-on-warning-darker { - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-color-on-danger { - border-color: var(--rz-on-danger) !important; -} - -.rz-border-color-on-danger-light { - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-color-on-danger-lighter { - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-color-on-danger-dark { - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-color-on-danger-darker { - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-color-series-1 { - border-color: var(--rz-series-1) !important; -} - -.rz-border-color-series-2 { - border-color: var(--rz-series-2) !important; -} - -.rz-border-color-series-3 { - border-color: var(--rz-series-3) !important; -} - -.rz-border-color-series-4 { - border-color: var(--rz-series-4) !important; -} - -.rz-border-color-series-5 { - border-color: var(--rz-series-5) !important; -} - -.rz-border-color-series-6 { - border-color: var(--rz-series-6) !important; -} - -.rz-border-color-series-7 { - border-color: var(--rz-series-7) !important; -} - -.rz-border-color-series-8 { - border-color: var(--rz-series-8) !important; -} - -.rz-border-color-series-9 { - border-color: var(--rz-series-9) !important; -} - -.rz-border-color-series-10 { - border-color: var(--rz-series-10) !important; -} - -.rz-border-color-series-11 { - border-color: var(--rz-series-11) !important; -} - -.rz-border-color-series-12 { - border-color: var(--rz-series-12) !important; -} - -.rz-border-color-series-13 { - border-color: var(--rz-series-13) !important; -} - -.rz-border-color-series-14 { - border-color: var(--rz-series-14) !important; -} - -.rz-border-color-series-15 { - border-color: var(--rz-series-15) !important; -} - -.rz-border-color-series-16 { - border-color: var(--rz-series-16) !important; -} - -.rz-border-color-series-17 { - border-color: var(--rz-series-17) !important; -} - -.rz-border-color-series-18 { - border-color: var(--rz-series-18) !important; -} - -.rz-border-color-series-19 { - border-color: var(--rz-series-19) !important; -} - -.rz-border-color-series-20 { - border-color: var(--rz-series-20) !important; -} - -.rz-border-color-series-21 { - border-color: var(--rz-series-21) !important; -} - -.rz-border-color-series-22 { - border-color: var(--rz-series-22) !important; -} - -.rz-border-color-series-23 { - border-color: var(--rz-series-23) !important; -} - -.rz-border-color-series-24 { - border-color: var(--rz-series-24) !important; -} - -.rz-border-white { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-white) !important; -} - -.rz-border-black { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-black) !important; -} - -.rz-border-base-50 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-50) !important; -} - -.rz-border-base-100 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-100) !important; -} - -.rz-border-base-200 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-200) !important; -} - -.rz-border-base-300 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-300) !important; -} - -.rz-border-base-400 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-400) !important; -} - -.rz-border-base-500 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-500) !important; -} - -.rz-border-base-600 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-600) !important; -} - -.rz-border-base-700 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-700) !important; -} - -.rz-border-base-800 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-800) !important; -} - -.rz-border-base-900 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-base-900) !important; -} - -.rz-border-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary) !important; -} - -.rz-border-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-light) !important; -} - -.rz-border-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-lighter) !important; -} - -.rz-border-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-dark) !important; -} - -.rz-border-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-primary-darker) !important; -} - -.rz-border-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary) !important; -} - -.rz-border-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-light) !important; -} - -.rz-border-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-lighter) !important; -} - -.rz-border-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-dark) !important; -} - -.rz-border-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-secondary-darker) !important; -} - -.rz-border-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info) !important; -} - -.rz-border-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-light) !important; -} - -.rz-border-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-lighter) !important; -} - -.rz-border-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-dark) !important; -} - -.rz-border-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-info-darker) !important; -} - -.rz-border-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success) !important; -} - -.rz-border-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-light) !important; -} - -.rz-border-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-lighter) !important; -} - -.rz-border-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-dark) !important; -} - -.rz-border-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-success-darker) !important; -} - -.rz-border-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning) !important; -} - -.rz-border-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-light) !important; -} - -.rz-border-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-lighter) !important; -} - -.rz-border-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-dark) !important; -} - -.rz-border-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-warning-darker) !important; -} - -.rz-border-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger) !important; -} - -.rz-border-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-light) !important; -} - -.rz-border-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-lighter) !important; -} - -.rz-border-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-dark) !important; -} - -.rz-border-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-danger-darker) !important; -} - -.rz-border-on-primary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary) !important; -} - -.rz-border-on-primary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-light) !important; -} - -.rz-border-on-primary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-lighter) !important; -} - -.rz-border-on-primary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-dark) !important; -} - -.rz-border-on-primary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-primary-darker) !important; -} - -.rz-border-on-secondary { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary) !important; -} - -.rz-border-on-secondary-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-light) !important; -} - -.rz-border-on-secondary-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-lighter) !important; -} - -.rz-border-on-secondary-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-dark) !important; -} - -.rz-border-on-secondary-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-secondary-darker) !important; -} - -.rz-border-on-info { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info) !important; -} - -.rz-border-on-info-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-light) !important; -} - -.rz-border-on-info-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-lighter) !important; -} - -.rz-border-on-info-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-dark) !important; -} - -.rz-border-on-info-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-info-darker) !important; -} - -.rz-border-on-success { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success) !important; -} - -.rz-border-on-success-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-light) !important; -} - -.rz-border-on-success-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-lighter) !important; -} - -.rz-border-on-success-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-dark) !important; -} - -.rz-border-on-success-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-success-darker) !important; -} - -.rz-border-on-warning { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning) !important; -} - -.rz-border-on-warning-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-light) !important; -} - -.rz-border-on-warning-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-lighter) !important; -} - -.rz-border-on-warning-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-dark) !important; -} - -.rz-border-on-warning-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-warning-darker) !important; -} - -.rz-border-on-danger { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger) !important; -} - -.rz-border-on-danger-light { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-light) !important; -} - -.rz-border-on-danger-lighter { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-lighter) !important; -} - -.rz-border-on-danger-dark { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-dark) !important; -} - -.rz-border-on-danger-darker { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-on-danger-darker) !important; -} - -.rz-border-series-1 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-1) !important; -} - -.rz-border-series-2 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-2) !important; -} - -.rz-border-series-3 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-3) !important; -} - -.rz-border-series-4 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-4) !important; -} - -.rz-border-series-5 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-5) !important; -} - -.rz-border-series-6 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-6) !important; -} - -.rz-border-series-7 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-7) !important; -} - -.rz-border-series-8 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-8) !important; -} - -.rz-border-series-9 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-9) !important; -} - -.rz-border-series-10 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-10) !important; -} - -.rz-border-series-11 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-11) !important; -} - -.rz-border-series-12 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-12) !important; -} - -.rz-border-series-13 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-13) !important; -} - -.rz-border-series-14 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-14) !important; -} - -.rz-border-series-15 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-15) !important; -} - -.rz-border-series-16 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-16) !important; -} - -.rz-border-series-17 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-17) !important; -} - -.rz-border-series-18 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-18) !important; -} - -.rz-border-series-19 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-19) !important; -} - -.rz-border-series-20 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-20) !important; -} - -.rz-border-series-21 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-21) !important; -} - -.rz-border-series-22 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-22) !important; -} - -.rz-border-series-23 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-23) !important; -} - -.rz-border-series-24 { - border-width: var(--rz-border-width); - border-style: solid; - border-color: var(--rz-series-24) !important; -} - -.rz-ripple { - position: relative; - overflow: hidden; -} -.rz-ripple:not(.rz-state-disabled):before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - background-position: center; - background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%; - transition: background-size 0.8s, opacity 0.8s; -} -.rz-ripple:not(.rz-state-disabled):active:before { - transition: background-size 0s, opacity 0s; - opacity: 0.32; - background-size: 100%; -} - -.rz-m-0 { - margin: 0 !important; -} - -.rz-my-0, -.rz-mt-0 { - margin-top: 0 !important; -} - -.rz-mx-0, -.rz-mr-0 { - margin-right: 0 !important; -} - -.rz-my-0, -.rz-mb-0 { - margin-bottom: 0 !important; -} - -.rz-mx-0, -.rz-ml-0 { - margin-left: 0 !important; -} - -.rz-ms-0 { - margin-inline-start: 0 !important; -} - -.rz-me-0 { - margin-inline-end: 0 !important; -} - -.rz-m-05 { - margin: 0.125rem !important; -} - -.rz-my-05, -.rz-mt-05 { - margin-top: 0.125rem !important; -} - -.rz-mx-05, -.rz-mr-05 { - margin-right: 0.125rem !important; -} - -.rz-my-05, -.rz-mb-05 { - margin-bottom: 0.125rem !important; -} - -.rz-mx-05, -.rz-ml-05 { - margin-left: 0.125rem !important; -} - -.rz-ms-05 { - margin-inline-start: 0.125rem !important; -} - -.rz-me-05 { - margin-inline-end: 0.125rem !important; -} - -.rz-m-1 { - margin: 0.25rem !important; -} - -.rz-my-1, -.rz-mt-1 { - margin-top: 0.25rem !important; -} - -.rz-mx-1, -.rz-mr-1 { - margin-right: 0.25rem !important; -} - -.rz-my-1, -.rz-mb-1 { - margin-bottom: 0.25rem !important; -} - -.rz-mx-1, -.rz-ml-1 { - margin-left: 0.25rem !important; -} - -.rz-ms-1 { - margin-inline-start: 0.25rem !important; -} - -.rz-me-1 { - margin-inline-end: 0.25rem !important; -} - -.rz-m-2 { - margin: 0.5rem !important; -} - -.rz-my-2, -.rz-mt-2 { - margin-top: 0.5rem !important; -} - -.rz-mx-2, -.rz-mr-2 { - margin-right: 0.5rem !important; -} - -.rz-my-2, -.rz-mb-2 { - margin-bottom: 0.5rem !important; -} - -.rz-mx-2, -.rz-ml-2 { - margin-left: 0.5rem !important; -} - -.rz-ms-2 { - margin-inline-start: 0.5rem !important; -} - -.rz-me-2 { - margin-inline-end: 0.5rem !important; -} - -.rz-m-3 { - margin: 0.75rem !important; -} - -.rz-my-3, -.rz-mt-3 { - margin-top: 0.75rem !important; -} - -.rz-mx-3, -.rz-mr-3 { - margin-right: 0.75rem !important; -} - -.rz-my-3, -.rz-mb-3 { - margin-bottom: 0.75rem !important; -} - -.rz-mx-3, -.rz-ml-3 { - margin-left: 0.75rem !important; -} - -.rz-ms-3 { - margin-inline-start: 0.75rem !important; -} - -.rz-me-3 { - margin-inline-end: 0.75rem !important; -} - -.rz-m-4 { - margin: 1rem !important; -} - -.rz-my-4, -.rz-mt-4 { - margin-top: 1rem !important; -} - -.rz-mx-4, -.rz-mr-4 { - margin-right: 1rem !important; -} - -.rz-my-4, -.rz-mb-4 { - margin-bottom: 1rem !important; -} - -.rz-mx-4, -.rz-ml-4 { - margin-left: 1rem !important; -} - -.rz-ms-4 { - margin-inline-start: 1rem !important; -} - -.rz-me-4 { - margin-inline-end: 1rem !important; -} - -.rz-m-5 { - margin: 1.25rem !important; -} - -.rz-my-5, -.rz-mt-5 { - margin-top: 1.25rem !important; -} - -.rz-mx-5, -.rz-mr-5 { - margin-right: 1.25rem !important; -} - -.rz-my-5, -.rz-mb-5 { - margin-bottom: 1.25rem !important; -} - -.rz-mx-5, -.rz-ml-5 { - margin-left: 1.25rem !important; -} - -.rz-ms-5 { - margin-inline-start: 1.25rem !important; -} - -.rz-me-5 { - margin-inline-end: 1.25rem !important; -} - -.rz-m-6 { - margin: 1.5rem !important; -} - -.rz-my-6, -.rz-mt-6 { - margin-top: 1.5rem !important; -} - -.rz-mx-6, -.rz-mr-6 { - margin-right: 1.5rem !important; -} - -.rz-my-6, -.rz-mb-6 { - margin-bottom: 1.5rem !important; -} - -.rz-mx-6, -.rz-ml-6 { - margin-left: 1.5rem !important; -} - -.rz-ms-6 { - margin-inline-start: 1.5rem !important; -} - -.rz-me-6 { - margin-inline-end: 1.5rem !important; -} - -.rz-m-7 { - margin: 1.75rem !important; -} - -.rz-my-7, -.rz-mt-7 { - margin-top: 1.75rem !important; -} - -.rz-mx-7, -.rz-mr-7 { - margin-right: 1.75rem !important; -} - -.rz-my-7, -.rz-mb-7 { - margin-bottom: 1.75rem !important; -} - -.rz-mx-7, -.rz-ml-7 { - margin-left: 1.75rem !important; -} - -.rz-ms-7 { - margin-inline-start: 1.75rem !important; -} - -.rz-me-7 { - margin-inline-end: 1.75rem !important; -} - -.rz-m-8 { - margin: 2rem !important; -} - -.rz-my-8, -.rz-mt-8 { - margin-top: 2rem !important; -} - -.rz-mx-8, -.rz-mr-8 { - margin-right: 2rem !important; -} - -.rz-my-8, -.rz-mb-8 { - margin-bottom: 2rem !important; -} - -.rz-mx-8, -.rz-ml-8 { - margin-left: 2rem !important; -} - -.rz-ms-8 { - margin-inline-start: 2rem !important; -} - -.rz-me-8 { - margin-inline-end: 2rem !important; -} - -.rz-m-9 { - margin: 2.25rem !important; -} - -.rz-my-9, -.rz-mt-9 { - margin-top: 2.25rem !important; -} - -.rz-mx-9, -.rz-mr-9 { - margin-right: 2.25rem !important; -} - -.rz-my-9, -.rz-mb-9 { - margin-bottom: 2.25rem !important; -} - -.rz-mx-9, -.rz-ml-9 { - margin-left: 2.25rem !important; -} - -.rz-ms-9 { - margin-inline-start: 2.25rem !important; -} - -.rz-me-9 { - margin-inline-end: 2.25rem !important; -} - -.rz-m-10 { - margin: 2.5rem !important; -} - -.rz-my-10, -.rz-mt-10 { - margin-top: 2.5rem !important; -} - -.rz-mx-10, -.rz-mr-10 { - margin-right: 2.5rem !important; -} - -.rz-my-10, -.rz-mb-10 { - margin-bottom: 2.5rem !important; -} - -.rz-mx-10, -.rz-ml-10 { - margin-left: 2.5rem !important; -} - -.rz-ms-10 { - margin-inline-start: 2.5rem !important; -} - -.rz-me-10 { - margin-inline-end: 2.5rem !important; -} - -.rz-m-11 { - margin: 2.75rem !important; -} - -.rz-my-11, -.rz-mt-11 { - margin-top: 2.75rem !important; -} - -.rz-mx-11, -.rz-mr-11 { - margin-right: 2.75rem !important; -} - -.rz-my-11, -.rz-mb-11 { - margin-bottom: 2.75rem !important; -} - -.rz-mx-11, -.rz-ml-11 { - margin-left: 2.75rem !important; -} - -.rz-ms-11 { - margin-inline-start: 2.75rem !important; -} - -.rz-me-11 { - margin-inline-end: 2.75rem !important; -} - -.rz-m-12 { - margin: 3rem !important; -} - -.rz-my-12, -.rz-mt-12 { - margin-top: 3rem !important; -} - -.rz-mx-12, -.rz-mr-12 { - margin-right: 3rem !important; -} - -.rz-my-12, -.rz-mb-12 { - margin-bottom: 3rem !important; -} - -.rz-mx-12, -.rz-ml-12 { - margin-left: 3rem !important; -} - -.rz-ms-12 { - margin-inline-start: 3rem !important; -} - -.rz-me-12 { - margin-inline-end: 3rem !important; -} - -.rz-p-0 { - padding: 0 !important; -} - -.rz-py-0, -.rz-pt-0 { - padding-top: 0 !important; -} - -.rz-px-0, -.rz-pr-0 { - padding-right: 0 !important; -} - -.rz-py-0, -.rz-pb-0 { - padding-bottom: 0 !important; -} - -.rz-px-0, -.rz-pl-0 { - padding-left: 0 !important; -} - -.rz-ps-0 { - padding-inline-start: 0 !important; -} - -.rz-pe-0 { - padding-inline-end: 0 !important; -} - -.rz-p-05 { - padding: 0.125rem !important; -} - -.rz-py-05, -.rz-pt-05 { - padding-top: 0.125rem !important; -} - -.rz-px-05, -.rz-pr-05 { - padding-right: 0.125rem !important; -} - -.rz-py-05, -.rz-pb-05 { - padding-bottom: 0.125rem !important; -} - -.rz-px-05, -.rz-pl-05 { - padding-left: 0.125rem !important; -} - -.rz-ps-05 { - padding-inline-start: 0.125rem !important; -} - -.rz-pe-05 { - padding-inline-end: 0.125rem !important; -} - -.rz-p-1 { - padding: 0.25rem !important; -} - -.rz-py-1, -.rz-pt-1 { - padding-top: 0.25rem !important; -} - -.rz-px-1, -.rz-pr-1 { - padding-right: 0.25rem !important; -} - -.rz-py-1, -.rz-pb-1 { - padding-bottom: 0.25rem !important; -} - -.rz-px-1, -.rz-pl-1 { - padding-left: 0.25rem !important; -} - -.rz-ps-1 { - padding-inline-start: 0.25rem !important; -} - -.rz-pe-1 { - padding-inline-end: 0.25rem !important; -} - -.rz-p-2 { - padding: 0.5rem !important; -} - -.rz-py-2, -.rz-pt-2 { - padding-top: 0.5rem !important; -} - -.rz-px-2, -.rz-pr-2 { - padding-right: 0.5rem !important; -} - -.rz-py-2, -.rz-pb-2 { - padding-bottom: 0.5rem !important; -} - -.rz-px-2, -.rz-pl-2 { - padding-left: 0.5rem !important; -} - -.rz-ps-2 { - padding-inline-start: 0.5rem !important; -} - -.rz-pe-2 { - padding-inline-end: 0.5rem !important; -} - -.rz-p-3 { - padding: 0.75rem !important; -} - -.rz-py-3, -.rz-pt-3 { - padding-top: 0.75rem !important; -} - -.rz-px-3, -.rz-pr-3 { - padding-right: 0.75rem !important; -} - -.rz-py-3, -.rz-pb-3 { - padding-bottom: 0.75rem !important; -} - -.rz-px-3, -.rz-pl-3 { - padding-left: 0.75rem !important; -} - -.rz-ps-3 { - padding-inline-start: 0.75rem !important; -} - -.rz-pe-3 { - padding-inline-end: 0.75rem !important; -} - -.rz-p-4 { - padding: 1rem !important; -} - -.rz-py-4, -.rz-pt-4 { - padding-top: 1rem !important; -} - -.rz-px-4, -.rz-pr-4 { - padding-right: 1rem !important; -} - -.rz-py-4, -.rz-pb-4 { - padding-bottom: 1rem !important; -} - -.rz-px-4, -.rz-pl-4 { - padding-left: 1rem !important; -} - -.rz-ps-4 { - padding-inline-start: 1rem !important; -} - -.rz-pe-4 { - padding-inline-end: 1rem !important; -} - -.rz-p-5 { - padding: 1.25rem !important; -} - -.rz-py-5, -.rz-pt-5 { - padding-top: 1.25rem !important; -} - -.rz-px-5, -.rz-pr-5 { - padding-right: 1.25rem !important; -} - -.rz-py-5, -.rz-pb-5 { - padding-bottom: 1.25rem !important; -} - -.rz-px-5, -.rz-pl-5 { - padding-left: 1.25rem !important; -} - -.rz-ps-5 { - padding-inline-start: 1.25rem !important; -} - -.rz-pe-5 { - padding-inline-end: 1.25rem !important; -} - -.rz-p-6 { - padding: 1.5rem !important; -} - -.rz-py-6, -.rz-pt-6 { - padding-top: 1.5rem !important; -} - -.rz-px-6, -.rz-pr-6 { - padding-right: 1.5rem !important; -} - -.rz-py-6, -.rz-pb-6 { - padding-bottom: 1.5rem !important; -} - -.rz-px-6, -.rz-pl-6 { - padding-left: 1.5rem !important; -} - -.rz-ps-6 { - padding-inline-start: 1.5rem !important; -} - -.rz-pe-6 { - padding-inline-end: 1.5rem !important; -} - -.rz-p-7 { - padding: 1.75rem !important; -} - -.rz-py-7, -.rz-pt-7 { - padding-top: 1.75rem !important; -} - -.rz-px-7, -.rz-pr-7 { - padding-right: 1.75rem !important; -} - -.rz-py-7, -.rz-pb-7 { - padding-bottom: 1.75rem !important; -} - -.rz-px-7, -.rz-pl-7 { - padding-left: 1.75rem !important; -} - -.rz-ps-7 { - padding-inline-start: 1.75rem !important; -} - -.rz-pe-7 { - padding-inline-end: 1.75rem !important; -} - -.rz-p-8 { - padding: 2rem !important; -} - -.rz-py-8, -.rz-pt-8 { - padding-top: 2rem !important; -} - -.rz-px-8, -.rz-pr-8 { - padding-right: 2rem !important; -} - -.rz-py-8, -.rz-pb-8 { - padding-bottom: 2rem !important; -} - -.rz-px-8, -.rz-pl-8 { - padding-left: 2rem !important; -} - -.rz-ps-8 { - padding-inline-start: 2rem !important; -} - -.rz-pe-8 { - padding-inline-end: 2rem !important; -} - -.rz-p-9 { - padding: 2.25rem !important; -} - -.rz-py-9, -.rz-pt-9 { - padding-top: 2.25rem !important; -} - -.rz-px-9, -.rz-pr-9 { - padding-right: 2.25rem !important; -} - -.rz-py-9, -.rz-pb-9 { - padding-bottom: 2.25rem !important; -} - -.rz-px-9, -.rz-pl-9 { - padding-left: 2.25rem !important; -} - -.rz-ps-9 { - padding-inline-start: 2.25rem !important; -} - -.rz-pe-9 { - padding-inline-end: 2.25rem !important; -} - -.rz-p-10 { - padding: 2.5rem !important; -} - -.rz-py-10, -.rz-pt-10 { - padding-top: 2.5rem !important; -} - -.rz-px-10, -.rz-pr-10 { - padding-right: 2.5rem !important; -} - -.rz-py-10, -.rz-pb-10 { - padding-bottom: 2.5rem !important; -} - -.rz-px-10, -.rz-pl-10 { - padding-left: 2.5rem !important; -} - -.rz-ps-10 { - padding-inline-start: 2.5rem !important; -} - -.rz-pe-10 { - padding-inline-end: 2.5rem !important; -} - -.rz-p-11 { - padding: 2.75rem !important; -} - -.rz-py-11, -.rz-pt-11 { - padding-top: 2.75rem !important; -} - -.rz-px-11, -.rz-pr-11 { - padding-right: 2.75rem !important; -} - -.rz-py-11, -.rz-pb-11 { - padding-bottom: 2.75rem !important; -} - -.rz-px-11, -.rz-pl-11 { - padding-left: 2.75rem !important; -} - -.rz-ps-11 { - padding-inline-start: 2.75rem !important; -} - -.rz-pe-11 { - padding-inline-end: 2.75rem !important; -} - -.rz-p-12 { - padding: 3rem !important; -} - -.rz-py-12, -.rz-pt-12 { - padding-top: 3rem !important; -} - -.rz-px-12, -.rz-pr-12 { - padding-right: 3rem !important; -} - -.rz-py-12, -.rz-pb-12 { - padding-bottom: 3rem !important; -} - -.rz-px-12, -.rz-pl-12 { - padding-left: 3rem !important; -} - -.rz-ps-12 { - padding-inline-start: 3rem !important; -} - -.rz-pe-12 { - padding-inline-end: 3rem !important; -} - -.rz-m-auto { - margin: auto !important; -} - -.rz-my-auto, -.rz-mt-auto { - margin-top: auto !important; -} - -.rz-mx-auto, -.rz-mr-auto { - margin-right: auto !important; -} - -.rz-my-auto, -.rz-mb-auto { - margin-bottom: auto !important; -} - -.rz-mx-auto, -.rz-ml-auto { - margin-left: auto !important; -} - -.rz-ms-auto { - margin-inline-start: auto !important; -} - -.rz-me-auto { - margin-inline-end: auto !important; +.rz-me-auto { + margin-inline-end: auto !important; } @media (min-width: 576px) { @@ -13155,7 +7665,8 @@ h1.rz-heading { font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2.rz-heading { @@ -13164,7 +7675,8 @@ h2.rz-heading { font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3.rz-heading { @@ -13173,7 +7685,8 @@ h3.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4.rz-heading { @@ -13182,7 +7695,8 @@ h4.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5.rz-heading { @@ -13191,7 +7705,8 @@ h5.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h6.rz-heading { @@ -13200,7 +7715,8 @@ h6.rz-heading { font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h1, @@ -13210,7 +7726,8 @@ h1, font-weight: 700; letter-spacing: -0.04em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h2, @@ -13220,7 +7737,8 @@ h2, font-weight: 700; letter-spacing: -0.03em; color: var(--rz-text-title-color); - margin-bottom: 1rem; + margin-block-start: 0; + margin-block-end: 1rem; } h3, @@ -13230,7 +7748,8 @@ h3, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.75rem; + margin-block-start: 0; + margin-block-end: 0.75rem; } h4, @@ -13240,7 +7759,8 @@ h4, font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text-title-color); - margin-bottom: 0.5rem; + margin-block-start: 0; + margin-block-end: 0.5rem; } h5, @@ -13249,172 +7769,56 @@ h5, line-height: 1.25em; font-weight: 700; letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h6, -.h6 { - font-size: 0.75rem; - line-height: 1.25em; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--rz-text-title-color); - margin-bottom: 0.5rem; -} - -h1.text-thin, -.h1.text-thin { - font-size: 3rem; - font-weight: 300; -} - -h2.text-thin, -.h2.text-thin { - font-size: 2rem; - font-weight: 300; -} - -h3.text-thin, -.h3.text-thin { - font-size: 1.25rem; - font-weight: 300; -} - -h4.text-thin, -.h4.text-thin { - font-size: 1rem; - font-weight: 300; -} - -h5.text-thin, -.h5.text-thin { - font-size: 0.875rem; - font-weight: 300; -} - -h6.text-thin, -.h6.text-thin { - font-size: 0.75rem; - font-weight: 300; -} - -:root { - --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); - --rz-text-display-h1-line-height: 1em; - --rz-text-display-h1-font-weight: 700; - --rz-text-display-h1-letter-spacing: -0.04em; - --rz-text-display-h1-color: var(--rz-text-title-color); - --rz-text-display-h1-margin-bottom: 1rem; - --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-display-h2-line-height: calc(1em + 4px); - --rz-text-display-h2-font-weight: 700; - --rz-text-display-h2-letter-spacing: -0.03em; - --rz-text-display-h2-color: var(--rz-text-title-color); - --rz-text-display-h2-margin-bottom: 1rem; - --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-display-h3-line-height: calc(1em + 4px); - --rz-text-display-h3-font-weight: 700; - --rz-text-display-h3-letter-spacing: -0.02em; - --rz-text-display-h3-color: var(--rz-text-title-color); - --rz-text-display-h3-margin-bottom: 0.75rem; - --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-display-h4-line-height: 1em; - --rz-text-display-h4-font-weight: 700; - --rz-text-display-h4-letter-spacing: -0.02em; - --rz-text-display-h4-color: var(--rz-text-title-color); - --rz-text-display-h4-margin-bottom: 0.5rem; - --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); - --rz-text-display-h5-line-height: 1em; - --rz-text-display-h5-font-weight: 600; - --rz-text-display-h5-letter-spacing: -0.02em; - --rz-text-display-h5-color: var(--rz-text-title-color); - --rz-text-display-h5-margin-bottom: 0.5rem; - --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-display-h6-line-height: 1em; - --rz-text-display-h6-font-weight: 600; - --rz-text-display-h6-letter-spacing: -0.02em; - --rz-text-display-h6-color: var(--rz-text-title-color); - --rz-text-display-h6-margin-bottom: 0.5rem; - --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); - --rz-text-h1-line-height: calc(1em + 4px); - --rz-text-h1-font-weight: 600; - --rz-text-h1-letter-spacing: -0.04em; - --rz-text-h1-color: var(--rz-text-title-color); - --rz-text-h1-margin-bottom: 1rem; - --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); - --rz-text-h2-line-height: calc(1em + 4px); - --rz-text-h2-font-weight: 600; - --rz-text-h2-letter-spacing: -0.03em; - --rz-text-h2-color: var(--rz-text-title-color); - --rz-text-h2-margin-bottom: 1rem; - --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); - --rz-text-h3-line-height: 1em; - --rz-text-h3-font-weight: 600; - --rz-text-h3-letter-spacing: -0.02em; - --rz-text-h3-color: var(--rz-text-title-color); - --rz-text-h3-margin-bottom: 0.75rem; - --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); - --rz-text-h4-line-height: 1em; - --rz-text-h4-font-weight: 600; - --rz-text-h4-letter-spacing: -0.02em; - --rz-text-h4-color: var(--rz-text-title-color); - --rz-text-h4-margin-bottom: 0.5rem; - --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); - --rz-text-h5-line-height: 1em; - --rz-text-h5-font-weight: 600; - --rz-text-h5-letter-spacing: -0.02em; - --rz-text-h5-color: var(--rz-text-title-color); - --rz-text-h5-margin-bottom: 0.5rem; - --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); - --rz-text-h6-line-height: 1em; - --rz-text-h6-font-weight: 600; - --rz-text-h6-letter-spacing: -0.02em; - --rz-text-h6-color: var(--rz-text-title-color); - --rz-text-h6-margin-bottom: 0.5rem; - --rz-text-subtitle1-font-size: 1rem; - --rz-text-subtitle1-line-height: 1.25rem; - --rz-text-subtitle1-font-weight: 600; - --rz-text-subtitle1-letter-spacing: -0.02em; - --rz-text-subtitle1-color: var(--rz-text-title-color); - --rz-text-subtitle1-margin-bottom: 0.5rem; - --rz-text-subtitle2-font-size: 0.875rem; - --rz-text-subtitle2-line-height: 1.25rem; - --rz-text-subtitle2-font-weight: 600; - --rz-text-subtitle2-letter-spacing: -0.02em; - --rz-text-subtitle2-color: var(--rz-text-title-color); - --rz-text-subtitle2-margin-bottom: 0.5rem; - --rz-text-body1-font-size: 1rem; - --rz-text-body1-line-height: 1.25rem; - --rz-text-body1-font-weight: 400; - --rz-text-body1-letter-spacing: -0.02em; - --rz-text-body1-color: var(--rz-text-color); - --rz-text-body1-margin-bottom: 0.5rem; - --rz-text-body2-font-size: 0.875rem; - --rz-text-body2-line-height: 1.25rem; - --rz-text-body2-font-weight: 400; - --rz-text-body2-letter-spacing: -0.02em; - --rz-text-body2-color: var(--rz-text-color); - --rz-text-body2-margin-bottom: 0.5rem; - --rz-text-button-font-size: 0.875rem; - --rz-text-button-line-height: 1.25rem; - --rz-text-button-font-weight: 600; - --rz-text-button-letter-spacing: -0.02em; - --rz-text-button-color: var(--rz-text-color); - --rz-text-button-margin-bottom: 0.5rem; - --rz-text-caption-font-size: 0.75rem; - --rz-text-caption-line-height: normal; - --rz-text-caption-font-weight: 400; - --rz-text-caption-letter-spacing: 0.4px; - --rz-text-caption-color: var(--rz-text-color); - --rz-text-caption-margin-bottom: 0.5rem; - --rz-text-overline-font-size: 0.625rem; - --rz-text-overline-line-height: normal; - --rz-text-overline-font-weight: 400; - --rz-text-overline-letter-spacing: 1.5px; - --rz-text-overline-text-transform: uppercase; - --rz-text-overline-color: var(--rz-text-color); - --rz-text-overline-margin-bottom: 0.5rem; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h6, +.h6 { + font-size: 0.75rem; + line-height: 1.25em; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--rz-text-title-color); + margin-block-start: 0; + margin-block-end: 0.5rem; +} + +h1.text-thin, +.h1.text-thin { + font-size: 3rem; + font-weight: 300; +} + +h2.text-thin, +.h2.text-thin { + font-size: 2rem; + font-weight: 300; +} + +h3.text-thin, +.h3.text-thin { + font-size: 1.25rem; + font-weight: 300; +} + +h4.text-thin, +.h4.text-thin { + font-size: 1rem; + font-weight: 300; +} + +h5.text-thin, +.h5.text-thin { + font-size: 0.875rem; + font-weight: 300; +} + +h6.text-thin, +.h6.text-thin { + font-size: 0.75rem; + font-weight: 300; } .rz-text-display-h1 { @@ -13424,7 +7828,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h1-font-weight); letter-spacing: var(--rz-text-display-h1-letter-spacing); color: var(--rz-text-display-h1-color); - margin-bottom: var(--rz-text-display-h1-margin-bottom); + margin-block-start: var(--rz-text-display-h1-margin-block-start); + margin-block-end: var(--rz-text-display-h1-margin-block-end); } .rz-text-display-h2 { @@ -13434,7 +7839,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h2-font-weight); letter-spacing: var(--rz-text-display-h2-letter-spacing); color: var(--rz-text-display-h2-color); - margin-bottom: var(--rz-text-display-h2-margin-bottom); + margin-block-start: var(--rz-text-display-h2-margin-block-start); + margin-block-end: var(--rz-text-display-h2-margin-block-end); } .rz-text-display-h3 { @@ -13444,7 +7850,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h3-font-weight); letter-spacing: var(--rz-text-display-h3-letter-spacing); color: var(--rz-text-display-h3-color); - margin-bottom: var(--rz-text-display-h3-margin-bottom); + margin-block-start: var(--rz-text-display-h3-margin-block-start); + margin-block-end: var(--rz-text-display-h3-margin-block-end); } .rz-text-display-h4 { @@ -13454,7 +7861,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h4-font-weight); letter-spacing: var(--rz-text-display-h4-letter-spacing); color: var(--rz-text-display-h4-color); - margin-bottom: var(--rz-text-display-h4-margin-bottom); + margin-block-start: var(--rz-text-display-h4-margin-block-start); + margin-block-end: var(--rz-text-display-h4-margin-block-end); } .rz-text-display-h5 { @@ -13464,7 +7872,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h5-font-weight); letter-spacing: var(--rz-text-display-h5-letter-spacing); color: var(--rz-text-display-h5-color); - margin-bottom: var(--rz-text-display-h5-margin-bottom); + margin-block-start: var(--rz-text-display-h5-margin-block-start); + margin-block-end: var(--rz-text-display-h5-margin-block-end); } .rz-text-display-h6 { @@ -13474,7 +7883,8 @@ h6.text-thin, font-weight: var(--rz-text-display-h6-font-weight); letter-spacing: var(--rz-text-display-h6-letter-spacing); color: var(--rz-text-display-h6-color); - margin-bottom: var(--rz-text-display-h6-margin-bottom); + margin-block-start: var(--rz-text-display-h6-margin-block-start); + margin-block-end: var(--rz-text-display-h6-margin-block-end); } .rz-text-h1 { @@ -13484,7 +7894,8 @@ h6.text-thin, font-weight: var(--rz-text-h1-font-weight); letter-spacing: var(--rz-text-h1-letter-spacing); color: var(--rz-text-h1-color); - margin-bottom: var(--rz-text-h1-margin-bottom); + margin-block-start: var(--rz-text-h1-margin-block-start); + margin-block-end: var(--rz-text-h1-margin-block-end); } .rz-text-h2 { @@ -13494,7 +7905,8 @@ h6.text-thin, font-weight: var(--rz-text-h2-font-weight); letter-spacing: var(--rz-text-h2-letter-spacing); color: var(--rz-text-h2-color); - margin-bottom: var(--rz-text-h2-margin-bottom); + margin-block-start: var(--rz-text-h2-margin-block-start); + margin-block-end: var(--rz-text-h2-margin-block-end); } .rz-text-h3 { @@ -13504,7 +7916,8 @@ h6.text-thin, font-weight: var(--rz-text-h3-font-weight); letter-spacing: var(--rz-text-h3-letter-spacing); color: var(--rz-text-h3-color); - margin-bottom: var(--rz-text-h3-margin-bottom); + margin-block-start: var(--rz-text-h3-margin-block-start); + margin-block-end: var(--rz-text-h3-margin-block-end); } .rz-text-h4 { @@ -13514,7 +7927,8 @@ h6.text-thin, font-weight: var(--rz-text-h4-font-weight); letter-spacing: var(--rz-text-h4-letter-spacing); color: var(--rz-text-h4-color); - margin-bottom: var(--rz-text-h4-margin-bottom); + margin-block-start: var(--rz-text-h4-margin-block-start); + margin-block-end: var(--rz-text-h4-margin-block-end); } .rz-text-h5 { @@ -13524,7 +7938,8 @@ h6.text-thin, font-weight: var(--rz-text-h5-font-weight); letter-spacing: var(--rz-text-h5-letter-spacing); color: var(--rz-text-h5-color); - margin-bottom: var(--rz-text-h5-margin-bottom); + margin-block-start: var(--rz-text-h5-margin-block-start); + margin-block-end: var(--rz-text-h5-margin-block-end); } .rz-text-h6 { @@ -13534,7 +7949,8 @@ h6.text-thin, font-weight: var(--rz-text-h6-font-weight); letter-spacing: var(--rz-text-h6-letter-spacing); color: var(--rz-text-h6-color); - margin-bottom: var(--rz-text-h6-margin-bottom); + margin-block-start: var(--rz-text-h6-margin-block-start); + margin-block-end: var(--rz-text-h6-margin-block-end); } .rz-text-subtitle1 { @@ -13544,7 +7960,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle1-font-weight); letter-spacing: var(--rz-text-subtitle1-letter-spacing); color: var(--rz-text-subtitle1-color); - margin-bottom: var(--rz-text-subtitle1-margin-bottom); + margin-block-start: var(--rz-text-subtitle1-margin-block-start); + margin-block-end: var(--rz-text-subtitle1-margin-block-end); } .rz-text-subtitle2 { @@ -13554,7 +7971,8 @@ h6.text-thin, font-weight: var(--rz-text-subtitle2-font-weight); letter-spacing: var(--rz-text-subtitle2-letter-spacing); color: var(--rz-text-subtitle2-color); - margin-bottom: var(--rz-text-subtitle2-margin-bottom); + margin-block-start: var(--rz-text-subtitle2-margin-block-start); + margin-block-end: var(--rz-text-subtitle2-margin-block-end); } .rz-text-body1 { @@ -13564,7 +7982,8 @@ h6.text-thin, font-weight: var(--rz-text-body1-font-weight); letter-spacing: var(--rz-text-body1-letter-spacing); color: var(--rz-text-body1-color); - margin-bottom: var(--rz-text-body1-margin-bottom); + margin-block-start: var(--rz-text-body1-margin-block-start); + margin-block-end: var(--rz-text-body1-margin-block-end); } .rz-text-body2 { @@ -13574,7 +7993,8 @@ h6.text-thin, font-weight: var(--rz-text-body2-font-weight); letter-spacing: var(--rz-text-body2-letter-spacing); color: var(--rz-text-body2-color); - margin-bottom: var(--rz-text-body2-margin-bottom); + margin-block-start: var(--rz-text-body2-margin-block-start); + margin-block-end: var(--rz-text-body2-margin-block-end); } .rz-text-button { @@ -13584,7 +8004,8 @@ h6.text-thin, font-weight: var(--rz-text-button-font-weight); letter-spacing: var(--rz-text-button-letter-spacing); color: var(--rz-text-button-color); - margin-bottom: var(--rz-text-button-margin-bottom); + margin-block-start: var(--rz-text-button-margin-block-start); + margin-block-end: var(--rz-text-button-margin-block-end); } .rz-text-caption { @@ -13594,7 +8015,8 @@ h6.text-thin, font-weight: var(--rz-text-caption-font-weight); letter-spacing: var(--rz-text-caption-letter-spacing); color: var(--rz-text-caption-color); - margin-bottom: var(--rz-text-caption-margin-bottom); + margin-block-start: var(--rz-text-caption-margin-block-start); + margin-block-end: var(--rz-text-caption-margin-block-end); } .rz-text-overline { @@ -13605,7 +8027,8 @@ h6.text-thin, letter-spacing: var(--rz-text-overline-letter-spacing); text-transform: var(--rz-text-overline-text-transform); color: var(--rz-text-overline-color); - margin-bottom: var(--rz-text-overline-margin-bottom); + margin-block-start: var(--rz-text-overline-margin-block-start); + margin-block-end: var(--rz-text-overline-margin-block-end); } .rz-text-align-start { @@ -13839,26 +8262,24 @@ p { .rz-label { vertical-align: middle; - margin-bottom: 0; + margin-block-start: 0; + margin-block-end: 0; } .rz-form .row .rz-label { min-height: var(--rz-input-height); line-height: var(--rz-input-line-height); - padding: var(--rz-input-padding); - padding-left: 0; + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); + padding-inline-start: 0; border-top: var(--rz-input-border); border-bottom: var(--rz-input-border); border-color: transparent; } label { - margin-bottom: 0; -} - -:root { - --rz-text-selection-background-color: var(--rz-primary-lighter); - --rz-text-selection-color: inherit; + margin-block-start: 0; + margin-block-end: 0; } ::selection { @@ -13874,8 +8295,9 @@ label { .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-button .rzi-times, .rz-fileupload-row .rz-button .rz-icon-trash, .rz-menuitem .rz-menuitem-icon, .rzi { + box-sizing: border-box; font-family: var(--rz-icon-font-family); - font-weight: normal; + font-weight: var(--rz-icon-weight, inherit); font-style: normal; font-size: var(--rz-icon-size); display: inline-block; @@ -13886,7 +8308,7 @@ label { letter-spacing: normal; word-wrap: normal; white-space: nowrap; - direction: ltr; + font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size); /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ @@ -13907,14 +8329,6 @@ i.rzi { color: var(--rz-primary); } -.rzi-light { - color: var(--rz-base-200); -} - -.rzi-dark { - color: var(--rz-base-900); -} - .rzi-secondary { color: var(--rz-secondary); } @@ -13939,6 +8353,23 @@ i.rzi { color: var(--rz-success); } +.rzi-base { + color: var(--rz-base-200); +} + +.rzi-light { + color: var(--rz-base-200); +} + +.rzi-dark { + color: var(--rz-base-900); +} + +[class^=rz-] img, +[class^=rz-] svg { + vertical-align: middle; +} + .rz-helper-hidden-accessible { opacity: 0; height: 0; @@ -13962,98 +8393,72 @@ i.rzi { top: -9999px; } -rz-button[type], -p-button[type] { - -webkit-appearance: none; -} - -:root { - --rz-button-base-background-color: #e9eaed; - --rz-button-base-color: #4f4f50; - --rz-button-background-size: 100% 0%, 100% 0%; - --rz-button-border-radius: 4px; - --rz-button-shadow: none; - --rz-button-transition: var(--rz-transition-all), width 0, height 0; - --rz-button-line-height: 1.25rem; - --rz-button-vertical-align: top; - --rz-button-hover-shadow: none; - --rz-button-hover-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); - --rz-button-hover-background-size: 100% 200%, 100% 0%; - --rz-button-focus-shadow: none; - --rz-button-focus-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); - --rz-button-focus-background-size: 100% 200%, 100% 0%; - --rz-button-focus-outline: var(--rz-outline-focus); - --rz-button-focus-outline-offset: var(--rz-outline-offset); - --rz-button-active-shadow: none; - --rz-button-active-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); - --rz-button-active-background-size: 100% 0%, 100% 200%; - --rz-button-disabled-opacity: 0.5; - --rz-button-empty-opacity: 0.4; -} - -.rz-paginator-element, .rz-button { - -webkit-appearance: none; +.rz-pager-element, .rz-button { + box-sizing: border-box; display: inline-block; - border-radius: var(--rz-button-border-radius); - background-color: var(--rz-button-base-background-color); + margin: 0; color: var(--rz-button-base-color); + background-color: var(--rz-button-base-background-color); + background-size: var(--rz-button-background-size); + background-repeat: no-repeat; border: none; + border-radius: var(--rz-button-border-radius); outline: none; - line-height: var(--rz-button-line-height); + box-shadow: var(--rz-button-shadow); font-size: 1.0625rem; + font-family: inherit; + line-height: var(--rz-button-line-height); text-decoration: none; - box-shadow: var(--rz-button-shadow); transition: var(--rz-button-transition); - background-size: var(--rz-button-background-size); - background-repeat: no-repeat; + -webkit-appearance: none; } -.rz-paginator-element:focus, .rz-button:focus { +.rz-pager-element:focus, .rz-button:focus { outline: var(--rz-outline-normal); } -.rz-paginator-element:focus-visible, .rz-button:focus-visible { +.rz-pager-element:focus-visible, .rz-button:focus-visible { outline: var(--rz-button-focus-outline); outline-offset: var(--rz-button-focus-outline-offset); } -.rz-paginator-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { +.rz-pager-element:not(.rz-state-disabled), .rz-button:not(.rz-state-disabled) { cursor: pointer; } -.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { +.rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) { text-decoration: none; background-image: var(--rz-button-hover-gradient); background-size: var(--rz-button-hover-background-size); box-shadow: var(--rz-button-hover-shadow); } -.rz-paginator-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { +.rz-pager-element:not(.rz-state-disabled):focus-visible:not(:active), .rz-button:not(.rz-state-disabled):focus-visible:not(:active) { text-decoration: none; background-image: var(--rz-button-focus-gradient); background-size: var(--rz-button-focus-background-size); box-shadow: var(--rz-button-focus-shadow); } -.rz-paginator-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { +.rz-pager-element:not(.rz-state-disabled):active, .rz-button:not(.rz-state-disabled):active { text-decoration: none; background-image: var(--rz-button-active-gradient); background-size: var(--rz-button-active-background-size); box-shadow: var(--rz-button-active-shadow); } -.rz-state-disabled.rz-paginator-element, .rz-button.rz-state-disabled { +.rz-state-disabled.rz-pager-element, .rz-button.rz-state-disabled { opacity: var(--rz-button-disabled-opacity); cursor: initial; } -.rz-state-empty.rz-paginator-element, .rz-button.rz-state-empty { +.rz-state-empty.rz-pager-element, .rz-button.rz-state-empty { opacity: var(--rz-button-empty-opacity); cursor: initial; } -.rz-paginator-element .rz-button-box, .rz-button .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button .rz-button-box { display: inline-flex; justify-content: center; align-items: center; vertical-align: var(--rz-button-vertical-align); line-height: var(--rz-button-line-height); } -.rz-paginator-element .rz-button-text, .rz-button .rz-button-text { +.rz-pager-element .rz-button-text, .rz-button .rz-button-text { vertical-align: var(--rz-button-vertical-align); } -.rz-paginator-element .rzi, .rz-button .rzi { +.rz-pager-element .rzi, .rz-button .rzi { vertical-align: var(--rz-button-vertical-align); } @@ -14061,18 +8466,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary:focus-visible { outline-color: var(--rz-secondary); } @@ -14097,6 +8490,18 @@ p-button[type] { outline-color: var(--rz-success); } +.rz-button.rz-base:focus-visible { + outline-color: var(--rz-base); +} + +.rz-button.rz-light:focus-visible { + outline-color: var(--rz-outline-color); +} + +.rz-button.rz-dark:focus-visible { + outline-color: var(--rz-outline-color); +} + .rz-button.rz-primary { background-color: var(--rz-primary); color: var(--rz-on-primary); @@ -14128,59 +8533,6 @@ p-button[type] { outline-color: var(--rz-primary); } -.rz-button.rz-light { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-light.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-light.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - -.rz-button.rz-base { - background-color: var(--rz-base-200); - color: var(--rz-text-color); -} -.rz-button.rz-base.rz-shade-lighter { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); -} -.rz-button.rz-base.rz-shade-light { - background-color: var(--rz-base-light); - color: var(--rz-on-base-light); -} -.rz-button.rz-base.rz-shade-default { - background-color: var(--rz-base); - color: var(--rz-on-base); -} -.rz-button.rz-base.rz-shade-dark { - background-color: var(--rz-base-dark); - color: var(--rz-on-base-dark); -} -.rz-button.rz-base.rz-shade-darker { - background-color: var(--rz-base-darker); - color: var(--rz-on-base-darker); -} -.rz-button.rz-base.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-base.rz-variant-flat:focus-visible { - outline-color: var(--rz-base); -} - -.rz-button.rz-dark { - background-color: var(--rz-base-900); - color: var(--rz-text-contrast-color); -} -.rz-button.rz-dark.rz-variant-flat { - box-shadow: none !important; -} -.rz-button.rz-dark.rz-variant-flat:focus-visible { - outline-color: var(--rz-outline-color); -} - .rz-button.rz-secondary { background-color: var(--rz-secondary); color: var(--rz-on-secondary); @@ -14329,42 +8681,95 @@ p-button[type] { background-color: var(--rz-danger-darker); color: var(--rz-on-danger-darker); } -.rz-button.rz-danger.rz-variant-flat { +.rz-button.rz-danger.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-danger.rz-variant-flat:focus-visible { + outline-color: var(--rz-danger); +} + +.rz-button.rz-success { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-lighter { + background-color: var(--rz-success-lighter); + color: var(--rz-on-success-lighter); +} +.rz-button.rz-success.rz-shade-light { + background-color: var(--rz-success-light); + color: var(--rz-on-success-light); +} +.rz-button.rz-success.rz-shade-default { + background-color: var(--rz-success); + color: var(--rz-on-success); +} +.rz-button.rz-success.rz-shade-dark { + background-color: var(--rz-success-dark); + color: var(--rz-on-success-dark); +} +.rz-button.rz-success.rz-shade-darker { + background-color: var(--rz-success-darker); + color: var(--rz-on-success-darker); +} +.rz-button.rz-success.rz-variant-flat { + box-shadow: none !important; +} +.rz-button.rz-success.rz-variant-flat:focus-visible { + outline-color: var(--rz-success); +} + +.rz-button.rz-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-button.rz-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-button.rz-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-button.rz-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-button.rz-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-button.rz-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} +.rz-button.rz-base.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-danger.rz-variant-flat:focus-visible { - outline-color: var(--rz-danger); +.rz-button.rz-base.rz-variant-flat:focus-visible { + outline-color: var(--rz-base); } -.rz-button.rz-success { - background-color: var(--rz-success); - color: var(--rz-on-success); -} -.rz-button.rz-success.rz-shade-lighter { - background-color: var(--rz-success-lighter); - color: var(--rz-on-success-lighter); -} -.rz-button.rz-success.rz-shade-light { - background-color: var(--rz-success-light); - color: var(--rz-on-success-light); +.rz-button.rz-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); } -.rz-button.rz-success.rz-shade-default { - background-color: var(--rz-success); - color: var(--rz-on-success); +.rz-button.rz-light.rz-variant-flat { + box-shadow: none !important; } -.rz-button.rz-success.rz-shade-dark { - background-color: var(--rz-success-dark); - color: var(--rz-on-success-dark); +.rz-button.rz-light.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); } -.rz-button.rz-success.rz-shade-darker { - background-color: var(--rz-success-darker); - color: var(--rz-on-success-darker); + +.rz-button.rz-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); } -.rz-button.rz-success.rz-variant-flat { +.rz-button.rz-dark.rz-variant-flat { box-shadow: none !important; } -.rz-button.rz-success.rz-variant-flat:focus-visible { - outline-color: var(--rz-success); +.rz-button.rz-dark.rz-variant-flat:focus-visible { + outline-color: var(--rz-outline-color); } .rz-button.rz-variant-outlined.rz-primary { @@ -14396,59 +8801,6 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-outlined.rz-light { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} -.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { - background-color: rgba(255, 255, 255, 0.12); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-base { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-light { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); - color: var(--rz-base-light); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); - color: var(--rz-base); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); - color: var(--rz-base-dark); -} -.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); - color: var(--rz-base-darker); -} -.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); - background-image: none; -} - -.rz-button.rz-variant-outlined.rz-dark { - background-color: transparent; -} -.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} -.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); - background-image: none; -} - .rz-button.rz-variant-outlined.rz-secondary { background-color: transparent; } @@ -14623,76 +8975,81 @@ p-button[type] { background-image: none; } -.rz-button.rz-variant-text.rz-primary { +.rz-button.rz-variant-outlined.rz-base { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { - color: var(--rz-primary-lighter); +.rz-button.rz-variant-outlined.rz-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-light { - color: var(--rz-primary-light); +.rz-button.rz-variant-outlined.rz-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); } -.rz-button.rz-variant-text.rz-primary.rz-shade-default { - color: var(--rz-primary); +.rz-button.rz-variant-outlined.rz-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-text-color); + color: var(--rz-text-color); } -.rz-button.rz-variant-text.rz-primary.rz-shade-dark { - color: var(--rz-primary-dark); +.rz-button.rz-variant-outlined.rz-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-primary.rz-shade-darker { - color: var(--rz-primary-darker); +.rz-button.rz-variant-outlined.rz-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); } -.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { - background-color: var(--rz-primary-lighter); - color: var(--rz-on-primary-lighter); +.rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light { - color: var(--rz-base-200); +.rz-button.rz-variant-outlined.rz-light { background-color: transparent; - box-shadow: none; } -.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { +.rz-button.rz-variant-outlined.rz-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} +.rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-light:not(.rz-state-disabled):active { background-color: rgba(255, 255, 255, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-base { +.rz-button.rz-variant-outlined.rz-dark { background-color: transparent; - box-shadow: none; -} -.rz-button.rz-variant-text.rz-base.rz-shade-lighter { - color: var(--rz-base-lighter); -} -.rz-button.rz-variant-text.rz-base.rz-shade-light { - color: var(--rz-base-light); -} -.rz-button.rz-variant-text.rz-base.rz-shade-default { - color: var(--rz-base); -} -.rz-button.rz-variant-text.rz-base.rz-shade-dark { - color: var(--rz-base-dark); } -.rz-button.rz-variant-text.rz-base.rz-shade-darker { - color: var(--rz-base-darker); +.rz-button.rz-variant-outlined.rz-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); } -.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { - background-color: var(--rz-base-lighter); - color: var(--rz-on-base-lighter); +.rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-outlined.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); background-image: none; - box-shadow: none; } -.rz-button.rz-variant-text.rz-dark { - color: var(--rz-base-900); +.rz-button.rz-variant-text.rz-primary { background-color: transparent; box-shadow: none; } -.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { - background-color: rgba(0, 0, 0, 0.12); +.rz-button.rz-variant-text.rz-primary.rz-shade-lighter { + color: var(--rz-primary-lighter); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-light { + color: var(--rz-primary-light); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-default { + color: var(--rz-primary); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-dark { + color: var(--rz-primary-dark); +} +.rz-button.rz-variant-text.rz-primary.rz-shade-darker { + color: var(--rz-primary-darker); +} +.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active { + background-color: var(--rz-primary-lighter); + color: var(--rz-on-primary-lighter); background-image: none; box-shadow: none; } @@ -14853,15 +9210,63 @@ p-button[type] { box-shadow: none; } +.rz-button.rz-variant-text.rz-base { + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-button.rz-variant-text.rz-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-button.rz-variant-text.rz-base.rz-shade-default { + color: inherit; +} +.rz-button.rz-variant-text.rz-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-button.rz-variant-text.rz-base.rz-shade-darker { + color: var(--rz-base-darker); +} +.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-base:not(.rz-state-disabled):active { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-light { + color: var(--rz-base-200); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):active { + background-color: rgba(255, 255, 255, 0.12); + background-image: none; + box-shadow: none; +} + +.rz-button.rz-variant-text.rz-dark { + color: var(--rz-base-900); + background-color: transparent; + box-shadow: none; +} +.rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-dark:not(.rz-state-disabled):active { + background-color: rgba(0, 0, 0, 0.12); + background-image: none; + box-shadow: none; +} + .rz-button-lg { - font-size: 1rem; - font-weight: 600; padding: 0.875rem 1.5rem; height: auto; line-height: 1.5rem; min-height: 3.25rem; min-width: 3.25rem; border-radius: calc(2 * var(--rz-border-radius)); + font-size: 1rem; + font-weight: 600; } .rz-button-lg .rz-button-box { line-height: 1.5rem; @@ -14870,7 +9275,7 @@ p-button[type] { .rz-button-lg.rz-button-icon-left { padding: 0 1.375rem; } -.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-paginator-element { +.rz-button-lg.rz-button-icon-only, .rz-button-lg.rz-pager-element { padding: 0.875rem; } .rz-button-lg .rzi { @@ -14880,51 +9285,51 @@ p-button[type] { width: 1.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button, .rz-button-md { - font-size: var(--rz-body-font-size); - font-weight: 600; +.rz-pager-element, .rz-button-md { padding: 0.5rem 1rem; height: auto; line-height: 1.25rem; min-height: 2.25rem; min-width: 2.25rem; + font-size: var(--rz-body-font-size); + font-weight: 600; } -.rz-paginator-element .rz-button-box, .rz-date-filter-buttons .rz-button .rz-button-box, .rz-button-md .rz-button-box { +.rz-pager-element .rz-button-box, .rz-button-md .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-button-icon-left.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-left.rz-button, .rz-button-md.rz-button-icon-left { +.rz-button-icon-left.rz-pager-element, .rz-button-md.rz-button-icon-left { padding: 0.5rem 1rem 0.5rem 0.5rem; } -.rz-paginator-element, .rz-date-filter-buttons .rz-button-icon-only.rz-button, .rz-date-filter-buttons .rz-button.rz-paginator-element, .rz-button-md.rz-button-icon-only { +.rz-pager-element, .rz-button-md.rz-button-icon-only { padding: 0.5rem; } -.rz-paginator-element .rzi, .rz-date-filter-buttons .rz-button .rzi, .rz-button-md .rzi { +.rz-pager-element .rzi, .rz-button-md .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); height: var(--rz-icon-size); } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button, .rz-button-sm { - font-size: var(--rz-body-font-size); +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm { padding: 0.25rem 0.75rem; height: auto; line-height: 1.25rem; min-height: 1.75rem; min-width: 1.75rem; + font-size: var(--rz-body-font-size); } -.rz-paginator.rz-density-compact .rz-paginator-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { +.rz-pager.rz-density-compact .rz-pager-element .rz-button-box, .rz-fileupload .rz-button .rz-button-box, .rz-button-sm .rz-button-box { line-height: 1.25rem; gap: 0.25rem; } -.rz-paginator.rz-density-compact .rz-button-icon-left.rz-paginator-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { +.rz-pager.rz-density-compact .rz-button-icon-left.rz-pager-element, .rz-fileupload .rz-button-icon-left.rz-button, .rz-button-sm.rz-button-icon-left { padding: 0.25rem 0.75rem 0.25rem 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-paginator-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-paginator-element { +.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button-icon-only.rz-button, .rz-fileupload .rz-button.rz-pager-element, .rz-button-sm.rz-button-icon-only, .rz-button-sm.rz-pager-element { padding: 0.25rem; } -.rz-paginator.rz-density-compact .rz-paginator-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { +.rz-pager.rz-density-compact .rz-pager-element .rzi, .rz-fileupload .rz-button .rzi, .rz-button-sm .rzi { font-size: var(--rz-icon-size); line-height: var(--rz-icon-size); width: var(--rz-icon-size); @@ -14932,13 +9337,13 @@ p-button[type] { } .rz-button-xs { - font-size: 0.75rem; - font-weight: 600; padding: 0.125rem 0.25rem; height: auto; line-height: 1rem; min-height: 1.25rem; min-width: 1.25rem; + font-size: 0.75rem; + font-weight: 600; } .rz-button-xs .rz-button-box { line-height: 1rem; @@ -14947,7 +9352,7 @@ p-button[type] { .rz-button-xs.rz-button-icon-left { padding: 0.125rem 0.5rem 0.125rem 0.125rem; } -.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-paginator-element { +.rz-button-xs.rz-button-icon-only, .rz-button-xs.rz-pager-element { padding: 0.125rem; } .rz-button-xs .rzi { @@ -14965,19 +9370,8 @@ p-button[type] { transform: rotate(360deg); } } -:root { - --rz-badge-border-radius: var(--rz-border-radius); - --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); - --rz-badge-padding: 0.125rem 0.25rem; - --rz-badge-pill-padding: 0.125rem 0.5rem; - --rz-badge-font-size: 0.75rem; - --rz-badge-font-weight: 700; - --rz-badge-line-height: 1rem; - --rz-badge-text-transform: uppercase; - --rz-badge-letter-spacing: 0.02rem; -} - .rz-badge { + box-sizing: border-box; color: var(--rz-text-contrast-color); display: inline-block; padding: var(--rz-badge-padding); @@ -14996,7 +9390,7 @@ p-button[type] { .rz-badge-primary { background-color: var(--rz-primary); - color: var(--rz-on-rimary); + color: var(--rz-on-primary); } .rz-badge-primary.rz-shade-lighter { background-color: var(--rz-primary-lighter); @@ -15019,18 +9413,9 @@ p-button[type] { color: var(--rz-on-primary-darker); } -.rz-badge-light { - background-color: var(--rz-base-200); - color: var(--rz-base-800); -} - -.rz-badge-dark { - background-color: var(--rz-base-900); -} - .rz-badge-secondary { - background-color: var(--rz-secondary-lighter); - color: var(--rz-secondary); + background-color: var(--rz-secondary); + color: var(--rz-on-secondary); } .rz-badge-secondary.rz-shade-lighter { background-color: var(--rz-secondary-lighter); @@ -15178,6 +9563,41 @@ p-button[type] { color: var(--rz-on-success-darker); } +.rz-badge-base { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} +.rz-badge-base.rz-shade-lighter { + background-color: var(--rz-base-lighter); + color: var(--rz-on-base-lighter); +} +.rz-badge-base.rz-shade-light { + background-color: var(--rz-base-light); + color: var(--rz-on-base-light); +} +.rz-badge-base.rz-shade-default { + background-color: var(--rz-base); + color: var(--rz-on-base); +} +.rz-badge-base.rz-shade-dark { + background-color: var(--rz-base-dark); + color: var(--rz-on-base-dark); +} +.rz-badge-base.rz-shade-darker { + background-color: var(--rz-base-darker); + color: var(--rz-on-base-darker); +} + +.rz-badge-light { + background-color: var(--rz-base-200); + color: var(--rz-text-color); +} + +.rz-badge-dark { + background-color: var(--rz-base-900); + color: var(--rz-text-contrast-color); +} + .rz-variant-outlined.rz-badge-primary { background-color: transparent; } @@ -15202,22 +9622,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-outlined.rz-badge-light { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-light.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); - color: var(--rz-base-200); -} - -.rz-variant-outlined.rz-badge-dark { - background-color: transparent; -} -.rz-variant-outlined.rz-badge-dark.rz-shade-default { - box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); - color: var(--rz-base-900); -} - .rz-variant-outlined.rz-badge-secondary { background-color: transparent; } @@ -15362,6 +9766,46 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-outlined.rz-badge-base { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-base.rz-shade-lighter { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-lighter); + color: var(--rz-base-lighter); +} +.rz-variant-outlined.rz-badge-base.rz-shade-light { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-light); + color: var(--rz-base-light); +} +.rz-variant-outlined.rz-badge-base.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base); + color: var(--rz-base); +} +.rz-variant-outlined.rz-badge-base.rz-shade-dark { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-dark); + color: var(--rz-base-dark); +} +.rz-variant-outlined.rz-badge-base.rz-shade-darker { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-darker); + color: var(--rz-base-darker); +} + +.rz-variant-outlined.rz-badge-light { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-light.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200); + color: var(--rz-base-200); +} + +.rz-variant-outlined.rz-badge-dark { + background-color: transparent; +} +.rz-variant-outlined.rz-badge-dark.rz-shade-default { + box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-900); + color: var(--rz-base-900); +} + .rz-variant-text.rz-badge-primary { background-color: transparent; } @@ -15381,16 +9825,6 @@ p-button[type] { color: var(--rz-primary-darker); } -.rz-variant-text.rz-badge-light { - color: var(--rz-base-200); - background-color: transparent; -} - -.rz-variant-text.rz-badge-dark { - color: var(--rz-base-900); - background-color: transparent; -} - .rz-variant-text.rz-badge-secondary { background-color: transparent; } @@ -15505,20 +9939,40 @@ p-button[type] { color: var(--rz-success-darker); } +.rz-variant-text.rz-badge-base { + background-color: transparent; +} +.rz-variant-text.rz-badge-base.rz-shade-lighter { + color: var(--rz-base-lighter); +} +.rz-variant-text.rz-badge-base.rz-shade-light { + color: var(--rz-base-light); +} +.rz-variant-text.rz-badge-base.rz-shade-default { + color: var(--rz-base); +} +.rz-variant-text.rz-badge-base.rz-shade-dark { + color: var(--rz-base-dark); +} +.rz-variant-text.rz-badge-base.rz-shade-darker { + color: var(--rz-base-darker); +} + +.rz-variant-text.rz-badge-light { + color: var(--rz-base-200); + background-color: transparent; +} + +.rz-variant-text.rz-badge-dark { + color: var(--rz-base-900); + background-color: transparent; +} + .rz-badge-pill { border-radius: var(--rz-badge-pill-border-radius); padding: var(--rz-badge-pill-padding); } -:root { - --rz-chip-background-color: var(--rz-base-200); - --rz-chip-color: var(--rz-text-color); - --rz-chip-padding: 0 0 0 0.5rem; - --rz-chip-gap: 0.5rem; - --rz-chip-border-radius: var(--rz-border-radius); - --rz-chip-font-size: 0.875rem; -} - .rz-dropzone { user-select: none; } @@ -15532,57 +9986,32 @@ p-button[type] { cursor: grabbing; } -:root { - --rz-input-font-size: 0.875rem; - --rz-input-height: 2.25rem; - --rz-input-line-height: 1.429; - --rz-input-padding: 0.4375rem; - --rz-input-value-color: var(--rz-text-color); - --rz-input-placeholder-color: var(--rz-text-tertiary-color); - --rz-input-background-color: var(--rz-base-background-color); - --rz-input-border: var(--rz-border-normal); - --rz-input-border-radius: var(--rz-border-radius); - --rz-input-shadow: none; - --rz-input-hover-shadow: none; - --rz-input-hover-border: var(--rz-border-primary-light); - --rz-input-focus-shadow: 0px 0px 0px 1px var(--rz-white), 0px 0px 0px 3px rgba(17, 81, 243, 0.2); - --rz-input-focus-border: var(--rz-border-primary-light); - --rz-input-focus-outline: var(--rz-outline-normal); - --rz-input-focus-outline-offset: 0; - --rz-input-disabled-border: var(--rz-border-disabled); - --rz-input-disabled-shadow: none; - --rz-input-disabled-background-color: var(--rz-base-100); - --rz-input-disabled-color: var(--rz-text-tertiary-color); - --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); - --rz-input-disabled-opacity: 0.5; - --rz-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-spinner:not(:disabled):not(.rz-state-disabled):hover, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { +.rz-form-field:hover .rz-form-field-content, .rz-autocomplete:hover:not(.rz-state-disabled), .rz-radiobutton-box:hover:not(.rz-state-disabled), .rz-chkbox-box:hover:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, .mask:not(:disabled):not(.rz-state-disabled):hover, .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, .rz-textbox:not(:disabled):not(.rz-state-disabled):hover { box-shadow: var(--rz-input-hover-shadow); border: var(--rz-input-hover-border); } -.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { +.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus { box-shadow: var(--rz-input-focus-shadow); border: var(--rz-input-focus-border); outline: var(--rz-input-focus-outline); outline-offset: var(--rz-input-focus-outline-offset); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, div:not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled, div:not(.rz-form-field-content) > .rz-spinner:disabled, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled, div:not(.rz-form-field-content) > .rz-multiselect:disabled, div:not(.rz-form-field-content) > .rz-dropdown:disabled, div:not(.rz-form-field-content) > .mask:disabled, div:not(.rz-form-field-content) > .rz-textarea:disabled, div:not(.rz-form-field-content) > .rz-textbox:disabled { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown, :not(.rz-form-field-content) > .rz-colorpicker:disabled, .rz-lookup-search :not(.rz-form-field-content) > input:disabled, :not(.rz-form-field-content) > .rz-numeric:disabled, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled, :not(.rz-form-field-content) > .rz-multiselect:disabled, :not(.rz-form-field-content) > .rz-dropdown:disabled, :not(.rz-form-field-content) > .mask:disabled, :not(.rz-form-field-content) > .rz-textarea:disabled, :not(.rz-form-field-content) > .rz-textbox:disabled { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, div:not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled::placeholder, div:not(.rz-form-field-content) > .rz-spinner:disabled::placeholder, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, div:not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, div:not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, div:not(.rz-form-field-content) > .mask:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, div:not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled::placeholder, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect::placeholder, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown::placeholder, :not(.rz-form-field-content) > .rz-colorpicker:disabled::placeholder, .rz-lookup-search :not(.rz-form-field-content) > input:disabled::placeholder, :not(.rz-form-field-content) > .rz-numeric:disabled::placeholder, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled::placeholder, :not(.rz-form-field-content) > .rz-multiselect:disabled::placeholder, :not(.rz-form-field-content) > .rz-dropdown:disabled::placeholder, :not(.rz-form-field-content) > .mask:disabled::placeholder, :not(.rz-form-field-content) > .rz-textarea:disabled::placeholder, :not(.rz-form-field-content) > .rz-textbox:disabled::placeholder { color: var(--rz-input-disabled-placeholder-color); } -div:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, div:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, div:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search div:not(.rz-form-field-content) > input:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-spinner:disabled .rz-inputtext, .rz-calendar div:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, div:not(.rz-form-field-content) > .mask:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, div:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { +:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext, :not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext, :not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext, .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext, .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext, :not(.rz-form-field-content) > .mask:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext, :not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext { background-color: var(--rz-input-disabled-background-color); color: var(--rz-input-disabled-color); + border: none; } input { @@ -15593,26 +10022,29 @@ input::placeholder { color: var(--rz-input-placeholder-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { - padding: var(--rz-input-padding); +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); } -.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { + box-sizing: border-box; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color); } -.rz-colorpicker, .rz-lookup-search input, .rz-spinner, .rz-calendar .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { +.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox { height: var(--rz-input-height); line-height: var(--rz-input-line-height); color: var(--rz-input-value-color); + font-family: inherit; font-size: var(--rz-input-font-size); transition: var(--rz-input-transition); outline: none; } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { box-shadow: none; background-color: transparent; outline: none; @@ -15631,15 +10063,6 @@ input::placeholder { box-shadow: none; } -:root { - --rz-header-background-color: var(--rz-base-background-color); - --rz-header-min-height: 3.125rem; - --rz-header-z: 2; - --rz-header-border: var(--rz-border-white); - --rz-header-color: var(--rz-text-color); - --rz-header-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); -} - .rz-header { background-color: var(--rz-header-background-color); min-height: var(--rz-header-min-height); @@ -15658,14 +10081,6 @@ input::placeholder { text-decoration: none; } -:root { - --rz-footer-padding: 1rem; - --rz-footer-background-color: var(--rz-base-background-color); - --rz-footer-border: none; - --rz-footer-color: var(--rz-text-color); - --rz-footer-z: 2; -} - .rz-footer { padding: var(--rz-footer-padding); border-top: var(--rz-footer-border); @@ -15680,18 +10095,10 @@ input::placeholder { right: 0; } -:root { - --rz-sidebar-z: 1; - --rz-sidebar-width: 250px; - --rz-sidebar-border-right: var(--rz-border-base-800); - --rz-sidebar-background-color: var(--rz-base-900); - --rz-sidebar-color: var(--rz-white); -} - .rz-sidebar { background-color: var(--rz-sidebar-background-color); color: var(--rz-sidebar-color); - border-right: var(--rz-sidebar-border-right); + border-inline-end: var(--rz-sidebar-border-inline-end); position: fixed; overflow: auto; left: 0; @@ -15700,7 +10107,7 @@ input::placeholder { z-index: var(--rz-sidebar-z); width: var(--rz-sidebar-width); opacity: 1; - transition: var(--rz-transition-all); + transition: width var(--rz-transition), opacity var(--rz-transition); } @media (max-width: 768px) { @@ -15719,17 +10126,8 @@ input::placeholder { opacity: 0; } -:root { - --rz-card-padding: 1.25rem; - --rz-card-background-color: var(--rz-base-background-color); - --rz-card-flat-background-color: var(--rz-base-100); - --rz-card-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-card-border: var(--rz-border-normal); - --rz-card-border-radius: var(--rz-border-radius); - --rz-card-heading-margin-bottom: 0.5rem; -} - .rz-card { + box-sizing: border-box; padding: var(--rz-card-padding); border-radius: var(--rz-card-border-radius); background-color: var(--rz-card-background-color); @@ -15750,61 +10148,30 @@ input::placeholder { .rz-card h1, .rz-card h2, .rz-card h3, -.rz-card h4, -.rz-card h5, -.rz-card h6 { - margin-bottom: var(--rz-card-heading-margin-bottom); -} -.rz-card p { - margin-bottom: 0; -} - -:root { - --rz-layout-body-margin: 0; - --rz-layout-body-padding: 1rem; - --rz-layout-body-border-radius: 0; - --rz-layout-body-background-color: transparent; -} - -.rz-body { - margin: var(--rz-layout-body-margin); - padding: var(--rz-layout-body-padding); - border-radius: var(--rz-layout-body-border-radius); - background-color: var(--rz-layout-body-background-color); -} -.rz-body:only-child { - background-color: transparent; -} -.rz-layout .rz-body { - transform: translateZ(0); -} - -:root { - --rz-accordion-item-padding: 0.25rem 0; - --rz-accordion-item-margin: 0; - --rz-accordion-item-border: none; - --rz-accordion-item-background-color: var(--rz-base-background-color); - --rz-accordion-item-color: var(--rz-text-color); - --rz-accordion-item-focus-outline: var(--rz-outline-focus); - --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-accordion-item-line-height: 1.25rem; - --rz-accordion-item-font-size: var(--rz-body-font-size); - --rz-accordion-item-font-weight: normal; - --rz-accordion-icon-width: var(--rz-icon-size); - --rz-accordion-icon-height: var(--rz-icon-size); - --rz-accordion-icon-font-size: var(--rz-icon-size); - --rz-accordion-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-margin: 0 0.25rem 0 0; - --rz-accordion-toggle-icon-order: 0; - --rz-accordion-selected-color: var(--rz-base-900); - --rz-accordion-hover-color: var(--rz-primary); - --rz-accordion-content-padding: 0.5rem 0.5rem 0.5rem 1.5rem; - --rz-accordion-content-font-size: var(--rz-body-font-size); - --rz-accordion-border-radius: var(--rz-border-radius); - --rz-accordion-shadow: none; +.rz-card h4, +.rz-card h5, +.rz-card h6 { + margin-bottom: var(--rz-card-heading-margin-bottom); +} +.rz-card p { + margin-bottom: 0; +} + +.rz-body { + margin: var(--rz-layout-body-margin); + padding: var(--rz-layout-body-padding); + border-radius: var(--rz-layout-body-border-radius); + background-color: var(--rz-layout-body-background-color); +} +.rz-body:only-child { + background-color: transparent; +} +.rz-layout .rz-body { + transform: translateZ(0); } .rz-accordion { + box-sizing: border-box; border-radius: var(--rz-accordion-border-radius); box-shadow: var(--rz-accordion-shadow); } @@ -15823,16 +10190,16 @@ input::placeholder { .rz-accordion:focus-visible { outline: var(--rz-accordion-item-focus-outline); } - -.rz-accordion-header { +.rz-accordion .rz-accordion-header { background-color: var(--rz-accordion-item-background-color); margin: var(--rz-accordion-item-margin); } -.rz-accordion-header:not(:first-child) { +.rz-accordion .rz-accordion-header:not(:first-child) { border-top: var(--rz-accordion-item-border); } -.rz-accordion-header a[role=tab] { - padding: var(--rz-accordion-item-padding); +.rz-accordion .rz-accordion-header > a { + padding-block: var(--rz-accordion-item-padding-block); + padding-inline: var(--rz-accordion-item-padding-inline); color: var(--rz-accordion-item-color); line-height: var(--rz-accordion-item-line-height); text-decoration: none; @@ -15840,20 +10207,21 @@ input::placeholder { align-items: center; font-size: var(--rz-accordion-item-font-size); font-weight: var(--rz-accordion-item-font-weight); + cursor: pointer; } -.rz-accordion-header a[role=tab]:hover { +.rz-accordion .rz-accordion-header > a:hover { color: var(--rz-accordion-hover-color); } -.rz-accordion-header a[role=tab] span:not(.rz-accordion-toggle-icon) { +.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) { flex-grow: 1; } -:focus-visible .rz-accordion-header.rz-state-focused { +:focus-visible .rz-accordion .rz-accordion-header.rz-state-focused { outline: var(--rz-accordion-item-focus-outline); outline-offset: var(--rz-accordion-item-focus-outline-offset); } -.rz-accordion-header .rzi { +.rz-accordion .rz-accordion-header .rzi { font-size: var(--rz-accordion-icon-font-size); - margin: var(--rz-accordion-icon-margin); + margin-inline: var(--rz-accordion-icon-margin-inline); } .rz-accordion-toggle-icon { @@ -15863,7 +10231,7 @@ input::placeholder { order: var(--rz-accordion-toggle-icon-order); } .rz-accordion-toggle-icon.rzi { - margin: var(--rz-accordion-toggle-icon-margin); + margin-inline: var(--rz-accordion-toggle-icon-margin-inline); } .rz-accordion-toggle-icon.rzi-chevron-right:before { content: "arrow_right"; @@ -15872,10 +10240,6 @@ input::placeholder { content: "arrow_drop_down"; } -.rz-state-active a[role=tab] { - color: var(--rz-accordion-selected-color); -} - .rz-accordion-content-wrapper-overflown { overflow: hidden; } @@ -15883,34 +10247,26 @@ input::placeholder { .rz-accordion-content { font-size: var(--rz-accordion-content-font-size); background-color: var(--rz-accordion-item-background-color); - padding: var(--rz-accordion-content-padding); + padding-block: var(--rz-accordion-content-padding-block); + padding-inline: var(--rz-accordion-content-padding-inline); } -:root { - --rz-panel-background-color: var(--rz-base-background-color); - --rz-panel-padding: 0.5rem; - --rz-panel-title-line-height: 1.25rem; - --rz-panel-title-font-weight: 600; - --rz-panel-content-margin: 0; - --rz-panel-toggle-icon-width: var(--rz-icon-size); - --rz-panel-toggle-icon-height: var(--rz-icon-size); - --rz-panel-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-toggle-icon-border-radius: var(--rz-border-radius); - --rz-panel-toggle-icon-background-color: var(--rz-base-200); - --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); - --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); - --rz-panel-hover-color: var(--rz-primary); - --rz-panel-border-radius: var(--rz-border-radius); - --rz-panel-shadow: none; +/* Right-to-left toggle icons */ +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-right:before { + content: "arrow_left"; +} +*[dir=rtl] .rz-accordion-toggle-icon.rzi-chevron-down:before { + content: "arrow_drop_down"; } .rz-panel { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: var(--rz-panel-padding); background: var(--rz-panel-background-color); border-radius: var(--rz-panel-border-radius); - padding: var(--rz-panel-padding); box-shadow: var(--rz-panel-shadow); - display: flex; - flex-direction: column; } .rz-panel-titlebar { @@ -15961,33 +10317,19 @@ input::placeholder { content: "add"; } -:root { - --rz-sidebar-toggle-icon-width: 1.5rem; - --rz-sidebar-toggle-icon-height: 1.5rem; - --rz-sidebar-toggle-margin: 0 1rem 0 0; - --rz-sidebar-toggle-padding: 0.8125rem; - --rz-sidebar-toggle-border: var(--rz-border-base-200); - --rz-sidebar-toggle-color: var(--rz-base-800); - --rz-sidebar-toggle-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-color: var(--rz-base-900); - --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); - --rz-sidebar-toggle-hover-border-radius: 0; - --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); - --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); -} - .rz-sidebar-toggle { - -webkit-appearance: none; + appearance: none; + cursor: pointer; border: none; padding: var(--rz-sidebar-toggle-padding); - margin: var(--rz-sidebar-toggle-margin); - border-right: var(--rz-sidebar-toggle-border); + margin-inline-end: var(--rz-sidebar-toggle-margin-inline-end); + border-inline-end: var(--rz-sidebar-toggle-border); background-color: var(--rz-sidebar-toggle-background-color); color: var(--rz-sidebar-toggle-color); } .rz-justify-content-flex-end .rz-sidebar-toggle { - border-left: var(--rz-sidebar-toggle-border); - border-right: none; + border-inline-start: var(--rz-sidebar-toggle-border); + border-inline-end: none; } .rz-sidebar-toggle:focus { outline: none; @@ -16021,37 +10363,9 @@ input::placeholder { flex: auto; } -:root { - --rz-menu-background-color: var(--rz-base-background-color); - --rz-menu-border: none; - --rz-menu-border-radius: 0; - --rz-menu-item-padding: 0.5rem 1rem 0.5rem 0.5rem; - --rz-menu-item-border-radius: 0; - --rz-menu-item-color: var(--rz-text-color); - --rz-menu-item-hover-color: var(--rz-on-primary-lighter); - --rz-menu-item-hover-background-color: var(--rz-primary-lighter); - --rz-menu-item-focus-outline: var(--rz-outline-focus); - --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-menu-item-selected-color: var(--rz-primary); - --rz-menu-item-icon-margin: 0 0.5rem 0 0; - --rz-menu-item-icon-color: var(--rz-text-color); - --rz-menu-item-icon-hover-color: var(--rz-on-primary-lighter); - --rz-menu-item-offset: 1rem; - --rz-menu-item-transition: var(--rz-transition-all); - --rz-menu-item-disabled-opacity: 0.2; - --rz-menu-top-item-padding: 0.5rem; - --rz-menu-top-item-border-radius: 0; - --rz-menu-top-item-color: var(--rz-text-color); - --rz-menu-top-item-background-color: var(--rz-base-background-color); - --rz-menu-top-item-hover-color: var(--rz-on-primary-lighter); - --rz-menu-top-item-hover-background-color: var(--rz-primary-lighter); - --rz-menu-top-item-selected-color: var(--rz-primary); - --rz-menu-top-item-icon-color: var(--rz-text-color); - --rz-menu-top-item-icon-hover-color: var(--rz-on-primary-lighter); - --rz-context-menu-padding: 0; - --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); +.rz-context-menu { + box-sizing: border-box; } - .rz-context-menu .rz-menu { flex-direction: column; } @@ -16076,7 +10390,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-context-menu .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16098,6 +10413,7 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) { + box-sizing: border-box; list-style: none; margin: 0; padding: 0; @@ -16106,7 +10422,8 @@ input::placeholder { background-color: var(--rz-menu-top-item-background-color); } .rz-context-menu .rz-menu:not(.rz-profile-menu) { - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link { color: var(--rz-menu-top-item-color); @@ -16119,7 +10436,8 @@ input::placeholder { border-radius: var(--rz-menu-top-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-top-item-hover-background-color); @@ -16149,13 +10467,13 @@ input::placeholder { .rz-menu:not(.rz-profile-menu) > .rz-navigation-item > .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - bottom: -2px; + inset-block-end: -2px; height: 1px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background-color: var(--rz-menu-top-item-selected-color); - margin-left: 0.5rem; - margin-right: 0.5rem; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; } .rz-menu:not(.rz-profile-menu) .rz-navigation-item { position: relative; @@ -16164,7 +10482,8 @@ input::placeholder { list-style: none; overflow: hidden; position: absolute; - padding: var(--rz-context-menu-padding); + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); margin: 0; min-width: 100%; box-shadow: var(--rz-context-menu-box-shadow); @@ -16176,7 +10495,8 @@ input::placeholder { border-radius: var(--rz-menu-item-border-radius); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-menu-item-hover-background-color); @@ -16200,16 +10520,16 @@ input::placeholder { } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { color: var(--rz-menu-item-color); - margin-left: var(--rz-menu-item-offset); + margin-inline-start: var(--rz-menu-item-offset); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 2); + margin-inline-start: calc(var(--rz-menu-item-offset) * 2); } .rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - margin-left: calc(var(--rz-menu-item-offset) * 3); + margin-inline-start: calc(var(--rz-menu-item-offset) * 3); } .rz-menu:not(.rz-profile-menu) .rzi:not(.rz-navigation-item-icon-children) { - margin: var(--rz-menu-item-icon-margin); + margin-inline: var(--rz-menu-item-icon-margin-inline); } .rz-navigation-item-wrapper, @@ -16226,7 +10546,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-menu-toggle-item { display: none; - padding: var(--rz-menu-top-item-padding); + padding-block: var(--rz-menu-top-item-padding-block); + padding-inline: var(--rz-menu-top-item-padding-inline); justify-content: end; align-items: center; width: 100%; @@ -16286,65 +10607,20 @@ li.rz-navigation-item.rz-state-disabled { display: none !important; } } -:root { - --rz-panel-menu-padding: 0; - --rz-panel-menu-font-size: var(--rz-body-font-size); - --rz-panel-menu-font-weight: 600; - --rz-panel-menu-color: #ffffff; - --rz-panel-menu-background-color: #262526; - --rz-panel-menu-hover-background-color: #333233; - --rz-panel-menu-hover-color: inherit; - --rz-panel-menu-focus-outline: var(--rz-outline-focus); - --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-panel-menu-item-line-height: 1.25rem; - --rz-panel-menu-item-padding: 0.75rem 1rem; - --rz-panel-menu-item-margin: 0; - --rz-panel-menu-item-border: 1px solid #373637; - --rz-panel-menu-item-border-radius: 0; - --rz-panel-menu-item-active-background-color: #515151; - --rz-panel-menu-item-background-color: #373637; - --rz-panel-menu-item-active-color: inherit; - --rz-panel-menu-item-active-indicator: #1151f3; - --rz-panel-menu-item-offset: 0.75rem; - --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); - --rz-panel-menu-2nd-level-vertical-offset: 0; - --rz-panel-menu-item-2nd-level-padding: 0.5rem 1rem; - --rz-panel-menu-item-2nd-level-margin: 0; - --rz-panel-menu-item-2nd-level-border-radius: 0; - --rz-panel-menu-item-2nd-level-offset: 2.75rem; - --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); - --rz-panel-menu-item-2nd-level-font-weight: 400; - --rz-panel-menu-item-2nd-level-color: inherit; - --rz-panel-menu-item-2nd-level-hover-background-color: #494849; - --rz-panel-menu-item-2nd-level-background-color: #403f40; - --rz-panel-menu-item-2nd-level-hover-color: inherit; - --rz-panel-menu-item-2nd-level-active-background-color: #494849; - --rz-panel-menu-item-2nd-level-active-color: inherit; - --rz-panel-menu-item-2nd-level-active-font-weight: inherit; - --rz-panel-menu-item-3rd-level-hover-background-color: #515151; - --rz-panel-menu-item-3rd-level-hover-color: inherit; - --rz-panel-menu-item-3rd-level-active-background-color: #515151; - --rz-panel-menu-item-3rd-level-active-color: inherit; - --rz-panel-menu-icon-width: var(--rz-icon-size); - --rz-panel-menu-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-icon-color: #ffffff; - --rz-panel-menu-icon-height: var(--rz-icon-size); - --rz-panel-menu-icon-margin: 0 0.5rem 0 0; - --rz-panel-menu-icon-2nd-level-margin: 0 0.625rem 0 -1.625rem; - --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); - --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); - --rz-panel-menu-toggle-icon-opacity: 0.4; -} - .rz-panel-menu { + box-sizing: border-box; list-style: none; - padding: var(--rz-panel-menu-padding); - margin-bottom: 0; + padding-block: var(--rz-panel-menu-padding-block); + padding-inline: var(--rz-panel-menu-padding-inline); + margin-block-start: 0; + margin-block-end: 0; overflow: auto; font-size: var(--rz-panel-menu-font-size); font-weight: var(--rz-panel-menu-font-weight); - color: var(--rz-panel-menu-color); - background-color: var(--rz-panel-menu-background-color); + color: var(--rz-panel-menu-item-color); + background-color: var(--rz-panel-menu-item-background-color); + /* First level items */ + /* Second level items */ } .rz-panel-menu:focus { outline: var(--rz-outline-normal); @@ -16354,10 +10630,11 @@ li.rz-navigation-item.rz-state-disabled { outline-offset: var(--rz-panel-menu-focus-outline-offset); } .rz-panel-menu > .rz-navigation-item { - margin: var(--rz-panel-menu-item-margin); + margin-block: var(--rz-panel-menu-item-margin-block); + margin-inline: var(--rz-panel-menu-item-margin-inline); } .rz-panel-menu .rz-navigation-item { - border-bottom: var(--rz-panel-menu-item-border); + border-block-end: var(--rz-panel-menu-item-border); border-radius: var(--rz-panel-menu-item-border-radius); overflow: hidden; } @@ -16369,11 +10646,11 @@ li.rz-navigation-item.rz-state-disabled { overflow: hidden; } .rz-panel-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-hover-background-color); - color: var(--rz-panel-menu-hover-color); + background-color: var(--rz-panel-menu-item-hover-background-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon { - color: var(--rz-panel-menu-hover-color); + color: var(--rz-panel-menu-item-hover-color); } .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active { @@ -16384,8 +10661,8 @@ li.rz-navigation-item.rz-state-disabled { .rz-panel-menu .rz-navigation-item-wrapper-active:before { position: absolute; content: ""; - top: 0; - bottom: 0; + inset-block-start: 0; + inset-block-end: 0; width: 4px; background-color: var(--rz-panel-menu-item-active-indicator); } @@ -16394,7 +10671,8 @@ li.rz-navigation-item.rz-state-disabled { color: var(--rz-panel-menu-item-active-color); } .rz-panel-menu .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-padding); + padding-block: var(--rz-panel-menu-item-padding-block); + padding-inline: var(--rz-panel-menu-item-padding-inline); color: inherit; cursor: pointer; text-decoration: none; @@ -16407,7 +10685,7 @@ li.rz-navigation-item.rz-state-disabled { flex: auto; } .rz-panel-menu .rz-navigation-item-icon-children { - margin-left: auto; + margin-inline-start: auto; font-size: var(--rz-panel-menu-toggle-icon-font-size); opacity: var(--rz-panel-menu-toggle-icon-opacity); z-index: 1; @@ -16416,20 +10694,22 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-height); width: var(--rz-panel-menu-icon-width); color: var(--rz-panel-menu-icon-color); - margin: var(--rz-panel-menu-icon-margin); + margin-inline: var(--rz-panel-menu-icon-margin-inline); font-size: var(--rz-panel-menu-icon-font-size); transition: var(--rz-panel-menu-item-transition); } .rz-panel-menu .rz-navigation-menu { list-style: none; padding: 0; - margin-bottom: 0; + margin-block-end: 0; overflow: hidden; + /* Third level items */ } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper { - margin: var(--rz-panel-menu-item-2nd-level-margin); + margin-block: var(--rz-panel-menu-item-2nd-level-margin-block); + margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline); border-radius: var(--rz-panel-menu-item-2nd-level-border-radius); - background-color: var(--rz-panel-menu-item-background-color); + background-color: var(--rz-panel-menu-item-2nd-level-background-color); overflow: hidden; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { @@ -16453,67 +10733,52 @@ li.rz-navigation-item.rz-state-disabled { height: var(--rz-panel-menu-icon-2nd-level-icon-size); width: var(--rz-panel-menu-icon-2nd-level-icon-size); font-size: var(--rz-panel-menu-icon-2nd-level-icon-size); - margin: var(--rz-panel-menu-icon-2nd-level-margin); + margin-inline: var(--rz-panel-menu-icon-2nd-level-margin-inline); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item { + border-block-end: none; + color: var(--rz-panel-menu-item-2nd-level-color); + font-size: var(--rz-panel-menu-item-2nd-level-font-size); + font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { + margin-block-start: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { + margin-block-end: var(--rz-panel-menu-2nd-level-vertical-offset); +} +.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { + padding-block: var(--rz-panel-menu-item-2nd-level-padding-block); + padding-inline: var(--rz-panel-menu-item-2nd-level-padding-inline); + padding-inline-start: var(--rz-panel-menu-item-2nd-level-offset); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu { margin: 0; } -.rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link { - padding-left: var(--rz-panel-menu-item-offset); -} .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper { - background-color: var(--rz-panel-menu-item-2nd-level-background-color); - color: var(--rz-panel-menu-item-2nd-level-color); + color: var(--rz-panel-menu-item-3rd-level-color); + background-color: var(--rz-panel-menu-item-3rd-level-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { - background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); color: var(--rz-panel-menu-item-3rd-level-hover-color); + background-color: var(--rz-panel-menu-item-3rd-level-hover-background-color); } .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper-active { background-color: var(--rz-panel-menu-item-3rd-level-active-background-color); color: var(--rz-panel-menu-item-3rd-level-active-color); } -.rz-panel-menu .rz-navigation-menu .rz-navigation-item { - border-bottom: none; - color: var(--rz-panel-menu-item-2nd-level-color); - font-size: var(--rz-panel-menu-item-2nd-level-font-size); - font-weight: var(--rz-panel-menu-item-2nd-level-font-weight); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:first-child { - margin-top: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item:last-child { - margin-bottom: var(--rz-panel-menu-2nd-level-vertical-offset); -} -.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link { - padding: var(--rz-panel-menu-item-2nd-level-padding); - padding-left: var(--rz-panel-menu-item-2nd-level-offset); -} - -:root { - --rz-profile-menu-background-color: var(--rz-base-background-color); - --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); - --rz-profile-menu-border: var(--rz-border-base-200); - --rz-profile-menu-padding: 0.625rem 1rem; - --rz-profile-menu-border-radius: var(--rz-border-radius); - --rz-profile-menu-toggle-button-color: var(--rz-text-color); - --rz-profile-menu-item-hover-background-color: var(--rz-primary-lighter); - --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); - --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-profile-menu-item-icon-width: var(--rz-icon-size); - --rz-profile-menu-item-icon-height: var(--rz-icon-size); - --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); - --rz-profile-menu-item-icon-margin: 0 0.5rem 0 0; -} ul.rz-profile-menu { + box-sizing: border-box; list-style: none; - margin-bottom: 0; - padding: var(--rz-profile-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-profile-menu-padding-block); + padding-inline: var(--rz-profile-menu-padding-inline); display: inline-block; background-color: var(--rz-profile-menu-top-item-background-color); - border-left: var(--rz-profile-menu-border); + border-inline-start: var(--rz-profile-menu-border); position: relative; z-index: 3; } @@ -16534,19 +10799,22 @@ ul.rz-profile-menu .rz-navigation-menu { list-style: none; overflow: hidden; position: absolute; - margin-bottom: 0; - padding: var(--rz-context-menu-padding); + margin-block-start: 0; + margin-block-end: 0; + padding-block: var(--rz-context-menu-padding-block); + padding-inline: var(--rz-context-menu-padding-inline); border-radius: var(--rz-profile-menu-border-radius); background-color: var(--rz-profile-menu-background-color); box-shadow: var(--rz-context-menu-box-shadow); - text-align: left; - top: calc(100% - 2px); + text-align: start; + inset-block-start: calc(100% - 2px); + inset-inline-end: 0; min-width: 100%; - right: 0; white-space: nowrap; } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper .rz-navigation-item-link { - padding: var(--rz-menu-item-padding); + padding-block: var(--rz-menu-item-padding-block); + padding-inline: var(--rz-menu-item-padding-inline); } ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover { background-color: var(--rz-profile-menu-item-hover-background-color); @@ -16566,17 +10834,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { width: var(--rz-profile-menu-item-icon-width); height: var(--rz-profile-menu-item-icon-height); font-size: var(--rz-profile-menu-item-icon-font-size); - margin: var(--rz-profile-menu-item-icon-margin); -} - -:root { - --rz-gravatar-width: 2rem; - --rz-gravatar-height: 2rem; - --rz-gravatar-border-radius: 50%; - --rz-gravatar-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); + margin-inline: var(--rz-profile-menu-item-icon-margin-inline); } .rz-gravatar { + box-sizing: border-box; width: var(--rz-gravatar-width); height: var(--rz-gravatar-height); display: inline-block; @@ -16584,26 +10846,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { box-shadow: var(--rz-gravatar-box-shadow); } -:root { - --rz-steps-color: var(--rz-text-color); - --rz-steps-number-border-radius: 50%; - --rz-steps-number-padding: 0.375rem 0; - --rz-steps-number-width: 2rem; - --rz-steps-number-height: 2rem; - --rz-steps-number-line-height: var(--rz-body-line-height); - --rz-steps-number-color: var(--rz-text-color); - --rz-steps-number-background-color: var(--rz-base-300); - --rz-steps-number-selected-color: var(--rz-on-secondary); - --rz-steps-number-selected-background: var(--rz-primary); - --rz-steps-number-focus-outline: var(--rz-outline-focus); - --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); - --rz-steps-title-selected-color: var(--rz-primary); - --rz-steps-title-margin: 0 1rem 0 0.5rem; - --rz-steps-buttons-padding: 1rem 0; - --rz-steps-button-color: var(--rz-primary); -} - .rz-steps { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -16657,14 +10901,16 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { } .rz-steps-title { - margin: var(--rz-steps-title-margin); + margin-block: var(--rz-steps-title-margin-block); + margin-inline: var(--rz-steps-title-margin-inline); } .rz-steps-number { text-align: center; line-height: var(--rz-steps-number-line-height); color: var(--rz-steps-number-color); - padding: var(--rz-steps-number-padding); + padding-block: var(--rz-steps-number-padding-block); + padding-inline: var(--rz-steps-number-padding-inline); width: var(--rz-steps-number-width); height: var(--rz-steps-number-height); background-color: var(--rz-steps-number-background-color); @@ -16674,7 +10920,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-buttons { display: flex; justify-content: space-between; - padding: var(--rz-steps-buttons-padding); + padding-block: var(--rz-steps-buttons-padding-block); + padding-inline: var(--rz-steps-buttons-padding-inline); } .rz-steps-next, @@ -16697,54 +10944,42 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-steps-prev.rz-state-disabled { opacity: 0.5 !important; } -.rz-steps-next .rzi, -.rz-steps-prev .rzi { - font-size: var(--rz-icon-size); + +.rz-steps-prev .rzi:before { + content: "navigate_before"; } -:root { - --rz-text-area-padding: var(--rz-input-padding); +.rz-steps-next .rzi:before { + content: "navigate_next"; +} + +*[dir=rtl] .rz-steps-prev .rzi:before { + content: "navigate_next"; +} +*[dir=rtl] .rz-steps-next .rzi:before { + content: "navigate_before"; } .rz-textarea { - padding: var(--rz-text-area-padding); + padding-block: var(--rz-text-area-padding-block); + padding-inline: var(--rz-text-area-padding-inline); height: auto; } -:root { - --rz-checkbox-width: 1.25rem; - --rz-checkbox-height: 1.25rem; - --rz-checkbox-border-radius: var(--rz-border-radius); - --rz-checkbox-border-width: 1px; - --rz-checkbox-label-margin: 0 1rem 0 0.5rem; - --rz-checkbox-margin: 1rem 0; - --rz-checkbox-focus-outline: var(--rz-outline-focus); - --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); - --rz-checkbox-checked-background-color: var(--rz-base-background-color); - --rz-checkbox-checked-hover-background-color: var(--rz-base-background-color); - --rz-checkbox-checked-disabled-background-color: var(--rz-base-background-color); - --rz-checkbox-checked-color: var(--rz-primary); - --rz-checkbox-checked-shadow: none; - --rz-checkbox-checked-border: var(--rz-input-border); - --rz-checkbox-checked-hover-border: var(--rz-input-hover-border); - --rz-checkbox-checked-disabled-border: var(--rz-input-border); - --rz-checkbox-checked-icon-background-color: var(--rz-base-background-color); - --rz-checkbox-checked-icon-border-radius: calc(var(--rz-border-radius) / 2); - --rz-checkbox-icon-width: 1rem; - --rz-checkbox-icon-height: 1rem; - --rz-checkbox-icon-font-size: 1rem; - --rz-checkbox-tri-icon-width: 1rem; - --rz-checkbox-tri-icon-height: 1rem; - --rz-checkbox-tri-icon-font-size: 1rem; +.rz-checkbox-list-vertical { + box-sizing: border-box; } - .rz-checkbox-list-vertical .rz-checkbox { display: flex; align-items: center; - margin: var(--rz-checkbox-margin); + margin-block: var(--rz-checkbox-margin-block); + margin-inline: var(--rz-checkbox-margin-inline); cursor: pointer; } - + +.rz-checkbox-list-horizontal { + box-sizing: border-box; +} .rz-checkbox-list-horizontal .rz-checkbox { display: inline-flex; align-items: center; @@ -16756,10 +10991,12 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-label, .rz-chkbox-template { - margin: var(--rz-checkbox-label-margin); + margin-block: var(--rz-checkbox-label-margin-block); + margin-inline: var(--rz-checkbox-label-margin-inline); } .rz-chkbox { + box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; @@ -16778,10 +11015,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-chkbox-box { position: absolute; cursor: pointer; - top: 0; - left: 0; - bottom: 0; - right: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -16838,17 +11072,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-switch-background-color: var(--rz-base-200); - --rz-switch-checked-background-color: var(--rz-primary); - --rz-switch-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); - --rz-switch-circle-background-color: var(--rz-text-contrast-color); - --rz-switch-checked-circle-background-color: var(--rz-on-secondary); - --rz-switch-focus-outline: var(--rz-outline-focus); - --rz-switch-focus-outline-offset: var(--rz-outline-offset); -} - .rz-switch { + box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; @@ -16868,10 +11093,10 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; } .rz-switch-circle.rz-disabled { @@ -16893,8 +11118,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { background: var(--rz-switch-circle-background-color); width: 1.26rem; height: 1.26rem; - left: 0.27rem; - margin-top: -0.63rem; + inset-inline-start: 0.27rem; + margin-block-start: -0.63rem; border-radius: calc(5 * var(--rz-border-radius) - 3px); transition: transform 0.2s linear; box-shadow: var(--rz-switch-box-shadow); @@ -16903,7 +11128,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-switch-circle:before { position: absolute; content: ""; - top: 50%; + inset-block-start: 50%; } .rz-switch-circle.rz-disabled:before { @@ -16915,35 +11140,23 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { transform: translateX(1.2rem); } -:root { - --rz-radio-width: 1.25rem; - --rz-radio-height: 1.25rem; - --rz-radio-border-radius: 50%; - --rz-radio-border-width: inherit; - --rz-radio-label-margin: 0 1rem 0 0.5rem; - --rz-radio-margin: 1rem 0; - --rz-radio-focus-outline: var(--rz-outline-focus); - --rz-radio-focus-outline-offset: var(--rz-outline-offset); - --rz-radio-active-background-color: var(--rz-base-background-color); - --rz-radio-active-shadow: none; - --rz-radio-checked-background-color: var(--rz-base-background-color); - --rz-radio-checked-hover-background-color: var(--rz-base-background-color); - --rz-radio-checked-hover-shadow: none; - --rz-radio-checked-color: var(--rz-text-contrast-color); - --rz-radio-circle-background-color: var(--rz-primary); - --rz-radio-circle-shadow: none; - --rz-radio-circle-hover-background-color: var(--rz-primary-light); - --rz-radio-icon-width: 0.625rem; - --rz-radio-icon-height: 0.625rem; - --rz-radio-checked-border: var(--rz-input-border); +*[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before { + transform: translateX(-1.2rem); } +.rz-radio-button-list-vertical { + box-sizing: border-box; +} .rz-radio-button-list-vertical .rz-radio-btn { display: flex; - margin: var(--rz-radio-margin); + margin-block: var(--rz-radio-margin-block); + margin-inline: var(--rz-radio-margin-inline); align-items: center; } +.rz-radio-button-list-horizontal { + box-sizing: border-box; +} .rz-radio-button-list-horizontal .rz-radio-btn { display: inline-flex; align-items: center; @@ -16955,7 +11168,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-label, .rz-radiobutton-template { - margin: var(--rz-radio-label-margin); + margin-block: var(--rz-radio-label-margin-block); + margin-inline: var(--rz-radio-label-margin-inline); } .rz-radiobutton { @@ -16978,10 +11192,7 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { .rz-radiobutton-box { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: flex; align-items: center; justify-content: center; @@ -17041,26 +11252,11 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { opacity: 0.5; } -:root { - --rz-fieldset-border: var(--rz-border-base-300); - --rz-fieldset-border-radius: var(--rz-border-radius); - --rz-fieldset-padding: 1.25rem; - --rz-fieldset-legend-color: var(--rz-text-color); - --rz-fieldset-legend-font-size: var(--rz-body-font-size); - --rz-fieldset-legend-margin: 0 0 0 1rem; - --rz-fieldset-legend-padding: 0 1rem; - --rz-fieldset-toggle-width: 1.125rem; - --rz-fieldset-toggle-margin: 0 0.5rem 0 0; - --rz-fieldset-toggle-height: 1.125rem; - --rz-fieldset-toggle-background-color: var(--rz-base-200); - --rz-fieldset-toggle-color: var(--rz-text-color); - --rz-fieldset-toggle-font-size: 1rem; - --rz-fieldset-toggle-border: none; - --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); - --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); -} - .rz-fieldset { + box-sizing: border-box; + margin: 0; + padding: 0; + min-width: 0; border: var(--rz-fieldset-border); border-radius: var(--rz-fieldset-border-radius); } @@ -17089,7 +11285,8 @@ ul.rz-profile-menu .rz-navigation-menu .rzi { text-align: center; font-size: var(--rz-fieldset-toggle-font-size); line-height: var(--rz-fieldset-toggle-height); - margin: var(--rz-fieldset-toggle-margin); + margin-block: var(--rz-fieldset-toggle-margin-block); + margin-inline: var(--rz-fieldset-toggle-margin-inline); } .rz-fieldset-toggler.rzi-minus:before { content: "remove"; @@ -17107,8 +11304,10 @@ a:focus-visible .rz-fieldset-toggler { .rz-fieldset-legend { float: none; - margin: var(--rz-fieldset-legend-margin); - padding: var(--rz-fieldset-legend-padding); + margin-block: var(--rz-fieldset-legend-margin-block); + margin-inline: var(--rz-fieldset-legend-margin-inline); + padding-block: var(--rz-fieldset-legend-padding-block); + padding-inline: var(--rz-fieldset-legend-padding-inline); width: auto; color: var(--rz-fieldset-legend-color); font-size: var(--rz-fieldset-legend-font-size); @@ -17123,36 +11322,6 @@ a:focus-visible .rz-fieldset-toggler { outline: var(--rz-outline-normal); } -:root { - --rz-dropdown-trigger-icon-width: var(--rz-icon-size); - --rz-dropdown-trigger-icon-height: var(--rz-icon-size); - --rz-dropdown-trigger-icon-margin: 0 0.5rem 0 0; - --rz-dropdown-horizontal-padding: 0.5rem; - --rz-dropdown-panel-padding: 0 0.5rem; - --rz-dropdown-items-margin: 0 -0.5rem; - --rz-dropdown-items-padding: 0; - --rz-dropdown-item-padding: 0.5rem; - --rz-dropdown-item-font-size: var(--rz-input-font-size); - --rz-dropdown-item-hover-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-shadow: none; - --rz-dropdown-item-hover-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); - --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); - --rz-dropdown-item-transition: var(--rz-transition-all); - --rz-dropdown-item-disabled-opacity: 0.2; - --rz-dropdown-label-padding: 0 var(--rz-icon-size) 0 0; - --rz-dropdown-filter-border: var(--rz-border-base-200); - --rz-dropdown-filter-padding: 0.5rem 0; - --rz-dropdown-open-background-color: var(--rz-base-background-color); - --rz-dropdown-open-border: var(--rz-input-border); - --rz-dropdown-panel-border: var(--rz-input-border); - --rz-dropdown-panel-shadow: none; - --rz-dropdown-chips-padding: var(--rz-input-padding); - --rz-multiselect-checkbox-margin: 0 0.5rem 0 0; -} - .rz-multiselect, .rz-dropdown { box-sizing: border-box; display: inline-flex; @@ -17179,15 +11348,16 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; display: flex; align-items: center; - right: 0; - top: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; } .rz-multiselect-trigger .rzi, .rz-dropdown-trigger .rzi { width: var(--rz-dropdown-trigger-icon-width); height: var(--rz-dropdown-trigger-icon-height); font-size: var(--rz-dropdown-trigger-icon-height); - margin: var(--rz-dropdown-trigger-icon-margin); + margin-block: var(--rz-dropdown-trigger-icon-margin-block); + margin-inline: var(--rz-dropdown-trigger-icon-margin-inline); } .rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before { content: "arrow_drop_down"; @@ -17195,8 +11365,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-dropdown-clear-icon { position: absolute; - right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); - top: 0; + inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem); + inset-block-start: 0; height: 100%; display: flex; align-items: center; @@ -17231,7 +11401,8 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-dropdown-panel-padding); } .rz-multiselect-panel .rz-chkbox { - margin: var(--rz-multiselect-checkbox-margin); + margin-block: var(--rz-multiselect-checkbox-margin-block); + margin-inline: var(--rz-multiselect-checkbox-margin-inline); } .rz-autocomplete-items, .rz-multiselect-items, .rz-dropdown-items { @@ -17324,28 +11495,32 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: var(--rz-dropdown-label-padding); + padding-block: var(--rz-dropdown-label-padding-block); + padding-inline: var(--rz-dropdown-label-padding-inline); margin: 0; } .rz-dropdown-chips { height: inherit; - padding: var(--rz-dropdown-chips-padding); + padding-block: var(--rz-dropdown-chips-padding-block); + padding-inline: var(--rz-dropdown-chips-padding-inline); } .rz-dropdown-chips .rz-dropdown-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-right: 3rem; + margin-inline-end: 3rem; } .rz-dropdown-chips .rz-chip { + box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rz-chip-gap); - background-color: var(--rz-chip-background-color); + padding-block: var(--rz-chip-padding-block); + padding-inline: var(--rz-chip-padding-inline); color: var(--rz-chip-color); + background-color: var(--rz-chip-background-color); border-radius: var(--rz-chip-border-radius); - padding: var(--rz-chip-padding); } .rz-dropdown-chips .rz-chip .rz-chip-text { font-size: var(--rz-chip-font-size); @@ -17362,10 +11537,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-clear .rz-multiselect-label-container, .rz-clear .rz-dropdown-label { - padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width)); + padding-inline-end: calc(2 * var(--rz-dropdown-trigger-icon-width)); } .rz-autocomplete { + box-sizing: border-box; display: inline-block; border: var(--rz-input-border); border-radius: var(--rz-input-border-radius); @@ -17374,7 +11550,8 @@ a:focus-visible .rz-fieldset-toggler { overflow: hidden; } .rz-autocomplete-input { - padding: var(--rz-input-padding); + padding-block: var(--rz-input-padding-block); + padding-inline: var(--rz-input-padding-inline); background-color: transparent; color: var(--rz-input-value-color); box-shadow: var(--rz-input-shadow); @@ -17396,24 +11573,8 @@ a:focus-visible .rz-fieldset-toggler { box-sizing: content-box; } -:root { - --rz-listbox-background-color: var(--rz-input-background-color); - --rz-listbox-border-radius: var(--rz-input-border-radius); - --rz-listbox-border: var(--rz-input-border); - --rz-listbox-focus-border: var(--rz-input-focus-border); - --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); - --rz-listbox-filter-border: var(--rz-border-base-100); - --rz-listbox-padding: 0; - --rz-listbox-item-padding: var(--rz-dropdown-item-padding); - --rz-listbox-item-margin: 0; - --rz-listbox-checkbox-margin: 0 0.5rem 0 0; - --rz-listbox-header-padding: 0.5rem; - --rz-listbox-header-icon-width: var(--rz-icon-size); - --rz-listbox-header-icon-height: var(--rz-icon-size); - --rz-listbox-header-icon-margin: 0; -} - .rz-listbox { + box-sizing: border-box; display: inline-flex; flex-direction: column; overflow: hidden; @@ -17423,7 +11584,8 @@ a:focus-visible .rz-fieldset-toggler { text-align: start; } .rz-listbox .rz-chkbox { - margin: var(--rz-listbox-checkbox-margin); + margin-block: var(--rz-listbox-checkbox-margin-block); + margin-inline: var(--rz-listbox-checkbox-margin-inline); } .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background-color: var(--rz-dropdown-item-hover-background-color); @@ -17466,7 +11628,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-listbox-header { display: flex; align-items: center; - padding: var(--rz-listbox-header-padding); + padding-block: var(--rz-listbox-header-padding-block); + padding-inline: var(--rz-listbox-header-padding-inline); border-bottom: var(--rz-listbox-filter-border); } @@ -17507,39 +11670,29 @@ a:focus-visible .rz-fieldset-toggler { background-color: transparent; } -:root { - --rz-splitbutton-menu-button-width: 1.875rem; - --rz-splitbutton-menu-button-padding: 0 0 0.375rem 0; - --rz-splitbutton-menu-button-font-size: 1.0625rem; - --rz-splitbutton-menu-shadow: none; - --rz-splitbutton-menu-min-width: 10rem; - --rz-splitbutton-background-color: var(--rz-primary); - --rz-splitbutton-border-radius: var(--rz-border-radius); -} - .rz-splitbutton { + box-sizing: border-box; display: inline-flex; } -.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-paginator-element .rz-button-text { +.rz-splitbutton .rz-button-icon-only .rz-button-text, .rz-splitbutton .rz-pager-element .rz-button-text { display: none; } .rz-splitbutton .rz-button.rz-splitbutton-menubutton { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .rz-splitbutton .rz-button:not(.rz-splitbutton-menubutton) { flex: auto; overflow: hidden; text-overflow: ellipsis; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .rz-splitbutton-menu { display: none; position: absolute; min-width: var(--rz-splitbutton-menu-min-width); - border-top-right-radius: var(--rz-splitbutton-border-radius); box-shadow: var(--rz-splitbutton-menu-shadow); } @@ -17549,9 +11702,6 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } -.rz-menuitem:hover:first-child { - border-top-right-radius: var(--rz-splitbutton-border-radius); -} .rz-menuitem .rz-menuitem-link { color: inherit; display: block; @@ -17565,11 +11715,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-splitbutton-menubutton { - margin-left: 1px; + margin-inline-start: 1px; } .rz-splitbutton-menubutton.rz-variant-outlined { - border-left: 0; - margin-left: calc(-1 * var(--rz-border-width)); + border-inline-start: 0; + margin-inline-start: calc(-1 * var(--rz-border-width)); } .rz-splitbutton-menubutton .rz-button-text { display: none; @@ -17578,36 +11728,8 @@ a:focus-visible .rz-fieldset-toggler { content: "arrow_drop_down"; } -:root { - --rz-slider-background-color: var(--rz-base-background-color); - --rz-slider-border: var(--rz-border-base-300); - --rz-slider-border-radius: calc(2 * var(--rz-border-radius)); - --rz-slider-horizontal-height: 0.5rem; - --rz-slider-horizontal-width: 10rem; - --rz-slider-range-background-color: var(--rz-primary-lighter); - --rz-slider-range-border: var(--rz-border-primary-lighter); - --rz-slider-handle-width: 1.25rem; - --rz-slider-handle-height: 1.25rem; - --rz-slider-handle-color: var(--rz-on-secondary); - --rz-slider-handle-background-color: var(--rz-white); - --rz-slider-handle-border: 0.25rem solid var(--rz-primary); - --rz-slider-handle-border-radius: calc(4 * var(--rz-border-radius)); - --rz-slider-handle-shadow: none; - --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); - --rz-slider-handle-hover-background-color: var(--rz-primary); - --rz-slider-handle-hover-border: 0.25rem solid var(--rz-primary); - --rz-slider-handle-hover-shadow: none; - --rz-slider-handle-focus-outline: var(--rz-outline-focus); - --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); - --rz-slider-disabled-background-color: var(--rz-base-background-color); - --rz-slider-disabled-border: var(--rz-border-disabled); - --rz-slider-disabled-range-background-color: var(--rz-base-200); - --rz-slider-disabled-range-border: var(--rz-border-base-300); - --rz-slider-disabled-handle-border: 0.25rem solid var(--rz-base-400); - --rz-slider-disabled-handle-background-color: var(--rz-white); -} - .rz-slider { + box-sizing: border-box; position: relative; display: inline-block; border: var(--rz-slider-border); @@ -17634,11 +11756,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-slider-range { position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - border-top-left-radius: var(--rz-slider-border-radius); - border-bottom-left-radius: var(--rz-slider-border-radius); + inset-block-start: -1px; + inset-block-end: -1px; + inset-inline-start: -1px; + border-start-start-radius: var(--rz-slider-border-radius); + border-end-start-radius: var(--rz-slider-border-radius); background-color: var(--rz-slider-range-background-color); border: var(--rz-slider-range-border); } @@ -17647,7 +11769,7 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; transform: translateY(-50%); top: 50%; - margin-left: calc(var(--rz-slider-handle-width) / -2); + margin-inline-start: calc(var(--rz-slider-handle-width) / -2); background-color: var(--rz-slider-handle-background-color); border: var(--rz-slider-handle-border); border-radius: var(--rz-slider-handle-border-radius); @@ -17672,19 +11794,8 @@ a:focus-visible .rz-fieldset-toggler { outline-offset: var(--rz-slider-handle-focus-outline-offset); } -:root { - --rz-rating-color: var(--rz-text-tertiary-color); - --rz-rating-opacity: 1; - --rz-rating-font-size: var(--rz-icon-size); - --rz-rating-selected-color: var(--rz-primary); - --rz-rating-focus-color: var(--rz-primary-darker); - --rz-rating-disabled-color: var(--rz-text-disabled-color); - --rz-rating-disabled-opacity: 0.5; - --rz-rating-ban-icon: highlight_off; - --rz-rating-ban-icon-color: var(--rz-text-tertiary-color); -} - .rz-rating { + box-sizing: border-box; display: inline-flex; font-size: var(--rz-rating-font-size); height: 1em; @@ -17742,16 +11853,8 @@ a:focus-visible .rz-fieldset-toggler { content: "star"; } -:root { - --rz-security-code-input-min-width: var(--rz-input-height); - --rz-security-code-input-min-height: var(--rz-input-height); - --rz-security-code-input-padding: 0.125rem; - --rz-security-code-input-font-size: 1.25rem; - --rz-security-code-input-font-weight: 600; - --rz-security-code-input-line-height: 1; -} - .rz-security-code { + box-sizing: border-box; display: inline-flex; } @@ -17772,17 +11875,8 @@ a:focus-visible .rz-fieldset-toggler { line-height: var(--rz-security-code-input-line-height); } -:root { - --rz-selectbar-background-color: transparent; - --rz-selectbar-color: var(--rz-text-color); - --rz-selectbar-border: var(--rz-border-normal); - --rz-selectbar-selected-background-color: var(--rz-primary-lighter); - --rz-selectbar-selected-color: var(--rz-on-primary-lighter); - --rz-selectbar-selected-border: var(--rz-border-normal); - --rz-selectbar-border-radius: var(--rz-border-radius); -} - .rz-selectbutton { + box-sizing: border-box; display: inline-flex; } .rz-selectbutton .rz-button:focus-visible { @@ -17790,7 +11884,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-xs { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -17798,13 +11892,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-xs:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-xs.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -17813,7 +11907,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-sm { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -17821,13 +11915,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-sm:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-sm.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -17836,7 +11930,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-md { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -17844,13 +11938,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-md:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-md.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -17859,7 +11953,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-selectbutton .rz-button.rz-button-lg { - margin-left: -1px; + margin-inline-start: -1px; display: inline-block; background-color: var(--rz-selectbar-background-color); color: var(--rz-selectbar-color); @@ -17867,13 +11961,13 @@ a:focus-visible .rz-fieldset-toggler { border-radius: 0; } .rz-selectbutton .rz-button.rz-button-lg:first-child { - margin-left: 0; - border-top-left-radius: var(--rz-selectbar-border-radius); - border-bottom-left-radius: var(--rz-selectbar-border-radius); + margin-inline-start: 0; + border-start-start-radius: var(--rz-selectbar-border-radius); + border-end-start-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg:last-child { - border-top-right-radius: var(--rz-selectbar-border-radius); - border-bottom-right-radius: var(--rz-selectbar-border-radius); + border-start-end-radius: var(--rz-selectbar-border-radius); + border-end-end-radius: var(--rz-selectbar-border-radius); } .rz-selectbutton .rz-button.rz-button-lg.rz-state-active { background-color: var(--rz-selectbar-selected-background-color); @@ -17881,89 +11975,34 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-selectbar-selected-border); } -:root { - --rz-datepicker-trigger-icon-width: var(--rz-icon-size); - --rz-datepicker-trigger-icon-height: var(--rz-icon-size); - --rz-datepicker-line-height: 1.25rem; - --rz-datepicker-trigger-icon-color: var(--rz-text-color); - --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); - --rz-datepicker-panel-border: var(--rz-border-normal); - --rz-datepicker-panel-background-color: var(--rz-base-background-color); - --rz-datepicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-datepicker-panel-margin: 0; - --rz-datepicker-header-background-color: var(--rz-base-background-color); - --rz-datepicker-header-color: var(--rz-text-color); - --rz-datepicker-header-padding: 0 1rem; - --rz-datepicker-header-line-height: 2.8125rem; - --rz-datepicker-header-border: none; - --rz-datepicker-footer-padding: 0 1rem; - --rz-datepicker-footer-line-height: 2.8125rem; - --rz-datepicker-calendar-padding: 0.5rem 0.875rem; - --rz-datepicker-calendar-header-font-size: 0.625rem; - --rz-datepicker-calendar-header-text-transform: uppercase; - --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); - --rz-datepicker-calendar-font-size: var(--rz-body-font-size); - --rz-datepicker-calendar-color: var(--rz-text-color); - --rz-datepicker-calendar-hover-color: var(--rz-on-primary-lighter); - --rz-datepicker-calendar-hover-background-color: var(--rz-primary-lighter); - --rz-datepicker-calendar-selected-color: var(--rz-on-primary); - --rz-datepicker-calendar-selected-background-color: var(--rz-primary); - --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-light); - --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-light); - --rz-datepicker-calendar-border: none; - --rz-datepicker-calendar-border-radius: var(--rz-border-radius); - --rz-datepicker-calendar-transition: var(--rz-transition-all); - --rz-datepicker-calendar-today-color: var(--rz-primary); - --rz-datepicker-calendar-today-background-color: transparent; - --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-primary); - --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); - --rz-datepicker-title-height: 47px; - --rz-datepicker-focus-outline: var(--rz-outline-focus); - --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-timepicker-background-color: var(--rz-base-background-color); - --rz-timepicker-color: var(--rz-text-color); - --rz-timepicker-separator-color: var(--rz-text-disabled-color); - --rz-timepicker-padding: 0.5rem; - --rz-timepicker-hour-padding: 0.5rem; - --rz-timepicker-button-background-color: var(--rz-primary); - --rz-timepicker-button-color: var(--rz-on-primary); - --rz-timepicker-button-width: 0.875rem; - --rz-timepicker-button-height: 0.875rem; - --rz-timepicker-button-border-radius: var(--rz-border-radius); - --rz-timepicker-button-padding: 0.5rem 1rem !important; - --rz-timepicker-gap: 0.5rem; - --rz-timepicker-separator-margin: 0 0.5rem; - --rz-timepicker-border: none; -} - -.rz-calendar { +.rz-datepicker { display: inline-block; position: relative; } -.rz-calendar .rz-readonly { +.rz-datepicker .rz-readonly { cursor: pointer; } -.rz-calendar .rz-inputtext { +.rz-datepicker > .rz-inputtext { width: 100%; line-height: var(--rz-datepicker-line-height); - padding-right: calc(1rem + var(--rz-datepicker-trigger-icon-width)); + padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width)); } -.rz-calendar:not(.rz-state-disabled):hover .rz-datepicker-trigger { +.rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger { box-shadow: none; color: var(--rz-datepicker-trigger-icon-hover-color); } -.rz-calendar.rz-state-disabled .rz-inputtext { +.rz-datepicker.rz-state-disabled > .rz-inputtext { color: var(--rz-input-disabled-color); box-shadow: var(--rz-input-disabled-shadow); background-color: var(--rz-input-disabled-background-color); border: var(--rz-input-disabled-border); opacity: var(--rz-input-disabled-opacity); } -.rz-calendar.rz-state-disabled .rz-inputtext::placeholder { +.rz-datepicker.rz-state-disabled > .rz-inputtext::placeholder { color: var(--rz-input-disabled-placeholder-color); } -.rz-calendar-inline { +.rz-datepicker-inline { background-color: var(--rz-datepicker-panel-background-color); border: var(--rz-input-border); } @@ -17971,9 +12010,9 @@ a:focus-visible .rz-fieldset-toggler { .rz-datepicker-trigger { box-shadow: none; position: absolute; - top: 50%; + inset-block-start: 50%; + inset-inline-end: 0.625rem; transform: translateY(-50%); - right: 0.625rem; background-color: transparent; padding: 0; vertical-align: text-top; @@ -18011,148 +12050,175 @@ a:focus-visible .rz-fieldset-toggler { display: none; } -.rz-datepicker { - background-color: var(--rz-datepicker-panel-background-color); -} -.rz-datepicker:not(.rz-datepicker-inline) { +.rz-datepicker-popup-container { box-sizing: content-box; - margin: var(--rz-datepicker-panel-margin); position: absolute; - border: var(--rz-datepicker-panel-border); + width: var(--rz-datepicker-popup-width); + margin: var(--rz-datepicker-panel-margin); box-shadow: var(--rz-datepicker-panel-shadow); + border: var(--rz-datepicker-panel-border); border-radius: var(--rz-border-radius); + background-color: var(--rz-datepicker-panel-background-color); } -.rz-calendar { - display: inline-block; -} - -.rz-datepicker-inline { +.rz-datepicker-inline-container { position: static; + white-space: nowrap; } -.rz-datepicker-inline .rz-datepicker-group { +.rz-datepicker-inline-container .rz-calendar { display: inline-block; } -.rz-datepicker-header { +.rz-datepicker-footer { position: relative; - line-height: var(--rz-datepicker-header-line-height); + line-height: var(--rz-datepicker-footer-line-height); + padding: var(--rz-datepicker-footer-padding); +} + +/* Calendar Styles */ +.rz-calendar { + box-sizing: border-box; +} + +.rz-calendar-header { + display: flex; + align-items: center; + justify-content: space-between; background-color: var(--rz-datepicker-header-background-color); border-bottom: var(--rz-datepicker-header-border); color: var(--rz-datepicker-header-color); - padding: var(--rz-datepicker-header-padding); + padding-block: var(--rz-datepicker-header-padding-block); + padding-inline: var(--rz-datepicker-header-padding-inline); } -.rz-datepicker-prev { - float: left; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev, +.rz-calendar-next { + border-radius: var(--rz-datepicker-prev-next-button-border-radius); } -.rz-datepicker-prev .rzi-chevron-left { - vertical-align: text-top; +.rz-calendar-prev .rzi, +.rz-calendar-next .rzi { color: var(--rz-datepicker-header-color); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--rz-datepicker-prev-next-icon-size); } -.rz-datepicker-prev .rzi-chevron-left:before { - content: "chevron_left"; +*[dir=rtl] .rz-calendar-prev .rzi, +*[dir=rtl] .rz-calendar-next .rzi { + transform: rotate(180deg); } -.rz-datepicker-next { - float: right; - height: var(--rz-datepicker-header-line-height); +.rz-calendar-prev { + order: 1; } -.rz-datepicker-next .rzi-chevron-right { - vertical-align: text-top; - color: var(--rz-datepicker-header-color); +.rz-calendar-prev .rz-calendar-prev-icon:before { + content: "chevron_left"; +} + +.rz-calendar-next { + order: 3; } -.rz-datepicker-next .rzi-chevron-right:before { +.rz-calendar-next .rz-calendar-next-icon:before { content: "chevron_right"; } -.rz-datepicker-title { - height: var(--rz-datepicker-title-height); - text-align: center; +.rz-calendar-title { + order: 2; + display: flex; + justify-content: center; + flex-wrap: nowrap; + gap: 0.25rem; +} + +.rz-calendar-month-dropdown { + width: var(--rz-datepicker-month-dropdown-width); } -.rz-datepicker-calendar-container:focus { +.rz-calendar-year-dropdown { + width: var(--rz-datepicker-year-dropdown-width); +} + +.rz-calendar-view-container { + padding-block: var(--rz-datepicker-calendar-padding-block); + padding-inline: var(--rz-datepicker-calendar-padding-inline); +} +.rz-calendar-view-container:focus { outline: var(--rz-outline-normal); } -.rz-datepicker-calendar-container:focus-visible { +.rz-calendar-view-container:focus-visible { outline: var(--rz-datepicker-focus-outline); outline-offset: var(--rz-datepicker-focus-outline-offset); } -.rz-datepicker-calendar { +.rz-calendar-view { table-layout: fixed; border-collapse: collapse; } -.rz-datepicker-calendar th { +.rz-calendar-view th { font-weight: normal; font-size: var(--rz-datepicker-calendar-header-font-size); text-transform: var(--rz-datepicker-calendar-header-text-transform); color: var(--rz-datepicker-calendar-header-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); text-align: center; } -.rz-datepicker-calendar td { +.rz-calendar-view td { text-align: center; border-top: var(--rz-datepicker-calendar-border); padding: 0; } -.rz-datepicker-calendar td .rz-state-default { +.rz-calendar-view td .rz-state-default { display: block; - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); color: var(--rz-datepicker-calendar-color); font-size: var(--rz-datepicker-calendar-font-size); border-radius: var(--rz-datepicker-calendar-border-radius); transition: var(--rz-datepicker-calendar-transition); } -.rz-datepicker-calendar td .rz-state-default.rz-datepicker-today { +.rz-calendar-view td .rz-state-default.rz-calendar-today { color: var(--rz-datepicker-calendar-today-color); background-color: var(--rz-datepicker-calendar-today-background-color); box-shadow: var(--rz-datepicker-calendar-today-box-shadow); border-radius: var(--rz-datepicker-calendar-today-border-radius); } -.rz-datepicker-calendar td .rz-state-default.rz-state-focused, .rz-datepicker-calendar td .rz-state-default:hover { +.rz-calendar-view td .rz-state-default.rz-state-focused, .rz-calendar-view td .rz-state-default:hover { text-decoration: none; color: var(--rz-datepicker-calendar-hover-color); background-color: var(--rz-datepicker-calendar-hover-background-color); cursor: pointer; } -.rz-datepicker-calendar td .rz-state-active, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today { +.rz-calendar-view td .rz-state-active, +.rz-calendar-view td .rz-state-active.rz-calendar-today { color: var(--rz-datepicker-calendar-selected-color); background-color: var(--rz-datepicker-calendar-selected-background-color); - padding: var(--rz-datepicker-calendar-padding); + padding: var(--rz-datepicker-calendar-item-padding); box-shadow: none; } -.rz-datepicker-calendar td .rz-state-active.rz-state-focused, .rz-datepicker-calendar td .rz-state-active:hover, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today.rz-state-focused, -.rz-datepicker-calendar td .rz-state-active.rz-datepicker-today:hover { +.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, +.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, +.rz-calendar-view td .rz-state-active.rz-calendar-today:hover { color: var(--rz-datepicker-calendar-selected-hover-color); background-color: var(--rz-datepicker-calendar-selected-hover-background-color); } -.rz-datepicker-calendar .rz-state-disabled { +.rz-calendar-view .rz-state-disabled { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-other-month { +.rz-calendar-view .rz-calendar-other-month { opacity: 0.5; } -.rz-datepicker-calendar .rz-datepicker-week-number { +.rz-calendar-view .rz-calendar-week-number { opacity: 0.5; } -.rz-datepicker-footer { - position: relative; - line-height: var(--rz-datepicker-footer-line-height); - padding: var(--rz-datepicker-footer-padding); -} - +/* Time Picker Styles */ .rz-timepicker { display: flex; align-items: center; justify-content: center; gap: var(--rz-timepicker-gap); border-top: var(--rz-datepicker-calendar-border); - padding: var(--rz-timepicker-padding); + padding-block: var(--rz-timepicker-padding-block); + padding-inline: var(--rz-timepicker-padding-inline); color: var(--rz-timepicker-color); } .rz-timepicker .rzi-chevron-up:before { @@ -18183,47 +12249,34 @@ a:focus-visible .rz-fieldset-toggler { text-decoration: none; } -:root { - --rz-numeric-line-height: 1.25rem; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0.5rem; - --rz-numeric-button-width: 0.875rem; - --rz-numeric-button-height: 0.875rem; - --rz-numeric-button-offset: 2px; - --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); - --rz-numeric-button-background-color: var(--rz-base-background-color); - --rz-numeric-button-disabled-background-color: var(--rz-base-100); - --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); - --rz-numeric-button-color: var(--rz-text-tertiary-color); -} - -.rz-spinner { +.rz-numeric { display: inline-block; position: relative; padding: 0px; } -.rz-spinner input[type=number], -.rz-spinner input[type=text] { +.rz-numeric input[type=number], +.rz-numeric input[type=text] { -moz-appearance: textfield; width: 100%; height: 100%; border: none; background-color: transparent; line-height: var(--rz-numeric-line-height); - text-align: inherit; - padding: var(--rz-numeric-input-padding); + padding-block: var(--rz-numeric-input-padding-block); + padding-inline: var(--rz-numeric-input-padding-inline); outline: none; } -.rz-spinner input[type=number]::-webkit-inner-spin-button, .rz-spinner input[type=number]::-webkit-outer-spin-button, -.rz-spinner input[type=text]::-webkit-inner-spin-button, -.rz-spinner input[type=text]::-webkit-outer-spin-button { +.rz-numeric input[type=number]::-webkit-inner-spin-button, .rz-numeric input[type=number]::-webkit-outer-spin-button, +.rz-numeric input[type=text]::-webkit-inner-spin-button, +.rz-numeric input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -.rz-spinner.rz-state-disabled .rz-spinner-button { +.rz-numeric.rz-state-disabled .rz-numeric-button { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); } -.rz-spinner.rz-state-disabled .rz-spinner-button:active, .rz-spinner.rz-state-disabled .rz-spinner-button:hover { +.rz-numeric.rz-state-disabled .rz-numeric-button:active, .rz-numeric.rz-state-disabled .rz-numeric-button:hover { background-color: var(--rz-numeric-button-disabled-background-color); color: var(--rz-numeric-button-disabled-color); background-image: none; @@ -18231,9 +12284,9 @@ a:focus-visible .rz-fieldset-toggler { cursor: initial; } -.rz-spinner-button { +.rz-numeric-button { position: absolute; - right: var(--rz-numeric-button-offset); + inset-inline-end: var(--rz-numeric-button-offset); padding: 0; width: var(--rz-numeric-button-width); height: var(--rz-numeric-button-height); @@ -18241,49 +12294,30 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-numeric-button-background-color); color: var(--rz-numeric-button-color); } -.rz-spinner-button:hover { +.rz-numeric-button:hover { background-color: var(--rz-numeric-button-background-color); } -.rz-spinner-button .rzi { +.rz-numeric-button .rzi { font-size: var(--rz-numeric-button-height); vertical-align: top; } -.rz-spinner-button .rzi-caret-up:before { +.rz-numeric-button .rzi-caret-up:before { content: "expand_less"; } -.rz-spinner-button .rzi-caret-down:before { +.rz-numeric-button .rzi-caret-down:before { content: "expand_more"; } -.rz-spinner-up { - top: var(--rz-numeric-button-offset); -} - -.rz-spinner-down { - bottom: var(--rz-numeric-button-offset); +.rz-numeric-up { + inset-block-start: var(--rz-numeric-button-offset); } -:root { - --rz-upload-button-bar-background-color: var(--rz-base-100); - --rz-upload-button-bar-padding: 0.5rem; - --rz-upload-button-bar-border-radius: var(--rz-border-radius); - --rz-upload-files-background-color: var(--rz-base-background-color); - --rz-upload-files-padding: 0.5rem 0; - --rz-upload-files-remove-background-color: var(--rz-base-300); - --rz-upload-files-remove-color: var(--rz-text-color); - --rz-upload-files-margin: 0 0.5rem; - --rz-upload-choose-background-color: var(--rz-secondary-lighter); - --rz-upload-choose-color: var(--rz-on-secondary-lighter); - --rz-upload-choose-hover-background-color: var(--rz-secondary-light); - --rz-upload-choose-hover-color: var(--rz-on-secondary-light); - --rz-upload-choose-active-background-color: var(--rz-secondary-dark); - --rz-upload-choose-active-color: var(--rz-on-secondary-dark); - --rz-upload-cancel-background-color: var(--rz-base-300); - --rz-upload-cancel-color: var(--rz-text-color); - --rz-upload-button-background-color: var(--rz-primary); +.rz-numeric-down { + inset-block-end: var(--rz-numeric-button-offset); } .rz-fileupload { + box-sizing: border-box; display: inline-block; } .rz-fileupload .rz-button { @@ -18370,101 +12404,6 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-upload-files-padding); } -:root { - --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-200), 0 -1px 0 0 var(--rz-base-200); - --rz-grid-cell-border: var(--rz-border-normal); - --rz-grid-right-cell-border: var(--rz-border-normal); - --rz-grid-bottom-cell-border: var(--rz-border-normal); - --rz-grid-cell-padding: 0.5rem; - --rz-grid-cell-color: var(--rz-text-color); - --rz-grid-cell-font-size: var(--rz-body-font-size); - --rz-grid-cell-line-height: var(--rz-body-line-height); - --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); - --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); - --rz-grid-cell-focus-outline: var(--rz-outline-focus); - --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-grid-hover-background-color: var(--rz-primary-lighter); - --rz-grid-hover-color: var(--rz-on-primary-lighter); - --rz-grid-focus-outline: var(--rz-outline-focus); - --rz-grid-focus-outline-offset: var(--rz-outline-offset); - --rz-grid-selected-background-color: rgba(114, 152, 248, 0.16); - --rz-grid-selected-color: var(--rz-on-primary-lighter); - --rz-grid-toolbar-background-color: var(--rz-base-background-color); - --rz-grid-header-cell-border: var(--rz-border-normal); - --rz-grid-header-cell-border-bottom: var(--rz-border-normal); - --rz-grid-header-background-color: var(--rz-base-100); - --rz-grid-header-font-size: 0.875rem; - --rz-grid-header-line-height: 1rem; - --rz-grid-header-font-weight: 600; - --rz-grid-header-text-transform: none; - --rz-grid-header-color: var(--rz-text-title-color); - --rz-grid-header-cell-padding: 0.625rem 0; - --rz-grid-header-title-padding: 0 0 0 0.5rem; - --rz-grid-header-sorted-background-color: var(--rz-base-100); - --rz-grid-header-padding: 1rem; - --rz-grid-foot-cell-color: var(--rz-text-title-color); - --rz-grid-foot-background-color: var(--rz-base-200); - --rz-grid-filter-background-color: var(--rz-base-100); - --rz-grid-filter-padding: 0.5rem; - --rz-grid-filter-margin: 0; - --rz-grid-filter-border: none; - --rz-grid-filter-font-size: var(--rz-body-font-size); - --rz-grid-filter-icon-width: var(--rz-icon-size); - --rz-grid-filter-icon-height: var(--rz-icon-size); - --rz-grid-filter-icon-margin: 0 0.25rem 0 0; - --rz-grid-filter-icon-font-size: var(--rz-icon-size); - --rz-grid-filter-color: var(--rz-text-disabled-color); - --rz-grid-filter-focus-color: var(--rz-text-title-color); - --rz-grid-filter-gap: 1rem; - --rz-grid-filter-buttons-padding: 1rem; - --rz-grid-filter-buttons-border: var(--rz-border-normal); - --rz-grid-filter-buttons-background-color: var(--rz-white); - --rz-grid-clear-filter-button-background-color: var(--rz-base-200); - --rz-grid-clear-filter-button-color: var(--rz-text-color); - --rz-grid-clear-filter-button-shadow: inherit; - --rz-grid-apply-filter-button-background-color: var(--rz-primary); - --rz-grid-apply-filter-button-color: var(--rz-on-primary); - --rz-grid-apply-filter-button-shadow: inherit; - --rz-grid-header-filter-icon-margin: 0 0.5rem 0 auto; - --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); - --rz-grid-header-filter-icon-active-color: var(--rz-primary); - --rz-grid-header-filter-icon-font-size: 1rem; - --rz-grid-border: none; - --rz-grid-border-radius: 0; - --rz-grid-sort-icon-width: 1rem; - --rz-grid-sort-icon-height: 1rem; - --rz-grid-sort-icon-color: var(--rz-text-disabled-color); - --rz-grid-shadow: none; - --rz-grid-background-color: var(--rz-base-background-color); - --rz-grid-stripe-background-color: #f7f8fb; - --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); - --rz-grid-column-resizer-width: 0.5rem; - --rz-grid-column-resizer-helper-width: 0.25rem; - --rz-grid-column-resizer-helper-background-color: var(--rz-primary); - --rz-grid-column-icon-width: 2rem; - --rz-grid-column-icon-padding: 0; - --rz-grid-detail-template-border: none; - --rz-grid-detail-template-border-radius: 0; - --rz-grid-detail-template-padding: 0; - --rz-grid-detail-template-background-color: var(--rz-base-100); - --rz-grid-loading-indicator-color: var(--rz-on-primary-lighter); - --rz-grid-loading-indicator-background-color: var(--rz-primary-lighter); - --rz-grid-frozen-cell-border: var(--rz-border-normal); - --rz-grid-frozen-cell-background-color: var(--rz-base-100); - --rz-grid-state-transition: var(--rz-transition-all); - --rz-grid-group-header-padding: 0.5rem; - --rz-grid-group-header-item-background-color: var(--rz-base-background-color); - --rz-grid-group-header-item-padding: 0.5rem; - --rz-grid-group-header-item-margin: 0 0.5rem 0.5rem 0; - --rz-grid-group-header-item-border: var(--rz-border-normal); - --rz-grid-group-header-item-border-radius: var(--rz-border-radius); - --rz-grid-group-header-items-margin: 0 0 -0.5rem 0; - --rz-column-drag-handle-color: var(--rz-text-disabled-color); - --rz-column-drag-handle-hover-color: var(--rz-text-title-color); - --rz-column-drag-handle-margin: 0 auto 0 0; - --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); -} - .rz-datatable { position: relative; box-shadow: var(--rz-grid-shadow); @@ -18488,10 +12427,14 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable .rzi-chevron-circle-right { vertical-align: top; + /* Right-to-left arrow icons */ } .rz-datatable .rzi-chevron-circle-right:before { content: "arrow_right"; } +*[dir=rtl] .rz-datatable .rzi-chevron-circle-right { + transform: rotate(180deg); +} .rz-datatable .rzi-chevron-circle-down { vertical-align: top; } @@ -18535,8 +12478,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; cursor: col-resize; width: var(--rz-grid-column-resizer-width); @@ -18544,8 +12487,8 @@ a:focus-visible .rz-fieldset-toggler { .rz-column-resizer:after { content: ""; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; height: 100%; width: var(--rz-grid-column-resizer-helper-width); background-color: transparent; @@ -18571,11 +12514,12 @@ a:focus-visible .rz-fieldset-toggler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-align: inherit; border-bottom: var(--rz-grid-header-cell-border-bottom); } .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) { @@ -18595,13 +12539,14 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table thead th .rz-column-title { display: inline-flex; flex: auto; - width: 100%; align-items: center; + gap: 0.25rem; + width: 100%; font-size: var(--rz-grid-header-font-size); line-height: var(--rz-grid-header-line-height); text-transform: var(--rz-grid-header-text-transform); color: var(--rz-grid-header-color); - padding: var(--rz-grid-header-title-padding); + padding-inline: var(--rz-grid-header-title-padding-inline); font-weight: var(--rz-grid-header-font-weight); white-space: nowrap; overflow: hidden; @@ -18621,11 +12566,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-datatable-thead th.rz-text-align-center .rz-column-title, .rz-grid-table thead th.rz-text-align-center .rz-column-title { justify-content: center; - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-thead th.rz-text-align-center.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-center.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th.rz-text-align-right .rz-column-title, .rz-grid-table thead th.rz-text-align-right .rz-column-title { @@ -18633,11 +12578,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-thead th.rz-text-align-right.rz-sortable-column .rz-column-title, .rz-grid-table thead th.rz-text-align-right.rz-sortable-column .rz-column-title { - padding-left: var(--rz-grid-sort-icon-width); + padding-inline-start: var(--rz-grid-sort-icon-width); } .rz-datatable-thead th .rz-column-drag + .rz-column-title, .rz-grid-table thead th .rz-column-drag + .rz-column-title { - padding-left: 0; + padding-inline-start: 0; } .rz-datatable-tfoot td, .rz-grid-table tfoot td { @@ -18651,10 +12596,10 @@ a:focus-visible .rz-fieldset-toggler { text-overflow: ellipsis; } .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-tfoot td.rz-composite-cell, .rz-grid-table tfoot td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-scrollable-header { @@ -18670,7 +12615,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-left-radius: var(--rz-border-radius); } -.rz-has-paginator .rz-datatable-scrollable-body { +.rz-has-pager .rz-datatable-scrollable-body { border-radius: 0; } @@ -18722,7 +12667,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-header-cell-border); } .rz-grid-table-composite .rz-datatable-thead th.rz-composite-cell, .rz-grid-table-composite.rz-grid-table thead th.rz-composite-cell { - border-right: var(--rz-grid-header-cell-border); + border-inline-end: var(--rz-grid-header-cell-border); } .rz-datatable-data td, @@ -18732,11 +12677,11 @@ a:focus-visible .rz-fieldset-toggler { } .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td.rz-composite-cell, .rz-grid-table td.rz-composite-cell { - border-right: var(--rz-grid-right-cell-border); + border-inline-end: var(--rz-grid-right-cell-border); } .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data { @@ -18759,13 +12704,17 @@ a:focus-visible .rz-fieldset-toggler { align-items: center; gap: 0.25rem; } +.rz-datatable-data td .rz-column-footer, +.rz-grid-table td .rz-column-footer { + color: var(--rz-grid-foot-cell-color); +} .rz-datatable-data tr td:first-child, .rz-grid-table tr td:first-child { - border-left: none; + border-inline-start: none; } .rz-datatable-data tr td:last-child:not(.rz-composite-cell), .rz-grid-table tr td:last-child:not(.rz-composite-cell) { - border-right: none; + border-inline-end: none; } .rz-datatable-data tr:first-child > td, .rz-grid-table tr:first-child > td { @@ -18786,21 +12735,21 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-grid-table.rz-grid-gridlines-none > thead > tr > th, .rz-grid-table.rz-grid-gridlines-none > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-none > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-none > tfoot > tr > td { border-bottom: none; - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th, .rz-grid-table.rz-grid-gridlines-horizontal > thead > tr > th.rz-composite-cell, .rz-grid-table.rz-grid-gridlines-horizontal > tbody > tr > td, .rz-grid-table.rz-grid-gridlines-horizontal > tfoot > tr > td { border-bottom: var(--rz-grid-cell-border); - border-right: none; + border-inline-end: none; } .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th, .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell, @@ -18812,7 +12761,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-table.rz-grid-gridlines-vertical > thead > tr > th.rz-composite-cell:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tbody > tr > td:not(:last-child), .rz-grid-table.rz-grid-gridlines-vertical > tfoot > tr > td:not(:last-child) { - border-right: var(--rz-grid-cell-border); + border-inline-end: var(--rz-grid-cell-border); } .rz-datatable-reflow tbody td > .rz-column-title { @@ -18858,7 +12807,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter { padding: var(--rz-grid-filter-padding); margin: var(--rz-grid-filter-margin); - background-color: var(--rz-grid-filter-background-color); border-top: var(--rz-grid-filter-border); font-size: var(--rz-grid-filter-font-size); font-weight: normal; @@ -18872,14 +12820,14 @@ a:focus-visible .rz-fieldset-toggler { width: var(--rz-grid-filter-icon-width); height: var(--rz-grid-filter-icon-height); font-size: var(--rz-grid-filter-icon-font-size); - margin: var(--rz-grid-filter-icon-margin); + margin-inline: var(--rz-grid-filter-icon-margin-inline); color: var(--rz-grid-filter-color); } .rz-cell-filter .rz-cell-filter-label > .rzi.rz-cell-filter-clear { - margin-left: auto; + margin-inline-start: auto; } .rz-cell-filter .rz-cell-filter-label .rz-current-filter { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .rz-selectable tbody tr.rz-data-row td, @@ -18981,10 +12929,6 @@ a:focus-visible .rz-fieldset-toggler { .rz-cell-filter-content .rz-filter-button .rzi { display: none; } - .rz-cell-filter-content .rz-cell-filter-label { - position: relative; - min-width: 4.5rem; - } .rz-cell-filter-content .rz-filter-button { position: absolute; z-index: 1; @@ -18998,28 +12942,15 @@ a:focus-visible .rz-fieldset-toggler { border-end-start-radius: calc(var(--rz-input-border-radius) - var(--rz-border-width)); border-end-end-radius: 0; } - .rz-cell-filter-content .rz-textbox, - .rz-cell-filter-content .rz-inputtext { + .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label { + position: relative; + min-width: 4.5rem; + } + .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox, + .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext { text-indent: 2.25rem; } } -.rz-date-filter { - display: flex; - align-items: stretch; - background-color: var(--rz-grid-filter-background-color); - gap: var(--rz-grid-filter-gap); - padding: var(--rz-grid-filter-gap); -} -.rz-date-filter .rz-listbox { - min-width: 10rem; -} -.rz-date-filter .rz-listbox .rz-listbox-item { - font-size: 0.875rem; -} -.rz-date-filter .rz-calendar-inline { - border-radius: var(--rz-border-radius); -} - .rz-expanded-row > td { border-bottom: none; background-color: var(--rz-grid-hover-background-color); @@ -19049,31 +12980,9 @@ a:focus-visible .rz-fieldset-toggler { border-bottom: var(--rz-grid-border); } -.rz-date-filter-buttons { - display: flex; - justify-content: space-between; - padding: var(--rz-grid-filter-buttons-padding); - background-color: var(--rz-grid-filter-buttons-background-color); - border-top: var(--rz-grid-filter-buttons-border); -} -.rz-clear-filter { - background-color: var(--rz-grid-clear-filter-button-background-color); - color: var(--rz-grid-clear-filter-button-color); - box-shadow: var(--rz-grid-clear-filter-button-shadow); -} - -.rz-apply-filter { - background-color: var(--rz-grid-apply-filter-button-background-color); - color: var(--rz-grid-apply-filter-button-color); - box-shadow: var(--rz-grid-apply-filter-button-shadow); -} - .rz-datatable-loading { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--rz-grid-loading-indicator-background-color); z-index: 2; } @@ -19132,35 +13041,74 @@ a:focus-visible .rz-fieldset-toggler { display: block; } } -.rz-grid-filter { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 1rem; +.rz-grid-filter { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; +} +.rz-grid-filter .rz-dropdown, +.rz-grid-filter .rz-numeric, +.rz-grid-filter .rz-textbox, +.rz-grid-filter .rz-grid-filter-label { + display: block; + width: 100%; +} +.rz-grid-filter .rz-grid-filter-label { + font-weight: 600; +} + +.rz-grid-date-filter { + width: 576px; +} + +.rz-date-filter { + display: flex; + align-items: stretch; + background-color: var(--rz-grid-filter-background-color); + gap: var(--rz-grid-filter-gap); + padding: var(--rz-grid-filter-gap); +} +.rz-date-filter .rz-listbox { + min-width: 11em; +} +.rz-date-filter .rz-listbox .rz-listbox-item { + font-size: 0.875rem; } -.rz-grid-filter .rz-dropdown, -.rz-grid-filter .rz-spinner, -.rz-grid-filter .rz-textbox, -.rz-grid-filter .rz-grid-filter-label { - display: block; - width: 100%; +.rz-date-filter .rz-datepicker-inline { + border-radius: var(--rz-border-radius); } -.rz-grid-filter .rz-grid-filter-label { - font-weight: 600; +.rz-date-filter .rz-datepicker-inline table { + width: 100%; } .rz-grid-filter-buttons { display: flex; justify-content: space-between; padding: var(--rz-grid-filter-buttons-padding); + background-color: var(--rz-grid-filter-buttons-background-color); + border-top: var(--rz-grid-filter-buttons-border); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-clear-filter { + background-color: var(--rz-grid-clear-filter-button-background-color); + color: var(--rz-grid-clear-filter-button-color); + box-shadow: var(--rz-grid-clear-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); +} +.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter { + background-color: var(--rz-grid-apply-filter-button-background-color); + color: var(--rz-grid-apply-filter-button-color); + box-shadow: var(--rz-grid-apply-filter-button-shadow); + padding-inline: var(--rz-grid-filter-button-padding-inline); } .rz-grid-filter-icon { justify-self: flex-end; color: var(--rz-grid-filter-color); - margin: var(--rz-grid-header-filter-icon-margin); + margin-inline: var(--rz-grid-header-filter-icon-margin-inline); font-size: var(--rz-grid-header-filter-icon-font-size); transition: var(--rz-grid-state-transition); + font-weight: 400; } .rz-grid-filter-icon:hover { cursor: pointer; @@ -19169,9 +13117,11 @@ a:focus-visible .rz-fieldset-toggler { .rz-grid-filter-active { color: var(--rz-grid-header-filter-icon-active-color) !important; + --rz-icon-fill: 1; } .rz-data-grid { + box-sizing: border-box; display: flex; flex-direction: column; } @@ -19213,16 +13163,22 @@ a:focus-visible .rz-fieldset-toggler { } .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-right: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end { + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.12); - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; +} +*[dir=rtl] .rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end { + box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12); } .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner { - border-right: var(--rz-grid-frozen-cell-border) !important; - border-left: var(--rz-grid-frozen-cell-border) !important; + border-inline-end: var(--rz-grid-frozen-cell-border) !important; + border-inline-start: var(--rz-grid-frozen-cell-border) !important; } .rz-grid-table tfoot, .rz-grid-table tfoot td { @@ -19255,7 +13211,7 @@ a:focus-visible .rz-fieldset-toggler { font-size: inherit; color: var(--rz-column-drag-handle-color); transition: var(--rz-grid-state-transition); - margin: var(--rz-column-drag-handle-margin); + margin-inline: var(--rz-column-drag-handle-margin-inline); } .rz-column-drag:after { content: "more_vert"; @@ -19306,26 +13262,30 @@ a:focus-visible .rz-fieldset-toggler { } .rz-group-header { - background-color: var(--rz-grid-header-background-color); - padding: var(--rz-grid-group-header-padding); - border-bottom: var(--rz-grid-bottom-cell-border); display: flex; justify-content: space-between; align-items: center; + gap: var(--rz-grid-group-header-gap); + padding: var(--rz-grid-group-header-padding); + background-color: var(--rz-grid-header-background-color); + border-bottom: var(--rz-grid-bottom-cell-border); } .rz-group-header-items { - margin: var(--rz-grid-group-header-items-margin); + display: flex; + flex-wrap: wrap; + gap: var(--rz-grid-group-header-gap); } .rz-group-header-item { display: flex; align-items: center; + color: var(--rz-grid-group-header-item-color); background-color: var(--rz-grid-group-header-item-background-color); border: var(--rz-grid-group-header-item-border); border-radius: var(--rz-grid-group-header-item-border-radius); - padding: var(--rz-grid-group-header-item-padding); - margin: var(--rz-grid-group-header-item-margin); + padding-block: var(--rz-grid-group-header-item-padding-block); + padding-inline: var(--rz-grid-group-header-item-padding-inline); width: fit-content; float: left; } @@ -19338,7 +13298,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-group-header-item-title { font-size: var(--rz-grid-header-font-size); font-weight: var(--rz-grid-header-font-weight); - margin-right: 0.5rem; + margin-inline: var(--rz-grid-group-header-item-title-margin-inline); } .rz-group-header-drop { @@ -19358,7 +13318,7 @@ a:focus-visible .rz-fieldset-toggler { .rz-filter-button { flex: none; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-data-grid.rz-density-compact { @@ -19366,312 +13326,272 @@ a:focus-visible .rz-fieldset-toggler { --rz-grid-cell-padding: 0.25rem 0.5rem; --rz-grid-header-cell-padding: 0.25rem 0; --rz-grid-header-padding: 0.25rem 1rem; - --rz-grid-header-title-padding: 0 0 0 0.5rem; + --rz-grid-header-title-padding-inline: 0.5rem 0; --rz-grid-filter-padding: 0.25rem 0.5rem; --rz-grid-group-header-padding: 0.25rem; - --rz-grid-group-header-items-margin: 0 0 -0.25rem 0; - --rz-grid-group-header-item-padding: 0.125rem 0.25rem 0.125rem 0.5rem; - --rz-grid-group-header-item-margin: 0 0.25rem 0.25rem 0; + --rz-grid-group-header-gap: 0.25rem; + --rz-grid-group-header-item-padding-block: 0.125rem ; + --rz-grid-group-header-item-padding-inline: 0.5rem 0.25rem; + --rz-grid-group-header-item-title-margin-inline: 0 0.25rem; --rz-dialog-close-font-size: 1rem; } -.rz-data-grid.rz-density-compact .rz-group-header-item-title { - margin-right: 0.25rem; -} -:root { - --rz-paginator-background-color: transparent; - --rz-paginator-padding: 0.5rem; - --rz-paginator-border: none; - --rz-paginator-button-border-radius: var(--rz-border-radius); - --rz-paginator-numeric-button-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-color: var(--rz-text-color); - --rz-paginator-numeric-button-border: 1px solid transparent; - --rz-paginator-numeric-button-hover-background-color: var(--rz-base-200); - --rz-paginator-numeric-button-hover-color: var(--rz-text-color); - --rz-paginator-numeric-button-margin: 0 0.25rem; - --rz-paginator-numeric-button-padding: 0.4375rem; - --rz-paginator-numeric-button-selected-background-color: var(--rz-primary-lighter); - --rz-paginator-numeric-button-selected-color: var(--rz-on-primary-lighter); - --rz-paginator-numeric-button-selected-border: 1px solid transparent; - --rz-paginator-numeric-button-selected-padding: 0.4375rem; - --rz-paginator-numeric-button-min-width: 2.25rem; - --rz-paginator-back-button-background-color: var(--rz-base-200); - --rz-paginator-back-button-color: var(--rz-text-color); - --rz-paginator-back-button-hover-background-color: var(--rz-base-200); - --rz-paginator-back-button-hover-color: var(--rz-text-color); - --rz-paginator-first-button-margin: 0 0.5rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.5rem; - --rz-paginator-next-button-background-color: var(--rz-base-200); - --rz-paginator-next-button-color: var(--rz-text-color); - --rz-paginator-next-button-hover-background-color: var(--rz-base-200); - --rz-paginator-next-button-hover-color: var(--rz-text-color); - --rz-paginator-dropdown-width: 80px; - --rz-paginator-dropdown-margin: 0 0 0 0.5rem; - --rz-paginator-summary-padding: 0 1.25rem 0 0; - --rz-paginator-summary-font-size: var(--rz-body-font-size); - --rz-paginator-summary-color: var(--rz-text-tertiary-color); -} - -.rz-paginator { +.rz-pager { + box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + gap: var(--rz-pager-gap); flex-wrap: wrap; - background-color: var(--rz-paginator-background-color); - padding: var(--rz-paginator-padding); + background-color: var(--rz-pager-background-color); + padding: var(--rz-pager-padding); + /* Right-to-left arrow icons */ } -.rz-paginator:focus { +.rz-pager:focus { outline: var(--rz-outline-normal); } -.rz-paginator:focus-visible .rz-paginator-element.rz-state-focused, -.rz-paginator:focus-visible .rz-paginator-page.rz-state-focused { +.rz-pager:focus-visible .rz-pager-element.rz-state-focused, +.rz-pager:focus-visible .rz-pager-page.rz-state-focused { outline: var(--rz-outline-focus); outline-offset: var(--rz-outline-offset); } -.rz-paginator.rz-align-right { - justify-content: flex-end; +.rz-pager.rz-align-right { + justify-content: right; } -.rz-paginator.rz-align-left { - justify-content: flex-start; +.rz-pager.rz-align-left { + justify-content: left; } -.rz-paginator.rz-align-center { +.rz-pager.rz-align-center { justify-content: center; } -.rz-paginator .rzi-step-backward:before { +.rz-pager .rzi-step-backward:before { content: "first_page"; } -.rz-paginator .rzi-caret-left:before { +.rz-pager .rzi-caret-left:before { content: "navigate_before"; } -.rz-paginator .rzi-caret-right:before { +.rz-pager .rzi-caret-right:before { content: "navigate_next"; } -.rz-paginator .rzi-step-forward:before { +.rz-pager .rzi-step-forward:before { content: "last_page"; } -.rz-paginator .rz-dropdown { +*[dir=rtl] .rz-pager .rz-pager-icon { + transform: rotate(180deg); +} +.rz-pager .rz-dropdown { order: 2; - width: var(--rz-paginator-dropdown-width); - margin-left: 1rem; + width: var(--rz-pager-dropdown-width); overflow: visible; } -.rz-paginator .rz-pagesize-text { +.rz-pager .rz-pagesize-text { order: 2; - margin: var(--rz-paginator-last-button-margin); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); } -.rz-paginator .rz-dropdown-items-wrapper { - width: var(--rz-paginator-dropdown-width-4px); +.rz-pager .rz-dropdown-items-wrapper { + width: var(--rz-pager-dropdown-width-4px); } -.rz-paginator-element:hover, -.rz-paginator-page:hover { - background-color: var(--rz-paginator-numeric-button-hover-background-color); - color: var(--rz-paginator-numeric-button-hover-color); +.rz-pager-element:hover, +.rz-pager-page:hover { + background-color: var(--rz-pager-numeric-button-hover-background-color); + color: var(--rz-pager-numeric-button-hover-color); } -.rz-paginator-bottom { - border-top: var(--rz-paginator-border); +.rz-pager-bottom { + border-top: var(--rz-pager-border); } -.rz-paginator-pages { +.rz-pager-pages { display: inline-flex; + gap: var(--rz-pager-gap); margin: 0 0.5rem; } -.rz-paginator-element { +.rz-pager-element { letter-spacing: 0; } -.rz-paginator-first { - margin: var(--rz-paginator-first-button-margin); -} -.rz-align-center .rz-paginator-first { - margin-left: auto; +.rz-align-center .rz-pager-first { + margin-inline-start: auto; } -.rz-paginator-prev { - margin-right: auto; +.rz-pager-prev { + margin-inline-end: auto; } -.rz-align-left .rz-paginator-prev, .rz-align-right .rz-paginator-prev, .rz-align-center .rz-paginator-prev { - margin: var(--rz-paginator-first-button-margin); +.rz-align-left .rz-pager-prev, .rz-align-right .rz-pager-prev, .rz-align-center .rz-pager-prev { + margin-inline-end: 0; } -.rz-paginator-next { - margin-left: auto; +.rz-pager-next { + margin-inline-start: auto; } -.rz-align-left .rz-paginator-next, .rz-align-right .rz-paginator-next, .rz-align-center .rz-paginator-next { - margin: var(--rz-paginator-last-button-margin); +.rz-align-left .rz-pager-next, .rz-align-right .rz-pager-next, .rz-align-center .rz-pager-next { + margin-inline-start: 0; } -.rz-paginator-last { - margin: var(--rz-paginator-last-button-margin); -} -.rz-align-center .rz-paginator-last { - margin-right: auto; +.rz-align-center .rz-pager-last { + margin-inline-end: auto; } -.rz-paginator-first, -.rz-paginator-prev { - background-color: var(--rz-paginator-back-button-background-color); - color: var(--rz-paginator-back-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-first, +.rz-pager-prev { + background-color: var(--rz-pager-back-button-background-color); + color: var(--rz-pager-back-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-element:hover { +.rz-pager-element:hover { text-decoration: none; } -.rz-paginator-last, -.rz-paginator-next { - background-color: var(--rz-paginator-next-button-background-color); - color: var(--rz-paginator-next-button-color); - border-radius: var(--rz-paginator-button-border-radius); +.rz-pager-last, +.rz-pager-next { + background-color: var(--rz-pager-next-button-background-color); + color: var(--rz-pager-next-button-color); + border-radius: var(--rz-pager-button-border-radius); } -.rz-paginator-page { +.rz-pager-page { display: inline-block; - min-width: var(--rz-paginator-numeric-button-min-width); + min-width: var(--rz-pager-numeric-button-min-width); text-align: center; - margin: var(--rz-paginator-numeric-button-margin); - background-color: var(--rz-paginator-numeric-button-background-color); - border: var(--rz-paginator-numeric-button-border); - border-radius: var(--rz-paginator-button-border-radius); - padding: var(--rz-paginator-numeric-button-padding); - color: var(--rz-paginator-numeric-button-color); -} -.rz-paginator-page.rz-state-active { - background-color: var(--rz-paginator-numeric-button-selected-background-color); - color: var(--rz-paginator-numeric-button-selected-color); - border: var(--rz-paginator-numeric-button-selected-border); - padding: var(--rz-paginator-numeric-button-selected-padding); -} - -.rz-paginator-summary { - padding: var(--rz-paginator-summary-padding); - font-size: var(--rz-paginator-summary-font-size); - color: var(--rz-paginator-summary-color); -} -.rz-align-right .rz-paginator-summary { + gap: var(--rz-pager-gap); + background-color: var(--rz-pager-numeric-button-background-color); + border: var(--rz-pager-numeric-button-border); + border-radius: var(--rz-pager-button-border-radius); + padding: var(--rz-pager-numeric-button-padding); + color: var(--rz-pager-numeric-button-color); +} +.rz-pager-page.rz-state-active { + background-color: var(--rz-pager-numeric-button-selected-background-color); + color: var(--rz-pager-numeric-button-selected-color); + border: var(--rz-pager-numeric-button-selected-border); + padding: var(--rz-pager-numeric-button-selected-padding); +} + +.rz-pager-summary { + padding-inline-end: var(--rz-pager-summary-padding); + font-size: var(--rz-pager-summary-font-size); + color: var(--rz-pager-summary-color); +} +.rz-align-right .rz-pager-summary { margin-right: auto; } -.rz-align-left .rz-paginator-summary { +.rz-align-left .rz-pager-summary { order: 2; margin-left: auto; padding: 0; } +*[dir=rtl] .rz-align-right .rz-pager-summary { + order: 1; +} +*[dir=rtl] .rz-align-left .rz-pager-summary { + order: 0; +} @media (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } @container rz-lookup-panel (max-width: 768px) { - .rz-paginator-page:not(.rz-state-active) { + .rz-pager-page:not(.rz-state-active) { display: none; } - .rz-paginator { + .rz-pager { display: grid; grid-column-gap: 0.5rem; grid-row-gap: 1rem; grid-template-columns: repeat(9, 1fr); text-align: center; } - .rz-paginator .rz-dropdown { + .rz-pager .rz-dropdown { grid-column: 1/4; width: auto; margin: 0 !important; text-align: left; } - .rz-paginator .rz-pagesize-text { + .rz-pager .rz-pagesize-text { grid-column: 4/10; margin: 0 !important; text-align: left; } - .rz-paginator-summary { + .rz-pager-summary { grid-column: 1/10; padding: 0 !important; text-align: left; } - .rz-paginator-first { + .rz-pager-first { grid-column: 1/3; margin: 0 !important; } - .rz-paginator-prev { + .rz-pager-prev { grid-column: 3/5; margin: 0 !important; } - .rz-paginator-pages { + .rz-pager-pages { grid-column: 5/6; margin: 0 !important; } - .rz-paginator-next { + .rz-pager-next { grid-column: 6/8; margin: 0 !important; } - .rz-paginator-last { + .rz-pager-last { grid-column: 8/10; margin: 0 !important; } } -.rz-paginator.rz-density-compact { - --rz-paginator-padding: 0.25rem; - --rz-paginator-numeric-button-margin: 0 0.125rem; - --rz-paginator-first-button-margin: 0 0.25rem 0 0; - --rz-paginator-last-button-margin: 0 0 0 0.25rem; - --rz-paginator-dropdown-margin: 0 0 0 0.25rem; - --rz-paginator-summary-padding: 0 0.5rem 0 0; -} -:root { - --rz-overlay-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-overlay-border: var(--rz-border-normal); - --rz-overlay-background-color: var(--rz-base-100); +.rz-pager.rz-density-compact { + --rz-pager-padding: 0.25rem; + --rz-pager-gap: 0.25rem; + --rz-pager-summary-padding: 0.5rem ; } - .rz-overlaypanel { position: absolute; overflow: hidden; @@ -19681,24 +13601,8 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-overlay-background-color); } -:root { - --rz-tree-background-color: var(--rz-base-background-color); - --rz-tree-node-padding: 0.25rem; - --rz-tree-node-selected-background-color: var(--rz-primary); - --rz-tree-node-selected-color: var(--rz-on-secondary); - --rz-tree-node-selected-border-radius: var(--rz-border-radius); - --rz-tree-node-margin: 1px 0; - --rz-tree-node-hover-background-color: var(--rz-primary-lighter); - --rz-tree-node-hover-color: var(--rz-primary); - --rz-tree-node-focus-outline: var(--rz-outline-focus); - --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tree-node-toggle-width: 1rem; - --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); - --rz-tree-node-toggle-hover-color: var(--rz-text-title-color); - --rz-tree-transition: var(--rz-transition-all), width 0, height 0; -} - .rz-tree { + box-sizing: border-box; display: inline-block; overflow: auto; } @@ -19715,12 +13619,12 @@ a:focus-visible .rz-fieldset-toggler { } .rz-treenode { - padding-left: var(--rz-tree-node-toggle-width); + padding-inline-start: var(--rz-tree-node-toggle-width); } .rz-tree-toggler { cursor: pointer; - margin-left: calc(var(--rz-tree-node-toggle-width) * -1); + margin-inline-start: calc(var(--rz-tree-node-toggle-width) * -1); width: var(--rz-tree-node-toggle-width); height: 1.5rem; font-size: var(--rz-icon-size); @@ -19729,13 +13633,19 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-tree-node-toggle-color); transition: var(--rz-tree-transition); } +.rz-tree-toggler.rzi-caret-right { + /* Right-to-left arrow icons */ +} .rz-tree-toggler.rzi-caret-right:before { content: "arrow_right"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; +} +*[dir=rtl] .rz-tree-toggler.rzi-caret-right { + transform: rotate(180deg); } .rz-tree-toggler.rzi-caret-down:before { content: "arrow_drop_down"; - margin-left: -0.125rem; + margin-inline-start: -0.125rem; } .rz-tree-toggler:hover { color: var(--rz-tree-node-toggle-hover-color); @@ -19745,15 +13655,17 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; cursor: pointer; - margin: var(--rz-tree-node-margin); + margin-block: var(--rz-tree-node-margin-block); + margin-inline: var(--rz-tree-node-margin-inline); } .rz-treenode-content .rz-treenode-label { display: flex; align-items: center; - padding: var(--rz-tree-node-padding); + padding-block: var(--rz-tree-node-padding-block); + padding-inline: var(--rz-tree-node-padding-inline); } .rz-treenode-content .rz-treenode-label .rzi:first-child { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree:focus-visible .rz-treenode-content.rz-state-focused .rz-treenode-label { outline: var(--rz-tree-node-focus-outline); @@ -19765,7 +13677,7 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-tree-node-selected-border-radius); } .rz-treenode-content .rz-chkbox { - margin-right: 0.25rem; + margin-inline-end: 0.25rem; } .rz-tree-container, @@ -19784,25 +13696,11 @@ a:focus-visible .rz-fieldset-toggler { background-color: var(--rz-tree-node-selected-background-color); } -:root { - --rz-datalist-background-color: transparent; - --rz-datalist-shadow: none; - --rz-datalist-padding: 0.5rem; - --rz-datalist-border: var(--rz-border-base-200); - --rz-datalist-border-radius: var(--rz-border-radius); - --rz-datalist-item-shadow: none; - --rz-datalist-item-border: var(--rz-border-base-200); - --rz-datalist-item-vertical-margin: 0.5rem; - --rz-datalist-item-horizontal-margin: 0.5rem; - --rz-datalist-item-padding: 1rem; - --rz-datalist-item-background-color: var(--rz-base-background-color); -} - .rz-datalist, .rz-datagrid { background-color: var(--rz-datalist-background-color); - border-bottom-right-radius: var(--rz-datalist-border-radius); - border-bottom-left-radius: var(--rz-datalist-border-radius); + border-end-start-radius: var(--rz-datalist-border-radius); + border-end-end-radius: var(--rz-datalist-border-radius); box-shadow: var(--rz-datalist-shadow); border: var(--rz-datalist-border); } @@ -19821,13 +13719,14 @@ a:focus-visible .rz-fieldset-toggler { margin: 0; } .rz-datalist-data > li { - margin: var(--rz-datalist-item-vertical-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-data > li:first-child { - margin-top: 0; + margin-block-start: 0; } .rz-datalist-data > li:last-child { - margin-bottom: 0; + margin-block-end: 0; } .rz-g { @@ -19836,24 +13735,17 @@ a:focus-visible .rz-fieldset-toggler { } .rz-g > div { flex: auto; - margin: var(--rz-datalist-item-vertical-margin) var(--rz-datalist-item-horizontal-margin); + margin-block: var(--rz-datalist-item-margin-block); + margin-inline: var(--rz-datalist-item-margin-inline); } .rz-datalist-content { + box-sizing: border-box; position: relative; } -:root { - --rz-datafilter-item-padding-y: 0.25rem; - --rz-datafilter-item-padding-left: 2rem; - --rz-datafilter-item-indentation: 0.25rem; - --rz-datafilter-item-path-width: 1rem; - --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); - --rz-datafilter-item-path-border: var(--rz-border-normal); - --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); -} - .rz-datafilter { + box-sizing: border-box; display: flex; flex-wrap: wrap; column-gap: 0.25rem; @@ -19875,7 +13767,8 @@ a:focus-visible .rz-fieldset-toggler { position: relative; list-style: none; margin: 0; - padding: var(--rz-datafilter-item-padding-y) 0 var(--rz-datafilter-item-padding-y) calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: var(--rz-datafilter-item-padding-block); + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; display: flex; flex-wrap: wrap; gap: 0.25rem; @@ -19886,23 +13779,23 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - top: 0; - bottom: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-left: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item:after { content: ""; position: absolute; background-color: transparent; width: var(--rz-datafilter-item-path-width); - height: calc(var(--rz-datafilter-item-padding-y) + var(--rz-input-height) / 2); - top: 0; - left: calc(var(--rz-datafilter-item-padding-left) / 2); + height: calc(var(--rz-datafilter-item-padding-block) + var(--rz-input-height) / 2); + inset-block-start: 0; + inset-inline-start: calc(var(--rz-datafilter-item-padding-inline-start) / 2); border: 0; - border-bottom: var(--rz-datafilter-item-path-border); - border-left: var(--rz-datafilter-item-path-border); + border-block-end: var(--rz-datafilter-item-path-border); + border-inline-start: var(--rz-datafilter-item-path-border); } .rz-datafilter .rz-datafilter-item .rz-multiselect, .rz-datafilter .rz-datafilter-item .rz-dropdown { @@ -19912,17 +13805,18 @@ a:focus-visible .rz-fieldset-toggler { height: calc(var(--rz-input-height) / 2); } .rz-datafilter .rz-datafilter-bar { - padding: 0 0 0 calc(var(--rz-datafilter-item-padding-left) + var(--rz-datafilter-item-indentation)); + padding-block: 0; + padding-inline: calc(var(--rz-datafilter-item-padding-inline-start) + var(--rz-datafilter-item-indentation)) 0; } .rz-datafilter .rz-datafilter-bar:before { display: none; } .rz-datafilter .rz-datafilter-bar:after { height: calc(var(--rz-input-height) / 2); - border-bottom-left-radius: var(--rz-datafilter-item-path-border-radius); + border-end-start-radius: var(--rz-datafilter-item-path-border-radius); } .rz-datafilter .rz-datafilter-bar .rz-splitbutton { - margin-top: 0.3125rem; + margin-block-start: 0.3125rem; } .rz-datafilter .rz-datafilter-editor { flex: 10rem 4; @@ -19935,70 +13829,8 @@ a:focus-visible .rz-fieldset-toggler { opacity: 1; } -:root { - --rz-scheduler-border: var(--rz-border-normal); - --rz-scheduler-border-color: var(--rz-base-200); - --rz-scheduler-minor-border-color: var(--rz-base-100); - --rz-scheduler-border-radius: var(--rz-border-radius); - --rz-scheduler-shadow: none; - --rz-scheduler-background-color: var(--rz-base-background-color); - --rz-scheduler-color: var(--rz-text-color); - --rz-scheduler-toolbar-padding: 0.5rem; - --rz-scheduler-toolbar-background-color: var(--rz-base-100); - --rz-scheduler-toolbar-title-font-size: 1rem; - --rz-scheduler-toolbar-title-font-weight: 700; - --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); - --rz-scheduler-prev-next-button-background-color: var(--rz-base-200); - --rz-scheduler-prev-next-button-color: var(--rz-text-color); - --rz-scheduler-prev-next-button-padding: 0.5rem; - --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); - --rz-scheduler-prev-button-border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius); - --rz-scheduler-next-button-border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0; - --rz-scheduler-today-button-margin-left: 0.5rem; - --rz-scheduler-today-button-padding: 0.5rem 1rem; - --rz-scheduler-today-button-font-size: 0.75rem; - --rz-scheduler-today-button-text-transform: uppercase; - --rz-scheduler-view-button-border: var(--rz-border-normal); - --rz-scheduler-view-button-color: var(--rz-text-color); - --rz-scheduler-view-button-background-color: transparent; - --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); - --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); - --rz-scheduler-view-selected-border-color: transparent; - --rz-scheduler-header-background-color: var(--rz-base-100); - --rz-scheduler-header-font-size: 0.75rem; - --rz-scheduler-header-font-size-small: 0.5rem; - --rz-scheduler-header-text-transform: uppercase; - --rz-scheduler-header-color: var(--rz-text-tertiary-color); - --rz-scheduler-header-border: var(--rz-border-normal); - --rz-scheduler-header-padding: 0.5rem 0; - --rz-scheduler-event-color: var(--rz-on-info); - --rz-scheduler-event-background-color: var(--rz-info); - --rz-scheduler-event-font-size: 0.75rem; - --rz-scheduler-event-line-height: 1.25rem; - --rz-scheduler-event-padding: 0 1px 1px 1px; - --rz-scheduler-event-content-padding: 0.125rem 0.25rem; - --rz-scheduler-event-list-button-color: var(--rz-secondary); - --rz-scheduler-event-list-button-font-size: 0.75rem; - --rz-scheduler-slot-title-font-size: 0.875rem; - --rz-scheduler-slot-title-font-size-small: 0.6rem; - --rz-scheduler-slot-title-padding: 0 0.25rem; - --rz-scheduler-day-number-padding: 0 0.5rem; - --rz-scheduler-weekend-color: var(--rz-text-disabled-color); - --rz-scheduler-weekend-background-color: var(--rz-base-50); - --rz-scheduler-other-month-background-color: var(--rz-base-100); - --rz-scheduler-timeline-slot-width: 7rem; - --rz-scheduler-timeline-slot-height: 7rem; - --rz-scheduler-year-padding: 1.5rem; - --rz-scheduler-year-slot-padding: 1px; - --rz-scheduler-year-slot-title-width: 100%; - --rz-scheduler-year-slot-title-border-radius: 0.25rem; - --rz-scheduler-planner-slot-width: 3rem; - --rz-scheduler-planner-slot-height: 4.5rem; - --rz-scheduler-focus-outline: var(--rz-outline-focus); - --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-scheduler { + box-sizing: border-box; container-name: scheduler; container-type: inline-size; display: flex; @@ -20014,7 +13846,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-scheduler a.rz-event-list-btn { position: absolute; - padding-left: 0.25rem; + padding-inline-start: 0.25rem; color: var(--rz-scheduler-event-list-button-color); font-size: var(--rz-scheduler-event-list-button-font-size); } @@ -20027,12 +13859,12 @@ a:focus-visible .rz-fieldset-toggler { .rz-slot { display: flex; height: 1.5em; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-slot-title { - text-align: right; + text-align: end; font-size: var(--rz-scheduler-slot-title-font-size); padding: var(--rz-scheduler-slot-title-padding); } @@ -20042,27 +13874,28 @@ a:focus-visible .rz-fieldset-toggler { } .rz-slot-hours .rz-slot-header { height: 1.5rem; - text-align: right; + text-align: end; font-size: var(--rz-scheduler-header-font-size); padding: 0 0.25rem; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-end: 1px solid var(--rz-scheduler-border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-slot-minor { - border-top: 1px solid var(--rz-scheduler-minor-border-color); + border-block-start: 1px solid var(--rz-scheduler-minor-border-color); } .rz-day-view .rz-slot, .rz-slots:first-child .rz-slot { - border-left: none; + border-inline-start: none; } .rz-event { position: absolute; - padding: var(--rz-scheduler-event-padding); + padding-block: var(--rz-scheduler-event-padding-block); + padding-inline: var(--rz-scheduler-event-padding-inline); cursor: pointer; } @@ -20097,8 +13930,8 @@ a:focus-visible .rz-fieldset-toggler { } .rz-view-header { - border-top: var(--rz-scheduler-header-border); - border-bottom: var(--rz-scheduler-header-border); + border-block-start: var(--rz-scheduler-header-border); + border-block-end: var(--rz-scheduler-header-border); background-color: var(--rz-scheduler-header-background-color); text-transform: var(--rz-scheduler-header-text-transform); color: var(--rz-scheduler-header-color); @@ -20158,16 +13991,16 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-view-button-color); border: var(--rz-scheduler-view-button-border); border-radius: 0; - border-right: none; + border-inline-end: none; } .rz-scheduler-nav-views .rz-button.rz-primary:first-child { - border-top-left-radius: var(--rz-scheduler-border-radius); - border-bottom-left-radius: var(--rz-scheduler-border-radius); + border-start-start-radius: var(--rz-scheduler-border-radius); + border-end-start-radius: var(--rz-scheduler-border-radius); } .rz-scheduler-nav-views .rz-button.rz-primary:last-child { - border-top-right-radius: var(--rz-scheduler-border-radius); - border-bottom-right-radius: var(--rz-scheduler-border-radius); - border-right: var(--rz-scheduler-view-button-border); + border-start-end-radius: var(--rz-scheduler-border-radius); + border-end-end-radius: var(--rz-scheduler-border-radius); + border-inline-end: var(--rz-scheduler-view-button-border); } .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active { background-color: var(--rz-scheduler-view-selected-background-color); @@ -20184,25 +14017,38 @@ a:focus-visible .rz-fieldset-toggler { .rz-scheduler-nav-prev-next .rz-button { background-color: var(--rz-scheduler-prev-next-button-background-color); color: var(--rz-scheduler-prev-next-button-color); - padding: var(--rz-scheduler-prev-next-button-padding); + padding-block: var(--rz-scheduler-prev-next-button-padding-block); + padding-inline: var(--rz-scheduler-prev-next-button-padding-inline); font-size: var(--rz-scheduler-prev-next-button-font-size); } .rz-scheduler-nav-prev-next .rz-button.rz-today { - margin-left: var(--rz-scheduler-today-button-margin-left); + margin-inline-start: var(--rz-scheduler-today-button-margin-inline-start); padding: var(--rz-scheduler-today-button-padding); font-size: var(--rz-scheduler-today-button-font-size); text-transform: var(--rz-scheduler-today-button-text-transform); } .rz-scheduler-nav-prev-next .rz-button.rz-prev { - border-radius: var(--rz-scheduler-prev-button-border-radius); + border-start-start-radius: var(--rz-scheduler-prev-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-prev-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-prev-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-prev-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button.rz-next { - border-radius: var(--rz-scheduler-next-button-border-radius); + border-start-start-radius: var(--rz-scheduler-next-button-border-start-start-radius); + border-start-end-radius: var(--rz-scheduler-next-button-border-start-end-radius); + border-end-start-radius: var(--rz-scheduler-next-button-border-end-start-radius); + border-end-end-radius: var(--rz-scheduler-next-button-border-end-end-radius); } .rz-scheduler-nav-prev-next .rz-button:focus-visible { z-index: 1; } +/* Right-to-left .rz-scheduler-nav-prev-next */ +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-prev .rzi, +*[dir=rtl] .rz-scheduler-nav-prev-next .rz-button.rz-next .rzi { + transform: rotate(180deg); +} + .rz-event-list .rz-event { position: static; } @@ -20216,7 +14062,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-week:first-child .rz-slot { - border-top: none; + border-block-start: none; } .rz-month { @@ -20228,24 +14074,24 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month:nth-child(2) .rz-slot { - border-top: none; + border-block-start: none; } .rz-month .rz-slot { flex: 1; height: 100%; display: flex; - border-top: 1px solid var(--rz-scheduler-border-color); - border-left: 1px solid var(--rz-scheduler-border-color); + border-block-start: 1px solid var(--rz-scheduler-border-color); + border-inline-start: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child { position: sticky; z-index: 9998; - left: 0; + inset-inline-start: 0; justify-content: center; align-items: center; background-color: var(--rz-scheduler-header-background-color); - border-left: none; - border-right: 1px solid var(--rz-scheduler-border-color); + border-inline-start: none; + border-inline-end: 1px solid var(--rz-scheduler-border-color); } .rz-month .rz-slot:first-child .rz-slot-header { text-align: center; @@ -20255,11 +14101,11 @@ a:focus-visible .rz-fieldset-toggler { color: var(--rz-scheduler-header-color); } .rz-month .rz-slot:nth-child(2) { - border-left: none; + border-inline-start: none; } .rz-day-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-day-view .rz-view-header { overflow-y: scroll; @@ -20287,7 +14133,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-week-view .rz-slot:nth-of-type(2) { - border-top: none; + border-block-start: none; } .rz-week-view .rz-view-header { overflow-y: scroll; @@ -20303,7 +14149,7 @@ a:focus-visible .rz-fieldset-toggler { height: 100%; } .rz-month-view .rz-slot:first-child { - border-left: none; + border-inline-start: none; } .rz-planner-view { @@ -20311,7 +14157,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-planner-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 2.25rem; z-index: 9999; } @@ -20360,7 +14206,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-timeline-view .rz-view-header { position: sticky; - top: 0px; + inset-block-start: 0px; min-height: 36px; z-index: 9999; } @@ -20409,7 +14255,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-year-view .rz-slot { flex: 1; - border-top: none; + border-block-start: none; justify-content: center; height: initial; padding: var(--rz-scheduler-year-slot-padding); @@ -20455,8 +14301,8 @@ a:focus-visible .rz-fieldset-toggler { @container scheduler (width < 640px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20465,15 +14311,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20506,8 +14352,8 @@ a:focus-visible .rz-fieldset-toggler { @media (max-width: 576px) { .rz-scheduler-nav .rz-scheduler-nav-prev-next { justify-content: space-between; - margin-bottom: 0.5rem; - margin-right: 0.5rem; + margin-block-end: 0.5rem; + margin-inline-end: 0.5rem; order: 1; } .rz-scheduler-nav .rz-scheduler-nav-title { @@ -20516,15 +14362,15 @@ a:focus-visible .rz-fieldset-toggler { order: 3; } .rz-scheduler-nav .rz-scheduler-nav-views { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; justify-content: center; flex-grow: 1; order: 2; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button { flex-grow: 1; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; } .rz-scheduler-nav .rz-scheduler-nav-views .rz-button .rz-button-text { display: none; @@ -20554,35 +14400,8 @@ a:focus-visible .rz-fieldset-toggler { height: var(--rz-scheduler-planner-slot-height); } } -:root { - --rz-tabs-padding: 1.25rem; - --rz-tabs-shadow: none; - --rz-tabs-border: var(--rz-border-base-200); - --rz-tabs-border-radius: var(--rz-border-radius); - --rz-tabs-background-color: var(--rz-base-background-color); - --rz-tabs-tab-font-size: var(--rz-body-font-size); - --rz-tabs-tab-line-height: var(--rz-body-line-height); - --rz-tabs-tab-font-weight: normal; - --rz-tabs-tab-text-transform: none; - --rz-tabs-tab-letter-spacing: 0; - --rz-tabs-tab-padding: 0.5rem 1rem; - --rz-tabs-tab-background-color: var(--rz-base-200); - --rz-tabs-tab-color: var(--rz-text-color); - --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); - --rz-tabs-tab-selected-color: var(--rz-text-title-color); - --rz-tabs-tab-selected-top-border-color: var(--rz-primary); - --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); - --rz-tabs-tab-hover-color: var(--rz-primary); - --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); - --rz-tabs-tab-focus-color: var(--rz-primary); - --rz-tabs-tab-focus-outline: var(--rz-outline-focus); - --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); - --rz-tabs-icon-font-size: var(--rz-icon-size); - --rz-tabs-icon-margin: 0 0.25rem 0 -0.25rem; - --rz-tabs-transition: var(--rz-transition-all); -} - .rz-tabview { + box-sizing: border-box; display: flex; } .rz-tabview:focus { @@ -20636,7 +14455,8 @@ a:focus-visible .rz-fieldset-toggler { display: flex; align-items: center; color: inherit; - padding: var(--rz-tabs-tab-padding); + padding-block: var(--rz-tabs-tab-padding-block); + padding-inline: var(--rz-tabs-tab-padding-inline); font-size: var(--rz-tabs-tab-font-size); line-height: var(--rz-tabs-tab-line-height); font-weight: var(--rz-tabs-tab-font-weight); @@ -20679,7 +14499,7 @@ a:focus-visible .rz-fieldset-toggler { border-top-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-top-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-bottom > .rz-tabview-nav { flex-direction: row; @@ -20699,7 +14519,7 @@ a:focus-visible .rz-fieldset-toggler { border-bottom-color: var(--rz-tabs-tab-selected-top-border-color); } .rz-tabview-bottom-right > .rz-tabview-nav { - justify-content: flex-end; + justify-content: right; } .rz-tabview-left > .rz-tabview-nav { flex-direction: column; @@ -20734,6 +14554,9 @@ a:focus-visible .rz-fieldset-toggler { padding-left: 1px; border-right-color: var(--rz-tabs-tab-selected-top-border-color); } +*[dir=rtl] .rz-tabview-left > .rz-tabview-nav, *[dir=rtl] .rz-tabview-right > .rz-tabview-nav { + order: 1; +} .rz-tabview-panels { background-color: var(--rz-tabs-background-color); @@ -20764,21 +14587,13 @@ a:focus-visible .rz-fieldset-toggler { padding: var(--rz-tabs-padding); } -.rz-tabview-left-icon { +.rz-tabview-icon { font-size: var(--rz-tabs-icon-font-size); - margin: var(--rz-tabs-icon-margin); -} - -:root { - --rz-tooltip-background-color: var(--rz-base-900); - --rz-tooltip-color: var(--rz-white); - --rz-tooltip-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); - --rz-tooltip-padding: 0.25rem 0.5rem; - --rz-tooltip-border-radius: var(--rz-border-radius); - --rz-tooltip-font-size: 0.875rem; + margin-inline: var(--rz-tabs-icon-margin-inline); } .rz-tooltip { + box-sizing: border-box; position: absolute; transition: top 0.2s, left 0.2s; top: 0; @@ -20804,8 +14619,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - bottom: 0; - left: 12px; + inset-block-end: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20822,8 +14637,8 @@ a:focus-visible .rz-fieldset-toggler { position: absolute; width: 8px; height: 8px; - top: 0; - left: 12px; + inset-block-start: 0; + inset-inline-start: 12px; background-color: inherit; transform-origin: center; transform: translate(-50%, -12px) rotate(45deg); @@ -20854,42 +14669,21 @@ a:focus-visible .rz-fieldset-toggler { } .rz-tooltip .rz-right-tooltip-content:after { - content: " "; - position: absolute; - width: 8px; - height: 8px; - top: 20px; - left: 0; - background-color: inherit; - transform-origin: center; - transform: translate(-50%, -10px) rotate(45deg); - border-bottom: inherit; - border-right: inherit; -} - -:root { - --rz-dialog-background-color: var(--rz-base-background-color); - --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); - --rz-dialog-title-background-color: var(--rz-base-background-color); - --rz-dialog-title-border: none; - --rz-dialog-title-padding: 1.25rem 1.25rem 0.5rem; - --rz-dialog-title-font-size: 1.5rem; - --rz-dialog-title-line-height: 1.25em; - --rz-dialog-title-font-weight: 700; - --rz-dialog-title-letter-spacing: -0.03em; - --rz-dialog-title-color: var(--rz-text-title-color); - --rz-dialog-close-font-size: var(--rz-icon-size); - --rz-dialog-close-color: var(--rz-text-tertiary-color); - --rz-dialog-close-hover-color: var(--rz-text-color); - --rz-dialog-close-vertical-align: top; - --rz-dialog-content-padding: 1.25rem; - --rz-dialog-mask-background-color: var(--rz-base-600); - --rz-dialog-border-radius: calc(2 * var(--rz-border-radius)); - --rz-dialog-mask-zindex: 1000; - --rz-dialog-zindex: 1001; + content: " "; + position: absolute; + width: 8px; + height: 8px; + top: 20px; + left: 0; + background-color: inherit; + transform-origin: center; + transform: translate(-50%, -10px) rotate(45deg); + border-bottom: inherit; + border-right: inherit; } .rz-dialog-wrapper { + box-sizing: border-box; display: flex; position: fixed; width: 100%; @@ -20902,6 +14696,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog { + box-sizing: border-box; position: absolute; overflow: hidden; display: flex; @@ -20916,37 +14711,55 @@ a:focus-visible .rz-fieldset-toggler { border-radius: var(--rz-dialog-border-radius); } -.rz-dialog-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); +.rz-dialog-side { + box-sizing: border-box; + position: fixed; + z-index: var(--rz-dialog-zindex); + opacity: 1; + background-color: var(--rz-dialog-background-color); + box-shadow: var(--rz-dialog-shadow); + border-radius: var(--rz-dialog-border-radius); + overflow-y: auto; +} + +.rz-dialog-titlebar, +.rz-dialog-side-titlebar { + display: flex; + align-items: normal; + padding-block: var(--rz-dialog-title-padding-block); + padding-inline: var(--rz-dialog-title-padding-inline); font-size: var(--rz-dialog-title-font-size); line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); + background-color: var(--rz-dialog-title-background-color); + border-block-end: var(--rz-dialog-title-border); } -.rz-dialog-title { +.rz-dialog-title, +.rz-dialog-side-title { + flex: auto; font-weight: var(--rz-dialog-title-font-weight); letter-spacing: var(--rz-dialog-title-letter-spacing); color: var(--rz-dialog-title-color); user-select: none; } -.rz-dialog-titlebar-close { - float: right; -} -.rz-dialog-titlebar-close .rzi-times { +.rz-dialog-titlebar-close .rzi-times, +.rz-dialog-side-titlebar-close .rzi-times { font-size: var(--rz-dialog-close-font-size); color: var(--rz-dialog-close-color); vertical-align: var(--rz-dialog-close-vertical-align); } -.rz-dialog-titlebar-close .rzi-times:before { +.rz-dialog-titlebar-close .rzi-times:before, +.rz-dialog-side-titlebar-close .rzi-times:before { content: "close"; } -.rz-dialog-titlebar-close:hover .rzi-times { +.rz-dialog-titlebar-close:hover .rzi-times, +.rz-dialog-side-titlebar-close:hover .rzi-times { color: var(--rz-dialog-close-hover-color); } -.rz-dialog-content { +.rz-dialog-content, +.rz-dialog-side-content { flex: 0 1 auto; padding: var(--rz-dialog-content-padding); overflow: auto; @@ -20958,7 +14771,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-confirm-message, .rz-dialog-alert-message { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .rz-dialog-confirm-buttons { @@ -20972,7 +14785,7 @@ a:focus-visible .rz-fieldset-toggler { } .rz-dialog-alert-buttons { - text-align: right; + text-align: end; gap: 0.5rem; } .rz-dialog-alert-buttons .rz-button { @@ -20985,42 +14798,15 @@ a:focus-visible .rz-fieldset-toggler { z-index: var(--rz-dialog-mask-zindex); width: 100%; height: 100%; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; background-color: var(--rz-dialog-mask-background-color); opacity: 0.5; } .no-scroll { overflow: hidden; - padding-right: 15px; -} - -@media (max-width: 768px) { - .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { - position: absolute; - width: 100% !important; - top: 0px !important; - border-radius: 0; - } - .rz-dialog-content { - -webkit-overflow-scrolling: touch; - } - .rz-dialog-confirm, .rz-dialog-alert { - max-width: 355px; - } - .no-scroll { - padding-right: 0; - } -} -.rz-dialog-side { - position: fixed; - z-index: var(--rz-dialog-zindex); - opacity: 1; - background-color: var(--rz-dialog-background-color); - box-shadow: var(--rz-dialog-shadow); - border-radius: var(--rz-dialog-border-radius); - overflow-y: auto; + padding-inline-end: 15px; } .rz-dialog-side-position-right { @@ -21053,161 +14839,125 @@ a:focus-visible .rz-fieldset-toggler { width: 100%; } -.rz-dialog-side-titlebar { - background-color: var(--rz-dialog-title-background-color); - padding: var(--rz-dialog-title-padding); - font-size: var(--rz-dialog-title-font-size); - line-height: var(--rz-dialog-title-line-height); - border-bottom: var(--rz-dialog-title-border); -} - -.rz-dialog-side-title { - font-weight: var(--rz-dialog-title-font-weight); - letter-spacing: var(--rz-dialog-title-letter-spacing); - color: var(--rz-dialog-title-color); -} - -.rz-dialog-side-titlebar-close { - float: right; -} -.rz-dialog-side-titlebar-close .rzi-times { - font-size: var(--rz-dialog-close-font-size); - color: var(--rz-dialog-close-color); - vertical-align: var(--rz-dialog-close-vertical-align); -} -.rz-dialog-side-titlebar-close .rzi-times:before { - content: "close"; -} -.rz-dialog-side-titlebar-close:hover .rzi-times { - color: var(--rz-dialog-close-hover-color); -} - -.rz-dialog-side-content { - flex: 0 1 auto; - padding: var(--rz-dialog-content-padding); - overflow: auto; -} - -:root { - --rz-notification-padding: 1rem 1.25rem; - --rz-notification-icon-margin: 0 0.625rem 0 0; - --rz-notification-container-background-color: transparent; - --rz-notification-shadow: none; - --rz-notification-border-radius: var(--rz-border-radius); - --rz-notification-success-color: var(--rz-on-success); - --rz-notification-success-background-color: var(--rz-success); - --rz-notification-success-icon-color: var(--rz-on-success); - --rz-notification-warning-color: var(--rz-on-warning); - --rz-notification-warning-background-color: var(--rz-warning); - --rz-notification-warning-icon-color: var(--rz-on-warning); - --rz-notification-error-color: var(--rz-on-danger); - --rz-notification-error-background-color: var(--rz-danger); - --rz-notification-error-icon-color: var(--rz-on-danger); - --rz-notification-info-color: var(--rz-on-info); - --rz-notification-info-background-color: var(--rz-info); - --rz-notification-info-icon-color: var(--rz-on-info); +@media (max-width: 768px) { + .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { + position: absolute; + width: 100% !important; + inset-block-start: 0px !important; + border-radius: 0; + } + .rz-dialog-content { + -webkit-overflow-scrolling: touch; + } + .rz-dialog-confirm, .rz-dialog-alert { + max-width: 355px; + } + .no-scroll { + padding-inline-end: 0; + } } - -.rz-growl { +.rz-notification { + box-sizing: border-box; position: fixed; - top: 100px; - right: 20px; - min-width: 20rem; + z-index: 1002; + inset-block-start: 100px; + inset-inline-end: 1rem; } -.rz-growl-item-container { +.rz-notification-item-wrapper { + position: static; + width: 250px; + min-width: 20rem; background-color: var(--rz-notification-container-background-color); + margin: 1rem 0; } -.rz-growl-item { +.rz-notification-item { + display: flex; + align-items: flex-start; + gap: var(--rz-notification-gap); border-radius: var(--rz-notification-border-radius); box-shadow: var(--rz-notification-shadow); padding: var(--rz-notification-padding); } - -.rz-growl-message-success .rz-growl-item { +.rz-notification-success .rz-notification-item { color: var(--rz-notification-success-color); background-color: var(--rz-notification-success-background-color); } - -.rz-growl-message-warn .rz-growl-item { +.rz-notification-warn .rz-notification-item { color: var(--rz-notification-warning-color); background-color: var(--rz-notification-warning-background-color); } - -.rz-growl-message-error .rz-growl-item { +.rz-notification-error .rz-notification-item { color: var(--rz-notification-error-color); background-color: var(--rz-notification-error-background-color); } - -.rz-growl-message-info .rz-growl-item { +.rz-notification-info .rz-notification-item { color: var(--rz-notification-info-color); background-color: var(--rz-notification-info-background-color); } -.rz-growl-item { - margin: 1rem 0; -} -.rz-growl-item p { - color: inherit; +.rz-notification-message-wrapper { + flex: auto; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: var(--rz-notification-gap); } -.rz-growl-icon-close { - float: right; +.rz-notification-message { + flex: auto; + display: flex; + flex-direction: column; + align-items: flex-start; } -.rz-growl-icon-close:before { - content: "close"; + +.rz-notification-title { + font-weight: bold; } -.rz-growl-image { - float: left; +.rz-notification-icon { margin: var(--rz-notification-icon-margin); } -.rz-growl-image.rzi-check { +.rz-notification-icon.rzi-check { color: var(--rz-notification-success-icon-color); } -.rz-growl-image.rzi-check:before { +.rz-notification-icon.rzi-check:before { content: "check"; } -.rz-growl-image.rzi-exclamation-triangle { +.rz-notification-icon.rzi-exclamation-triangle { color: var(--rz-notification-warning-icon-color); } -.rz-growl-image.rzi-exclamation-triangle:before { +.rz-notification-icon.rzi-exclamation-triangle:before { content: "warning"; } -.rz-growl-image.rzi-info-circle { +.rz-notification-icon.rzi-info-circle { color: var(--rz-notification-info-icon-color); } -.rz-growl-image.rzi-info-circle:before { +.rz-notification-icon.rzi-info-circle:before { content: "info"; } -.rz-growl-image.rzi-times { +.rz-notification-icon.rzi-times { color: var(--rz-notification-error-icon-color); } -.rz-growl-image.rzi-times:before { +.rz-notification-icon.rzi-times:before { content: "error"; } -.rz-growl-title { - font-weight: bold; +.rz-notification-close { + cursor: pointer; + opacity: 0.75; +} +.rz-notification-close:before { + content: "close"; } -.rz-growl-message p { - display: inline-block; - margin-bottom: 0; +.rz-form { + box-sizing: border-box; } -:root { - --rz-form-error-color: var(--rz-danger); - --rz-form-error-font-size: 0.75rem; - --rz-form-group-margin-bottom: 1rem; - --rz-validator-background-color: var(--rz-danger); - --rz-validator-color: var(--rz-on-danger); - --rz-validator-shadow: 0 6px 14px 0 rgba(243, 17, 85, 0.3); - --rz-validator-text-padding: 0; - --rz-validator-padding: 0.25rem 0.5rem; - --rz-validator-pointer-size: 0.375rem; - --rz-validator-transform: translateY(12px); +.rz-message { + box-sizing: border-box; } .rz-messages-error { @@ -21232,16 +14982,8 @@ a:focus-visible .rz-fieldset-toggler { border: var(--rz-validator-pointer-size) solid transparent; border-bottom-color: var(--rz-validator-background-color); position: absolute; - top: 0; - left: 0; - transform: translate(var(--rz-validator-pointer-size), -100%); -} - -:root { - --rz-scrollbar-background-color: transparent; - --rz-scrollbar-color: rgba(141, 142, 144, 0.5); - --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); - --rz-scrollbar-size: 16px; + inset-block-start: calc(-2 * var(--rz-validator-pointer-size)); + inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2); } body:not(.rz-default-scrollbars)::-webkit-scrollbar, @@ -21290,14 +15032,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { background-color: var(--rz-scrollbar-background-color); } -:root { - --rz-login-register-background-color: var(--rz-base-100); - --rz-login-register-padding: 1rem; - --rz-login-register-margin: 2rem 0 0; - --rz-login-register-button-margin: 0; -} - .rz-login { + box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; @@ -21327,7 +15063,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { border: var(--rz-border-danger); } .rz-login .rz-form .rz-form-row .rz-switch { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .rz-login .rz-form .rz-messages-error { position: absolute; @@ -21339,12 +15075,15 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { justify-content: space-between; gap: 0.5rem; background-color: var(--rz-login-register-background-color); - margin: var(--rz-login-register-margin); - padding: var(--rz-login-register-padding); + margin-block: var(--rz-login-register-margin-block); + margin-inline: var(--rz-login-register-margin-inline); + padding-block: var(--rz-login-register-padding-block); + padding-inline: var(--rz-login-register-padding-inline); border-radius: var(--rz-border-radius); } .rz-login .rz-register .rz-button { - margin: var(--rz-login-register-button-margin); + margin-block: var(--rz-login-register-button-margin-block); + margin-inline: var(--rz-login-register-button-margin-inline); } .rz-login .rz-login-buttons { display: inline-flex; @@ -21354,11 +15093,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { gap: 0.5rem; } -:root { - --rz-lookup-panel-background-color: var(--rz-base-background-color); - --rz-lookup-panel-padding: 1rem; -} - .rz-lookup-panel { background-color: var(--rz-lookup-panel-background-color); padding: var(--rz-lookup-panel-padding); @@ -21368,24 +15102,11 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-lookup-search { display: flex; - margin-bottom: 1rem; + gap: var(--rz-lookup-search-gap); + margin-bottom: var(--rz-lookup-search-margin-bottom); } .rz-lookup-search input { flex: auto; - margin-right: 1rem; -} - -.rz-lookup-select { - margin-top: 1rem; - display: flex; - justify-content: flex-end; -} - -.rz-lookup { - display: inline-block; -} -.rz-lookup .rz-dropdown { - width: 100%; } .ssrsviewer { @@ -21395,14 +15116,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { flex: auto; } -:root { - --rz-map-height: 10rem; - --rz-map-padding: 1.25rem; - --rz-map-background-color: var(--rz-base-background-color); - --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); -} - .rz-map { + box-sizing: border-box; height: var(--rz-map-height); padding: var(--rz-map-padding); background-color: var(--rz-map-background-color); @@ -21414,18 +15129,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 100%; } -:root { - --rz-gauge-scale-color: var(--rz-base-300); - --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-scale-font-size: var(--rz-body-font-size); - --rz-gauge-pointer-color: var(--rz-primary); - --rz-gauge-arc-scale-color: var(--rz-base-300); - --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); - --rz-gauge-arc-value-color: var(--rz-primary); -} - .rz-gauge, .rz-arc-gauge { + box-sizing: border-box; position: relative; display: inline-block; width: 300px; @@ -21474,19 +15180,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { fill: var(--rz-gauge-arc-scale-color); } -:root { - --rz-progressbar-background-color: var(--rz-base-200); - --rz-progressbar-font-size: var(--rz-body-font-size); - --rz-progressbar-height: 1.25rem; - --rz-progressbar-border-radius: var(--rz-border-radius); - --rz-progressbar-value-background-color: var(--rz-primary-lighter); - --rz-progressbar-value-transition: var(--rz-transition-all); - --rz-progressbar-circular-stroke-width: 2px; - --rz-progressbar-circular-value-stroke-width: 3px; - --rz-progressbar-circular-value-endpoint: round; -} - .rz-progressbar { + box-sizing: border-box; border-radius: var(--rz-progressbar-border-radius); height: var(--rz-progressbar-height); position: relative; @@ -21514,6 +15209,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-progressbar-circular { + box-sizing: border-box; position: relative; } @@ -21574,6 +15270,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { will-change: left, right; animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite rz-progressbar-indeterminate-anim; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:before { + animation-name: rz-progressbar-indeterminate-anim-rtl; +} .rz-progressbar-indeterminate .rz-progressbar-value:after { content: ""; position: absolute; @@ -21585,6 +15284,9 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite rz-progressbar-indeterminate-anim-short; animation-delay: 1.15s; } +*[dir=rtl] .rz-progressbar-indeterminate .rz-progressbar-value:after { + animation-name: rz-progressbar-indeterminate-anim-short-rtl; +} @keyframes rz-progressbar-indeterminate-anim { 0% { left: -35%; @@ -21595,14 +15297,34 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { right: -90%; } } -@keyframes rz-progressbar-indeterminate-anim-short { +@keyframes rz-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 100%, 60% { + left: 107%; + right: -8%; + } +} +@keyframes rz-progressbar-indeterminate-anim-rtl { + 0% { + right: -35%; + left: 100%; + } + 60%, 100% { + right: 100%; + left: -90%; + } +} +@keyframes rz-progressbar-indeterminate-anim-short-rtl { 0% { - left: -200%; - right: 100%; + right: -200%; + left: 100%; } - 100%, 60% { - left: 107%; - right: -8%; + 60%, 100% { + right: 107%; + left: -8%; } } .rz-progressbar-indeterminate .rz-progressbar-circular-value { @@ -21650,48 +15372,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-primary); } -.rz-progressbar.rz-progressbar-light { - color: var(--rz-text-title-color); -} - -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { - background-color: var(--rz-base-400); -} -.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { - background-color: var(--rz-base-400); -} -.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { - stroke: var(--rz-base-400); -} - -.rz-progressbar.rz-progressbar-dark { - color: var(--rz-text-contrast-color); -} - -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { - background-color: var(--rz-base-900); -} -.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { - background-color: var(--rz-base-900); -} -.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { - stroke: var(--rz-base-900); -} - .rz-progressbar.rz-progressbar-secondary { color: var(--rz-on-secondary); } @@ -21755,6 +15435,27 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-warning); } +.rz-progressbar.rz-progressbar-error { + color: var(--rz-on-danger); +} + +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-value { + background-color: var(--rz-danger); +} +.rz-progressbar-determinate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:before { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-value:after { + background-color: var(--rz-danger); +} +.rz-progressbar-indeterminate.rz-progressbar-error .rz-progressbar-circular-value { + stroke: var(--rz-danger); +} + .rz-progressbar.rz-progressbar-danger { color: var(--rz-on-danger); } @@ -21797,6 +15498,69 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { stroke: var(--rz-success); } +.rz-progressbar.rz-progressbar-base { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-value { + background-color: var(--rz-base-600); +} +.rz-progressbar-determinate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:before { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-value:after { + background-color: var(--rz-base-600); +} +.rz-progressbar-indeterminate.rz-progressbar-base .rz-progressbar-circular-value { + stroke: var(--rz-base-600); +} + +.rz-progressbar.rz-progressbar-light { + color: var(--rz-text-title-color); +} + +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value { + background-color: var(--rz-base-400); +} +.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:before { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-value:after { + background-color: var(--rz-base-400); +} +.rz-progressbar-indeterminate.rz-progressbar-light .rz-progressbar-circular-value { + stroke: var(--rz-base-400); +} + +.rz-progressbar.rz-progressbar-dark { + color: var(--rz-text-contrast-color); +} + +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-value { + background-color: var(--rz-base-900); +} +.rz-progressbar-determinate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:before { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-value:after { + background-color: var(--rz-base-900); +} +.rz-progressbar-indeterminate.rz-progressbar-dark .rz-progressbar-circular-value { + stroke: var(--rz-base-900); +} + .rz-progressbar-circular-lg { width: 6rem; height: 6rem; @@ -21821,19 +15585,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { font-size: calc(var(--rz-progressbar-font-size) * 0.375); } -:root { - --rz-chart-axis-color: var(--rz-base-300); - --rz-chart-axis-label-color: var(--rz-text-secondary-color); - --rz-chart-axis-font-size: 0.875rem; - --rz-chart-legend-font-size: 0.875rem; - --rz-chart-legend-focus-outline: var(--rz-outline-focus); - --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); - --rz-chart-tooltip-background: var(--rz-base-background-color); - --rz-chart-tooltip-color: var(--rz-text-color); - --rz-chart-marker-stroke: var(--rz-base-background-color); -} - .rz-chart { + box-sizing: border-box; position: relative; height: 300px; } @@ -22605,6 +16358,10 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { .rz-value-axis .rz-tick-text { text-anchor: end; + /* Right-to-left anchor */ +} +*[dir=rtl] .rz-value-axis .rz-tick-text { + text-anchor: start; } .rz-category-axis .rz-tick-text { @@ -22728,6 +16485,7 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { } .rz-link { + box-sizing: border-box; color: var(--rz-link-color); text-decoration: none; cursor: pointer; @@ -22754,24 +16512,8 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { color: var(--rz-text-contrast-color); } -:root { - --rz-editor-border: var(--rz-input-border); - --rz-editor-border-radius: var(--rz-border-radius); - --rz-editor-toolbar-background-color: var(--rz-base-100); - --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; - --rz-editor-button-padding: 0.5rem; - --rz-editor-button-background-color: var(--rz-base-100); - --rz-editor-button-color: var(--rz-text-color); - --rz-editor-button-disabled-color: var(--rz-text-disabled-color); - --rz-editor-button-selected-background-color: var(--rz-primary); - --rz-editor-button-selected-color: var(--rz-on-primary); - --rz-editor-separator-background-color: var(--rz-base-200); - --rz-editor-content-background-color: var(--rz-base-background-color); - --rz-editor-focus-outline: var(--rz-outline-focus); - --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); -} - .rz-html-editor { + box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--rz-editor-border-radius); @@ -22956,30 +16698,6 @@ body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner { height: 1rem; } -:root { - --rz-colorpicker-panel-border: var(--rz-border-normal); - --rz-colorpicker-panel-background-color: var(--rz-base-background-color); - --rz-colorpicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); - --rz-colorpicker-panel-padding: 0.5rem; - --rz-colorpicker-panel-max-width: 20rem; - --rz-colorpicker-saturation-height: 200px; - --rz-colorpicker-focus-outline: var(--rz-outline-focus); - --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); - --rz-colorpicker-value-border-radius: 1rem; - --rz-colorpicker-item-size: 1.25rem; - --rz-colorpicker-item-border-radius: 1rem; - --rz-colorpicker-item-margin: 0.25rem; - --rz-colorpicker-item-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); - --rz-colorpicker-handle-size: 12px; - --rz-colorpicker-handle-border: 2px solid var(--rz-white); - --rz-colorpicker-handle-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08); - --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-hex-input-height: 2rem; - --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; - --rz-colorpicker-rgba-input-height: 2rem; - --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); -} - .rz-colorpicker { display: inline-flex; align-items: center; @@ -23056,7 +16774,7 @@ button.rz-colorpicker-trigger .rzi:before { right: 0; bottom: 0; border-radius: var(--rz-border-radius); - border-top-left-radius: calc(var(--rz-border-radius) - 1px); + border-start-start-radius: calc(var(--rz-border-radius) - 1px); } .rz-saturation-black { @@ -23128,7 +16846,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-hue-and-alpha { flex: 1; - padding-right: 8px; + padding-inline-end: 8px; } .rz-alpha-picker:before, @@ -23141,7 +16859,7 @@ button.rz-colorpicker-trigger .rzi:before { bottom: 0; right: 0; border-radius: var(--rz-border-radius); - background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); + background-image: linear-gradient(45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(-45deg, var(--rz-text-disabled-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rz-text-disabled-color) 75%), linear-gradient(-45deg, transparent 75%, var(--rz-text-disabled-color) 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; } @@ -23156,6 +16874,7 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-rgba { display: flex; + gap: 4px; } .rz-color-box { @@ -23167,27 +16886,24 @@ button.rz-colorpicker-trigger .rzi:before { font-size: 0.75rem; text-transform: uppercase; } -.rz-color-box:not(:last-child) { - margin-right: 4px; -} .rz-color-box .rz-textbox { width: 80px; - margin-right: 4px; + margin-inline-end: 4px; padding: var(--rz-colorpicker-hex-input-padding); height: var(--rz-colorpicker-hex-input-height); } -.rz-color-box .rz-spinner { +.rz-color-box .rz-numeric { padding: var(--rz-colorpicker-rgba-input-padding); height: var(--rz-colorpicker-rgba-input-height); } -.rz-color-box .rz-spinner .rz-spinner-input { +.rz-color-box .rz-numeric .rz-numeric-input { padding: 0; outline: none; } -.rz-color-box .rz-spinner button { +.rz-color-box .rz-numeric button { display: none; } -.rz-color-box .rz-spinner button:hover { +.rz-color-box .rz-numeric button:hover { display: initial; } @@ -23203,15 +16919,13 @@ button.rz-colorpicker-trigger .rzi:before { .rz-colorpicker-colors { display: flex; flex-wrap: wrap; - margin-left: -4px; - margin-right: -4px; + gap: var(--rz-colorpicker-items-gap); } .rz-colorpicker-item { width: var(--rz-colorpicker-item-size); height: var(--rz-colorpicker-item-size); border-radius: var(--rz-colorpicker-item-border-radius); - margin: var(--rz-colorpicker-item-margin); box-shadow: var(--rz-colorpicker-item-shadow); cursor: pointer; } @@ -23223,15 +16937,8 @@ button.rz-colorpicker-trigger .rzi:before { outline-offset: var(--rz-colorpicker-focus-outline-offset); } -:root { - --rz-splitter-bar-color: var(--rz-text-tertiary-color); - --rz-splitter-bar-color-active: var(--rz-on-primary-lighter); - --rz-splitter-bar-background-color: var(--rz-base-200); - --rz-splitter-bar-background-color-active: var(--rz-primary-lighter); - --rz-splitter-bar-hover-opacity: 1; -} - .rz-splitter { + box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 100%; @@ -23253,7 +16960,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-collapse:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23268,7 +16975,7 @@ button.rz-colorpicker-trigger .rzi:before { display: table; } .rz-splitter > .rz-splitter-bar > .rz-expand:before { - font-family: "Material Icons"; + font-family: var(--rz-icon-font-family); line-height: normal; display: table-cell; } @@ -23355,11 +17062,28 @@ button.rz-colorpicker-trigger .rzi:before { z-index: 1; } -:root { - --rz-layout-background-color: transparent; +/* Radzen Blazor Layout reset styles */ +:root:has(.rz-layout) { + box-sizing: border-box; + scroll-behavior: smooth; + font-size: var(--rz-root-font-size); +} +:root:has(.rz-layout) body { + margin: 0; + color: var(--rz-text-color); + background-color: var(--rz-body-background-color); + font-family: var(--rz-text-font-family); + font-size: var(--rz-body-font-size); + line-height: var(--rz-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +/* RadzenLayout styles */ .rz-layout { + box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; @@ -23393,8 +17117,18 @@ button.rz-colorpicker-trigger .rzi:before { .rz-body { width: 100vw; } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { + justify-content: end; + } + .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { + margin-inline-start: auto; + } + .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { + width: auto; + } } .rz-breadcrumb { + box-sizing: border-box; display: flex; align-items: center; } @@ -23402,8 +17136,8 @@ button.rz-colorpicker-trigger .rzi:before { .rz-breadcrumb-item + .rz-breadcrumb-item::before { content: "»"; display: inline-block; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; font-size: 1rem; line-height: 1.25rem; } @@ -23417,22 +17151,8 @@ button.rz-colorpicker-trigger .rzi:before { align-items: center; } -:root { - --rz-alert-margin: 0.5rem 0; - --rz-alert-padding: 1rem; - --rz-alert-gap: 1rem; - --rz-alert-color: var(--rz-text-color); - --rz-alert-background-color: var(--rz-base-200); - --rz-alert-box-shadow: var(--rz-shadow-3); - --rz-alert-border-radius: 4px; - --rz-alert-message-margin: 0.25rem 0; - --rz-alert-title-color: var(--rz-text-h6-color); - --rz-alert-icon-color: var(--rz-alert-color); - --rz-alert-icon-margin: 0.25rem 0; - --rz-alert-icon-size: var(--rz-icon-size); -} - .rz-alert { + box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rz-alert-gap); @@ -24261,30 +17981,35 @@ button.rz-colorpicker-trigger .rzi:before { @keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } @-webkit-keyframes mic-blink { 0% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } 50% { background-color: var(--rz-danger-darker); + color: var(--rz-on-danger-darker); } 100% { background-color: var(--rz-danger-light); + color: var(--rz-on-danger-light); } } .rz-button.rz-speech-to-text-button-recording { -webkit-animation: mic-blink 2s linear infinite; -moz-animation: mic-blink 2s linear infinite; animation: mic-blink 2s linear infinite; - color: var(--rz-text-contrast-color); } .rz-flex-row { @@ -24303,16 +18028,13 @@ button.rz-colorpicker-trigger .rzi:before { flex-direction: column-reverse !important; } -:root { - --rz-gap: 1rem; - --rz-row-gap: 1rem; -} - .rz-stack { + box-sizing: border-box; gap: var(--rz-gap); } .rz-row { + box-sizing: border-box; flex-wrap: wrap; gap: var(--rz-gap); row-gap: var(--rz-row-gap); @@ -24688,279 +18410,279 @@ button.rz-colorpicker-trigger .rzi:before { } } .rz-offset-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } @media (min-width: 576px) { .rz-offset-xs-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xs-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xs-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xs-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xs-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xs-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xs-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xs-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xs-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xs-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xs-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xs-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 768px) { .rz-offset-sm-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-sm-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-sm-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-sm-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-sm-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-sm-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-sm-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-sm-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-sm-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-sm-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-sm-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-sm-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1024px) { .rz-offset-md-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-md-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-md-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-md-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-md-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-md-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-md-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-md-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-md-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-md-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-md-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-md-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1280px) { .rz-offset-lg-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-lg-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-lg-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-lg-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-lg-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-lg-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-lg-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-lg-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-lg-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-lg-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-lg-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-lg-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 1920px) { .rz-offset-xl-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xl-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xl-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xl-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xl-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xl-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xl-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xl-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xl-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xl-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xl-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xl-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } @media (min-width: 2560px) { .rz-offset-xx-0 { - margin-left: 0; + margin-inline-start: 0; } .rz-offset-xx-1 { - margin-left: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); + margin-inline-start: calc(1 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); } .rz-offset-xx-2 { - margin-left: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); + margin-inline-start: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); } .rz-offset-xx-3 { - margin-left: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); + margin-inline-start: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); } .rz-offset-xx-4 { - margin-left: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); + margin-inline-start: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); } .rz-offset-xx-5 { - margin-left: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); + margin-inline-start: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); } .rz-offset-xx-6 { - margin-left: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); + margin-inline-start: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); } .rz-offset-xx-7 { - margin-left: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); + margin-inline-start: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); } .rz-offset-xx-8 { - margin-left: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); + margin-inline-start: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); } .rz-offset-xx-9 { - margin-left: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); + margin-inline-start: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); } .rz-offset-xx-10 { - margin-left: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); + margin-inline-start: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); } .rz-offset-xx-11 { - margin-left: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); + margin-inline-start: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 11 * var(--rz-gap)); } } .rz-order-first { @@ -25305,36 +19027,6 @@ button.rz-colorpicker-trigger .rzi:before { order: 12 !important; } } -:root { - --rz-form-field-margin: 0.625rem 0 0; - --rz-form-field-start-end-padding: var(--rz-input-padding); - --rz-form-field-filled-height: 3.25rem; - --rz-form-field-filled-padding: 1.4375rem 0.4375rem 0.4375rem; - --rz-form-field-filled-numeric-padding: 1.5rem 1.25rem 0.5rem 0.5rem; - --rz-form-field-filled-background-color: var(--rz-base-100); - --rz-form-field-filled-hover-background-color: var(--rz-base-200); - --rz-form-field-filled-border: var(--rz-input-border); - --rz-form-field-filled-hover-border: var(--rz-input-hover-border); - --rz-form-field-filled-focus-border: var(--rz-input-focus-border); - --rz-form-field-filled-border-radius: var(--rz-border-radius); - --rz-form-field-filled-label-floating-top: 0.25rem; - --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-filled-underline-display: none; - --rz-form-field-shadow: none; - --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); - --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); - --rz-form-field-label-color: var(--rz-text-color); - --rz-form-field-label-focus-color: var(--rz-primary); - --rz-form-field-label-padding: 0.125rem 0.1875rem; - --rz-form-field-text-label-padding: 0.125rem 0; - --rz-form-field-label-left: 0.25rem; - --rz-form-field-label-textarea-top: 0.375rem; - --rz-form-field-label-floating-top: -0.625rem; - --rz-form-field-label-floating-background-color: var(--rz-input-background-color); - --rz-form-field-helper-padding: 0 0.5rem; -} - .rz-form-field-helper { padding: var(--rz-form-field-helper-padding); } @@ -25344,11 +19036,12 @@ button.rz-colorpicker-trigger .rzi:before { display: inline-flex; align-items: center; vertical-align: top; - margin: var(--rz-form-field-margin); + margin-block: var(--rz-form-field-margin-block); + margin-inline: var(--rz-form-field-margin-inline); box-shadow: var(--rz-form-field-shadow); transition: var(--rz-input-transition); } -.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-calendar.rz-state-disabled .rz-inputtext { +.rz-form-field-content > *, .rz-form-field-content > .rz-autocomplete, .rz-form-field-content > .rz-autocomplete.rz-state-disabled > .rz-inputtext, .rz-form-field-content input, .rz-form-field-content .rz-inputtext, .rz-form-field-content .rz-inputtext.rz-state-disabled, .rz-form-field-content .rz-datepicker.rz-state-disabled > .rz-inputtext { flex: 1; } .rz-form-field-content .rz-form-field-start, @@ -25357,12 +19050,12 @@ button.rz-colorpicker-trigger .rzi:before { flex: 0; align-items: center; white-space: nowrap; - padding: var(--rz-form-field-start-end-padding); - padding-top: 0; - padding-bottom: 0; + padding-block: var(--rz-form-field-start-end-padding-block); + padding-inline: var(--rz-form-field-start-end-padding-inline); } .rz-form-field { + box-sizing: border-box; display: inline-flex; flex-direction: column; vertical-align: top; @@ -25390,20 +19083,22 @@ button.rz-colorpicker-trigger .rzi:before { color: var(--rz-input-disabled-placeholder-color); } .rz-form-field.rz-variant-outlined .rz-form-field-start, .rz-form-field.rz-variant-filled .rz-form-field-start, .rz-form-field.rz-variant-flat .rz-form-field-start { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content, .rz-form-field.rz-variant-flat .rz-form-field-content { margin: 0; --rz-input-height: var(--rz-form-field-filled-height); - --rz-input-padding: var(--rz-form-field-filled-padding); - --rz-numeric-input-padding: var(--rz-form-field-filled-numeric-padding); + --rz-input-padding-block: var(--rz-form-field-filled-padding-block); + --rz-input-padding-inline: var(--rz-form-field-filled-padding-inline); + --rz-numeric-input-padding-block: var(--rz-form-field-filled-numeric-padding-block); + --rz-numeric-input-padding-inline: var(--rz-form-field-filled-numeric-padding-inline); --rz-form-field-label-floating-top: var(--rz-form-field-filled-label-floating-top); box-shadow: var(--rz-input-shadow); } -.rz-form-field.rz-variant-filled .rz-form-field-content .rz-spinner-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-spinner-up { +.rz-form-field.rz-variant-filled .rz-form-field-content .rz-numeric-up, .rz-form-field.rz-variant-flat .rz-form-field-content .rz-numeric-up { top: calc(var(--rz-numeric-button-offset) + 1rem); } .rz-form-field.rz-variant-filled .rz-form-field-content .rz-form-field-start, @@ -25448,33 +19143,36 @@ button.rz-colorpicker-trigger .rzi:before { box-shadow: none; --rz-input-background-color: transparent; --rz-input-border-radius: 0; - --rz-input-padding: 0.4375rem 0; - --rz-numeric-input-padding: 0.5rem 1.25rem 0.5rem 0; - --rz-text-area-padding: 0.4375rem 0; - --rz-form-field-label-left: 0; + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0; + --rz-numeric-input-padding-block: 0.5rem 0.5rem; + --rz-numeric-input-padding-inline: 0 1.25rem; + --rz-text-area-padding-block: 0.4375rem; + --rz-text-area-padding-inline: 0; + --rz-form-field-label-inset-inline-start: 0; --rz-form-field-label-padding: var(--rz-form-field-text-label-padding); } .rz-form-field.rz-variant-text .rz-form-field-content ~ .rz-form-field-helper { padding: 0; } .rz-form-field.rz-variant-text .rz-form-field-start { - padding-left: 0; + padding-inline-start: 0; } .rz-form-field.rz-variant-text .rz-form-field-end { - padding-right: 0; + padding-inline-end: 0; } .rz-form-field.rz-variant-filled .rz-form-field-content:before, .rz-form-field.rz-variant-text .rz-form-field-content:before { content: ""; position: absolute; z-index: 1; - left: 50%; - right: 50%; + inset-inline-start: 50%; + inset-inline-end: 50%; bottom: calc(-1 * var(--rz-border-width)); height: calc(var(--rz-border-width) + 1px); border: var(--rz-input-focus-border); - border-left-width: 0; - border-right-width: 0; - transition: left var(--rz-transition), right var(--rz-transition), border-width var(--rz-transition); + border-inline-start-width: 0; + border-inline-end-width: 0; + transition: inset-inline-start var(--rz-transition), inset-inline-end var(--rz-transition), border-width var(--rz-transition); } .rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after { content: ""; @@ -25491,16 +19189,16 @@ button.rz-colorpicker-trigger .rzi:before { border-bottom: var(--rz-input-disabled-border); } .rz-form-field.rz-variant-filled.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before, .rz-form-field.rz-variant-text.rz-state-focused:not(.rz-state-disabled) .rz-form-field-content:before { - left: calc(-1 * var(--rz-border-width)); - right: calc(-1 * var(--rz-border-width)); + inset-inline-start: calc(-1 * var(--rz-border-width)); + inset-inline-end: calc(-1 * var(--rz-border-width)); border: var(--rz-input-focus-border); - border-left-width: var(--rz-border-width); - border-right-width: var(--rz-border-width); + border-inline-start-width: var(--rz-border-width); + border-inline-end-width: var(--rz-border-width); } -.rz-form-field .rz-spinner-button { +.rz-form-field .rz-numeric-button { display: none; } -.rz-form-field .rz-spinner:focus-within .rz-spinner-button { +.rz-form-field .rz-numeric:focus-within .rz-numeric-button { display: block; } @@ -25508,33 +19206,33 @@ button.rz-colorpicker-trigger .rzi:before { position: absolute; pointer-events: none; padding: var(--rz-form-field-label-padding); - top: 50%; - right: auto; + inset-block-start: 50%; + inset-inline-end: auto; border-radius: var(--rz-border-radius); - left: var(--rz-form-field-label-left); + inset-inline-start: var(--rz-form-field-label-inset-inline-start); max-width: calc(100% - 1.5rem); transform: translate(0, -50%); background-color: transparent; - transition: top var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); + transition: inset-block-start var(--rz-transition), transform var(--rz-transition), color var(--rz-transition), font-size var(--rz-transition), max-width var(--rz-transition); } .rz-state-disabled .rz-form-field-content > .rz-form-field-label { color: var(--rz-input-disabled-color) !important; } .rz-form-field-label:last-child { - right: 1.5rem; + inset-inline-end: 1.5rem; } .rz-textarea ~ .rz-form-field-label { - top: var(--rz-form-field-label-textarea-top); + inset-block-start: var(--rz-form-field-label-textarea-top); transform: translate(0, 0); } .rz-variant-filled .rz-textarea ~ .rz-form-field-label, .rz-variant-flat .rz-textarea ~ .rz-form-field-label { transform: translate(0, 0.625rem); } -.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { - right: auto; - top: var(--rz-form-field-label-floating-top); - padding-top: 0; - padding-bottom: 0; +.rz-form-field:not(.rz-floating-label) .rz-form-field-label, .rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-textbox:not(:placeholder-shown) ~ .rz-form-field-label, :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled :not(.rz-state-empty) ~ .rz-form-field-label, .rz-variant-flat :not(.rz-state-empty) ~ .rz-form-field-label, .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-chkbox ~ .rz-form-field-label, .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label { + inset-inline-end: auto; + inset-block-start: var(--rz-form-field-label-floating-top); + padding-block-start: 0; + padding-block-end: 0; transform: translate(0, 0); color: var(--rz-input-placeholder-color); background-color: var(--rz-form-field-label-floating-background-color); @@ -25551,27 +19249,15 @@ button.rz-colorpicker-trigger .rzi:before { .rz-state-focused .rz-form-field-label, .rz-variant-filled.rz-state-focused .rz-form-field-label, .rz-variant-flat.rz-state-focused .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-spinner:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-textbox:focus ~ .rz-form-field-label, .rz-textarea:focus ~ .rz-form-field-label, .rz-numeric:focus-within ~ .rz-form-field-label, .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-spinner:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { +.rz-variant-filled .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textbox:focus ~ .rz-form-field-label, .rz-variant-filled .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-flat .rz-textarea:focus ~ .rz-form-field-label, .rz-variant-filled .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-numeric:focus-within ~ .rz-form-field-label, .rz-variant-filled .rz-autocomplete:focus-within ~ .rz-form-field-label, .rz-variant-flat .rz-autocomplete:focus-within ~ .rz-form-field-label { color: var(--rz-form-field-label-focus-color); } -:root { - --rz-timeline-item-padding: 0.5rem; - --rz-timeline-axis-size: 4rem; - --rz-timeline-point-size: 1rem; - --rz-timeline-point-border: 3px solid var(--rz-base-background-color); - --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); - --rz-timeline-point-background-color: var(--rz-base-300); - --rz-timeline-point-color: var(--rz-text-color); - --rz-timeline-line-color: var(--rz-base-300); - --rz-timeline-line-width: 0.125rem; - --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); -} - .rz-timeline { + box-sizing: border-box; display: flex; } .rz-timeline.rz-timeline-column { @@ -26116,25 +19802,1581 @@ button.rz-colorpicker-trigger .rzi:before { } .rz-picklist-wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + --rz-gap: 1rem; +} + +.rz-picklist-source-wrapper, +.rz-picklist-target-wrapper { + flex: 1; + --rz-gap: 0.5rem; + overflow: hidden; +} +.rz-picklist-source-wrapper .rz-listbox, +.rz-picklist-target-wrapper .rz-listbox { width: 100%; height: 100%; +} + +.rz-picklist-buttons.rz-flex-row .rzi { + transform: rotate(90deg); +} + +:root { + /* Theme Colors */ + --rz-white: #ffffff; + --rz-black: #000000; + --rz-base: #e0e1e4; + --rz-base-50: #ffffff; + --rz-base-100: #f4f5f9; + --rz-base-200: #e9eaed; + --rz-base-300: #e0e1e4; + --rz-base-400: #c9cacd; + --rz-base-500: #afafb2; + --rz-base-600: #8d8e90; + --rz-base-700: #707072; + --rz-base-800: #4f4f50; + --rz-base-900: #262526; + --rz-base-light: #e9eaed; + --rz-base-lighter: #f4f5f9; + --rz-base-dark: #707072; + --rz-base-darker: #262526; + --rz-primary: #1151f3; + --rz-primary-light: #376df5; + --rz-primary-lighter: rgba(17, 81, 243, 0.16); + --rz-primary-dark: #0e44cc; + --rz-primary-darker: #0d3eb9; + --rz-secondary: #5d89f7; + --rz-secondary-light: #779cf8; + --rz-secondary-lighter: rgba(93, 137, 247, 0.16); + --rz-secondary-dark: #4e73cf; + --rz-secondary-darker: #4768bc; + --rz-info: #12a4f5; + --rz-info-light: #38b3f7; + --rz-info-lighter: rgba(18, 164, 245, 0.16); + --rz-info-dark: #0f8ace; + --rz-info-darker: #0e7dba; + --rz-success: #009b51; + --rz-success-light: #29ab6d; + --rz-success-lighter: rgba(0, 155, 81, 0.16); + --rz-success-dark: #008244; + --rz-success-darker: #00763e; + --rz-warning: #ffae11; + --rz-warning-light: #ffbb37; + --rz-warning-lighter: rgba(255, 174, 17, 0.16); + --rz-warning-dark: #d6920e; + --rz-warning-darker: #c2840d; + --rz-danger: #f31155; + --rz-danger-light: #f53770; + --rz-danger-lighter: rgba(243, 17, 85, 0.16); + --rz-danger-dark: #cc0e47; + --rz-danger-darker: #b90d41; + --rz-on-base: #262526; + --rz-on-base-light: #262526; + --rz-on-base-lighter: #262526; + --rz-on-base-dark: #ffffff; + --rz-on-base-darker: #ffffff; + --rz-on-primary: #ffffff; + --rz-on-primary-light: #ffffff; + --rz-on-primary-lighter: #1151f3; + --rz-on-primary-dark: #ffffff; + --rz-on-primary-darker: #ffffff; + --rz-on-secondary: #ffffff; + --rz-on-secondary-light: #ffffff; + --rz-on-secondary-lighter: #5d89f7; + --rz-on-secondary-dark: #ffffff; + --rz-on-secondary-darker: #ffffff; + --rz-on-info: #ffffff; + --rz-on-info-light: #ffffff; + --rz-on-info-lighter: #12a4f5; + --rz-on-info-dark: #ffffff; + --rz-on-info-darker: #ffffff; + --rz-on-success: #ffffff; + --rz-on-success-light: #ffffff; + --rz-on-success-lighter: #009b51; + --rz-on-success-dark: #ffffff; + --rz-on-success-darker: #ffffff; + --rz-on-warning: #ffffff; + --rz-on-warning-light: #ffffff; + --rz-on-warning-lighter: #ffae11; + --rz-on-warning-dark: #ffffff; + --rz-on-warning-darker: #ffffff; + --rz-on-danger: #ffffff; + --rz-on-danger-light: #ffffff; + --rz-on-danger-lighter: #f31155; + --rz-on-danger-dark: #ffffff; + --rz-on-danger-darker: #ffffff; + --rz-series-1: #376df5; + --rz-series-2: #64dfdf; + --rz-series-3: #f68769; + --rz-series-4: #c161e2; + --rz-series-5: #fdd07a; + --rz-series-6: #f8629b; + --rz-series-7: #74d062; + --rz-series-8: #84a7ff; + --rz-series-9: #4d99f9; + --rz-series-10: #8cecec; + --rz-series-11: #fab793; + --rz-series-12: #da88ee; + --rz-series-13: #fee3ab; + --rz-series-14: #fb89c3; + --rz-series-15: #a2e389; + --rz-series-16: #b5caff; + --rz-series-17: #1750f3; + --rz-series-18: #46d7d7; + --rz-series-19: #f46e4c; + --rz-series-20: #b343db; + --rz-series-21: #fdc55f; + --rz-series-22: #f64485; + --rz-series-23: #58c544; + --rz-series-24: #6a93ff; + /* Theme Constants */ + --rz-border-width: 1px; + --rz-root-font-size: 16px; + --rz-body-font-size: 0.875rem; + --rz-body-line-height: 1.429; + --rz-body-background-color: var(--rz-base-100); + --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --rz-outline-offset: 1px; + --rz-outline-width: 2px; + --rz-outline-color: var(--rz-primary-light); + /* Semantic Text */ + --rz-text-title-color: var(--rz-base-900); + --rz-text-color: var(--rz-base-800); + --rz-text-secondary-color: var(--rz-base-700); + --rz-text-tertiary-color: var(--rz-base-600); + --rz-text-disabled-color: var(--rz-base-500); + --rz-text-contrast-color: var(--rz-white); + /* Text */ + --rz-text-display-h1-font-size: clamp(4.5rem, 6.667vw, 6rem); + --rz-text-display-h1-line-height: 1em; + --rz-text-display-h1-font-weight: 700; + --rz-text-display-h1-letter-spacing: -0.04em; + --rz-text-display-h1-color: var(--rz-text-title-color); + --rz-text-display-h1-margin-block-start: 0; + --rz-text-display-h1-margin-block-end: 1rem; + --rz-text-display-h2-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-display-h2-line-height: calc(1em + 4px); + --rz-text-display-h2-font-weight: 700; + --rz-text-display-h2-letter-spacing: -0.03em; + --rz-text-display-h2-color: var(--rz-text-title-color); + --rz-text-display-h2-margin-block-start: 0; + --rz-text-display-h2-margin-block-end: 1rem; + --rz-text-display-h3-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-display-h3-line-height: calc(1em + 4px); + --rz-text-display-h3-font-weight: 700; + --rz-text-display-h3-letter-spacing: -0.02em; + --rz-text-display-h3-color: var(--rz-text-title-color); + --rz-text-display-h3-margin-block-start: 0; + --rz-text-display-h3-margin-block-end: 0.75rem; + --rz-text-display-h4-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-display-h4-line-height: 1em; + --rz-text-display-h4-font-weight: 700; + --rz-text-display-h4-letter-spacing: -0.02em; + --rz-text-display-h4-color: var(--rz-text-title-color); + --rz-text-display-h4-margin-block-start: 0; + --rz-text-display-h4-margin-block-end: 0.5rem; + --rz-text-display-h5-font-size: clamp(1.5rem, 2.222vw, 2rem); + --rz-text-display-h5-line-height: 1em; + --rz-text-display-h5-font-weight: 600; + --rz-text-display-h5-letter-spacing: -0.02em; + --rz-text-display-h5-color: var(--rz-text-title-color); + --rz-text-display-h5-margin-block-start: 0; + --rz-text-display-h5-margin-block-end: 0.5rem; + --rz-text-display-h6-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-display-h6-line-height: 1em; + --rz-text-display-h6-font-weight: 600; + --rz-text-display-h6-letter-spacing: -0.02em; + --rz-text-display-h6-color: var(--rz-text-title-color); + --rz-text-display-h6-margin-block-start: 0; + --rz-text-display-h6-margin-block-end: 0.5rem; + --rz-text-h1-font-size: clamp(3.75rem, 5.278vw, 4.75rem); + --rz-text-h1-line-height: calc(1em + 4px); + --rz-text-h1-font-weight: 600; + --rz-text-h1-letter-spacing: -0.04em; + --rz-text-h1-color: var(--rz-text-title-color); + --rz-text-h1-margin-block-start: 0; + --rz-text-h1-margin-block-end: 1rem; + --rz-text-h2-font-size: clamp(2.625rem, 3.889vw, 3.5rem); + --rz-text-h2-line-height: calc(1em + 4px); + --rz-text-h2-font-weight: 600; + --rz-text-h2-letter-spacing: -0.03em; + --rz-text-h2-color: var(--rz-text-title-color); + --rz-text-h2-margin-block-start: 0; + --rz-text-h2-margin-block-end: 1rem; + --rz-text-h3-font-size: clamp(2.25rem, 3.333vw, 3rem); + --rz-text-h3-line-height: 1em; + --rz-text-h3-font-weight: 600; + --rz-text-h3-letter-spacing: -0.02em; + --rz-text-h3-color: var(--rz-text-title-color); + --rz-text-h3-margin-block-start: 0; + --rz-text-h3-margin-block-end: 0.75rem; + --rz-text-h4-font-size: clamp(1.75rem, 2.778vw, 2.5rem); + --rz-text-h4-line-height: 1em; + --rz-text-h4-font-weight: 600; + --rz-text-h4-letter-spacing: -0.02em; + --rz-text-h4-color: var(--rz-text-title-color); + --rz-text-h4-margin-block-start: 0; + --rz-text-h4-margin-block-end: 0.5rem; + --rz-text-h5-font-size: clamp(1.25rem, 1.667vw, 1.5rem); + --rz-text-h5-line-height: 1em; + --rz-text-h5-font-weight: 600; + --rz-text-h5-letter-spacing: -0.02em; + --rz-text-h5-color: var(--rz-text-title-color); + --rz-text-h5-margin-block-start: 0; + --rz-text-h5-margin-block-end: 0.5rem; + --rz-text-h6-font-size: clamp(1rem, 1.667vw, 1.25rem); + --rz-text-h6-line-height: 1em; + --rz-text-h6-font-weight: 600; + --rz-text-h6-letter-spacing: -0.02em; + --rz-text-h6-color: var(--rz-text-title-color); + --rz-text-h6-margin-block-start: 0; + --rz-text-h6-margin-block-end: 0.5rem; + --rz-text-subtitle1-font-size: 1rem; + --rz-text-subtitle1-line-height: 1.25rem; + --rz-text-subtitle1-font-weight: 600; + --rz-text-subtitle1-letter-spacing: -0.02em; + --rz-text-subtitle1-color: var(--rz-text-title-color); + --rz-text-subtitle1-margin-block-start: 0; + --rz-text-subtitle1-margin-block-end: 0.5rem; + --rz-text-subtitle2-font-size: 0.875rem; + --rz-text-subtitle2-line-height: 1.25rem; + --rz-text-subtitle2-font-weight: 600; + --rz-text-subtitle2-letter-spacing: -0.02em; + --rz-text-subtitle2-color: var(--rz-text-title-color); + --rz-text-subtitle2-margin-block-start: 0; + --rz-text-subtitle2-margin-block-end: 0.5rem; + --rz-text-body1-font-size: 1rem; + --rz-text-body1-line-height: 1.25rem; + --rz-text-body1-font-weight: 400; + --rz-text-body1-letter-spacing: -0.02em; + --rz-text-body1-color: var(--rz-text-color); + --rz-text-body1-margin-block-start: 0; + --rz-text-body1-margin-block-end: 0.5rem; + --rz-text-body2-font-size: 0.875rem; + --rz-text-body2-line-height: 1.25rem; + --rz-text-body2-font-weight: 400; + --rz-text-body2-letter-spacing: -0.02em; + --rz-text-body2-color: var(--rz-text-color); + --rz-text-body2-margin-block-start: 0; + --rz-text-body2-margin-block-end: 0.5rem; + --rz-text-button-font-size: 0.875rem; + --rz-text-button-line-height: 1.25rem; + --rz-text-button-font-weight: 600; + --rz-text-button-letter-spacing: -0.02em; + --rz-text-button-color: var(--rz-text-color); + --rz-text-button-margin-block-start: 0; + --rz-text-button-margin-block-end: 0.5rem; + --rz-text-caption-font-size: 0.75rem; + --rz-text-caption-line-height: normal; + --rz-text-caption-font-weight: 400; + --rz-text-caption-letter-spacing: 0.4px; + --rz-text-caption-color: var(--rz-text-color); + --rz-text-caption-margin-block-start: 0; + --rz-text-caption-margin-block-end: 0.5rem; + --rz-text-overline-font-size: 0.625rem; + --rz-text-overline-line-height: normal; + --rz-text-overline-font-weight: 400; + --rz-text-overline-letter-spacing: 1.5px; + --rz-text-overline-text-transform: uppercase; + --rz-text-overline-color: var(--rz-text-color); + --rz-text-overline-margin-block-start: 0; + --rz-text-overline-margin-block-end: 0.5rem; + --rz-text-selection-background-color: var(--rz-primary-lighter); + --rz-text-selection-color: inherit; + /* Link */ + --rz-link-color: var(--rz-secondary); + --rz-link-text-decoration: none; + --rz-link-hover-color: var(--rz-secondary-dark); + --rz-link-hover-text-decoration: underline; + --rz-link-focus-outline: var(--rz-outline-focus); + --rz-link-focus-outline-offset: var(--rz-outline-offset); + /* Base Background */ + --rz-base-background-color: var(--rz-white); + /* Border */ + --rz-border-white: var(--rz-border-width) solid var(--rz-white); + --rz-border-black: var(--rz-border-width) solid var(--rz-black); + --rz-border-base: var(--rz-border-width) solid var(--rz-base); + --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50); + --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100); + --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300); + --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500); + --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600); + --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700); + --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800); + --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900); + --rz-border-base-light: var(--rz-border-width) solid var(--rz-base-light); + --rz-border-base-lighter: var(--rz-border-width) solid var(--rz-base-lighter); + --rz-border-base-dark: var(--rz-border-width) solid var(--rz-base-dark); + --rz-border-base-darker: var(--rz-border-width) solid var(--rz-base-darker); + --rz-border-primary: var(--rz-border-width) solid var(--rz-primary); + --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light); + --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter); + --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark); + --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker); + --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary); + --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light); + --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter); + --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark); + --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker); + --rz-border-info: var(--rz-border-width) solid var(--rz-info); + --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light); + --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter); + --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark); + --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker); + --rz-border-success: var(--rz-border-width) solid var(--rz-success); + --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light); + --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter); + --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark); + --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker); + --rz-border-warning: var(--rz-border-width) solid var(--rz-warning); + --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light); + --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter); + --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark); + --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker); + --rz-border-danger: var(--rz-border-width) solid var(--rz-danger); + --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light); + --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter); + --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark); + --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker); + --rz-border-on-base: var(--rz-border-width) solid var(--rz-on-base); + --rz-border-on-base-light: var(--rz-border-width) solid var(--rz-on-base-light); + --rz-border-on-base-lighter: var(--rz-border-width) solid var(--rz-on-base-lighter); + --rz-border-on-base-dark: var(--rz-border-width) solid var(--rz-on-base-dark); + --rz-border-on-base-darker: var(--rz-border-width) solid var(--rz-on-base-darker); + --rz-border-on-primary: var(--rz-border-width) solid var(--rz-on-primary); + --rz-border-on-primary-light: var(--rz-border-width) solid var(--rz-on-primary-light); + --rz-border-on-primary-lighter: var(--rz-border-width) solid var(--rz-on-primary-lighter); + --rz-border-on-primary-dark: var(--rz-border-width) solid var(--rz-on-primary-dark); + --rz-border-on-primary-darker: var(--rz-border-width) solid var(--rz-on-primary-darker); + --rz-border-on-secondary: var(--rz-border-width) solid var(--rz-on-secondary); + --rz-border-on-secondary-light: var(--rz-border-width) solid var(--rz-on-secondary-light); + --rz-border-on-secondary-lighter: var(--rz-border-width) solid var(--rz-on-secondary-lighter); + --rz-border-on-secondary-dark: var(--rz-border-width) solid var(--rz-on-secondary-dark); + --rz-border-on-secondary-darker: var(--rz-border-width) solid var(--rz-on-secondary-darker); + --rz-border-on-info: var(--rz-border-width) solid var(--rz-on-info); + --rz-border-on-info-light: var(--rz-border-width) solid var(--rz-on-info-light); + --rz-border-on-info-lighter: var(--rz-border-width) solid var(--rz-on-info-lighter); + --rz-border-on-info-dark: var(--rz-border-width) solid var(--rz-on-info-dark); + --rz-border-on-info-darker: var(--rz-border-width) solid var(--rz-on-info-darker); + --rz-border-on-success: var(--rz-border-width) solid var(--rz-on-success); + --rz-border-on-success-light: var(--rz-border-width) solid var(--rz-on-success-light); + --rz-border-on-success-lighter: var(--rz-border-width) solid var(--rz-on-success-lighter); + --rz-border-on-success-dark: var(--rz-border-width) solid var(--rz-on-success-dark); + --rz-border-on-success-darker: var(--rz-border-width) solid var(--rz-on-success-darker); + --rz-border-on-warning: var(--rz-border-width) solid var(--rz-on-warning); + --rz-border-on-warning-light: var(--rz-border-width) solid var(--rz-on-warning-light); + --rz-border-on-warning-lighter: var(--rz-border-width) solid var(--rz-on-warning-lighter); + --rz-border-on-warning-dark: var(--rz-border-width) solid var(--rz-on-warning-dark); + --rz-border-on-warning-darker: var(--rz-border-width) solid var(--rz-on-warning-darker); + --rz-border-on-danger: var(--rz-border-width) solid var(--rz-on-danger); + --rz-border-on-danger-light: var(--rz-border-width) solid var(--rz-on-danger-light); + --rz-border-on-danger-lighter: var(--rz-border-width) solid var(--rz-on-danger-lighter); + --rz-border-on-danger-dark: var(--rz-border-width) solid var(--rz-on-danger-dark); + --rz-border-on-danger-darker: var(--rz-border-width) solid var(--rz-on-danger-darker); + --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1); + --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2); + --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3); + --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4); + --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5); + --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6); + --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7); + --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8); + --rz-border-series-9: var(--rz-border-width) solid var(--rz-series-9); + --rz-border-series-10: var(--rz-border-width) solid var(--rz-series-10); + --rz-border-series-11: var(--rz-border-width) solid var(--rz-series-11); + --rz-border-series-12: var(--rz-border-width) solid var(--rz-series-12); + --rz-border-series-13: var(--rz-border-width) solid var(--rz-series-13); + --rz-border-series-14: var(--rz-border-width) solid var(--rz-series-14); + --rz-border-series-15: var(--rz-border-width) solid var(--rz-series-15); + --rz-border-series-16: var(--rz-border-width) solid var(--rz-series-16); + --rz-border-series-17: var(--rz-border-width) solid var(--rz-series-17); + --rz-border-series-18: var(--rz-border-width) solid var(--rz-series-18); + --rz-border-series-19: var(--rz-border-width) solid var(--rz-series-19); + --rz-border-series-20: var(--rz-border-width) solid var(--rz-series-20); + --rz-border-series-21: var(--rz-border-width) solid var(--rz-series-21); + --rz-border-series-22: var(--rz-border-width) solid var(--rz-series-22); + --rz-border-series-23: var(--rz-border-width) solid var(--rz-series-23); + --rz-border-series-24: var(--rz-border-width) solid var(--rz-series-24); + /* Interaction State Border */ + --rz-border-normal: var(--rz-border-width) solid var(--rz-base-200); + --rz-border-hover: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-focus: var(--rz-border-width) solid var(--rz-base-400); + --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-200); + /* Border Radius */ + --rz-border-radius: 4px; + --rz-border-radius-0: 0; + --rz-border-radius-1: 0.25rem; + --rz-border-radius-2: 0.5rem; + --rz-border-radius-3: 0.75rem; + --rz-border-radius-4: 1rem; + --rz-border-radius-5: 1.25rem; + --rz-border-radius-6: 1.5rem; + --rz-border-radius-7: 1.75rem; + --rz-border-radius-8: 2rem; + --rz-border-radius-9: 2.25rem; + --rz-border-radius-10: 2.5rem; + /* Outline */ + --rz-outline-white: var(--rz-outline-width) solid var(--rz-white); + --rz-outline-black: var(--rz-outline-width) solid var(--rz-black); + --rz-outline-base: var(--rz-outline-width) solid var(--rz-base); + --rz-outline-base-50: var(--rz-outline-width) solid var(--rz-base-50); + --rz-outline-base-100: var(--rz-outline-width) solid var(--rz-base-100); + --rz-outline-base-200: var(--rz-outline-width) solid var(--rz-base-200); + --rz-outline-base-300: var(--rz-outline-width) solid var(--rz-base-300); + --rz-outline-base-400: var(--rz-outline-width) solid var(--rz-base-400); + --rz-outline-base-500: var(--rz-outline-width) solid var(--rz-base-500); + --rz-outline-base-600: var(--rz-outline-width) solid var(--rz-base-600); + --rz-outline-base-700: var(--rz-outline-width) solid var(--rz-base-700); + --rz-outline-base-800: var(--rz-outline-width) solid var(--rz-base-800); + --rz-outline-base-900: var(--rz-outline-width) solid var(--rz-base-900); + --rz-outline-base-light: var(--rz-outline-width) solid var(--rz-base-light); + --rz-outline-base-lighter: var(--rz-outline-width) solid var(--rz-base-lighter); + --rz-outline-base-dark: var(--rz-outline-width) solid var(--rz-base-dark); + --rz-outline-base-darker: var(--rz-outline-width) solid var(--rz-base-darker); + --rz-outline-primary: var(--rz-outline-width) solid var(--rz-primary); + --rz-outline-primary-light: var(--rz-outline-width) solid var(--rz-primary-light); + --rz-outline-primary-lighter: var(--rz-outline-width) solid var(--rz-primary-lighter); + --rz-outline-primary-dark: var(--rz-outline-width) solid var(--rz-primary-dark); + --rz-outline-primary-darker: var(--rz-outline-width) solid var(--rz-primary-darker); + --rz-outline-secondary: var(--rz-outline-width) solid var(--rz-secondary); + --rz-outline-secondary-light: var(--rz-outline-width) solid var(--rz-secondary-light); + --rz-outline-secondary-lighter: var(--rz-outline-width) solid var(--rz-secondary-lighter); + --rz-outline-secondary-dark: var(--rz-outline-width) solid var(--rz-secondary-dark); + --rz-outline-secondary-darker: var(--rz-outline-width) solid var(--rz-secondary-darker); + --rz-outline-info: var(--rz-outline-width) solid var(--rz-info); + --rz-outline-info-light: var(--rz-outline-width) solid var(--rz-info-light); + --rz-outline-info-lighter: var(--rz-outline-width) solid var(--rz-info-lighter); + --rz-outline-info-dark: var(--rz-outline-width) solid var(--rz-info-dark); + --rz-outline-info-darker: var(--rz-outline-width) solid var(--rz-info-darker); + --rz-outline-success: var(--rz-outline-width) solid var(--rz-success); + --rz-outline-success-light: var(--rz-outline-width) solid var(--rz-success-light); + --rz-outline-success-lighter: var(--rz-outline-width) solid var(--rz-success-lighter); + --rz-outline-success-dark: var(--rz-outline-width) solid var(--rz-success-dark); + --rz-outline-success-darker: var(--rz-outline-width) solid var(--rz-success-darker); + --rz-outline-warning: var(--rz-outline-width) solid var(--rz-warning); + --rz-outline-warning-light: var(--rz-outline-width) solid var(--rz-warning-light); + --rz-outline-warning-lighter: var(--rz-outline-width) solid var(--rz-warning-lighter); + --rz-outline-warning-dark: var(--rz-outline-width) solid var(--rz-warning-dark); + --rz-outline-warning-darker: var(--rz-outline-width) solid var(--rz-warning-darker); + --rz-outline-danger: var(--rz-outline-width) solid var(--rz-danger); + --rz-outline-danger-light: var(--rz-outline-width) solid var(--rz-danger-light); + --rz-outline-danger-lighter: var(--rz-outline-width) solid var(--rz-danger-lighter); + --rz-outline-danger-dark: var(--rz-outline-width) solid var(--rz-danger-dark); + --rz-outline-danger-darker: var(--rz-outline-width) solid var(--rz-danger-darker); + --rz-outline-on-base: var(--rz-outline-width) solid var(--rz-on-base); + --rz-outline-on-base-light: var(--rz-outline-width) solid var(--rz-on-base-light); + --rz-outline-on-base-lighter: var(--rz-outline-width) solid var(--rz-on-base-lighter); + --rz-outline-on-base-dark: var(--rz-outline-width) solid var(--rz-on-base-dark); + --rz-outline-on-base-darker: var(--rz-outline-width) solid var(--rz-on-base-darker); + --rz-outline-on-primary: var(--rz-outline-width) solid var(--rz-on-primary); + --rz-outline-on-primary-light: var(--rz-outline-width) solid var(--rz-on-primary-light); + --rz-outline-on-primary-lighter: var(--rz-outline-width) solid var(--rz-on-primary-lighter); + --rz-outline-on-primary-dark: var(--rz-outline-width) solid var(--rz-on-primary-dark); + --rz-outline-on-primary-darker: var(--rz-outline-width) solid var(--rz-on-primary-darker); + --rz-outline-on-secondary: var(--rz-outline-width) solid var(--rz-on-secondary); + --rz-outline-on-secondary-light: var(--rz-outline-width) solid var(--rz-on-secondary-light); + --rz-outline-on-secondary-lighter: var(--rz-outline-width) solid var(--rz-on-secondary-lighter); + --rz-outline-on-secondary-dark: var(--rz-outline-width) solid var(--rz-on-secondary-dark); + --rz-outline-on-secondary-darker: var(--rz-outline-width) solid var(--rz-on-secondary-darker); + --rz-outline-on-info: var(--rz-outline-width) solid var(--rz-on-info); + --rz-outline-on-info-light: var(--rz-outline-width) solid var(--rz-on-info-light); + --rz-outline-on-info-lighter: var(--rz-outline-width) solid var(--rz-on-info-lighter); + --rz-outline-on-info-dark: var(--rz-outline-width) solid var(--rz-on-info-dark); + --rz-outline-on-info-darker: var(--rz-outline-width) solid var(--rz-on-info-darker); + --rz-outline-on-success: var(--rz-outline-width) solid var(--rz-on-success); + --rz-outline-on-success-light: var(--rz-outline-width) solid var(--rz-on-success-light); + --rz-outline-on-success-lighter: var(--rz-outline-width) solid var(--rz-on-success-lighter); + --rz-outline-on-success-dark: var(--rz-outline-width) solid var(--rz-on-success-dark); + --rz-outline-on-success-darker: var(--rz-outline-width) solid var(--rz-on-success-darker); + --rz-outline-on-warning: var(--rz-outline-width) solid var(--rz-on-warning); + --rz-outline-on-warning-light: var(--rz-outline-width) solid var(--rz-on-warning-light); + --rz-outline-on-warning-lighter: var(--rz-outline-width) solid var(--rz-on-warning-lighter); + --rz-outline-on-warning-dark: var(--rz-outline-width) solid var(--rz-on-warning-dark); + --rz-outline-on-warning-darker: var(--rz-outline-width) solid var(--rz-on-warning-darker); + --rz-outline-on-danger: var(--rz-outline-width) solid var(--rz-on-danger); + --rz-outline-on-danger-light: var(--rz-outline-width) solid var(--rz-on-danger-light); + --rz-outline-on-danger-lighter: var(--rz-outline-width) solid var(--rz-on-danger-lighter); + --rz-outline-on-danger-dark: var(--rz-outline-width) solid var(--rz-on-danger-dark); + --rz-outline-on-danger-darker: var(--rz-outline-width) solid var(--rz-on-danger-darker); + --rz-outline-series-1: var(--rz-outline-width) solid var(--rz-series-1); + --rz-outline-series-2: var(--rz-outline-width) solid var(--rz-series-2); + --rz-outline-series-3: var(--rz-outline-width) solid var(--rz-series-3); + --rz-outline-series-4: var(--rz-outline-width) solid var(--rz-series-4); + --rz-outline-series-5: var(--rz-outline-width) solid var(--rz-series-5); + --rz-outline-series-6: var(--rz-outline-width) solid var(--rz-series-6); + --rz-outline-series-7: var(--rz-outline-width) solid var(--rz-series-7); + --rz-outline-series-8: var(--rz-outline-width) solid var(--rz-series-8); + --rz-outline-series-9: var(--rz-outline-width) solid var(--rz-series-9); + --rz-outline-series-10: var(--rz-outline-width) solid var(--rz-series-10); + --rz-outline-series-11: var(--rz-outline-width) solid var(--rz-series-11); + --rz-outline-series-12: var(--rz-outline-width) solid var(--rz-series-12); + --rz-outline-series-13: var(--rz-outline-width) solid var(--rz-series-13); + --rz-outline-series-14: var(--rz-outline-width) solid var(--rz-series-14); + --rz-outline-series-15: var(--rz-outline-width) solid var(--rz-series-15); + --rz-outline-series-16: var(--rz-outline-width) solid var(--rz-series-16); + --rz-outline-series-17: var(--rz-outline-width) solid var(--rz-series-17); + --rz-outline-series-18: var(--rz-outline-width) solid var(--rz-series-18); + --rz-outline-series-19: var(--rz-outline-width) solid var(--rz-series-19); + --rz-outline-series-20: var(--rz-outline-width) solid var(--rz-series-20); + --rz-outline-series-21: var(--rz-outline-width) solid var(--rz-series-21); + --rz-outline-series-22: var(--rz-outline-width) solid var(--rz-series-22); + --rz-outline-series-23: var(--rz-outline-width) solid var(--rz-series-23); + --rz-outline-series-24: var(--rz-outline-width) solid var(--rz-series-24); + /* Interaction State Outline */ + --rz-outline-normal: none; + --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color); + /* Shadow */ + --rz-shadow-0: none; + --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08); + --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 4px 6px rgba(0, 0, 0, 0.04), 0px 12px 24px rgba(0, 0, 0, 0.12); + --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0px 5px 8px rgba(0, 0, 0, 0.04), 0px 14px 28px rgba(0, 0, 0, 0.13); + --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.04), 0px 16px 32px rgba(0, 0, 0, 0.14); + --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0px 7px 12px rgba(0, 0, 0, 0.04), 0px 18px 40px rgba(0, 0, 0, 0.15); + --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04), 0px 20px 48px rgba(0, 0, 0, 0.16); + --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.04), 0px 9px 20px rgba(0, 0, 0, 0.04), 0px 22px 64px rgba(0, 0, 0, 0.2); + /* Transition */ + --rz-transition: 0.1s linear; + --rz-transition-all: all 0.1s linear; + /* Layout Body */ + --rz-layout-body-margin: 0; + --rz-layout-body-padding: 1rem; + --rz-layout-body-border-radius: 0; + --rz-layout-body-background-color: transparent; + /* Accordion */ + --rz-accordion-item-padding-block: 0.25rem; + --rz-accordion-item-padding-inline: 0; + --rz-accordion-item-margin: 0; + --rz-accordion-item-border: none; + --rz-accordion-item-background-color: var(--rz-base-background-color); + --rz-accordion-item-color: var(--rz-text-color); + --rz-accordion-item-focus-outline: var(--rz-outline-focus); + --rz-accordion-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-accordion-item-line-height: 1.25rem; + --rz-accordion-item-font-size: var(--rz-body-font-size); + --rz-accordion-item-font-weight: normal; + --rz-accordion-icon-width: var(--rz-icon-size); + --rz-accordion-icon-height: var(--rz-icon-size); + --rz-accordion-icon-font-size: var(--rz-icon-size); + --rz-accordion-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-margin-inline: 0 0.25rem; + --rz-accordion-toggle-icon-order: 0; + --rz-accordion-selected-color: var(--rz-base-900); + --rz-accordion-hover-color: var(--rz-primary); + --rz-accordion-content-padding-inline: 1.5rem 0.5rem; + --rz-accordion-content-padding-block: 0.5rem; + --rz-accordion-content-font-size: var(--rz-body-font-size); + --rz-accordion-border-radius: var(--rz-border-radius); + --rz-accordion-shadow: none; + /* Alert */ + --rz-alert-margin: 0.5rem 0; + --rz-alert-padding: 1rem; + --rz-alert-gap: 1rem; + --rz-alert-color: var(--rz-text-color); + --rz-alert-background-color: var(--rz-base-200); + --rz-alert-box-shadow: var(--rz-shadow-3); + --rz-alert-border-radius: var(--rz-border-radius); + --rz-alert-message-margin: 0.25rem 0; + --rz-alert-title-color: var(--rz-text-h6-color); + --rz-alert-icon-color: var(--rz-alert-color); + --rz-alert-icon-margin: 0.25rem 0; + --rz-alert-icon-size: var(--rz-icon-size); + /* Badge */ + --rz-badge-border-radius: var(--rz-border-radius); + --rz-badge-pill-border-radius: calc(4 * var(--rz-border-radius)); + --rz-badge-padding: 0.125rem 0.25rem; + --rz-badge-pill-padding: 0.125rem 0.5rem; + --rz-badge-font-size: 0.75rem; + --rz-badge-font-weight: 600; + --rz-badge-line-height: 1rem; + --rz-badge-text-transform: uppercase; + --rz-badge-letter-spacing: 0.02rem; + /* Button */ + --rz-button-base-background-color: #e9eaed; + --rz-button-base-color: #4f4f50; + --rz-button-background-size: 100% 0%, 100% 0%; + --rz-button-border-radius: 4px; + --rz-button-shadow: none; + --rz-button-transition: var(--rz-transition-all), width 0, height 0; + --rz-button-line-height: 1.25rem; + --rz-button-vertical-align: top; + --rz-button-hover-shadow: none; + --rz-button-hover-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-hover-background-size: 100% 200%, 100% 0%; + --rz-button-focus-shadow: none; + --rz-button-focus-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-focus-background-size: 100% 200%, 100% 0%; + --rz-button-focus-outline: var(--rz-outline-focus); + --rz-button-focus-outline-offset: var(--rz-outline-offset); + --rz-button-active-shadow: none; + --rz-button-active-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); + --rz-button-active-background-size: 100% 0%, 100% 200%; + --rz-button-disabled-opacity: 0.5; + --rz-button-empty-opacity: 0.4; + /* Card */ + --rz-card-padding: 1.25rem; + --rz-card-background-color: var(--rz-base-background-color); + --rz-card-flat-background-color: var(--rz-base-100); + --rz-card-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-card-border: var(--rz-border-normal); + --rz-card-border-radius: var(--rz-border-radius); + --rz-card-heading-margin-bottom: 0.5rem; + /* Chart */ + --rz-chart-axis-color: var(--rz-base-300); + --rz-chart-axis-label-color: var(--rz-text-secondary-color); + --rz-chart-axis-font-size: 0.875rem; + --rz-chart-legend-font-size: 0.875rem; + --rz-chart-legend-focus-outline: var(--rz-outline-focus); + --rz-chart-legend-focus-outline-offset: var(--rz-outline-offset); + --rz-chart-tooltip-background: var(--rz-base-background-color); + --rz-chart-tooltip-color: var(--rz-text-color); + --rz-chart-marker-stroke: var(--rz-base-background-color); + /* Checkbox */ + --rz-checkbox-width: 1.25rem; + --rz-checkbox-height: 1.25rem; + --rz-checkbox-border-radius: var(--rz-border-radius); + --rz-checkbox-border-width: 1px; + --rz-checkbox-label-margin-block: 0; + --rz-checkbox-label-margin-inline: 0.5rem 1rem; + --rz-checkbox-margin-block: 1rem; + --rz-checkbox-margin-inline: 0; + --rz-checkbox-focus-outline: var(--rz-outline-focus); + --rz-checkbox-focus-outline-offset: var(--rz-outline-offset); + --rz-checkbox-checked-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-hover-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-disabled-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-color: var(--rz-primary); + --rz-checkbox-checked-shadow: none; + --rz-checkbox-checked-border: var(--rz-input-border); + --rz-checkbox-checked-hover-border: var(--rz-input-hover-border); + --rz-checkbox-checked-disabled-border: var(--rz-input-border); + --rz-checkbox-checked-icon-background-color: var(--rz-base-background-color); + --rz-checkbox-checked-icon-border-radius: calc(var(--rz-border-radius) / 2); + --rz-checkbox-icon-width: 1rem; + --rz-checkbox-icon-height: 1rem; + --rz-checkbox-icon-font-size: 1rem; + --rz-checkbox-tri-icon-width: 1rem; + --rz-checkbox-tri-icon-height: 1rem; + --rz-checkbox-tri-icon-font-size: 1rem; + /* Chip */ + --rz-chip-background-color: var(--rz-base-200); + --rz-chip-color: var(--rz-text-color); + --rz-chip-padding-block: 0; + --rz-chip-padding-inline: 0.5rem 0; + --rz-chip-gap: 0.5rem; + --rz-chip-border-radius: var(--rz-border-radius); + --rz-chip-font-size: 0.875rem; + /* ColorPicker */ + --rz-colorpicker-panel-border: var(--rz-border-normal); + --rz-colorpicker-panel-background-color: var(--rz-base-background-color); + --rz-colorpicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-colorpicker-panel-padding: 0.5rem; + --rz-colorpicker-panel-max-width: 20rem; + --rz-colorpicker-saturation-height: 200px; + --rz-colorpicker-focus-outline: var(--rz-outline-focus); + --rz-colorpicker-focus-outline-offset: var(--rz-outline-offset); + --rz-colorpicker-value-border-radius: 1rem; + --rz-colorpicker-items-gap: 0.5rem; + --rz-colorpicker-item-size: 1.25rem; + --rz-colorpicker-item-border-radius: 1rem; + --rz-colorpicker-item-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); + --rz-colorpicker-handle-size: 12px; + --rz-colorpicker-handle-border: 2px solid var(--rz-white); + --rz-colorpicker-handle-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08); + --rz-colorpicker-hex-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-hex-input-height: 2rem; + --rz-colorpicker-rgba-input-padding: 0.25rem 0.5rem; + --rz-colorpicker-rgba-input-height: 2rem; + --rz-colorpicker-input-labels-color: var(--rz-text-tertiary-color); + /* DataFilter */ + --rz-datafilter-item-padding-block: 0.25rem; + --rz-datafilter-item-padding-inline-start: 2rem; + --rz-datafilter-item-indentation: 0.25rem; + --rz-datafilter-item-path-width: 1rem; + --rz-datafilter-item-path-height: calc(0.25rem + (var(--rz-input-height) / 2)); + --rz-datafilter-item-path-border: var(--rz-border-normal); + --rz-datafilter-item-path-border-radius: calc(2 * var(--rz-border-radius)); + /* DataList */ + --rz-datalist-background-color: transparent; + --rz-datalist-shadow: none; + --rz-datalist-padding: 0.5rem; + --rz-datalist-border: var(--rz-border-base-200); + --rz-datalist-border-radius: var(--rz-border-radius); + --rz-datalist-item-shadow: none; + --rz-datalist-item-border: var(--rz-border-base-200); + --rz-datalist-item-margin-block: 0.5rem; + --rz-datalist-item-margin-inline: 0.5rem; + --rz-datalist-item-padding: 1rem; + --rz-datalist-item-background-color: var(--rz-base-background-color); + /* DatePicker */ + --rz-datepicker-trigger-icon-width: var(--rz-icon-size); + --rz-datepicker-trigger-icon-height: var(--rz-icon-size); + --rz-datepicker-line-height: 1.25rem; + --rz-datepicker-trigger-icon-color: var(--rz-text-color); + --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color); + --rz-datepicker-popup-width: 20rem; + --rz-datepicker-panel-border: var(--rz-border-normal); + --rz-datepicker-panel-background-color: var(--rz-base-background-color); + --rz-datepicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-datepicker-panel-margin: 0; + --rz-datepicker-header-color: var(--rz-text-color); + --rz-datepicker-header-background-color: var(--rz-base-background-color); + --rz-datepicker-header-padding-block: 0.5rem; + --rz-datepicker-header-padding-inline: 0.5rem; + --rz-datepicker-header-border: none; + --rz-datepicker-footer-padding: 0 1rem; + --rz-datepicker-footer-line-height: 2.8125rem; + --rz-datepicker-prev-next-icon-size: 1.5rem; + --rz-datepicker-prev-next-button-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-padding-block: 0 0.5rem; + --rz-datepicker-calendar-padding-inline: 0.5rem; + --rz-datepicker-calendar-item-padding: 0.5rem 0.875rem; + --rz-datepicker-calendar-header-font-size: 0.625rem; + --rz-datepicker-calendar-header-text-transform: uppercase; + --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color); + --rz-datepicker-calendar-font-size: var(--rz-body-font-size); + --rz-datepicker-calendar-color: var(--rz-text-color); + --rz-datepicker-calendar-hover-color: var(--rz-on-primary-lighter); + --rz-datepicker-calendar-hover-background-color: var(--rz-primary-lighter); + --rz-datepicker-calendar-selected-color: var(--rz-on-primary); + --rz-datepicker-calendar-selected-background-color: var(--rz-primary); + --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-light); + --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-light); + --rz-datepicker-calendar-border: none; + --rz-datepicker-calendar-border-radius: var(--rz-border-radius); + --rz-datepicker-calendar-transition: var(--rz-transition-all); + --rz-datepicker-calendar-today-color: var(--rz-primary); + --rz-datepicker-calendar-today-background-color: transparent; + --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-primary); + --rz-datepicker-calendar-today-border-radius: var(--rz-datepicker-calendar-border-radius); + --rz-datepicker-month-dropdown-width: 8rem; + --rz-datepicker-year-dropdown-width: 4.5rem; + --rz-datepicker-focus-outline: var(--rz-outline-focus); + --rz-datepicker-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-timepicker-color: var(--rz-text-color); + --rz-timepicker-background-color: var(--rz-base-background-color); + --rz-timepicker-separator-color: var(--rz-text-disabled-color); + --rz-timepicker-padding-block: 0.5rem; + --rz-timepicker-padding-inline: 0.5rem; + --rz-timepicker-hour-padding: 0.5rem; + --rz-timepicker-button-color: var(--rz-on-primary); + --rz-timepicker-button-background-color: var(--rz-primary); + --rz-timepicker-button-width: 0.875rem; + --rz-timepicker-button-height: 0.875rem; + --rz-timepicker-button-border-radius: var(--rz-border-radius); + --rz-timepicker-button-padding: 0.5rem 1rem !important; + --rz-timepicker-gap: 0.5rem; + --rz-timepicker-separator-margin: 0 0.5rem; + --rz-timepicker-border: none; + /* Dialog */ + --rz-dialog-background-color: var(--rz-base-background-color); + --rz-dialog-shadow: 0 22px 64px 0 rgba(0, 0, 0, 0.22); + --rz-dialog-title-background-color: var(--rz-base-background-color); + --rz-dialog-title-border: none; + --rz-dialog-title-padding-block: 1.25rem 0.5rem; + --rz-dialog-title-padding-inline: 1.25rem; + --rz-dialog-title-font-size: 1.5rem; + --rz-dialog-title-line-height: 1.25em; + --rz-dialog-title-font-weight: 700; + --rz-dialog-title-letter-spacing: -0.03em; + --rz-dialog-title-color: var(--rz-text-title-color); + --rz-dialog-close-font-size: var(--rz-icon-size); + --rz-dialog-close-color: var(--rz-text-tertiary-color); + --rz-dialog-close-hover-color: var(--rz-text-color); + --rz-dialog-close-vertical-align: top; + --rz-dialog-content-padding: 1.25rem; + --rz-dialog-mask-background-color: var(--rz-base-600); + --rz-dialog-border-radius: calc(2 * var(--rz-border-radius)); + --rz-dialog-mask-zindex: 1000; + --rz-dialog-zindex: 1001; + /* DropDown */ + --rz-dropdown-trigger-icon-width: var(--rz-icon-size); + --rz-dropdown-trigger-icon-height: var(--rz-icon-size); + --rz-dropdown-trigger-icon-margin-block: 0; + --rz-dropdown-trigger-icon-margin-inline: 0 0.5rem; + --rz-dropdown-horizontal-padding: 0.5rem; + --rz-dropdown-panel-padding: 0 0.5rem; + --rz-dropdown-items-margin: 0 -0.5rem; + --rz-dropdown-items-padding: 0; + --rz-dropdown-item-padding: 0.5rem; + --rz-dropdown-item-font-size: var(--rz-input-font-size); + --rz-dropdown-item-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-shadow: none; + --rz-dropdown-item-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter); + --rz-dropdown-item-selected-hover-color: var(--rz-on-primary-lighter); + --rz-dropdown-item-transition: var(--rz-transition-all); + --rz-dropdown-item-disabled-opacity: 0.2; + --rz-dropdown-label-padding-block: 0; + --rz-dropdown-label-padding-inline: 0 var(--rz-icon-size); + --rz-dropdown-filter-border: var(--rz-border-base-200); + --rz-dropdown-filter-padding: 0.5rem 0; + --rz-dropdown-open-background-color: var(--rz-base-background-color); + --rz-dropdown-open-border: var(--rz-input-border); + --rz-dropdown-panel-border: var(--rz-input-border); + --rz-dropdown-panel-shadow: none; + --rz-dropdown-chips-padding-block: var(--rz-input-padding-block); + --rz-dropdown-chips-padding-inline: var(--rz-input-padding-inline); + --rz-multiselect-checkbox-margin-block: 0; + --rz-multiselect-checkbox-margin-inline: 0 0.5rem; + /* Editor */ + --rz-editor-border: var(--rz-input-border); + --rz-editor-border-radius: var(--rz-border-radius); + --rz-editor-toolbar-background-color: var(--rz-base-100); + --rz-editor-toolbar-item-margin: 0.25rem 0.125rem; + --rz-editor-button-padding: 0.5rem; + --rz-editor-button-background-color: var(--rz-base-100); + --rz-editor-button-color: var(--rz-text-color); + --rz-editor-button-disabled-color: var(--rz-text-disabled-color); + --rz-editor-button-selected-background-color: var(--rz-primary); + --rz-editor-button-selected-color: var(--rz-on-primary); + --rz-editor-separator-background-color: var(--rz-base-200); + --rz-editor-content-background-color: var(--rz-base-background-color); + --rz-editor-focus-outline: var(--rz-outline-focus); + --rz-editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + /* Fieldset */ + --rz-fieldset-border: var(--rz-border-base-300); + --rz-fieldset-border-radius: var(--rz-border-radius); + --rz-fieldset-padding: 1.25rem; + --rz-fieldset-legend-color: var(--rz-text-color); + --rz-fieldset-legend-font-size: var(--rz-body-font-size); + --rz-fieldset-legend-margin-block: 0; + --rz-fieldset-legend-margin-inline: 1rem 0; + --rz-fieldset-legend-padding-block: 0; + --rz-fieldset-legend-padding-inline: 1rem; + --rz-fieldset-toggle-width: 1.125rem; + --rz-fieldset-toggle-margin-block: 0; + --rz-fieldset-toggle-margin-inline: 0 0.5rem; + --rz-fieldset-toggle-height: 1.125rem; + --rz-fieldset-toggle-background-color: var(--rz-base-200); + --rz-fieldset-toggle-color: var(--rz-text-color); + --rz-fieldset-toggle-font-size: 1rem; + --rz-fieldset-toggle-border: none; + --rz-fieldset-toggle-focus-outline: var(--rz-outline-focus); + --rz-fieldset-toggle-focus-outline-offset: var(--rz-outline-offset); + /* Footer */ + --rz-footer-padding: 1rem; + --rz-footer-background-color: var(--rz-base-background-color); + --rz-footer-border: none; + --rz-footer-color: var(--rz-text-color); + --rz-footer-z: 2; + /* FormField */ + --rz-form-field-margin-block: 0.625rem 0; + --rz-form-field-margin-inline: 0; + --rz-form-field-start-end-padding-block: 0; + --rz-form-field-start-end-padding-inline: var(--rz-input-padding-inline); + --rz-form-field-filled-height: 3.25rem; + --rz-form-field-filled-padding-block: 1.4375rem 0.4375rem; + --rz-form-field-filled-padding-inline: 0.4375rem; + --rz-form-field-filled-numeric-padding-block: 1.5rem 0.5rem; + --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.25rem; + --rz-form-field-filled-background-color: var(--rz-base-100); + --rz-form-field-filled-hover-background-color: var(--rz-base-200); + --rz-form-field-filled-border: var(--rz-input-border); + --rz-form-field-filled-hover-border: var(--rz-input-hover-border); + --rz-form-field-filled-focus-border: var(--rz-input-focus-border); + --rz-form-field-filled-border-radius: var(--rz-border-radius); + --rz-form-field-filled-label-floating-top: 0.25rem; + --rz-form-field-filled-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-filled-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-filled-underline-display: none; + --rz-form-field-shadow: none; + --rz-form-field-hover-shadow: var(--rz-input-hover-shadow); + --rz-form-field-focus-shadow: var(--rz-input-focus-shadow); + --rz-form-field-label-color: var(--rz-text-color); + --rz-form-field-label-focus-color: var(--rz-primary); + --rz-form-field-label-padding: 0.125rem 0.1875rem; + --rz-form-field-text-label-padding: 0.125rem 0; + --rz-form-field-label-inset-inline-start: 0.25rem; + --rz-form-field-label-textarea-top: 0.375rem; + --rz-form-field-label-floating-top: -0.625rem; + --rz-form-field-label-floating-background-color: var(--rz-input-background-color); + --rz-form-field-helper-padding: 0 0.5rem; + /* Forms */ + --rz-form-error-color: var(--rz-danger); + --rz-form-error-font-size: 0.75rem; + --rz-validator-background-color: var(--rz-danger); + --rz-validator-color: var(--rz-on-danger); + --rz-validator-shadow: 0 6px 14px 0 rgba(243, 17, 85, 0.3); + --rz-validator-text-padding: 0; + --rz-validator-padding: 0.25rem 0.5rem; + --rz-validator-pointer-size: 0.375rem; + --rz-validator-transform: translateY(12px); + /* Gauge */ + --rz-gauge-scale-color: var(--rz-base-300); + --rz-gauge-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-scale-font-size: var(--rz-body-font-size); + --rz-gauge-pointer-color: var(--rz-primary); + --rz-gauge-arc-scale-color: var(--rz-base-300); + --rz-gauge-arc-scale-label-color: var(--rz-text-tertiary-color); + --rz-gauge-arc-value-color: var(--rz-primary); + /* Map */ + --rz-map-height: 10rem; + --rz-map-padding: 1.25rem; + --rz-map-background-color: var(--rz-base-background-color); + --rz-map-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01); + /* Gravatar */ + --rz-gravatar-width: 2rem; + --rz-gravatar-height: 2rem; + --rz-gravatar-border-radius: 50%; + --rz-gravatar-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); + /* Grid */ + --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-200), 0 -1px 0 0 var(--rz-base-200); + --rz-grid-cell-border: var(--rz-border-normal); + --rz-grid-right-cell-border: var(--rz-border-normal); + --rz-grid-bottom-cell-border: var(--rz-border-normal); + --rz-grid-cell-padding: 0.5rem; + --rz-grid-cell-color: var(--rz-text-color); + --rz-grid-cell-font-size: var(--rz-body-font-size); + --rz-grid-cell-line-height: var(--rz-body-line-height); + --rz-grid-cell-focus-background-color: var(--rz-secondary-lighter); + --rz-grid-cell-focus-color: var(--rz-on-secondary-lighter); + --rz-grid-cell-focus-outline: var(--rz-outline-focus); + --rz-grid-cell-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-grid-hover-background-color: var(--rz-primary-lighter); + --rz-grid-hover-color: var(--rz-on-primary-lighter); + --rz-grid-focus-outline: var(--rz-outline-focus); + --rz-grid-focus-outline-offset: var(--rz-outline-offset); + --rz-grid-selected-background-color: rgba(114, 152, 248, 0.16); + --rz-grid-selected-color: var(--rz-on-primary-lighter); + --rz-grid-toolbar-background-color: var(--rz-base-background-color); + --rz-grid-header-cell-border: var(--rz-border-normal); + --rz-grid-header-cell-border-bottom: var(--rz-border-normal); + --rz-grid-header-background-color: var(--rz-base-100); + --rz-grid-header-font-size: 0.875rem; + --rz-grid-header-line-height: 1rem; + --rz-grid-header-font-weight: 600; + --rz-grid-header-text-transform: none; + --rz-grid-header-color: var(--rz-text-title-color); + --rz-grid-header-cell-padding: 0.625rem 0; + --rz-grid-header-title-padding-inline: 0.5rem 0; + --rz-grid-header-sorted-background-color: var(--rz-base-100); + --rz-grid-header-padding: 1rem; + --rz-grid-foot-cell-color: var(--rz-text-title-color); + --rz-grid-foot-background-color: var(--rz-base-200); + --rz-grid-filter-background-color: var(--rz-base-100); + --rz-grid-filter-padding: 0.5rem; + --rz-grid-filter-margin: 0; + --rz-grid-filter-border: none; + --rz-grid-filter-font-size: var(--rz-body-font-size); + --rz-grid-filter-icon-width: var(--rz-icon-size); + --rz-grid-filter-icon-height: var(--rz-icon-size); + --rz-grid-filter-icon-margin-inline: 0 0.25rem; + --rz-grid-filter-icon-font-size: var(--rz-icon-size); + --rz-grid-filter-color: var(--rz-text-disabled-color); + --rz-grid-filter-focus-color: var(--rz-text-title-color); + --rz-grid-filter-gap: 1rem; + --rz-grid-filter-buttons-padding: 0 1rem 1rem; + --rz-grid-filter-buttons-border: none; + --rz-grid-filter-buttons-background-color: var(--rz-base-100); + --rz-grid-filter-button-padding-inline: 1rem; + --rz-grid-clear-filter-button-background-color: var(--rz-base-200); + --rz-grid-clear-filter-button-color: var(--rz-text-color); + --rz-grid-clear-filter-button-shadow: none; + --rz-grid-apply-filter-button-background-color: var(--rz-primary); + --rz-grid-apply-filter-button-color: var(--rz-on-primary); + --rz-grid-apply-filter-button-shadow: none; + --rz-grid-header-filter-icon-margin-inline: auto 0.5rem; + --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color); + --rz-grid-header-filter-icon-active-color: var(--rz-primary); + --rz-grid-header-filter-icon-font-size: 1rem; + --rz-grid-border: none; + --rz-grid-border-radius: 0; + --rz-grid-sort-icon-width: 1rem; + --rz-grid-sort-icon-height: 1rem; + --rz-grid-sort-icon-color: var(--rz-text-disabled-color); + --rz-grid-shadow: none; + --rz-grid-background-color: var(--rz-base-background-color); + --rz-grid-stripe-background-color: #f7f8fb; + --rz-grid-stripe-odd-background-color: var(--rz-base-background-color); + --rz-grid-column-resizer-width: 0.5rem; + --rz-grid-column-resizer-helper-width: 0.25rem; + --rz-grid-column-resizer-helper-background-color: var(--rz-primary); + --rz-grid-column-icon-width: 2rem; + --rz-grid-column-icon-padding: 0; + --rz-grid-detail-template-border: none; + --rz-grid-detail-template-border-radius: 0; + --rz-grid-detail-template-padding: 0; + --rz-grid-detail-template-background-color: var(--rz-base-100); + --rz-grid-loading-indicator-color: var(--rz-on-primary-lighter); + --rz-grid-loading-indicator-background-color: var(--rz-primary-lighter); + --rz-grid-frozen-cell-border: var(--rz-border-normal); + --rz-grid-frozen-cell-background-color: var(--rz-base-100); + --rz-grid-state-transition: var(--rz-transition-all); + --rz-grid-group-header-padding: 0.5rem; + --rz-grid-group-header-gap: 0.5rem; + --rz-grid-group-header-item-color: var(--rz-text-color); + --rz-grid-group-header-item-background-color: var(--rz-base-background-color); + --rz-grid-group-header-item-padding-block: 0.5rem; + --rz-grid-group-header-item-padding-inline: 0.5rem; + --rz-grid-group-header-item-border: var(--rz-border-normal); + --rz-grid-group-header-item-border-radius: var(--rz-border-radius); + --rz-grid-group-header-item-title-margin-inline: 0 0.5rem; + --rz-column-drag-handle-color: var(--rz-text-disabled-color); + --rz-column-drag-handle-hover-color: var(--rz-text-title-color); + --rz-column-drag-handle-margin-inline: 0 auto; + --rz-column-draggable-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); + /* Header */ + --rz-header-background-color: var(--rz-base-background-color); + --rz-header-min-height: 3.125rem; + --rz-header-z: 2; + --rz-header-border: var(--rz-border-white); + --rz-header-color: var(--rz-text-color); + --rz-header-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Icon */ + --rz-icon-font-family: Material Symbols; + --rz-icon-size: 1.25rem; + --rz-icon-fill: 0; + --rz-icon-weight: inherit; + --rz-icon-grade: 0; + --rz-icon-optical-size: 48; + /* Input */ + --rz-input-font-size: var(--rz-body-font-size); + --rz-input-height: 2.25rem; + --rz-input-line-height: var(--rz-body-line-height); + --rz-input-padding-block: 0.4375rem; + --rz-input-padding-inline: 0.4375rem; + --rz-input-value-color: var(--rz-text-color); + --rz-input-placeholder-color: var(--rz-text-tertiary-color); + --rz-input-background-color: var(--rz-base-background-color); + --rz-input-border: var(--rz-border-normal); + --rz-input-border-radius: var(--rz-border-radius); + --rz-input-shadow: none; + --rz-input-hover-shadow: none; + --rz-input-hover-border: var(--rz-border-primary-light); + --rz-input-focus-shadow: 0px 0px 0px 1px var(--rz-white), 0px 0px 0px 3px rgba(17, 81, 243, 0.2); + --rz-input-focus-border: var(--rz-border-primary-light); + --rz-input-focus-outline: var(--rz-outline-normal); + --rz-input-focus-outline-offset: 0; + --rz-input-disabled-border: var(--rz-border-disabled); + --rz-input-disabled-shadow: none; + --rz-input-disabled-background-color: var(--rz-base-100); + --rz-input-disabled-color: var(--rz-text-tertiary-color); + --rz-input-disabled-placeholder-color: var(--rz-text-disabled-color); + --rz-input-disabled-opacity: 0.5; + --rz-input-transition: var(--rz-transition-all), width 0, height 0; + /* Layout */ + --rz-layout-background-color: transparent; + /* Listbox */ + --rz-listbox-background-color: var(--rz-input-background-color); + --rz-listbox-border-radius: var(--rz-input-border-radius); + --rz-listbox-border: var(--rz-input-border); + --rz-listbox-focus-border: var(--rz-input-focus-border); + --rz-listbox-focus-shadow: var(--rz-input-focus-shadow); + --rz-listbox-filter-border: var(--rz-border-base-100); + --rz-listbox-padding: 0; + --rz-listbox-item-padding: var(--rz-dropdown-item-padding); + --rz-listbox-item-margin: 0; + --rz-listbox-checkbox-margin-block: 0; + --rz-listbox-checkbox-margin-inline: 0 0.5rem; + --rz-listbox-header-padding-block: 0.5rem; + --rz-listbox-header-padding-inline: 0.5rem; + --rz-listbox-header-icon-width: var(--rz-icon-size); + --rz-listbox-header-icon-height: var(--rz-icon-size); + --rz-listbox-header-icon-margin: 0; + /* Login */ + --rz-login-register-background-color: var(--rz-base-100); + --rz-login-register-padding-block: 1rem; + --rz-login-register-padding-inline: 1rem; + --rz-login-register-margin-block: 2rem 0; + --rz-login-register-margin-inline: 0; + --rz-login-register-button-margin-block: 0; + --rz-login-register-button-margin-inline: 0; + /* Lookup */ + --rz-lookup-panel-background-color: var(--rz-base-background-color); + --rz-lookup-panel-padding: 1rem; + --rz-lookup-search-gap: 0.5rem; + --rz-lookup-search-margin-bottom: 0.5rem; + /* Menu */ + --rz-menu-background-color: var(--rz-base-background-color); + --rz-menu-border: none; + --rz-menu-border-radius: 0; + --rz-menu-item-padding-block: 0.5rem; + --rz-menu-item-padding-inline: 0.5rem 1rem; + --rz-menu-item-border-radius: 0; + --rz-menu-item-color: var(--rz-text-color); + --rz-menu-item-hover-color: var(--rz-on-primary-lighter); + --rz-menu-item-hover-background-color: var(--rz-primary-lighter); + --rz-menu-item-focus-outline: var(--rz-outline-focus); + --rz-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-menu-item-selected-color: var(--rz-primary); + --rz-menu-item-icon-margin-inline: 0 0.5rem; + --rz-menu-item-icon-color: var(--rz-text-color); + --rz-menu-item-icon-hover-color: var(--rz-on-primary-lighter); + --rz-menu-item-offset: 1rem; + --rz-menu-item-transition: var(--rz-transition-all); + --rz-menu-item-disabled-opacity: 0.2; + --rz-menu-top-item-padding-block: 0.5rem; + --rz-menu-top-item-padding-inline: 0.5rem; + --rz-menu-top-item-border-radius: 0; + --rz-menu-top-item-color: var(--rz-text-color); + --rz-menu-top-item-background-color: var(--rz-base-background-color); + --rz-menu-top-item-hover-color: var(--rz-on-primary-lighter); + --rz-menu-top-item-hover-background-color: var(--rz-primary-lighter); + --rz-menu-top-item-selected-color: var(--rz-primary); + --rz-menu-top-item-icon-color: var(--rz-text-color); + --rz-menu-top-item-icon-hover-color: var(--rz-on-primary-lighter); + --rz-context-menu-padding-block: 0; + --rz-context-menu-padding-inline: 0; + --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + /* Notification */ + --rz-notification-padding: 1rem 1.25rem; + --rz-notification-gap: 0.625rem; + --rz-notification-icon-margin: 0; + --rz-notification-container-background-color: transparent; + --rz-notification-shadow: none; + --rz-notification-border-radius: var(--rz-border-radius); + --rz-notification-success-color: var(--rz-on-success); + --rz-notification-success-background-color: var(--rz-success); + --rz-notification-success-icon-color: var(--rz-on-success); + --rz-notification-warning-color: var(--rz-on-warning); + --rz-notification-warning-background-color: var(--rz-warning); + --rz-notification-warning-icon-color: var(--rz-on-warning); + --rz-notification-error-color: var(--rz-on-danger); + --rz-notification-error-background-color: var(--rz-danger); + --rz-notification-error-icon-color: var(--rz-on-danger); + --rz-notification-info-color: var(--rz-on-info); + --rz-notification-info-background-color: var(--rz-info); + --rz-notification-info-icon-color: var(--rz-on-info); + /* Numeric */ + --rz-numeric-line-height: 1.25rem; + --rz-numeric-input-padding-block: 0.5rem; + --rz-numeric-input-padding-inline: 0.5rem 1.25rem; + --rz-numeric-button-width: 0.875rem; + --rz-numeric-button-height: 0.875rem; + --rz-numeric-button-offset: 2px; + --rz-numeric-button-border-radius: calc(var(--rz-border-radius) - 2px); + --rz-numeric-button-background-color: var(--rz-base-background-color); + --rz-numeric-button-disabled-background-color: var(--rz-base-100); + --rz-numeric-button-disabled-color: var(--rz-text-disabled-color); + --rz-numeric-button-color: var(--rz-text-tertiary-color); + /* Overlay */ + --rz-overlay-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 0, 0, 0.1); + --rz-overlay-border: var(--rz-border-normal); + --rz-overlay-background-color: var(--rz-base-100); + /* Pager */ + --rz-pager-background-color: transparent; + --rz-pager-padding: 0.5rem; + --rz-pager-gap: 0.5rem; + --rz-pager-border: none; + --rz-pager-button-border-radius: var(--rz-border-radius); + --rz-pager-numeric-button-background-color: var(--rz-base-200); + --rz-pager-numeric-button-color: var(--rz-text-color); + --rz-pager-numeric-button-border: 1px solid transparent; + --rz-pager-numeric-button-hover-background-color: var(--rz-base-200); + --rz-pager-numeric-button-hover-color: var(--rz-text-color); + --rz-pager-numeric-button-padding: 0.4375rem; + --rz-pager-numeric-button-selected-background-color: var(--rz-primary-lighter); + --rz-pager-numeric-button-selected-color: var(--rz-on-primary-lighter); + --rz-pager-numeric-button-selected-border: 1px solid transparent; + --rz-pager-numeric-button-selected-padding: 0.4375rem; + --rz-pager-numeric-button-min-width: 2.25rem; + --rz-pager-back-button-background-color: var(--rz-base-200); + --rz-pager-back-button-color: var(--rz-text-color); + --rz-pager-next-button-background-color: var(--rz-base-200); + --rz-pager-next-button-color: var(--rz-text-color); + --rz-pager-dropdown-width: 80px; + --rz-pager-summary-padding: 1.25rem; + --rz-pager-summary-font-size: var(--rz-body-font-size); + --rz-pager-summary-color: var(--rz-text-tertiary-color); + /* PanelMenu */ + --rz-panel-menu-padding-block: 0; + --rz-panel-menu-padding-inline: 0; + --rz-panel-menu-font-size: var(--rz-body-font-size); + --rz-panel-menu-font-weight: 600; + --rz-panel-menu-focus-outline: var(--rz-outline-focus); + --rz-panel-menu-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-panel-menu-item-line-height: 1.25rem; + --rz-panel-menu-item-padding-block: 0.75rem; + --rz-panel-menu-item-padding-inline: 1rem; + --rz-panel-menu-item-margin-block: 0; + --rz-panel-menu-item-margin-inline: 0; + --rz-panel-menu-item-border: 1px solid #373637; + --rz-panel-menu-item-border-radius: 0; + --rz-panel-menu-item-color: #ffffff; + --rz-panel-menu-item-background-color: #262526; + --rz-panel-menu-item-hover-color: inherit; + --rz-panel-menu-item-hover-background-color: #333233; + --rz-panel-menu-item-active-color: inherit; + --rz-panel-menu-item-active-background-color: #515151; + --rz-panel-menu-item-active-indicator: #1151f3; + --rz-panel-menu-item-offset: 0.75rem; + --rz-panel-menu-item-transition: color var(--rz-transition), background-color var(--rz-transition); + --rz-panel-menu-2nd-level-vertical-offset: 0; + --rz-panel-menu-item-2nd-level-padding-block: 0.5rem; + --rz-panel-menu-item-2nd-level-padding-inline: 1rem; + --rz-panel-menu-item-2nd-level-margin-block: 0; + --rz-panel-menu-item-2nd-level-margin-inline: 0; + --rz-panel-menu-item-2nd-level-border-radius: 0; + --rz-panel-menu-item-2nd-level-offset: 2.75rem; + --rz-panel-menu-item-2nd-level-font-size: var(--rz-body-font-size); + --rz-panel-menu-item-2nd-level-font-weight: 400; + --rz-panel-menu-item-2nd-level-color: inherit; + --rz-panel-menu-item-2nd-level-background-color: #373637; + --rz-panel-menu-item-2nd-level-hover-color: inherit; + --rz-panel-menu-item-2nd-level-hover-background-color: #494849; + --rz-panel-menu-item-2nd-level-active-color: inherit; + --rz-panel-menu-item-2nd-level-active-background-color: #494849; + --rz-panel-menu-item-2nd-level-active-font-weight: inherit; + --rz-panel-menu-item-3rd-level-color: inherit; + --rz-panel-menu-item-3rd-level-background-color: #403f40; + --rz-panel-menu-item-3rd-level-hover-color: inherit; + --rz-panel-menu-item-3rd-level-hover-background-color: #515151; + --rz-panel-menu-item-3rd-level-active-color: inherit; + --rz-panel-menu-item-3rd-level-active-background-color: #515151; + --rz-panel-menu-icon-width: var(--rz-icon-size); + --rz-panel-menu-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-icon-color: #ffffff; + --rz-panel-menu-icon-height: var(--rz-icon-size); + --rz-panel-menu-icon-margin-inline: 0 0.5rem; + --rz-panel-menu-icon-2nd-level-margin-inline: -1.625rem 0.625rem; + --rz-panel-menu-icon-2nd-level-icon-size: calc(var(--rz-icon-size) * 0.8); + --rz-panel-menu-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-menu-toggle-icon-opacity: 0.4; + /* Panel */ + --rz-panel-background-color: var(--rz-base-background-color); + --rz-panel-padding: 0.5rem; + --rz-panel-title-line-height: 1.25rem; + --rz-panel-title-font-weight: 600; + --rz-panel-content-margin: 0; + --rz-panel-toggle-icon-width: var(--rz-icon-size); + --rz-panel-toggle-icon-height: var(--rz-icon-size); + --rz-panel-toggle-icon-font-size: var(--rz-icon-size); + --rz-panel-toggle-icon-border-radius: var(--rz-border-radius); + --rz-panel-toggle-icon-background-color: var(--rz-base-200); + --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus); + --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset); + --rz-panel-hover-color: var(--rz-primary); + --rz-panel-border-radius: var(--rz-border-radius); + --rz-panel-shadow: none; + /* ProfileMenu */ + --rz-profile-menu-background-color: var(--rz-base-background-color); + --rz-profile-menu-top-item-background-color: var(--rz-base-background-color); + --rz-profile-menu-border: var(--rz-border-base-200); + --rz-profile-menu-padding-block: 0.625rem; + --rz-profile-menu-padding-inline: 1rem; + --rz-profile-menu-border-radius: var(--rz-border-radius); + --rz-profile-menu-toggle-button-color: var(--rz-text-color); + --rz-profile-menu-item-hover-background-color: var(--rz-primary-lighter); + --rz-profile-menu-item-focus-outline: var(--rz-outline-focus); + --rz-profile-menu-item-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-profile-menu-item-icon-width: var(--rz-icon-size); + --rz-profile-menu-item-icon-height: var(--rz-icon-size); + --rz-profile-menu-item-icon-font-size: var(--rz-icon-size); + --rz-profile-menu-item-icon-margin-inline: 0 0.5rem; + /* ProgressBar */ + --rz-progressbar-background-color: var(--rz-base-200); + --rz-progressbar-font-size: var(--rz-body-font-size); + --rz-progressbar-height: 1.25rem; + --rz-progressbar-border-radius: var(--rz-border-radius); + --rz-progressbar-value-background-color: var(--rz-primary-lighter); + --rz-progressbar-value-transition: var(--rz-transition-all); + --rz-progressbar-circular-stroke-width: 2px; + --rz-progressbar-circular-value-stroke-width: 3px; + --rz-progressbar-circular-value-endpoint: round; + /* Radio */ + --rz-radio-width: 1.25rem; + --rz-radio-height: 1.25rem; + --rz-radio-border-radius: 50%; + --rz-radio-border-width: inherit; + --rz-radio-label-margin-block: 0; + --rz-radio-label-margin-inline: 0.5rem 1rem; + --rz-radio-margin-block: 1rem; + --rz-radio-margin-inline: 0; + --rz-radio-focus-outline: var(--rz-outline-focus); + --rz-radio-focus-outline-offset: var(--rz-outline-offset); + --rz-radio-active-background-color: var(--rz-base-background-color); + --rz-radio-active-shadow: none; + --rz-radio-checked-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-background-color: var(--rz-base-background-color); + --rz-radio-checked-hover-shadow: none; + --rz-radio-checked-color: var(--rz-text-contrast-color); + --rz-radio-circle-background-color: var(--rz-primary); + --rz-radio-circle-shadow: none; + --rz-radio-circle-hover-background-color: var(--rz-primary-light); + --rz-radio-icon-width: 0.625rem; + --rz-radio-icon-height: 0.625rem; + --rz-radio-checked-border: var(--rz-input-border); + /* Rating */ + --rz-rating-color: var(--rz-text-tertiary-color); + --rz-rating-opacity: 1; + --rz-rating-font-size: var(--rz-icon-size); + --rz-rating-selected-color: var(--rz-primary); + --rz-rating-focus-color: var(--rz-primary-darker); + --rz-rating-disabled-color: var(--rz-text-disabled-color); + --rz-rating-disabled-opacity: 0.5; + --rz-rating-ban-icon: highlight_off; + --rz-rating-ban-icon-color: var(--rz-text-tertiary-color); + /* Scheduler */ + --rz-scheduler-border: var(--rz-border-normal); + --rz-scheduler-border-color: var(--rz-base-200); + --rz-scheduler-minor-border-color: var(--rz-base-100); + --rz-scheduler-border-radius: var(--rz-border-radius); + --rz-scheduler-shadow: none; + --rz-scheduler-background-color: var(--rz-base-background-color); + --rz-scheduler-color: var(--rz-text-color); + --rz-scheduler-toolbar-padding: 0.5rem; + --rz-scheduler-toolbar-background-color: var(--rz-base-100); + --rz-scheduler-toolbar-title-font-size: 1rem; + --rz-scheduler-toolbar-title-font-weight: 700; + --rz-scheduler-toolbar-title-color: var(--rz-text-title-color); + --rz-scheduler-prev-next-button-background-color: var(--rz-base-200); + --rz-scheduler-prev-next-button-color: var(--rz-text-color); + --rz-scheduler-prev-next-button-padding-block: 0.5rem; + --rz-scheduler-prev-next-button-padding-inline: 0.5rem; + --rz-scheduler-prev-next-button-font-size: var(--rz-icon-size); + --rz-scheduler-prev-button-border-start-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-start-end-radius: 0; + --rz-scheduler-prev-button-border-end-start-radius: var(--rz-border-radius); + --rz-scheduler-prev-button-border-end-end-radius: 0; + --rz-scheduler-next-button-border-start-start-radius: 0; + --rz-scheduler-next-button-border-start-end-radius: var(--rz-border-radius); + --rz-scheduler-next-button-border-end-start-radius: 0; + --rz-scheduler-next-button-border-end-end-radius: var(--rz-border-radius); + --rz-scheduler-today-button-margin-inline-start: 0.5rem; + --rz-scheduler-today-button-padding: 0.5rem 1rem; + --rz-scheduler-today-button-font-size: 0.75rem; + --rz-scheduler-today-button-text-transform: uppercase; + --rz-scheduler-view-button-border: var(--rz-border-normal); + --rz-scheduler-view-button-color: var(--rz-text-color); + --rz-scheduler-view-button-background-color: transparent; + --rz-scheduler-view-selected-color: var(--rz-on-primary-lighter); + --rz-scheduler-view-selected-background-color: var(--rz-primary-lighter); + --rz-scheduler-view-selected-border-color: transparent; + --rz-scheduler-header-background-color: var(--rz-base-100); + --rz-scheduler-header-font-size: 0.75rem; + --rz-scheduler-header-font-size-small: 0.5rem; + --rz-scheduler-header-text-transform: uppercase; + --rz-scheduler-header-color: var(--rz-text-tertiary-color); + --rz-scheduler-header-border: var(--rz-border-normal); + --rz-scheduler-header-padding: 0.5rem 0; + --rz-scheduler-event-color: var(--rz-on-info); + --rz-scheduler-event-background-color: var(--rz-info); + --rz-scheduler-event-font-size: 0.75rem; + --rz-scheduler-event-line-height: 1.25rem; + --rz-scheduler-event-padding-block: 0 1px; + --rz-scheduler-event-padding-inline: 1px; + --rz-scheduler-event-content-padding: 0.125rem 0.25rem; + --rz-scheduler-event-list-button-color: var(--rz-secondary); + --rz-scheduler-event-list-button-font-size: 0.75rem; + --rz-scheduler-slot-title-font-size: 0.875rem; + --rz-scheduler-slot-title-font-size-small: 0.6rem; + --rz-scheduler-slot-title-padding: 0 0.25rem; + --rz-scheduler-day-number-padding: 0 0.5rem; + --rz-scheduler-weekend-color: var(--rz-text-disabled-color); + --rz-scheduler-weekend-background-color: var(--rz-base-50); + --rz-scheduler-other-month-background-color: var(--rz-base-100); + --rz-scheduler-timeline-slot-width: 7rem; + --rz-scheduler-timeline-slot-height: 7rem; + --rz-scheduler-year-padding: 1.5rem; + --rz-scheduler-year-slot-padding: 1px; + --rz-scheduler-year-slot-title-width: 100%; + --rz-scheduler-year-slot-title-border-radius: 0.25rem; + --rz-scheduler-planner-slot-width: 3rem; + --rz-scheduler-planner-slot-height: 4.5rem; + --rz-scheduler-focus-outline: var(--rz-outline-focus); + --rz-scheduler-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-scheduler-highlight-background-color: rgba(255, 220, 40, 0.2); + /* Scrollbar */ + --rz-scrollbar-background-color: transparent; + --rz-scrollbar-color: rgba(141, 142, 144, 0.5); + --rz-scrollbar-border-radius: calc(2 * var(--rz-border-radius)); + --rz-scrollbar-size: 16px; + /* SecurityCode */ + --rz-security-code-input-min-width: var(--rz-input-height); + --rz-security-code-input-min-height: var(--rz-input-height); + --rz-security-code-input-padding: 0.125rem; + --rz-security-code-input-font-size: 1.25rem; + --rz-security-code-input-font-weight: 600; + --rz-security-code-input-line-height: 1; + /* SelectBar */ + --rz-selectbar-background-color: transparent; + --rz-selectbar-color: var(--rz-text-color); + --rz-selectbar-border: var(--rz-border-normal); + --rz-selectbar-selected-background-color: var(--rz-primary-lighter); + --rz-selectbar-selected-color: var(--rz-on-primary-lighter); + --rz-selectbar-selected-border: var(--rz-border-normal); + --rz-selectbar-border-radius: var(--rz-border-radius); + /* SidebarToggle */ + --rz-sidebar-toggle-icon-width: 1.5rem; + --rz-sidebar-toggle-icon-height: 1.5rem; + --rz-sidebar-toggle-margin-inline-end: 1rem; + --rz-sidebar-toggle-padding: 0.8125rem; + --rz-sidebar-toggle-border: var(--rz-border-base-200); + --rz-sidebar-toggle-color: var(--rz-base-800); + --rz-sidebar-toggle-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-color: var(--rz-base-900); + --rz-sidebar-toggle-hover-background-color: var(--rz-header-background-color); + --rz-sidebar-toggle-hover-border-radius: 0; + --rz-sidebar-toggle-focus-outline: var(--rz-outline-focus); + --rz-sidebar-toggle-focus-outline-offset: calc(-1 * var(--rz-outline-offset)); + /* Sidebar */ + --rz-sidebar-z: 1; + --rz-sidebar-width: 250px; + --rz-sidebar-border-inline-end: var(--rz-border-base-800); + --rz-sidebar-background-color: var(--rz-base-900); + --rz-sidebar-color: var(--rz-white); + /* Slider */ + --rz-slider-background-color: var(--rz-base-background-color); + --rz-slider-border: var(--rz-border-base-300); + --rz-slider-border-radius: calc(2 * var(--rz-border-radius)); + --rz-slider-horizontal-height: 0.5rem; + --rz-slider-horizontal-width: 10rem; + --rz-slider-range-background-color: var(--rz-primary-lighter); + --rz-slider-range-border: var(--rz-border-primary-lighter); + --rz-slider-handle-width: 1.25rem; + --rz-slider-handle-height: 1.25rem; + --rz-slider-handle-color: var(--rz-on-secondary); + --rz-slider-handle-background-color: var(--rz-white); + --rz-slider-handle-border: 0.25rem solid var(--rz-primary); + --rz-slider-handle-border-radius: calc(4 * var(--rz-border-radius)); + --rz-slider-handle-shadow: none; + --rz-slider-handle-transition: background-color var(--rz-transition), color var(--rz-transition), border var(--rz-transition), box-shadow var(--rz-transition); + --rz-slider-handle-hover-background-color: var(--rz-primary); + --rz-slider-handle-hover-border: 0.25rem solid var(--rz-primary); + --rz-slider-handle-hover-shadow: none; + --rz-slider-handle-focus-outline: var(--rz-outline-focus); + --rz-slider-handle-focus-outline-offset: var(--rz-outline-offset); + --rz-slider-disabled-background-color: var(--rz-base-background-color); + --rz-slider-disabled-border: var(--rz-border-disabled); + --rz-slider-disabled-range-background-color: var(--rz-base-200); + --rz-slider-disabled-range-border: var(--rz-border-base-300); + --rz-slider-disabled-handle-border: 0.25rem solid var(--rz-base-400); + --rz-slider-disabled-handle-background-color: var(--rz-white); + /* SplitButton */ + --rz-splitbutton-menu-shadow: none; + --rz-splitbutton-menu-min-width: 10rem; + --rz-splitbutton-background-color: var(--rz-primary); + --rz-splitbutton-border-radius: var(--rz-border-radius); + /* Splitter */ + --rz-splitter-bar-color: var(--rz-text-tertiary-color); + --rz-splitter-bar-color-active: var(--rz-on-primary-lighter); + --rz-splitter-bar-background-color: var(--rz-base-200); + --rz-splitter-bar-background-color-active: var(--rz-primary-lighter); + --rz-splitter-bar-hover-opacity: 1; + /* Stack/Grid Layout */ --rz-gap: 1rem; -} - -.rz-picklist-source-wrapper, -.rz-picklist-target-wrapper { - flex: 1; - --rz-gap: 0.5rem; - overflow: hidden; -} -.rz-picklist-source-wrapper .rz-listbox, -.rz-picklist-target-wrapper .rz-listbox { - width: 100%; - height: 100%; -} - -.rz-picklist-buttons.rz-flex-row .rzi { - transform: rotate(90deg); + --rz-row-gap: 1rem; + /* Steps */ + --rz-steps-color: var(--rz-text-color); + --rz-steps-number-border-radius: 50%; + --rz-steps-number-padding-block: 0.375rem; + --rz-steps-number-padding-inline: 0; + --rz-steps-number-width: 2rem; + --rz-steps-number-height: 2rem; + --rz-steps-number-line-height: var(--rz-body-line-height); + --rz-steps-number-color: var(--rz-text-color); + --rz-steps-number-background-color: var(--rz-base-300); + --rz-steps-number-selected-color: var(--rz-on-secondary); + --rz-steps-number-selected-background: var(--rz-primary); + --rz-steps-number-focus-outline: var(--rz-outline-focus); + --rz-steps-number-focus-outline-offset: var(--rz-outline-offset); + --rz-steps-title-selected-color: var(--rz-primary); + --rz-steps-title-margin-block: 0; + --rz-steps-title-margin-inline: 0.5rem 1rem; + --rz-steps-buttons-padding-block: 1rem; + --rz-steps-buttons-padding-inline: 0; + --rz-steps-button-color: var(--rz-primary); + /* Switch */ + --rz-switch-background-color: var(--rz-base-200); + --rz-switch-checked-background-color: var(--rz-primary); + --rz-switch-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04); + --rz-switch-circle-background-color: var(--rz-text-contrast-color); + --rz-switch-checked-circle-background-color: var(--rz-on-secondary); + --rz-switch-focus-outline: var(--rz-outline-focus); + --rz-switch-focus-outline-offset: var(--rz-outline-offset); + /* Tabs */ + --rz-tabs-padding: 1.25rem; + --rz-tabs-shadow: none; + --rz-tabs-border: var(--rz-border-base-200); + --rz-tabs-border-radius: var(--rz-border-radius); + --rz-tabs-background-color: var(--rz-base-background-color); + --rz-tabs-tab-font-size: var(--rz-body-font-size); + --rz-tabs-tab-line-height: var(--rz-body-line-height); + --rz-tabs-tab-font-weight: normal; + --rz-tabs-tab-text-transform: none; + --rz-tabs-tab-letter-spacing: 0; + --rz-tabs-tab-padding-block: 0.5rem; + --rz-tabs-tab-padding-inline: 1rem; + --rz-tabs-tab-background-color: var(--rz-base-200); + --rz-tabs-tab-color: var(--rz-text-color); + --rz-tabs-tab-selected-background-color: var(--rz-tabs-background-color); + --rz-tabs-tab-selected-color: var(--rz-text-title-color); + --rz-tabs-tab-selected-top-border-color: var(--rz-primary); + --rz-tabs-tab-hover-background-color: var(--rz-base-background-color); + --rz-tabs-tab-hover-color: var(--rz-primary); + --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); + --rz-tabs-tab-focus-color: var(--rz-primary); + --rz-tabs-tab-focus-outline: var(--rz-outline-focus); + --rz-tabs-tab-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tabs-icon-font-size: var(--rz-icon-size); + --rz-tabs-icon-margin-inline: -0.25rem 0.25rem; + --rz-tabs-transition: var(--rz-transition-all); + /* Textarea */ + --rz-text-area-padding-block: var(--rz-input-padding-block); + --rz-text-area-padding-inline: var(--rz-input-padding-inline); + /* Timeline */ + --rz-timeline-item-padding: 0.5rem; + --rz-timeline-axis-size: 4rem; + --rz-timeline-point-size: 1rem; + --rz-timeline-point-border: 3px solid var(--rz-base-background-color); + --rz-timeline-point-border-radius: calc(var(--rz-border-radius) * 12); + --rz-timeline-point-background-color: var(--rz-base-300); + --rz-timeline-point-color: var(--rz-text-color); + --rz-timeline-line-color: var(--rz-base-300); + --rz-timeline-line-width: 0.125rem; + --rz-timeline-line-border-radius: calc(var(--rz-border-radius) * 20); + /* Tooltip */ + --rz-tooltip-background-color: var(--rz-base-900); + --rz-tooltip-color: var(--rz-white); + --rz-tooltip-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.11); + --rz-tooltip-padding: 0.25rem 0.5rem; + --rz-tooltip-border-radius: var(--rz-border-radius); + --rz-tooltip-font-size: var(--rz-body-font-size); + /* Tree */ + --rz-tree-background-color: var(--rz-base-background-color); + --rz-tree-node-padding-block: 0.25rem; + --rz-tree-node-padding-inline: 0.25rem; + --rz-tree-node-selected-background-color: var(--rz-primary); + --rz-tree-node-selected-color: var(--rz-on-secondary); + --rz-tree-node-selected-border-radius: var(--rz-border-radius); + --rz-tree-node-margin-block: 1px; + --rz-tree-node-margin-inline: 1px; + --rz-tree-node-hover-background-color: var(--rz-primary-lighter); + --rz-tree-node-hover-color: var(--rz-primary); + --rz-tree-node-focus-outline: var(--rz-outline-focus); + --rz-tree-node-focus-outline-offset: calc(-1 * var(--rz-outline-width)); + --rz-tree-node-toggle-width: 1rem; + --rz-tree-node-toggle-color: var(--rz-text-tertiary-color); + --rz-tree-node-toggle-hover-color: var(--rz-text-title-color); + --rz-tree-transition: var(--rz-transition-all), width 0, height 0; + /* Upload */ + --rz-upload-button-bar-background-color: var(--rz-base-100); + --rz-upload-button-bar-padding: 0.5rem; + --rz-upload-button-bar-border-radius: var(--rz-border-radius); + --rz-upload-files-background-color: var(--rz-base-background-color); + --rz-upload-files-padding: 0.5rem 0; + --rz-upload-files-remove-background-color: var(--rz-base-300); + --rz-upload-files-remove-color: var(--rz-text-color); + --rz-upload-files-margin: 0 0.5rem; + --rz-upload-choose-background-color: var(--rz-secondary-lighter); + --rz-upload-choose-color: var(--rz-on-secondary-lighter); + --rz-upload-choose-hover-background-color: var(--rz-secondary-light); + --rz-upload-choose-hover-color: var(--rz-on-secondary-light); + --rz-upload-choose-active-background-color: var(--rz-secondary-dark); + --rz-upload-choose-active-color: var(--rz-on-secondary-dark); + --rz-upload-cancel-background-color: var(--rz-base-300); + --rz-upload-cancel-color: var(--rz-text-color); + --rz-upload-button-background-color: var(--rz-primary); } body { diff --git a/_content/Radzen.Blazor/fonts/MaterialIcons-Regular.woff b/_content/Radzen.Blazor/fonts/MaterialIcons-Regular.woff deleted file mode 100755 index 4c67ea2..0000000 Binary files a/_content/Radzen.Blazor/fonts/MaterialIcons-Regular.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2 b/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2 new file mode 100755 index 0000000..ff05048 Binary files /dev/null and b/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2 differ diff --git a/_content/Radzen.Blazor/fonts/RobotoFlex.woff2 b/_content/Radzen.Blazor/fonts/RobotoFlex.woff2 new file mode 100755 index 0000000..cfd2113 Binary files /dev/null and b/_content/Radzen.Blazor/fonts/RobotoFlex.woff2 differ diff --git a/_content/Radzen.Blazor/fonts/SourceSans3VF-Italic.ttf.woff2 b/_content/Radzen.Blazor/fonts/SourceSans3VF-Italic.ttf.woff2 new file mode 100755 index 0000000..623db47 Binary files /dev/null and b/_content/Radzen.Blazor/fonts/SourceSans3VF-Italic.ttf.woff2 differ diff --git a/_content/Radzen.Blazor/fonts/SourceSans3VF-Upright.ttf.woff2 b/_content/Radzen.Blazor/fonts/SourceSans3VF-Upright.ttf.woff2 new file mode 100755 index 0000000..96cc9fd Binary files /dev/null and b/_content/Radzen.Blazor/fonts/SourceSans3VF-Upright.ttf.woff2 differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-Black.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-Black.woff deleted file mode 100755 index bbc0477..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-Black.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-BlackIt.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-BlackIt.woff deleted file mode 100755 index 516e77e..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-BlackIt.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-Bold.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-Bold.woff deleted file mode 100755 index 0036a54..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-Bold.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-BoldIt.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-BoldIt.woff deleted file mode 100755 index de03ab7..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-BoldIt.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-ExtraLight.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-ExtraLight.woff deleted file mode 100755 index 1ce6f1b..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-ExtraLight.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-ExtraLightIt.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-ExtraLightIt.woff deleted file mode 100755 index d3c21fe..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-ExtraLightIt.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-It.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-It.woff deleted file mode 100755 index 9cae9b4..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-It.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-Light.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-Light.woff deleted file mode 100755 index e6c49a7..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-Light.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-LightIt.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-LightIt.woff deleted file mode 100755 index d36baaa..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-LightIt.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-Regular.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-Regular.woff deleted file mode 100755 index 6bc912b..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-Regular.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-Semibold.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-Semibold.woff deleted file mode 100755 index 475c499..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-Semibold.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/SourceSansPro-SemiboldIt.woff b/_content/Radzen.Blazor/fonts/SourceSansPro-SemiboldIt.woff deleted file mode 100755 index 62c2997..0000000 Binary files a/_content/Radzen.Blazor/fonts/SourceSansPro-SemiboldIt.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/roboto-v15-latin-300.woff b/_content/Radzen.Blazor/fonts/roboto-v15-latin-300.woff deleted file mode 100755 index 7e6c479..0000000 Binary files a/_content/Radzen.Blazor/fonts/roboto-v15-latin-300.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/roboto-v15-latin-700.woff b/_content/Radzen.Blazor/fonts/roboto-v15-latin-700.woff deleted file mode 100755 index bf737c1..0000000 Binary files a/_content/Radzen.Blazor/fonts/roboto-v15-latin-700.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/roboto-v15-latin-regular.woff b/_content/Radzen.Blazor/fonts/roboto-v15-latin-regular.woff deleted file mode 100755 index 941dfa4..0000000 Binary files a/_content/Radzen.Blazor/fonts/roboto-v15-latin-regular.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/roboto-v30-latin-300.woff b/_content/Radzen.Blazor/fonts/roboto-v30-latin-300.woff deleted file mode 100755 index 36979ae..0000000 Binary files a/_content/Radzen.Blazor/fonts/roboto-v30-latin-300.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/roboto-v30-latin-500.woff b/_content/Radzen.Blazor/fonts/roboto-v30-latin-500.woff deleted file mode 100755 index d39bb52..0000000 Binary files a/_content/Radzen.Blazor/fonts/roboto-v30-latin-500.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/roboto-v30-latin-700.woff b/_content/Radzen.Blazor/fonts/roboto-v30-latin-700.woff deleted file mode 100755 index db0012d..0000000 Binary files a/_content/Radzen.Blazor/fonts/roboto-v30-latin-700.woff and /dev/null differ diff --git a/_content/Radzen.Blazor/fonts/roboto-v30-latin-regular.woff b/_content/Radzen.Blazor/fonts/roboto-v30-latin-regular.woff deleted file mode 100755 index 9eaa94f..0000000 Binary files a/_content/Radzen.Blazor/fonts/roboto-v30-latin-regular.woff and /dev/null differ diff --git a/_framework/FormBuilder.DesignerApp.pdb.gz b/_framework/FormBuilder.DesignerApp.pdb.gz index e98efad..6e86160 100644 Binary files a/_framework/FormBuilder.DesignerApp.pdb.gz and b/_framework/FormBuilder.DesignerApp.pdb.gz differ diff --git a/_framework/FormBuilder.DesignerApp.wasm b/_framework/FormBuilder.DesignerApp.wasm index 26e13a3..b0594aa 100644 Binary files a/_framework/FormBuilder.DesignerApp.wasm and b/_framework/FormBuilder.DesignerApp.wasm differ diff --git a/_framework/FormBuilder.DesignerApp.wasm.br b/_framework/FormBuilder.DesignerApp.wasm.br index a4274d4..71f5452 100644 Binary files a/_framework/FormBuilder.DesignerApp.wasm.br and b/_framework/FormBuilder.DesignerApp.wasm.br differ diff --git a/_framework/FormBuilder.DesignerApp.wasm.gz b/_framework/FormBuilder.DesignerApp.wasm.gz index 44c3ea0..4b157bb 100644 Binary files a/_framework/FormBuilder.DesignerApp.wasm.gz and b/_framework/FormBuilder.DesignerApp.wasm.gz differ diff --git a/_framework/FormBuilder.Shared.pdb.gz b/_framework/FormBuilder.Shared.pdb.gz index 58b9dc0..4231e6b 100644 Binary files a/_framework/FormBuilder.Shared.pdb.gz and b/_framework/FormBuilder.Shared.pdb.gz differ diff --git a/_framework/FormBuilder.Shared.wasm b/_framework/FormBuilder.Shared.wasm index a6f7046..9ca923f 100644 Binary files a/_framework/FormBuilder.Shared.wasm and b/_framework/FormBuilder.Shared.wasm differ diff --git a/_framework/FormBuilder.Shared.wasm.br b/_framework/FormBuilder.Shared.wasm.br index 5090a1d..52a3125 100644 Binary files a/_framework/FormBuilder.Shared.wasm.br and b/_framework/FormBuilder.Shared.wasm.br differ diff --git a/_framework/FormBuilder.Shared.wasm.gz b/_framework/FormBuilder.Shared.wasm.gz index 9375bc3..7290c24 100644 Binary files a/_framework/FormBuilder.Shared.wasm.gz and b/_framework/FormBuilder.Shared.wasm.gz differ diff --git a/_framework/FormBuilder.pdb.gz b/_framework/FormBuilder.pdb.gz index 6f7a9e6..dfd2b5f 100644 Binary files a/_framework/FormBuilder.pdb.gz and b/_framework/FormBuilder.pdb.gz differ diff --git a/_framework/FormBuilder.wasm b/_framework/FormBuilder.wasm index dcc9778..586104c 100644 Binary files a/_framework/FormBuilder.wasm and b/_framework/FormBuilder.wasm differ diff --git a/_framework/FormBuilder.wasm.br b/_framework/FormBuilder.wasm.br index de6634a..239865e 100644 Binary files a/_framework/FormBuilder.wasm.br and b/_framework/FormBuilder.wasm.br differ diff --git a/_framework/FormBuilder.wasm.gz b/_framework/FormBuilder.wasm.gz index fbf6b3d..d5cfb80 100644 Binary files a/_framework/FormBuilder.wasm.gz and b/_framework/FormBuilder.wasm.gz differ diff --git a/_framework/Humanizer.wasm b/_framework/Humanizer.wasm deleted file mode 100644 index f1c9506..0000000 Binary files a/_framework/Humanizer.wasm and /dev/null differ diff --git a/_framework/Humanizer.wasm.br b/_framework/Humanizer.wasm.br deleted file mode 100644 index 1021587..0000000 Binary files a/_framework/Humanizer.wasm.br and /dev/null differ diff --git a/_framework/Humanizer.wasm.gz b/_framework/Humanizer.wasm.gz deleted file mode 100644 index 9700c70..0000000 Binary files a/_framework/Humanizer.wasm.gz and /dev/null differ diff --git a/_framework/Microsoft.AspNetCore.Components.Forms.wasm b/_framework/Microsoft.AspNetCore.Components.Forms.wasm index 570e9b7..c3e17eb 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.Forms.wasm and b/_framework/Microsoft.AspNetCore.Components.Forms.wasm differ diff --git a/_framework/Microsoft.AspNetCore.Components.Forms.wasm.br b/_framework/Microsoft.AspNetCore.Components.Forms.wasm.br index 5fad134..6296d61 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.Forms.wasm.br and b/_framework/Microsoft.AspNetCore.Components.Forms.wasm.br differ diff --git a/_framework/Microsoft.AspNetCore.Components.Forms.wasm.gz b/_framework/Microsoft.AspNetCore.Components.Forms.wasm.gz index 687435e..0ddba89 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.Forms.wasm.gz and b/_framework/Microsoft.AspNetCore.Components.Forms.wasm.gz differ diff --git a/_framework/Microsoft.AspNetCore.Components.Web.wasm b/_framework/Microsoft.AspNetCore.Components.Web.wasm index e1826f7..521cc85 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.Web.wasm and b/_framework/Microsoft.AspNetCore.Components.Web.wasm differ diff --git a/_framework/Microsoft.AspNetCore.Components.Web.wasm.br b/_framework/Microsoft.AspNetCore.Components.Web.wasm.br index d829e1f..17d771e 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.Web.wasm.br and b/_framework/Microsoft.AspNetCore.Components.Web.wasm.br differ diff --git a/_framework/Microsoft.AspNetCore.Components.Web.wasm.gz b/_framework/Microsoft.AspNetCore.Components.Web.wasm.gz index 63effdb..b0929e6 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.Web.wasm.gz and b/_framework/Microsoft.AspNetCore.Components.Web.wasm.gz differ diff --git a/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm b/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm index 6711dc0..4eebc8f 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm and b/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm differ diff --git a/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm.br b/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm.br index 85535c1..09653f7 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm.br and b/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm.br differ diff --git a/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm.gz b/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm.gz index 9db4d21..1ae8080 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm.gz and b/_framework/Microsoft.AspNetCore.Components.WebAssembly.wasm.gz differ diff --git a/_framework/Microsoft.AspNetCore.Components.wasm b/_framework/Microsoft.AspNetCore.Components.wasm index 302e9ce..e5d5308 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.wasm and b/_framework/Microsoft.AspNetCore.Components.wasm differ diff --git a/_framework/Microsoft.AspNetCore.Components.wasm.br b/_framework/Microsoft.AspNetCore.Components.wasm.br index 9059cb1..3227f8c 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.wasm.br and b/_framework/Microsoft.AspNetCore.Components.wasm.br differ diff --git a/_framework/Microsoft.AspNetCore.Components.wasm.gz b/_framework/Microsoft.AspNetCore.Components.wasm.gz index 4e6dc0e..0759677 100644 Binary files a/_framework/Microsoft.AspNetCore.Components.wasm.gz and b/_framework/Microsoft.AspNetCore.Components.wasm.gz differ diff --git a/_framework/Microsoft.Extensions.Options.wasm b/_framework/Microsoft.Extensions.Options.wasm index eea3b83..f71ed35 100644 Binary files a/_framework/Microsoft.Extensions.Options.wasm and b/_framework/Microsoft.Extensions.Options.wasm differ diff --git a/_framework/Microsoft.Extensions.Options.wasm.br b/_framework/Microsoft.Extensions.Options.wasm.br index a557c86..70dd6f9 100644 Binary files a/_framework/Microsoft.Extensions.Options.wasm.br and b/_framework/Microsoft.Extensions.Options.wasm.br differ diff --git a/_framework/Microsoft.Extensions.Options.wasm.gz b/_framework/Microsoft.Extensions.Options.wasm.gz index 0965e5f..c0e9a43 100644 Binary files a/_framework/Microsoft.Extensions.Options.wasm.gz and b/_framework/Microsoft.Extensions.Options.wasm.gz differ diff --git a/_framework/Microsoft.JSInterop.WebAssembly.wasm b/_framework/Microsoft.JSInterop.WebAssembly.wasm index 52f48fd..54fc314 100644 Binary files a/_framework/Microsoft.JSInterop.WebAssembly.wasm and b/_framework/Microsoft.JSInterop.WebAssembly.wasm differ diff --git a/_framework/Microsoft.JSInterop.WebAssembly.wasm.br b/_framework/Microsoft.JSInterop.WebAssembly.wasm.br index 147ce81..b1b2572 100644 Binary files a/_framework/Microsoft.JSInterop.WebAssembly.wasm.br and b/_framework/Microsoft.JSInterop.WebAssembly.wasm.br differ diff --git a/_framework/Microsoft.JSInterop.WebAssembly.wasm.gz b/_framework/Microsoft.JSInterop.WebAssembly.wasm.gz index 78d9a4e..0ce0240 100644 Binary files a/_framework/Microsoft.JSInterop.WebAssembly.wasm.gz and b/_framework/Microsoft.JSInterop.WebAssembly.wasm.gz differ diff --git a/_framework/Microsoft.JSInterop.wasm b/_framework/Microsoft.JSInterop.wasm index 17db020..bedb10e 100644 Binary files a/_framework/Microsoft.JSInterop.wasm and b/_framework/Microsoft.JSInterop.wasm differ diff --git a/_framework/Microsoft.JSInterop.wasm.br b/_framework/Microsoft.JSInterop.wasm.br index 2a95b49..87e23f9 100644 Binary files a/_framework/Microsoft.JSInterop.wasm.br and b/_framework/Microsoft.JSInterop.wasm.br differ diff --git a/_framework/Microsoft.JSInterop.wasm.gz b/_framework/Microsoft.JSInterop.wasm.gz index 465bd59..613c93c 100644 Binary files a/_framework/Microsoft.JSInterop.wasm.gz and b/_framework/Microsoft.JSInterop.wasm.gz differ diff --git a/_framework/Radzen.Blazor.wasm b/_framework/Radzen.Blazor.wasm index 11ef531..e4c60a4 100644 Binary files a/_framework/Radzen.Blazor.wasm and b/_framework/Radzen.Blazor.wasm differ diff --git a/_framework/Radzen.Blazor.wasm.br b/_framework/Radzen.Blazor.wasm.br index 9b36574..c43f6ab 100644 Binary files a/_framework/Radzen.Blazor.wasm.br and b/_framework/Radzen.Blazor.wasm.br differ diff --git a/_framework/Radzen.Blazor.wasm.gz b/_framework/Radzen.Blazor.wasm.gz index 5a3cb38..932c1af 100644 Binary files a/_framework/Radzen.Blazor.wasm.gz and b/_framework/Radzen.Blazor.wasm.gz differ diff --git a/_framework/System.Collections.Specialized.wasm b/_framework/System.Collections.Specialized.wasm index 95767c5..d6389f8 100644 Binary files a/_framework/System.Collections.Specialized.wasm and b/_framework/System.Collections.Specialized.wasm differ diff --git a/_framework/System.Collections.Specialized.wasm.br b/_framework/System.Collections.Specialized.wasm.br index 7282dd5..b42e9ea 100644 Binary files a/_framework/System.Collections.Specialized.wasm.br and b/_framework/System.Collections.Specialized.wasm.br differ diff --git a/_framework/System.Collections.Specialized.wasm.gz b/_framework/System.Collections.Specialized.wasm.gz index 715d613..c0e4785 100644 Binary files a/_framework/System.Collections.Specialized.wasm.gz and b/_framework/System.Collections.Specialized.wasm.gz differ diff --git a/_framework/System.Collections.wasm b/_framework/System.Collections.wasm index 5446778..38bb1f0 100644 Binary files a/_framework/System.Collections.wasm and b/_framework/System.Collections.wasm differ diff --git a/_framework/System.Collections.wasm.br b/_framework/System.Collections.wasm.br index 667c1b3..7b34a53 100644 Binary files a/_framework/System.Collections.wasm.br and b/_framework/System.Collections.wasm.br differ diff --git a/_framework/System.Collections.wasm.gz b/_framework/System.Collections.wasm.gz index 637adc5..11cad59 100644 Binary files a/_framework/System.Collections.wasm.gz and b/_framework/System.Collections.wasm.gz differ diff --git a/_framework/System.ComponentModel.TypeConverter.wasm b/_framework/System.ComponentModel.TypeConverter.wasm index 6f29911..d337bb1 100644 Binary files a/_framework/System.ComponentModel.TypeConverter.wasm and b/_framework/System.ComponentModel.TypeConverter.wasm differ diff --git a/_framework/System.ComponentModel.TypeConverter.wasm.br b/_framework/System.ComponentModel.TypeConverter.wasm.br index 4e74344..1d65268 100644 Binary files a/_framework/System.ComponentModel.TypeConverter.wasm.br and b/_framework/System.ComponentModel.TypeConverter.wasm.br differ diff --git a/_framework/System.ComponentModel.TypeConverter.wasm.gz b/_framework/System.ComponentModel.TypeConverter.wasm.gz index 9fe9185..bfe99e7 100644 Binary files a/_framework/System.ComponentModel.TypeConverter.wasm.gz and b/_framework/System.ComponentModel.TypeConverter.wasm.gz differ diff --git a/_framework/System.Drawing.Primitives.wasm b/_framework/System.Drawing.Primitives.wasm new file mode 100644 index 0000000..4a61376 Binary files /dev/null and b/_framework/System.Drawing.Primitives.wasm differ diff --git a/_framework/System.Drawing.Primitives.wasm.br b/_framework/System.Drawing.Primitives.wasm.br new file mode 100644 index 0000000..5662ae1 Binary files /dev/null and b/_framework/System.Drawing.Primitives.wasm.br differ diff --git a/_framework/System.Drawing.Primitives.wasm.gz b/_framework/System.Drawing.Primitives.wasm.gz new file mode 100644 index 0000000..6dfd1cf Binary files /dev/null and b/_framework/System.Drawing.Primitives.wasm.gz differ diff --git a/_framework/System.Drawing.wasm b/_framework/System.Drawing.wasm new file mode 100644 index 0000000..cfe9e46 Binary files /dev/null and b/_framework/System.Drawing.wasm differ diff --git a/_framework/System.Drawing.wasm.br b/_framework/System.Drawing.wasm.br new file mode 100644 index 0000000..491841f Binary files /dev/null and b/_framework/System.Drawing.wasm.br differ diff --git a/_framework/System.Drawing.wasm.gz b/_framework/System.Drawing.wasm.gz new file mode 100644 index 0000000..dcc1333 Binary files /dev/null and b/_framework/System.Drawing.wasm.gz differ diff --git a/_framework/System.Private.CoreLib.wasm b/_framework/System.Private.CoreLib.wasm index 3a43ed5..879fb90 100644 Binary files a/_framework/System.Private.CoreLib.wasm and b/_framework/System.Private.CoreLib.wasm differ diff --git a/_framework/System.Private.CoreLib.wasm.br b/_framework/System.Private.CoreLib.wasm.br index 6650a75..900457e 100644 Binary files a/_framework/System.Private.CoreLib.wasm.br and b/_framework/System.Private.CoreLib.wasm.br differ diff --git a/_framework/System.Private.CoreLib.wasm.gz b/_framework/System.Private.CoreLib.wasm.gz index 88bfeea..0558d99 100644 Binary files a/_framework/System.Private.CoreLib.wasm.gz and b/_framework/System.Private.CoreLib.wasm.gz differ diff --git a/_framework/System.Private.Uri.wasm b/_framework/System.Private.Uri.wasm index 5882e2c..f2b9890 100644 Binary files a/_framework/System.Private.Uri.wasm and b/_framework/System.Private.Uri.wasm differ diff --git a/_framework/System.Private.Uri.wasm.br b/_framework/System.Private.Uri.wasm.br index 94a73cb..0c1a65c 100644 Binary files a/_framework/System.Private.Uri.wasm.br and b/_framework/System.Private.Uri.wasm.br differ diff --git a/_framework/System.Private.Uri.wasm.gz b/_framework/System.Private.Uri.wasm.gz index 03697b0..b3a2f16 100644 Binary files a/_framework/System.Private.Uri.wasm.gz and b/_framework/System.Private.Uri.wasm.gz differ diff --git a/_framework/System.Runtime.InteropServices.JavaScript.wasm b/_framework/System.Runtime.InteropServices.JavaScript.wasm index a743c03..c843a61 100644 Binary files a/_framework/System.Runtime.InteropServices.JavaScript.wasm and b/_framework/System.Runtime.InteropServices.JavaScript.wasm differ diff --git a/_framework/System.Runtime.InteropServices.JavaScript.wasm.br b/_framework/System.Runtime.InteropServices.JavaScript.wasm.br index 7d22eb0..78422ab 100644 Binary files a/_framework/System.Runtime.InteropServices.JavaScript.wasm.br and b/_framework/System.Runtime.InteropServices.JavaScript.wasm.br differ diff --git a/_framework/System.Runtime.InteropServices.JavaScript.wasm.gz b/_framework/System.Runtime.InteropServices.JavaScript.wasm.gz index 37f7897..5e96e17 100644 Binary files a/_framework/System.Runtime.InteropServices.JavaScript.wasm.gz and b/_framework/System.Runtime.InteropServices.JavaScript.wasm.gz differ diff --git a/_framework/System.Runtime.wasm b/_framework/System.Runtime.wasm index 72d025f..4debb30 100644 Binary files a/_framework/System.Runtime.wasm and b/_framework/System.Runtime.wasm differ diff --git a/_framework/System.Runtime.wasm.br b/_framework/System.Runtime.wasm.br index 62add74..7cf72e4 100644 Binary files a/_framework/System.Runtime.wasm.br and b/_framework/System.Runtime.wasm.br differ diff --git a/_framework/System.Runtime.wasm.gz b/_framework/System.Runtime.wasm.gz index a8b2527..0e3e89f 100644 Binary files a/_framework/System.Runtime.wasm.gz and b/_framework/System.Runtime.wasm.gz differ diff --git a/_framework/System.Text.RegularExpressions.wasm b/_framework/System.Text.RegularExpressions.wasm index c4923fe..1d73acd 100644 Binary files a/_framework/System.Text.RegularExpressions.wasm and b/_framework/System.Text.RegularExpressions.wasm differ diff --git a/_framework/System.Text.RegularExpressions.wasm.br b/_framework/System.Text.RegularExpressions.wasm.br index 2c6740e..f3b37b6 100644 Binary files a/_framework/System.Text.RegularExpressions.wasm.br and b/_framework/System.Text.RegularExpressions.wasm.br differ diff --git a/_framework/System.Text.RegularExpressions.wasm.gz b/_framework/System.Text.RegularExpressions.wasm.gz index ca30bf6..1b25ffb 100644 Binary files a/_framework/System.Text.RegularExpressions.wasm.gz and b/_framework/System.Text.RegularExpressions.wasm.gz differ diff --git a/_framework/blazor.boot.json b/_framework/blazor.boot.json index 572151e..9ae878c 100644 --- a/_framework/blazor.boot.json +++ b/_framework/blazor.boot.json @@ -1,7 +1,7 @@ { "mainAssemblyName": "FormBuilder.DesignerApp", "resources": { - "hash": "sha256-BVSn0NqIh0/cFac3DTGVsq6p/jknuv/OuH41t8rxmlc=", + "hash": "sha256-cJByt+xW7pRwaoeG9viUqIl2j4PL1JbwVNcrNgtilNg=", "jsModuleNative": { "dotnet.native.8.0.7.sy51k63m6a.js": "sha256-EVGOQfWsQdDL8HWoHlQF8hq2wndDY0772tR/cA+SlAM=" }, @@ -9,7 +9,7 @@ "dotnet.runtime.8.0.7.3dp1i72u0p.js": "sha256-soZyw6XWXOLKhA26AOyzSpCP5cAsw1wvhdPHSYNTMfQ=" }, "wasmNative": { - "dotnet.native.wasm": "sha256-Xut/u0DcqOS9hYYWP7VoWpDVTewgRcxQVCp2RFu0ESg=" + "dotnet.native.wasm": "sha256-W/ajzv8kNUTK15kgSsNbTXbJ9Etbo0giAk4kyZCsNIE=" }, "icu": { "icudt_CJK.dat": "sha256-SZLtQnRc0JkwqHab0VUVP7T3uBPSeYzxzDnpxPpUnHk=", @@ -17,14 +17,13 @@ "icudt_no_CJK.dat": "sha256-L7sV7NEYP37/Qr2FPCePo5cJqRgTXRwGHuwF5Q+0Nfs=" }, "assembly": { - "FormBuilder.DesignerApp.wasm": "sha256-XcqipxiyBoRti1MJPExE6D69UviRWRaMKZtRDNRVuxw=", - "FormBuilder.Shared.wasm": "sha256-ITgbWnvcCiPBF6Q+ZSwF+arrUs+dkpsLQ6CtavO7vPE=", - "FormBuilder.wasm": "sha256-utd+5pP9R0lIu61sdxLLkQCMe/4pUnof/GnfRPRyYjs=", - "Humanizer.wasm": "sha256-4NbSboZzzP9nikRtXapUZNzOyITt7ht9TNqCIQHr5OE=", - "Microsoft.AspNetCore.Components.Forms.wasm": "sha256-8+GP8sUuFhXNMn9m0iWawXbNnFcCPm3t8AErALlVl7M=", - "Microsoft.AspNetCore.Components.wasm": "sha256-AP1v2E3r90cGmKmjXj45NQ3l8d9579ApuGoPBd8fXz8=", - "Microsoft.AspNetCore.Components.Web.wasm": "sha256-NJQoNFe6NhD+T+YtxhCq8pvre/a48WE17wR0fPw/9fU=", - "Microsoft.AspNetCore.Components.WebAssembly.wasm": "sha256-Uc9NwhVfUtWnMymavfMls50KG4ywqsN8KOQo45SAkbQ=", + "FormBuilder.DesignerApp.wasm": "sha256-GEIbcRXPwgoirddCfnKP+GT2dS4nUA79RFXJPYsJQbQ=", + "FormBuilder.Shared.wasm": "sha256-pfchtXUTtW9nNpZ8J4USybuCDGCP6OmQwkmhkV47J4U=", + "FormBuilder.wasm": "sha256-SqV0O6DiN//NqRrWK6MIlo04IL3iZUuYk47E/m7hRzA=", + "Microsoft.AspNetCore.Components.Forms.wasm": "sha256-qWoFk2Lc6EKw249MDGtqW2JZZ+2P+yzi3J2ow/fqovA=", + "Microsoft.AspNetCore.Components.wasm": "sha256-qNPdqJ8XMllZRpQx3hsZZ3b6yYfG+WPsaMG3joTRjPM=", + "Microsoft.AspNetCore.Components.Web.wasm": "sha256-YH1P982+NOv+JZuvcBiQ1HfogrRrmpO2CeG0D5RdbPI=", + "Microsoft.AspNetCore.Components.WebAssembly.wasm": "sha256-4QVnSDwIOneKpEhpXVob6e8ijqN9I+Ack8lGe+w9c48=", "Microsoft.CSharp.wasm": "sha256-SJKZg4K65Zygmgl+K78RgGAa2S/XpyifaX8cwlPuYlg=", "Microsoft.Extensions.Caching.Abstractions.wasm": "sha256-nfKPudOEg8LWtaC7ZuFJE0lQW0Tdyq0z8vc4fUjxS64=", "Microsoft.Extensions.Caching.Memory.wasm": "sha256-Tn9RoMzJIadjMNj9cfFr4sKuyqQSleEFpxB7IH73/vE=", @@ -35,24 +34,26 @@ "Microsoft.Extensions.DependencyInjection.wasm": "sha256-gg8xZqJsBBrrNEyUGzYqhL3sqkuZ4AHAvdTdL9nZ0S0=", "Microsoft.Extensions.Logging.Abstractions.wasm": "sha256-5pzdsqw0lFBNawlI82Q4tB7Je03H7hmnMbTKzMWXkf8=", "Microsoft.Extensions.Logging.wasm": "sha256-8BH+kQfjYuZWxprOICXJ4+tU0OdJOYDKN7G0S3zYYHI=", - "Microsoft.Extensions.Options.wasm": "sha256-ezKJDNjeghS/qMdQmUpBPdH7bCDLrqkNqS6RsLxlpOY=", + "Microsoft.Extensions.Options.wasm": "sha256-ypENcDL9nBOxxOHWbsTdHQMQOaU2tzbMY9po3Con954=", "Microsoft.Extensions.Primitives.wasm": "sha256-Ms2HR5Gpug/0uRAzdk4SUNT76Ml3CjFv9Jo+dUIMGac=", - "Microsoft.JSInterop.wasm": "sha256-rhVb5qk1nDx7ZdMp05YDc2OtVEu8TgUQMUGnEIb75V8=", - "Microsoft.JSInterop.WebAssembly.wasm": "sha256-ZyIqQss3I64BQC2gc7JEDrkYq14vXKEXuw5vBJ5oFYM=", - "Radzen.Blazor.wasm": "sha256-yFIh/4gqkP2/Udc8823ugp+PN+CxmuyA4SFEWzUSoeU=", + "Microsoft.JSInterop.wasm": "sha256-2Ud/DkOmibHrv34qW31bJDYOyq1rNQ9/9Jr0/lFqTXs=", + "Microsoft.JSInterop.WebAssembly.wasm": "sha256-rhDkGvVEd5YGb2JsVk1xQC7gCF8TXNfpDfo9dGFhuyI=", + "Radzen.Blazor.wasm": "sha256-anHsMvf2AbVvhM3pINdHz/XL/iERKREtH7SnTowmyX8=", "System.Collections.Concurrent.wasm": "sha256-kPAGKe+vy6ulriIpD5DLxb17flzw5Yk5Wn+6xDGncZk=", "System.Collections.Immutable.wasm": "sha256-owkJriMp9hVF3IfeW0vGSuCIGqVTKg8ZyiI5f9uqhvk=", "System.Collections.NonGeneric.wasm": "sha256-LohKVl/+AV5sJj2Lp+SQ7sfTGOe1HEAFkuzO88Eb/IU=", - "System.Collections.Specialized.wasm": "sha256-Eqez552/w6bY+sF2jDU6jPbp8u1D2qU17c+F6QyOfxE=", - "System.Collections.wasm": "sha256-g1qv2iviq1NswpJ2H8uR41vQQrR8KiIkJb9Yca3VjLA=", + "System.Collections.Specialized.wasm": "sha256-CsXUg5y4n8vn1icurjVrTITHC0aAJr02OexUmWjZd9Y=", + "System.Collections.wasm": "sha256-mOuJSwcokqUPVOTp1l52e8IZlBuD7g/W9QYXDl6CT20=", "System.ComponentModel.Annotations.wasm": "sha256-LQsLTxqGX8GkZAgo2OXk716tYmyaRdg73hrjjWCdGsk=", "System.ComponentModel.Primitives.wasm": "sha256-tndZvYUIjWG4IMF44xr3456KP06RT1lw/JM89NGZLgM=", - "System.ComponentModel.TypeConverter.wasm": "sha256-kGE+LOLtG2TpobJRTsoZI636Lsi2vJxSn+NEs88+BP4=", + "System.ComponentModel.TypeConverter.wasm": "sha256-3D/JjvO6upaQthcuii9QH2RuCI1Aw7FgZSyXLy5U8IQ=", "System.ComponentModel.wasm": "sha256-nuUzMLQhd7bkS35ceFD8NLkfVFuvHOZ10Ia//q+ma0o=", "System.Console.wasm": "sha256-V/wnOs6g9mpc/Khuf1XDBg/RihzKtRtlqkkK3sP/Jf4=", "System.Core.wasm": "sha256-n9IPTntU6Em4pBhYXvXMT2ZPfI03ysebpgd5yavF7ug=", "System.Diagnostics.DiagnosticSource.wasm": "sha256-+SnqV7ecVpLF8upP7Aoz2rmY6zYGUc6cMFiYEGtMZsk=", "System.Diagnostics.TraceSource.wasm": "sha256-MVe28QHPBHxLcbhHppZwTbZdqa3nFIgHnBhTJY43t8o=", + "System.Drawing.Primitives.wasm": "sha256-sZxatmOX3sgwGFIOjtKkKGZ8/ObXnJGzfCAmErzxL7E=", + "System.Drawing.wasm": "sha256-n0mlcTn2XIWZk2RbXH8tRpTe4W3Zn9SVMN8w41chdRg=", "System.IO.MemoryMappedFiles.wasm": "sha256-u+GQ8XllJRIAmSQZwWRL6A8P8Nx2DNihu3Zth2BtSOs=", "System.Linq.Dynamic.Core.wasm": "sha256-zY4O55eQ9gC1F0jl4MFsfpX6oCP3eabUwmK1PIrgx3Q=", "System.Linq.Expressions.wasm": "sha256-oQSWThi056eg3TxJpaWwkdszrSoOZMIIt7ThghwYTPo=", @@ -63,20 +64,20 @@ "System.Net.Http.wasm": "sha256-sLZMLq1o1bbVnxEoWVmZbxlTX/U2B2r3MDgaQuEYYIc=", "System.Net.Primitives.wasm": "sha256-iOTAFZLKrnyiNiQaL+F6SjfJnToWwEK5tG5GKW933c4=", "System.ObjectModel.wasm": "sha256-5IQMCcIk7HNe95aqC55ecz8HKRvci7bO1LJgtaooFgM=", - "System.Private.CoreLib.wasm": "sha256-HnAHEsfLN6IAFUZqCXNFMTQhwgwLq23u7UGm2pL7sFA=", - "System.Private.Uri.wasm": "sha256-7XyWnOxaoWzArJlQRtTYBQlOyvlac9FT1D14dcxXTBc=", + "System.Private.CoreLib.wasm": "sha256-+d8R900xbrYxoeaY/aNZwfy5FmhT4dkYgaTWIZ0TYX8=", + "System.Private.Uri.wasm": "sha256-DAZt6N4zIlOzcCkJdE6p18qDiy+ipPHf3MXhizrrmCI=", "System.Private.Xml.Linq.wasm": "sha256-haJzFkPYyJ/4/cnxBK6zRNOjx/AkwIZx4PnFbmNqnI0=", "System.Private.Xml.wasm": "sha256-OKj9p7EG5i4ol396F3Jzl6s+D9jEUNGdXSuKU613U9I=", "System.Reflection.Emit.ILGeneration.wasm": "sha256-tD4gFd2nyx4tF96tKiJqqvxUjoAWp2/K7gU2+9nnSX0=", "System.Reflection.Emit.wasm": "sha256-alHWUgVST6zjBZABPltqxT51tYgB02YNBhh9AvXEmBM=", "System.Reflection.Metadata.wasm": "sha256-raazAeYZrXvGlhvmwQgOeYYXI3ogEYdcAQ9dFUxllaE=", "System.Reflection.Primitives.wasm": "sha256-92R0ahvEt1vUntB5lsgLaYuK5H/QpdPW3x/3Pdtd1fM=", - "System.Runtime.InteropServices.JavaScript.wasm": "sha256-8m7q6IfvTajy/UhTPL/oSXLq+HE7txOHKCFLDDkFoyA=", + "System.Runtime.InteropServices.JavaScript.wasm": "sha256-qmBW7jCnq14B1x9/vzHSZ319j/y9sJ3xOX5SIryjLHc=", "System.Runtime.InteropServices.wasm": "sha256-htPSs6+AC6mbWdtI6mCGodhnf9FT9jdYxYBhGx22g7Q=", - "System.Runtime.wasm": "sha256-AMC+f3H1BdP5VfYZkeraVnlOQkmQX0FqYZ4XKBXse8g=", + "System.Runtime.wasm": "sha256-jIRmNaUXoZ75SHCfXotNDiZETzkNn1yVa/P0/5LWDGo=", "System.Text.Encodings.Web.wasm": "sha256-UZ5gwpuSGaHrrl8PbB706y6zQa6N4mSrBEcwLfiWME0=", "System.Text.Json.wasm": "sha256-k4NB+aeADhzfvV6ml5I76NWL+TD6sag8VHaUig1e5AY=", - "System.Text.RegularExpressions.wasm": "sha256-y7J22OSuZG+mCu+36HkP0KtQAuO7GCxDlOmQTsCki7Y=", + "System.Text.RegularExpressions.wasm": "sha256-k9IZKh60nXBaOvLo9eqJWP9lTM7AkjnNpP/XWGB6jAE=", "System.Threading.wasm": "sha256-7mHYr6yhwZADWplcTmIpo52fCLe9gXRutJcD6sd1+zk=", "System.wasm": "sha256-eod/LnITNsO959j6LrwLxPaXkS+PqOWHAzGnsOB9iHI=", "System.Web.HttpUtility.wasm": "sha256-Q313rIn98cldpr9FLzoPo6yOhm4vM+mqT6ZhNh2mX7s=", diff --git a/_framework/blazor.boot.json.br b/_framework/blazor.boot.json.br index 61a36bc..f433cc6 100644 Binary files a/_framework/blazor.boot.json.br and b/_framework/blazor.boot.json.br differ diff --git a/_framework/blazor.boot.json.gz b/_framework/blazor.boot.json.gz index 820012e..ceb1268 100644 Binary files a/_framework/blazor.boot.json.gz and b/_framework/blazor.boot.json.gz differ diff --git a/_framework/dotnet.native.wasm b/_framework/dotnet.native.wasm index 53493e3..c45d014 100755 Binary files a/_framework/dotnet.native.wasm and b/_framework/dotnet.native.wasm differ diff --git a/_framework/dotnet.native.wasm.br b/_framework/dotnet.native.wasm.br index dd6f1b0..1bb3cac 100644 Binary files a/_framework/dotnet.native.wasm.br and b/_framework/dotnet.native.wasm.br differ diff --git a/_framework/dotnet.native.wasm.gz b/_framework/dotnet.native.wasm.gz index bb5590f..872f014 100644 Binary files a/_framework/dotnet.native.wasm.gz and b/_framework/dotnet.native.wasm.gz differ diff --git a/index.html b/index.html index ff12c16..a448922 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,6 @@ Blazor Form Builder - - - @@ -29,8 +26,6 @@ 🗙 - -